bimery/i2cs-webgame
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

初始化

Browse Source 
翻到了就再上传一下吧，于我而言意义不大了但或许有人需要呢
This commit is contained in:
蓝冰记忆
2025-11-09 13:49:27 +08:00
commit 97c8f6e38b
12 changed files with 711 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
BreadEat/index.html Normal file
View 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
View 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
View 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
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

BIN
BreadEat/sources/img/eater.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB