初始化
翻到了就再上传一下吧，于我而言意义不大了但或许有人需要呢
This commit is contained in:
40
BreadFight/index.html
Normal file
40
BreadFight/index.html
Normal file
@@ -0,0 +1,40 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>面包大战</title>
|
||||
<link href="https://cdn.jsdelivr.net/gh/FortAwesome/Font-Awesome/web-fonts-with-css/css/fontawesome-all.min.css" rel="stylesheet">
|
||||
<link href="./sources/game.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<section id="intro" style="opacity: 1;">
|
||||
<!-- Intro -->
|
||||
<div>
|
||||
<h1 style="font-size: 2em;">玩法</h1>
|
||||
<p>左上角三个键分别是开始、暂停和重置</p>
|
||||
<p>右下角角是开始倒计时模式(1分钟)</p>
|
||||
<p>右上角是记分板, 每完成一个顾客积分+1, 漏掉一个顾客积分-10</p>
|
||||
<a onclick="closeIntro()">朕已知晓</a>
|
||||
</div>
|
||||
</section>
|
||||
<section id="Control">
|
||||
<!-- Controls -->
|
||||
<a onclick="gameStart()"><i class="fa fa-play"></i></a>
|
||||
<a onclick="gameStop()"><i class="fa fa-pause"></i></a>
|
||||
<a onclick="gameInitialize()"><i class="fa fa-undo"></i></a>
|
||||
</section>
|
||||
<section id="GameMode">
|
||||
<!-- GameMode -->
|
||||
<a onclick="gamemode(0)"><i class="fa fa-clock"></i></a>
|
||||
</section>
|
||||
<section id="CountDown" style="opacity: 0"></section>
|
||||
<section id="scoreBoard">0</section>
|
||||
<section id="status"></section>
|
||||
<section id="gameBoard">
|
||||
<!-- Game -->
|
||||
</section>
|
||||
<footer>
|
||||
<script async src="./sources/game.js"></script>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
113
BreadFight/sources/game.css
Normal file
113
BreadFight/sources/game.css
Normal file
@@ -0,0 +1,113 @@
|
||||
a {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#intro {
|
||||
position: fixed;
|
||||
transition: .5s all ease-in-out;
|
||||
text-align: center;
|
||||
width: 600px;
|
||||
height: 300px;
|
||||
padding: 20px;
|
||||
margin: auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
border: 2px #000 solid;
|
||||
border-radius: 20px;
|
||||
|
||||
}
|
||||
|
||||
#intro p {
|
||||
margin: 30px;
|
||||
}
|
||||
|
||||
#intro a {
|
||||
transition: .2s all ease-in-out;
|
||||
padding: 5px 10px;
|
||||
border: 2px #000 solid;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
#intro a:hover {
|
||||
color: #fff;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
#Control {
|
||||
transition: .2s all ease-in-out;
|
||||
position: fixed;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
#Control a, #GameMode a {
|
||||
transition: .2s all ease-in-out;
|
||||
font-size: 2em;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
margin: 10px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 3px #000 solid;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
#Control a:hover, #GameMode a:hover {
|
||||
color: deepskyblue;
|
||||
border: 3px deepskyblue solid;
|
||||
}
|
||||
|
||||
#CountDown {
|
||||
text-align: center;
|
||||
position: fixed;
|
||||
font-size: 5em;
|
||||
font-family: 'Comic Sans MS';
|
||||
margin: auto;
|
||||
width: 600px;
|
||||
top: 10px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
#GameMode {
|
||||
position: fixed;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
#status {
|
||||
transition: .2s all ease-in-out;
|
||||
opacity: 0;
|
||||
position: fixed;
|
||||
text-align: center;
|
||||
font-size: 5em;
|
||||
font-family: 'Comic Sans MS';
|
||||
width: 600px;
|
||||
height: 100px;
|
||||
margin: auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
#scoreBoard {
|
||||
position: fixed;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
font-family: 'Comic Sans MS';
|
||||
font-size: 3em;
|
||||
}
|
||||
|
||||
#gameBoard .eaters, #gameBoard .breads {
|
||||
position: fixed;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#gameBoard .eaters.getBread {
|
||||
transition: .3s all ease-in-out;
|
||||
opacity: 1;
|
||||
}
|
||||
219
BreadFight/sources/game.js
Normal file
219
BreadFight/sources/game.js
Normal file
@@ -0,0 +1,219 @@
|
||||
// Patameters for the game
|
||||
var interv_gen_eaters = 500, // How long it takes to generate the next eater, ms
|
||||
interv_gen_breads = 200, // How long it takes to generate the next eater, ms
|
||||
interv_refresh = 20, // Refresh Interval, ms
|
||||
speed_eaters = 5, // px, The move speed of eaters per REFRESH
|
||||
speed_breads = 10; // px, The move speed of breads per REFRESH
|
||||
|
||||
// To set parameters manually
|
||||
function set(a, b, c, d, e) {
|
||||
interv_gen_eaters = a;
|
||||
interv_gen_breads = b;
|
||||
interv_refresh = c;
|
||||
speed_eaters = d;
|
||||
speed_breads = e;
|
||||
return ({
|
||||
Interval_Generate_eaters : interv_gen_eaters,
|
||||
Interval_Generate_breads : interv_gen_breads,
|
||||
Interval_Refresh : interv_refresh,
|
||||
Speed_Of_eaters : speed_eaters,
|
||||
Speed_Of_breads : speed_breads
|
||||
});
|
||||
}
|
||||
|
||||
function closeIntro() {
|
||||
document.getElementById('status').style.opacity = 1;
|
||||
document.getElementById('status').innerText = "Ready...";
|
||||
document.getElementById('intro').style.opacity = 0;
|
||||
}
|
||||
|
||||
var timeRemain, stopCode_countDown;
|
||||
function gamemode(mode) {
|
||||
if (mode === 0) {
|
||||
timeRemain = 60;
|
||||
gameInitialize()
|
||||
gameStart();
|
||||
document.getElementById('CountDown').style.opacity = .5;
|
||||
document.getElementById('CountDown').innerText = timeRemain;
|
||||
document.getElementById('Control').style.display = "none";
|
||||
document.getElementById('GameMode').style.display = "none";
|
||||
// setTimeout(function(){
|
||||
// gameStop();
|
||||
// }, 60000);
|
||||
stopCode_countDown = setInterval(function(){
|
||||
if (timeRemain === 0) {
|
||||
document.getElementById('CountDown').innerText = "";
|
||||
document.getElementById('Control').style.display = "block";
|
||||
document.getElementById('GameMode').style.display = "block";
|
||||
window.clearInterval(stopCode_countDown);
|
||||
gameStop();
|
||||
document.getElementById('status').innerText = "Timed Out !!";
|
||||
} else {
|
||||
document.getElementById('CountDown').innerText = timeRemain;
|
||||
}
|
||||
timeRemain--;
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
|
||||
// Necessary varibles
|
||||
var stopCode_geneaters, stopCode_genbreads, stopCode_Refresh,
|
||||
// See collash boxes as boxes
|
||||
round_eater = 54, // px
|
||||
round_bread = 21.6, // px
|
||||
mouse_X, mouse_Y;
|
||||
|
||||
// Necessary functions
|
||||
document.onmousemove = function(e) {
|
||||
e = e || window.event;
|
||||
mouse_X = e.clientX;
|
||||
mouse_Y = e.clientY;
|
||||
};
|
||||
|
||||
// Necessary general varibles
|
||||
var obj_gameBoard = document.getElementById('gameBoard'),
|
||||
eater_unmatched = new Array(),
|
||||
eater_matched = new Array(),
|
||||
bread_unmatched = new Array,
|
||||
bread_matched = new Array();
|
||||
|
||||
// Core functions
|
||||
function func_gen_eaters() {
|
||||
var this_eater = document.createElement("div");
|
||||
this_eater.setAttribute("class", "eaters");
|
||||
this_eater.style.left = Math.random() * (document.body.clientWidth - round_eater) + 'px';
|
||||
this_eater.style.top = "0";
|
||||
this_eater.innerHTML = '<img src="./sources/img/eater.png" />';
|
||||
obj_gameBoard.appendChild(this_eater);
|
||||
// eater_unmatched.push(this_eater);
|
||||
if (bread_unmatched.length > 0) {
|
||||
var notMatched = true;
|
||||
for (var i = 0; i < bread_unmatched.length; i++) {
|
||||
if (Math.abs(parseInt(bread_unmatched[i].style.left) - parseInt(this_eater.style.left) + (round_eater - round_bread) / 2) <= ((round_eater + round_bread) / 2)
|
||||
&& (parseInt(bread_unmatched[i].style.top) >= parseInt(this_eater.style.top))) {
|
||||
|
||||
// Move the matched bread and eater
|
||||
bread_matched.push(bread_unmatched[i]);
|
||||
bread_unmatched.splice(i, 1);
|
||||
eater_matched.push(this_eater);
|
||||
notMatched = false;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (notMatched) {
|
||||
eater_unmatched.push(this_eater);
|
||||
}
|
||||
} else {
|
||||
eater_unmatched.push(this_eater);
|
||||
}
|
||||
}
|
||||
|
||||
function func_gen_breads() {
|
||||
var this_bread = document.createElement("div");
|
||||
this_bread.setAttribute("class", "breads");
|
||||
this_bread.style.left = mouse_X + 'px';
|
||||
this_bread.style.top = mouse_Y - 60 + 'px';
|
||||
this_bread.innerHTML = '<img src="./sources/img/bread.png" />';
|
||||
obj_gameBoard.appendChild(this_bread);
|
||||
if (eater_unmatched.length > 0) {
|
||||
var notMatched = true;
|
||||
for(var i = 0; i < eater_unmatched.length; i++) {
|
||||
if (Math.abs(parseInt(eater_unmatched[i].style.left) - parseInt(this_bread.style.left) + (round_eater - round_bread) / 2) <= ((round_eater + round_bread) / 2)
|
||||
&& (parseInt(eater_unmatched[i].style.top) <= parseInt(this_bread.style.top))) {
|
||||
|
||||
// Move the matched eater and bread
|
||||
eater_matched.push(eater_unmatched[i]);
|
||||
eater_unmatched.splice(i, 1);
|
||||
bread_matched.push(this_bread);
|
||||
notMatched = false;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (notMatched) {
|
||||
bread_unmatched.push(this_bread);
|
||||
}
|
||||
} else {
|
||||
bread_unmatched.push(this_bread);
|
||||
}
|
||||
}
|
||||
|
||||
function func_refresh() {
|
||||
for (var i = 0; i < eater_unmatched.length; i++) {
|
||||
eater_unmatched[i].style.top = parseInt(eater_unmatched[i].style.top) + speed_eaters + "px";
|
||||
if (parseInt(eater_unmatched[i].style.top) >= window.outerHeight) {
|
||||
obj_gameBoard.removeChild(eater_unmatched[i]);
|
||||
eater_unmatched.splice(i, 1);
|
||||
document.getElementById('scoreBoard').innerText = parseInt(document.getElementById('scoreBoard').innerText) - 10;
|
||||
}
|
||||
}
|
||||
for (var i = 0; i < eater_matched.length; i++) {
|
||||
eater_matched[i].style.top = parseInt(eater_matched[i].style.top) + speed_eaters + "px";
|
||||
if ((parseInt(bread_matched[i].style.top) - parseInt(eater_matched[i].style.top)) <= ((round_eater + round_bread) / 2)) {
|
||||
|
||||
// obj_gameBoard.removeChild(eater_matched[i]);
|
||||
eater_matched[i].setAttribute("class", "eaters getBread");
|
||||
anim_eating(eater_matched[i]);
|
||||
obj_gameBoard.removeChild(bread_matched[i]);
|
||||
eater_matched.splice(i, 1);
|
||||
bread_matched.splice(i, 1);
|
||||
// Score ++
|
||||
document.getElementById('scoreBoard').innerText = parseInt(document.getElementById('scoreBoard').innerText) + 1;
|
||||
|
||||
}
|
||||
}
|
||||
for (var i = 0; i < bread_unmatched.length; i++) {
|
||||
bread_unmatched[i].style.top = parseInt(bread_unmatched[i].style.top) - speed_breads + "px";
|
||||
if (parseInt(bread_unmatched[i].style.top) <= 0) {
|
||||
obj_gameBoard.removeChild(bread_unmatched[i]);
|
||||
bread_unmatched.splice(i, 1);
|
||||
}
|
||||
}
|
||||
for (var i = 0; i < bread_matched.length; i++) {
|
||||
bread_matched[i].style.top = parseInt(bread_matched[i].style.top) - speed_breads + "px";
|
||||
}
|
||||
}
|
||||
|
||||
function anim_eating(eater) {
|
||||
eater.innerHTML = '<img src="./sources/img/getbread.png" />';
|
||||
eater.style.opacity = 0;
|
||||
setTimeout(function(){
|
||||
obj_gameBoard.removeChild(eater);
|
||||
}, 500);
|
||||
}
|
||||
|
||||
function gameStart() {
|
||||
document.getElementById('CountDown').style.opacity = 0;
|
||||
document.getElementById('CountDown').innerText = "";
|
||||
gameStop();
|
||||
document.getElementById('status').innerText = "Game Start !!!";
|
||||
setTimeout(function(){
|
||||
document.getElementById('status').style.opacity = 0;
|
||||
}, 500);
|
||||
document.getElementById('Control').style.opacity = .3;
|
||||
stopCode_geneaters = setInterval(function(){func_gen_eaters();}, interv_gen_eaters);
|
||||
stopCode_genbreads = setInterval(function(){func_gen_breads();}, interv_gen_breads);
|
||||
stopCode_Refresh = setInterval(function(){func_refresh();}, interv_refresh);
|
||||
}
|
||||
|
||||
function gameStop() {
|
||||
closeIntro();
|
||||
document.getElementById('status').style.opacity = 1;
|
||||
document.getElementById('status').innerText = "PAUSE";
|
||||
document.getElementById('Control').style.opacity = 1;
|
||||
window.clearInterval(stopCode_geneaters);
|
||||
window.clearInterval(stopCode_genbreads);
|
||||
window.clearInterval(stopCode_Refresh);
|
||||
}
|
||||
|
||||
function gameInitialize() {
|
||||
gameStop();
|
||||
document.getElementById('status').style.opacity = 1;
|
||||
document.getElementById('status').innerText = "Ready...";
|
||||
document.getElementById('Control').style.opacity = 1;
|
||||
obj_gameBoard.innerHTML = "";
|
||||
eater_unmatched = new Array();
|
||||
eater_matched = new Array();
|
||||
bread_unmatched = new Array();
|
||||
bread_matched = new Array();
|
||||
document.getElementById('scoreBoard').innerText = "0";
|
||||
}
|
||||
BIN
BreadFight/sources/img/bread.png
Normal file
BIN
BreadFight/sources/img/bread.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
BIN
BreadFight/sources/img/eater.png
Normal file
BIN
BreadFight/sources/img/eater.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.3 KiB |
BIN
BreadFight/sources/img/getbread.png
Normal file
BIN
BreadFight/sources/img/getbread.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.9 KiB |
Reference in New Issue
Block a user