skythedragon/papercats
1
0
Fork 0
forked from ilikecats/papercats
Code Pull Requests Activity

improve style

Browse Source
This commit is contained in:
StevenJoeZhang 2019-02-22 16:09:27 +08:00
parent 33f6dbd00e
commit 728343ea0d
12 changed files with 48 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
README.md
View File

@ -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
View File

@ -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);
});

1
config.json
View File

@ -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"
} }

2
public/bundle.js
View File

File diff suppressed because one or more lines are too long

20
public/index.html
View File

@ -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>

28
public/static/styles.css
View File

@ -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;
}

2
public/static/wasted.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 18 KiB

4
src/core/player.js
View File

@ -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;
} }

11
src/game-client.js
View File

@ -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() {

9
src/game-server.js
View File

@ -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.");

3
src/mode/mode-god.js
View File

@ -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];

3
src/mode/mode-user.js
View File

@ -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];