forked from ilikecats/papercats
improve style
This commit is contained in:
parent
33f6dbd00e
commit
728343ea0d
@ -37,12 +37,15 @@ browserify client.js | uglifyjs > public/bundle.js
|
|||||||
|
|
||||||
```bash
|
```bash
|
||||||
node paper-io-bot.js ws://localhost:8081
|
node paper-io-bot.js ws://localhost:8081
|
||||||
|
#or
|
||||||
|
node bot.js ws://localhost:8081
|
||||||
```
|
```
|
||||||
|
|
||||||
## Roadmap & TODO List
|
## Roadmap & TODO List
|
||||||
|
|
||||||
- [x] 统一配置文件
|
- [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.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) {
|
client.connectGame("//" + window.location.hostname + ":" + config.ws_port, $("#name").val(), function(success, msg) {
|
||||||
if (success) {
|
if (success) {
|
||||||
$("#begin").fadeOut(1000);
|
|
||||||
$("#main-ui").fadeIn(1000);
|
$("#main-ui").fadeIn(1000);
|
||||||
|
$("#begin, #wasted").fadeOut(1000);
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
$("#error").text(msg);
|
$("#error").text(msg);
|
||||||
@ -38,10 +38,10 @@ $(function() {
|
|||||||
$("#name").keypress(function(evt) {
|
$("#name").keypress(function(evt) {
|
||||||
if (evt.which === 13) run();
|
if (evt.which === 13) run();
|
||||||
});
|
});
|
||||||
$("#start").removeAttr("disabled").click(function(evt) {
|
$(".start").removeAttr("disabled").click(function(evt) {
|
||||||
run();
|
run();
|
||||||
});
|
});
|
||||||
$("#spectate").removeAttr("disabled").click(function(evt) {
|
$(".spectate").removeAttr("disabled").click(function(evt) {
|
||||||
run(true);
|
run(true);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
@ -87,3 +87,8 @@ $(document).on("touchstart", function (e1) {
|
|||||||
client.changeHeading(newHeading);
|
client.changeHeading(newHeading);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
$("#menu").on("click", function() {
|
||||||
|
$("#main-ui, #wasted").fadeOut(1000);
|
||||||
|
$("#begin").fadeIn(1000);
|
||||||
|
});
|
||||||
|
@ -9,6 +9,7 @@
|
|||||||
"SPEED": 5,
|
"SPEED": 5,
|
||||||
"BORDER_WIDTH": 20,
|
"BORDER_WIDTH": 20,
|
||||||
"MAX_PLAYERS": 30,
|
"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",
|
"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"
|
"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"/>
|
<link rel="stylesheet" href="static/styles.css"/>
|
||||||
<script src="static/jquery.min.js"></script>
|
<script src="static/jquery.min.js"></script>
|
||||||
<script src="static/prefixfree.min.js"></script>
|
<script src="static/prefixfree.min.js"></script>
|
||||||
<script src="bundle.js"></script>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<canvas id="main-ui"></canvas>
|
<canvas id="main-ui"></canvas>
|
||||||
@ -23,17 +22,15 @@
|
|||||||
</svg>
|
</svg>
|
||||||
</a>
|
</a>
|
||||||
<div class="center">
|
<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"/>
|
<img class="scale" src="static/logo.png"/>
|
||||||
<h1>Enter your name</h1>
|
<h1>Enter your name</h1>
|
||||||
<input id="name" autocomplete="off" placeholder="An awesome name!"/>
|
<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/>
|
||||||
<br/>
|
<br/>
|
||||||
<input id="mode" type="button" value="Mode" disabled="disabled"/>
|
<input id="mode" class="orange" type="button" value="Mode" disabled="disabled"/>
|
||||||
<input id="skins" type="button" value="Skins" disabled="disabled"/>
|
<input id="skins" class="yellow" type="button" value="Skins" disabled="disabled"/>
|
||||||
<input id="spectate" type="button" value="Spectate" disabled="disabled"/>
|
<input class="spectate green" type="button" value="Spectate" disabled="disabled"/>
|
||||||
<div>
|
<div>
|
||||||
<small id="error">Please wait... Maybe something's wrong!</small>
|
<small id="error">Please wait... Maybe something's wrong!</small>
|
||||||
<noscript>
|
<noscript>
|
||||||
@ -42,5 +39,14 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
@ -41,13 +41,13 @@ canvas {
|
|||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
}
|
}
|
||||||
#begin {
|
#begin, #wasted {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
background: rgba(0,0,0,.8);
|
background: rgba(0, 0, 0, .8);
|
||||||
}
|
}
|
||||||
#github svg {
|
#github svg {
|
||||||
transition: all 1s;
|
transition: all 1s;
|
||||||
@ -98,37 +98,37 @@ input {
|
|||||||
background: #ededd1;
|
background: #ededd1;
|
||||||
border-bottom: 6px solid #a1a18d;
|
border-bottom: 6px solid #a1a18d;
|
||||||
}
|
}
|
||||||
#start, #spectate {
|
.yellow {
|
||||||
background: #eaec4b;
|
background: #eaec4b;
|
||||||
border-bottom: 6px solid #a1a130;
|
border-bottom: 6px solid #a1a130;
|
||||||
color: #888a34;
|
color: #888a34;
|
||||||
}
|
}
|
||||||
#start:hover, #spectate:hover {
|
.yellow:hover {
|
||||||
background: #fafc5b;
|
background: #fafc5b;
|
||||||
}
|
}
|
||||||
#start:active, #spectate:active {
|
.yellow:active {
|
||||||
border-bottom: 2px solid #a1a130;
|
border-bottom: 2px solid #a1a130;
|
||||||
}
|
}
|
||||||
#mode {
|
.orange {
|
||||||
background: #FF972F;
|
background: #FF972F;
|
||||||
border-bottom: 6px solid #AE4E0D;
|
border-bottom: 6px solid #AE4E0D;
|
||||||
color: #422100;
|
color: #422100;
|
||||||
}
|
}
|
||||||
#mode:hover {
|
.orange:hover {
|
||||||
background: #FFB76F;
|
background: #FFB76F;
|
||||||
}
|
}
|
||||||
#mode:active {
|
.orange:active {
|
||||||
border-bottom: 2px solid #AE4E0D;
|
border-bottom: 2px solid #AE4E0D;
|
||||||
}
|
}
|
||||||
#skins {
|
.green {
|
||||||
background: #7fed4c;
|
background: #7fed4c;
|
||||||
border-bottom: 6px solid #56a130;
|
border-bottom: 6px solid #56a130;
|
||||||
color: #4f8a34;
|
color: #4f8a34;
|
||||||
}
|
}
|
||||||
#skins:hover {
|
.green:hover {
|
||||||
background: #8efc5b;
|
background: #8efc5b;
|
||||||
}
|
}
|
||||||
#skins:active {
|
.green:active {
|
||||||
border-bottom: 2px solid #56a130;
|
border-bottom: 2px solid #56a130;
|
||||||
}
|
}
|
||||||
input[type=button] {
|
input[type=button] {
|
||||||
@ -144,3 +144,9 @@ input[type=button]:disabled {
|
|||||||
small {
|
small {
|
||||||
color: red;
|
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 Grid = require("./grid");
|
||||||
var consts = require("../../config.json").consts;
|
var consts = require("../../config.json").consts;
|
||||||
|
|
||||||
var NEW_PLAYER_LAG = 60; //Wait for a second at least
|
|
||||||
|
|
||||||
function defineGetter(getter) {
|
function defineGetter(getter) {
|
||||||
return {
|
return {
|
||||||
get: getter,
|
get: getter,
|
||||||
@ -390,7 +388,7 @@ Player.prototype.render = function(ctx, fade) {
|
|||||||
};
|
};
|
||||||
|
|
||||||
function move(data) {
|
function move(data) {
|
||||||
if (data.waitLag < NEW_PLAYER_LAG) {
|
if (data.waitLag < consts.NEW_PLAYER_LAG) { //Wait for a second at least
|
||||||
data.waitLag++;
|
data.waitLag++;
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
@ -197,17 +197,6 @@ function processFrame(data) {
|
|||||||
var p = players[i];
|
var p = players[i];
|
||||||
locs[p.num] = [p.posX, p.posY, p.waitLag];
|
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;
|
dirty = true;
|
||||||
mimiRequestAnimationFrame(paintLoop);
|
mimiRequestAnimationFrame(paintLoop);
|
||||||
timeout = setTimeout(function() {
|
timeout = setTimeout(function() {
|
||||||
|
@ -52,15 +52,6 @@ function Game(id) {
|
|||||||
"grid": gridSerialData(grid, players)
|
"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) {
|
client.on("frame", function(data, errorHan) {
|
||||||
if (typeof data === "function") {
|
if (typeof data === "function") {
|
||||||
errorHan(false, "No data supplied.");
|
errorHan(false, "No data supplied.");
|
||||||
|
@ -304,8 +304,7 @@ module.exports = exports = {
|
|||||||
barProportionRolling[player.num] = new Rolling(0, ANIMATE_FRAMES);
|
barProportionRolling[player.num] = new Rolling(0, ANIMATE_FRAMES);
|
||||||
},
|
},
|
||||||
disconnect: function() {
|
disconnect: function() {
|
||||||
$("#begin").fadeIn(1000);
|
$("#wasted").fadeIn(1000);
|
||||||
$("#main-ui").fadeOut(1000);
|
|
||||||
},
|
},
|
||||||
removePlayer: function(player) {
|
removePlayer: function(player) {
|
||||||
delete playerPortion[player.num];
|
delete playerPortion[player.num];
|
||||||
|
@ -341,8 +341,7 @@ module.exports = exports = {
|
|||||||
barProportionRolling[player.num] = new Rolling(0, ANIMATE_FRAMES);
|
barProportionRolling[player.num] = new Rolling(0, ANIMATE_FRAMES);
|
||||||
},
|
},
|
||||||
disconnect: function() {
|
disconnect: function() {
|
||||||
$("#begin").fadeIn(1000);
|
$("#wasted").fadeIn(1000);
|
||||||
$("#main-ui").fadeOut(1000);
|
|
||||||
},
|
},
|
||||||
removePlayer: function(player) {
|
removePlayer: function(player) {
|
||||||
delete playerPortion[player.num];
|
delete playerPortion[player.num];
|
||||||
|
Loading…
Reference in New Issue
Block a user