forked from ilikecats/papercats
improve style
This commit is contained in:
StevenJoeZhang
parent
33f6dbd00e
commit
728343ea0d
@ -37,12 +37,15 @@ browserify client.js | uglifyjs > public/bundle.js
|
||||
|
||||
```bash
|
||||
node paper-io-bot.js ws://localhost:8081
|
||||
#or
|
||||
node bot.js ws://localhost:8081
|
||||
```
|
||||
|
||||
## Roadmap & TODO List
|
||||
|
||||
- [x] 统一配置文件
|
||||
- [ ] 更多游戏模式
|
||||
- [x] 玩家观战模式
|
||||
- [ ] 更多游戏玩法
|
||||
- [ ] 多个游戏房间
|
||||
- [ ] 加快渲染速度
|
||||
- [ ] 优化胜负判定
|
||||
|
||||
11
client.js
11
client.js
@ -8,8 +8,8 @@ function run(flag) {
|
||||
client.renderer = flag ? require("./src/mode/mode-god") : require("./src/mode/mode-user");
|
||||
client.connectGame("//" + window.location.hostname + ":" + config.ws_port, $("#name").val(), function(success, msg) {
|
||||
if (success) {
|
||||
$("#begin").fadeOut(1000);
|
||||
$("#main-ui").fadeIn(1000);
|
||||
$("#begin, #wasted").fadeOut(1000);
|
||||
}
|
||||
else {
|
||||
$("#error").text(msg);
|
||||
@ -38,10 +38,10 @@ $(function() {
|
||||
$("#name").keypress(function(evt) {
|
||||
if (evt.which === 13) run();
|
||||
});
|
||||
$("#start").removeAttr("disabled").click(function(evt) {
|
||||
$(".start").removeAttr("disabled").click(function(evt) {
|
||||
run();
|
||||
});
|
||||
$("#spectate").removeAttr("disabled").click(function(evt) {
|
||||
$(".spectate").removeAttr("disabled").click(function(evt) {
|
||||
run(true);
|
||||
});
|
||||
});
|
||||
@ -87,3 +87,8 @@ $(document).on("touchstart", function (e1) {
|
||||
client.changeHeading(newHeading);
|
||||
});
|
||||
});
|
||||
|
||||
$("#menu").on("click", function() {
|
||||
$("#main-ui, #wasted").fadeOut(1000);
|
||||
$("#begin").fadeIn(1000);
|
||||
});
|
||||
|
||||
@ -9,6 +9,7 @@
|
||||
"SPEED": 5,
|
||||
"BORDER_WIDTH": 20,
|
||||
"MAX_PLAYERS": 30,
|
||||
"NEW_PLAYER_LAG": 60,
|
||||
"PREFIXES": "Angry Baby Crazy Diligent Excited Fat Greedy Hungry Interesting Japanese Kind Little Magic Naïve Old Powerful Quiet Rich Superman THU Undefined Valuable Wifeless Xiangbuchulai Young Zombie",
|
||||
"NAMES": "Alice Bob Carol Dave Eve Francis Grace Hans Isabella Jason Kate Louis Margaret Nathan Olivia Paul Queen Richard Susan Thomas Uma Vivian Winnie Xander Yasmine Zach"
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -10,7 +10,6 @@
|
||||
<link rel="stylesheet" href="static/styles.css"/>
|
||||
<script src="static/jquery.min.js"></script>
|
||||
<script src="static/prefixfree.min.js"></script>
|
||||
<script src="bundle.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="main-ui"></canvas>
|
||||
@ -23,17 +22,15 @@
|
||||
</svg>
|
||||
</a>
|
||||
<div class="center">
|
||||
<!--<h1>Paper.io!</h1>
|
||||
<small>Todo: replace ^^^ with a picture. Work in progress.</small><br/>-->
|
||||
<img class="scale" src="static/logo.png"/>
|
||||
<h1>Enter your name</h1>
|
||||
<input id="name" autocomplete="off" placeholder="An awesome name!"/>
|
||||
<input id="start" type="button" value="Play!" disabled="disabled"/>
|
||||
<input class="start yellow" type="button" value="Play!" disabled="disabled"/>
|
||||
<br/>
|
||||
<br/>
|
||||
<input id="mode" type="button" value="Mode" disabled="disabled"/>
|
||||
<input id="skins" type="button" value="Skins" disabled="disabled"/>
|
||||
<input id="spectate" type="button" value="Spectate" disabled="disabled"/>
|
||||
<input id="mode" class="orange" type="button" value="Mode" disabled="disabled"/>
|
||||
<input id="skins" class="yellow" type="button" value="Skins" disabled="disabled"/>
|
||||
<input class="spectate green" type="button" value="Spectate" disabled="disabled"/>
|
||||
<div>
|
||||
<small id="error">Please wait... Maybe something's wrong!</small>
|
||||
<noscript>
|
||||
@ -42,5 +39,14 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="wasted">
|
||||
<div class="center">
|
||||
<img class="scale" src="static/wasted.svg"/>
|
||||
<input class="start orange" type="button" value="Play Again" disabled="disabled"/>
|
||||
<input id="menu" class="yellow" type="button" value="Main Menu"/>
|
||||
<input class="spectate green" type="button" value="Spectate" disabled="disabled"/>
|
||||
</div>
|
||||
</div>
|
||||
<script src="bundle.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -41,13 +41,13 @@ canvas {
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
#begin {
|
||||
#begin, #wasted {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: rgba(0,0,0,.8);
|
||||
background: rgba(0, 0, 0, .8);
|
||||
}
|
||||
#github svg {
|
||||
transition: all 1s;
|
||||
@ -98,37 +98,37 @@ input {
|
||||
background: #ededd1;
|
||||
border-bottom: 6px solid #a1a18d;
|
||||
}
|
||||
#start, #spectate {
|
||||
.yellow {
|
||||
background: #eaec4b;
|
||||
border-bottom: 6px solid #a1a130;
|
||||
color: #888a34;
|
||||
}
|
||||
#start:hover, #spectate:hover {
|
||||
.yellow:hover {
|
||||
background: #fafc5b;
|
||||
}
|
||||
#start:active, #spectate:active {
|
||||
.yellow:active {
|
||||
border-bottom: 2px solid #a1a130;
|
||||
}
|
||||
#mode {
|
||||
.orange {
|
||||
background: #FF972F;
|
||||
border-bottom: 6px solid #AE4E0D;
|
||||
color: #422100;
|
||||
}
|
||||
#mode:hover {
|
||||
.orange:hover {
|
||||
background: #FFB76F;
|
||||
}
|
||||
#mode:active {
|
||||
.orange:active {
|
||||
border-bottom: 2px solid #AE4E0D;
|
||||
}
|
||||
#skins {
|
||||
.green {
|
||||
background: #7fed4c;
|
||||
border-bottom: 6px solid #56a130;
|
||||
color: #4f8a34;
|
||||
}
|
||||
#skins:hover {
|
||||
.green:hover {
|
||||
background: #8efc5b;
|
||||
}
|
||||
#skins:active {
|
||||
.green:active {
|
||||
border-bottom: 2px solid #56a130;
|
||||
}
|
||||
input[type=button] {
|
||||
@ -144,3 +144,9 @@ input[type=button]:disabled {
|
||||
small {
|
||||
color: red;
|
||||
}
|
||||
#wasted {
|
||||
display: none;
|
||||
}
|
||||
#wasted img {
|
||||
width: 650px;
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 18 KiB |
@ -3,8 +3,6 @@ var Color = require("./color");
|
||||
var Grid = require("./grid");
|
||||
var consts = require("../../config.json").consts;
|
||||
|
||||
var NEW_PLAYER_LAG = 60; //Wait for a second at least
|
||||
|
||||
function defineGetter(getter) {
|
||||
return {
|
||||
get: getter,
|
||||
@ -390,7 +388,7 @@ Player.prototype.render = function(ctx, fade) {
|
||||
};
|
||||
|
||||
function move(data) {
|
||||
if (data.waitLag < NEW_PLAYER_LAG) {
|
||||
if (data.waitLag < consts.NEW_PLAYER_LAG) { //Wait for a second at least
|
||||
data.waitLag++;
|
||||
return;
|
||||
}
|
||||
|
||||
@ -197,17 +197,6 @@ function processFrame(data) {
|
||||
var p = players[i];
|
||||
locs[p.num] = [p.posX, p.posY, p.waitLag];
|
||||
}
|
||||
/*
|
||||
socket.emit("verify", {
|
||||
frame: frame,
|
||||
locs: locs
|
||||
}, function(frame, success, adviceFix, msg) {
|
||||
if (!success && requesting === -1) {
|
||||
console.error(frame + ": " + msg);
|
||||
if (adviceFix) socket.emit("requestFrame");
|
||||
}
|
||||
}.bind(this, frame));
|
||||
*/
|
||||
dirty = true;
|
||||
mimiRequestAnimationFrame(paintLoop);
|
||||
timeout = setTimeout(function() {
|
||||
|
||||
@ -52,15 +52,6 @@ function Game(id) {
|
||||
"grid": gridSerialData(grid, players)
|
||||
});
|
||||
});
|
||||
//Verifies that this client has executed this frame properly
|
||||
client.on("verify", function(data, resp) {
|
||||
if (typeof resp !== "function") return;
|
||||
if (!data.frame) resp(false, false, "No frame supplied");
|
||||
else if (!checkInt(data.frame, 0, frame + 1)) resp(false, false, "Must be a valid frame number");
|
||||
else {
|
||||
verifyPlayerLocations(data.frame, data.locs, resp);
|
||||
}
|
||||
});
|
||||
client.on("frame", function(data, errorHan) {
|
||||
if (typeof data === "function") {
|
||||
errorHan(false, "No data supplied.");
|
||||
|
||||
@ -304,8 +304,7 @@ module.exports = exports = {
|
||||
barProportionRolling[player.num] = new Rolling(0, ANIMATE_FRAMES);
|
||||
},
|
||||
disconnect: function() {
|
||||
$("#begin").fadeIn(1000);
|
||||
$("#main-ui").fadeOut(1000);
|
||||
$("#wasted").fadeIn(1000);
|
||||
},
|
||||
removePlayer: function(player) {
|
||||
delete playerPortion[player.num];
|
||||
|
||||
@ -341,8 +341,7 @@ module.exports = exports = {
|
||||
barProportionRolling[player.num] = new Rolling(0, ANIMATE_FRAMES);
|
||||
},
|
||||
disconnect: function() {
|
||||
$("#begin").fadeIn(1000);
|
||||
$("#main-ui").fadeOut(1000);
|
||||
$("#wasted").fadeIn(1000);
|
||||
},
|
||||
removePlayer: function(player) {
|
||||
delete playerPortion[player.num];
|
||||
|
||||
Loading…
Reference in New Issue
Block a user