commit 97c8f6e38bc2d368a77fe07c9bfdec9c24a9eb1b Author: 蓝冰记忆 Date: Sun Nov 9 13:49:27 2025 +0800 初始化翻到了就再上传一下吧，于我而言意义不大了但或许有人需要呢 diff --git a/BreadEat/index.html b/BreadEat/index.html new file mode 100644 index 0000000..b5c01a5 --- /dev/null +++ b/BreadEat/index.html @@ -0,0 +1,41 @@ + + + + + 吃面包 + + + + +

+ +

吃面包

左上角三个键分别是开始、暂停和重置

右下角是开始倒计时模式(1分钟)

右上角是记分板, 每吃到一个面包积分+1

+ 知道啦 +

+ + + + +

+ + +

+ +

+ + + diff --git a/BreadEat/sources/game.css b/BreadEat/sources/game.css new file mode 100644 index 0000000..fa0f984 --- /dev/null +++ b/BreadEat/sources/game.css @@ -0,0 +1,112 @@ +a { + cursor: pointer; +} + +/*��޸��˱߿��ɫ�Ͳ��һ��˼�ϱ��ͼ*/ +#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; +} diff --git a/BreadEat/sources/game.js b/BreadEat/sources/game.js new file mode 100644 index 0000000..6e5bbc1 --- /dev/null +++ b/BreadEat/sources/game.js @@ -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 = '

'; + 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"; +} \ No newline at end of file diff --git a/BreadEat/sources/img/bread.png b/BreadEat/sources/img/bread.png new file mode 100644 index 0000000..ee51f7f Binary files /dev/null and b/BreadEat/sources/img/bread.png differ diff --git a/BreadEat/sources/img/eater.png b/BreadEat/sources/img/eater.png new file mode 100644 index 0000000..94dbddd Binary files /dev/null and b/BreadEat/sources/img/eater.png differ diff --git a/BreadFight/index.html b/BreadFight/index.html new file mode 100644 index 0000000..bbdc21d --- /dev/null +++ b/BreadFight/index.html @@ -0,0 +1,40 @@ + + + + + 面包大战 + + + + +

+ +

玩法

左上角三个键分别是开始、暂停和重置

右下角角是开始倒计时模式(1分钟)

右上角是记分板, 每完成一个顾客积分+1, 漏掉一个顾客积分-10

+ 朕已知晓 +

+ + + + +

+ + +

+ +

+ + + diff --git a/BreadFight/sources/game.css b/BreadFight/sources/game.css new file mode 100644 index 0000000..3f07ce0 --- /dev/null +++ b/BreadFight/sources/game.css @@ -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; +} diff --git a/BreadFight/sources/game.js b/BreadFight/sources/game.js new file mode 100644 index 0000000..49ff6a4 --- /dev/null +++ b/BreadFight/sources/game.js @@ -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 = '

'; + 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 = '

'; + 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 = '

'; + 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"; +} \ No newline at end of file diff --git a/BreadFight/sources/img/bread.png b/BreadFight/sources/img/bread.png new file mode 100644 index 0000000..85244cb Binary files /dev/null and b/BreadFight/sources/img/bread.png differ diff --git a/BreadFight/sources/img/eater.png b/BreadFight/sources/img/eater.png new file mode 100644 index 0000000..7443d82 Binary files /dev/null and b/BreadFight/sources/img/eater.png differ diff --git a/BreadFight/sources/img/getbread.png b/BreadFight/sources/img/getbread.png new file mode 100644 index 0000000..660af59 Binary files /dev/null and b/BreadFight/sources/img/getbread.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..10d042e --- /dev/null +++ b/index.html @@ -0,0 +1,51 @@ + + + + + 蓝冰-游戏中心 + + + + +

+ 吃热狗 + 面包大战 +

+ + \ No newline at end of file