初始化
翻到了就再上传一下吧，于我而言意义不大了但或许有人需要呢
This commit is contained in:
41
BreadEat/index.html
Normal file
41
BreadEat/index.html
Normal file
@@ -0,0 +1,41 @@
|
|||||||
|
<!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 style="font-family: times;">
|
||||||
|
<h1 style="font-size: 2em;">吃面包</h1>
|
||||||
|
<p>左上角三个键分别是开始、暂停和重置</p>
|
||||||
|
<p>右下角是开始倒计时模式(1分钟)</p>
|
||||||
|
<p>右上角是记分板, 每吃到一个面包积分+1</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 -->
|
||||||
|
<div id="eater" style="left: 0; bottom: 50px; z-index: 1;"><img src="./sources/img/eater.png" width="72" ;height="95" /></div>
|
||||||
|
</section>
|
||||||
|
<footer>
|
||||||
|
<script async src="./sources/game.js"></script>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
112
BreadEat/sources/game.css
Normal file
112
BreadEat/sources/game.css
Normal file
@@ -0,0 +1,112 @@
|
|||||||
|
a {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*<2A><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><DEB8>˱߿<CBB1><DFBF><EFBFBD>ɫ<EFBFBD>Ͳ<EFBFBD><CDB2><EFBFBD><EFBFBD><EFBFBD>һ<EFBFBD><D2BB><EFBFBD><EFBFBD>˼<EFBFBD>ϱ<EFBFBD><CFB1><EFBFBD>ͼ*/
|
||||||
|
#intro {
|
||||||
|
position: fixed;
|
||||||
|
transition: .5s all ease-in-out;
|
||||||
|
text-align: center;
|
||||||
|
width: 500px;
|
||||||
|
height: 300px;
|
||||||
|
padding: 20px;
|
||||||
|
margin: auto;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
border: 2px #000 solid;
|
||||||
|
border-radius: 20px;
|
||||||
|
/* background-image:url(./eating.gif); */
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#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;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
#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%;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
#Control a:hover, #GameMode a:hover {
|
||||||
|
color: deep#000;
|
||||||
|
border: 3px deep#000 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;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
#gameBoard #eater, #gameBoard .breads {
|
||||||
|
position: fixed;
|
||||||
|
}
|
||||||
135
BreadEat/sources/game.js
Normal file
135
BreadEat/sources/game.js
Normal file
@@ -0,0 +1,135 @@
|
|||||||
|
// Patameters for the game
|
||||||
|
var interv_gen_breads = 200, // How long it takes to generate the next eater, ms
|
||||||
|
interv_refresh = 20, // Refresh Interval, ms
|
||||||
|
speed_breads = 10; // px, The move speed of breads per REFRESH
|
||||||
|
|
||||||
|
// To set parameters manually
|
||||||
|
function set(b, c, e) {
|
||||||
|
interv_gen_breads = b;
|
||||||
|
interv_refresh = c;
|
||||||
|
speed_breads = e;
|
||||||
|
return ({
|
||||||
|
Interval_Generate_breads : interv_gen_breads,
|
||||||
|
Interval_Refresh : interv_refresh,
|
||||||
|
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_genbreads, stopCode_Refresh,
|
||||||
|
// Regard items as boxes
|
||||||
|
round_eater = 108, // px
|
||||||
|
width_bread = 21.6, // px
|
||||||
|
height_bread = 36, // px
|
||||||
|
eater = document.getElementById('eater');
|
||||||
|
|
||||||
|
// Necessary functions
|
||||||
|
document.onmousemove = function(e) {
|
||||||
|
e = e || window.event;
|
||||||
|
eater.style.left = e.clientX - round_eater / 2 + "px";
|
||||||
|
};
|
||||||
|
|
||||||
|
// Necessary general varibles
|
||||||
|
var obj_gameBoard = document.getElementById('gameBoard'),
|
||||||
|
bread = new Array();
|
||||||
|
|
||||||
|
// Core functions
|
||||||
|
function func_gen_breads() {
|
||||||
|
var this_bread = document.createElement("div");
|
||||||
|
this_bread.setAttribute("class", "breads");
|
||||||
|
this_bread.style.left = Math.random() * (document.body.clientWidth - round_eater) + 'px';
|
||||||
|
this_bread.style.top = "0";
|
||||||
|
this_bread.innerHTML = '<img src="./sources/img/bread.png" />';
|
||||||
|
obj_gameBoard.appendChild(this_bread);
|
||||||
|
bread.push(this_bread);
|
||||||
|
}
|
||||||
|
|
||||||
|
function func_refresh() {
|
||||||
|
for (var i = 0; i < bread.length; i++) {
|
||||||
|
bread[i].style.top = parseInt(bread[i].style.top) + speed_breads + "px";
|
||||||
|
if ((Math.abs(parseInt(bread[i].style.left) - parseInt(eater.style.left)) <= ((round_eater + width_bread) / 2))
|
||||||
|
// && (Math.abs(parseInt(bread[i].style.top) - window.outerHeight + parseInt(eater.style.bottom)) <= ((round_eater + width_bread) / 2))) {
|
||||||
|
&& parseInt(bread[i].style.top) + height_bread >= (window.outerHeight - 50 - parseInt(eater.style.bottom) - round_eater) // 50为误差补偿，不一定准确
|
||||||
|
&& parseInt(bread[i].style.top) < (window.outerHeight - parseInt(eater.style.bottom) - round_eater) ) {
|
||||||
|
obj_gameBoard.removeChild(bread[i]);
|
||||||
|
bread.splice(i, 1);
|
||||||
|
document.getElementById('scoreBoard').innerText = parseInt(document.getElementById('scoreBoard').innerText) + 1;
|
||||||
|
} else if (parseInt(bread[i].style.top) >= window.outerHeight) {
|
||||||
|
obj_gameBoard.removeChild(bread[i]);
|
||||||
|
bread.splice(i, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function gameStart() {
|
||||||
|
document.getElementById('CountDown').style.opacity = 0;
|
||||||
|
document.getElementById('CountDown').innerText = "";
|
||||||
|
gameStop();
|
||||||
|
// if (document.getElementById('intro').style.opacity != 0) {
|
||||||
|
// document.getElementById('intro').style.opacity = 0;
|
||||||
|
// }
|
||||||
|
document.getElementById('status').innerText = "Game Start !!!";
|
||||||
|
setTimeout(function(){
|
||||||
|
document.getElementById('status').style.opacity = 0;
|
||||||
|
}, 500);
|
||||||
|
document.getElementById('Control').style.opacity = .3;
|
||||||
|
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_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;
|
||||||
|
while (bread.length) {
|
||||||
|
obj_gameBoard.removeChild(bread[0]);
|
||||||
|
bread.splice(0, 1);
|
||||||
|
}
|
||||||
|
bread = new Array();
|
||||||
|
document.getElementById('scoreBoard').innerText = "0";
|
||||||
|
}
|
||||||
BIN
BreadEat/sources/img/bread.png
Normal file
BIN
BreadEat/sources/img/bread.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
BIN
BreadEat/sources/img/eater.png
Normal file
BIN
BreadEat/sources/img/eater.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
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 |
51
index.html
Normal file
51
index.html
Normal file
@@ -0,0 +1,51 @@
|
|||||||
|
<!DOCTYPE HTML>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>蓝冰-游戏中心</title>
|
||||||
|
<link rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/bimOvO/homepage@v1.3/sources/imgs/favicon.png">
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background: rgb(54, 54, 54);
|
||||||
|
/* display: table; */
|
||||||
|
/* height: 100%; */
|
||||||
|
}
|
||||||
|
body section {
|
||||||
|
/* display: table-cell; */
|
||||||
|
position: fixed;
|
||||||
|
text-align: center;
|
||||||
|
/* vertical-align: middle; */
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
margin: auto;
|
||||||
|
width: 200px;
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
body section a {
|
||||||
|
text-decoration: none;
|
||||||
|
display: block;
|
||||||
|
color: #fff;
|
||||||
|
padding: 10px 30px;
|
||||||
|
/* font-size: 1.5em; */
|
||||||
|
border: 1px #fff solid;
|
||||||
|
border-radius: 5px;
|
||||||
|
width: 100px;
|
||||||
|
/* height: 50px; */
|
||||||
|
margin: 20px;
|
||||||
|
transition: .3s all ease-in-out;
|
||||||
|
}
|
||||||
|
body section a:hover {
|
||||||
|
color: #000;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<section>
|
||||||
|
<a href="./BreadEat/">吃热狗</a>
|
||||||
|
<a href="./BreadFight/">面包大战</a>
|
||||||
|
</section>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user