去吗,去啊,以最卑微的梦
战吗,战啊,以最孤高的梦
先亮出CSDN官方图片

仿造打地鼠,制作而成!
js/css/html
中秋节是由古代祭月演变而来。农历八月十五正好是秋季的二分之一日,所以被称为“中秋”。而这一天又被定为古代帝王祭月的节日,慢慢就演变成为了中秋节。
1、吃月饼是中秋节的主要习俗,据现有记载,吃月饼最早源于唐代,到了宋代,月饼有金花、芙蓉等雅称,制作也更加精致。
2、祭月,在古代有秋暮夕月的习俗,夕月即祭拜月神。
3、赏月,每逢中秋夜都要举行迎寒和祭月,设香案摆上吃食和酒,围在一起赏月。
主页分为几个div,结构清晰,纯HTML
背景是body 的css的background背景图属性引入的一个大月亮,更加符合游戏气氛。

选择游戏模式:普通,无尽,点击按钮进入游戏
进入打月饼的等待倒计时 ,在一个方形区域地方全是月饼洞,您无法移动,
等倒计时开始,图像404跟月饼冒出来后,
鼠标键会出现一个大锤子
敲在404跟月饼头上,打404加-20000分,打月饼加10000分。

一:普通模式[太简单]:
打到月饼加分,打到404扣分,限时50秒,随着时间月饼生成速度加速,月饼速度加速。
二:无尽模式[有挑战]:
时间无限,为了增加挑战性,月饼如果没打到,会扣生命,打到月饼会加10000分。打到404会扣20000分,时间为0游戏结束,随着时间游戏游戏难度增加。
三:浏览器保留您的上次得分

界面如下:界面美好,选择图片符合氛围。

结构&美化
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="keywords" content="">
<meta name="description" content="">
<title>中秋节一起打月饼呀title>
<link rel="shortcut icon" href="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fku.90sjimg.com%2Felement_pic%2F17%2F09%2F11%2Ff0fd1ea53d6d2fd0926a110e9a3a2fe1.jpg&refer=http%3A%2F%2Fku.90sjimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664123451&t=2b140a076aea3fdcdd6cb95a201c6e1b" />
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
width: 100%;
overflow: hidden;
height: 100vh;
background: url(./img/bj5.png) no-repeat;
background-size: cover;
}
button {
cursor: pointer;
}
.container {
display: flex;
flex-wrap: wrap;
margin: 0 auto;
background-color: rgba(225,250,100);
width: 500px;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.container .burrows {
width: 135px;
padding-top: 20px;
margin: 0 20px 0 0;
height: 65px;
background: url(img/洞.png) no-repeat bottom / 100% 85%;
position: relative;
overflow: hidden;
}
.container .burrows:nth-child(3n+1) {
margin-left: 23px;
}
.container .burrows:nth-last-child(3) {
margin-bottom: 20px;
}
.susliks,
.immortal {
width: 70px;
height: 100px;
background-color: blue;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 60px;
background: url(img/月饼2.png) no-repeat center / 100% 100%;
}
#hammer {
width: 80px;
height: 100px;
position: absolute;
background: url(img/锤子.png) no-repeat center / 100% 100%;
transform: rotate(10deg);
pointer-events: none;
}
.wrapLife {
position: absolute;
top: 5px;
left: 10%;
font-size: 30px;
color: #464600;
display: none;
}
.wrapLife #life {
font-weight: 900;
color: #ff0000;
font-size: 35px;
}
#wrapMark {
display: flex;
position: absolute;
left: 10%;
top: 80px;
font-size: 30px;
display: none;
}
#wrapMark span {
color: #464600;
}
#wrapMark #mark {
font-weight: 900;
color: #ff5500;
}
#wrap {
height: 100vh;
}
#endBox {
width: 100%;
height: 100vh;
display: none;
}
#endBox p {
font-size: 60px;
font-weight: 900;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
input {
width: 30px;
height: 30px;
}
#initial {
width: 500px;
margin: 0 auto;
text-align: center;
background-color: #3DE6C8;
border-radius: 10px;
}
#initial p {
font-size: 40px;
color: #000;
}
#initial h2 {
color: #fff;
}
#go {
width: 100px;
height: 100px;
background-color: #67C23A;
color: #fff;
font-size: 20px;
border: none;
border-radius: 50px;
margin-bottom: 10px;
}
.goMrak {
position: absolute;
color: red;
font-size: 80px;
font-weight: 900;
}
.immortal {
background: url(img/404.png) no-repeat center / 100% 100%;
}
#timing {
text-align: center;
font-size: 40px;
font-weight: 900;
color: #FF5500;
display: none;
left: 50%;
transform: translateX(-50%);
top: 30px;
position: absolute;
}
#finishMarkWrap {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
#finishMarkWrap li {
display: flex;
border: 1px solid red;
border-top: 0;
padding: 3px;
}
#finishMarkWrap li:first-of-type {
border: 1px solid red;
}
.mod {
margin-right: 10px;
}
#explain {
width: 500px;
margin: 0 auto;
text-align: center;
border: 5px solid #eee;
background-color: #e4e5e6;
border-radius: 20px;
margin-top: 100px;
}
@keyframes susliksMove {
0% {
top: 65px;
}
50% {
top: 0;
}
100% {
top: 67px;
}
}
@keyframes lit {
0% {
transform: rotate(10deg);
}
50% {
transform: rotate(-60deg);
}
100% {
transform: rotate(10deg);
}
}
@keyframes goMrak {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(0.5);
opacity: 0.5;
}
100% {
transform: scale(0);
opacity: 0;
}
}
style>
<script>
window.onload = function () {
var gamenum = localStorage.getItem('gamenum');
console.log(gamenum);
var fen = document.getElementById("fen");
fen.innerText = `老铁:您上次端午打月饼的分数为:${gamenum}分!`
};
script>
head>
<body id="body">
<div id="wrap">
<center id="h1">
<img src="./img/404.png" width="30px" alt="">
<img src="./img/404.png" width="30px" alt="">
<img width="60px" src="img/中秋.png">
<img src="./img/月饼2.png" width="30px" alt="">
<img src="./img/月饼2.png" width="30px" alt="">
center>
<hr>
<div id="timing">div>
<div class="wrapLife" id="wrapLife"><img src="img/中秋.png" width="30px">无尽倒计时:<p id="life">10p>
div>
<div id="wrapMark"><span>您的当前分数:span>
<p id="mark">0p>
div>
<div class="initial" id="initial">
<h2>请任意选择一个游戏难度点击开始打月饼h2>
<img src="./img/404.png" width="30px" alt="">
<img src="./img/月饼2.png" width="30px" alt="">
<hr>
<p><input type="radio" name="difficulty" value="1" checked />☹普通模式☹p>
<p><input type="radio" name="difficulty" value="0" />☺无尽模式☺p>
<button id="go">开始打月饼button>
div>
<div class="container" id="container">div>
<ul id="finishMarkWrap">
ul>
<div id="explain">
<h5>小游戏-打月饼游戏说明:h5>
<img src="./img/404.png" width="30px" alt="">
<img src="./img/月饼2.png" width="30px" alt="">
<hr>
<br><i>一:普通模式[太简单]:i>
<br>打到月饼加分,打到404扣分,限时50秒,随<br>
着时间月饼生成速度加速,月饼速度加速。
<br><i>二:无尽模式[有挑战]:i><br>
时间无限,为了增加挑战性,月饼如果没打到,会<br>
扣生命,打到月饼会加10000分。打到404会扣20000分,<br>
时间为0游戏结束,随着时间游戏游戏难度增加。<br>
<i>三:浏览器保留您的上次得分i><br>
<hr>
<img src="./img/404.png" width="30px" alt="">
<img src="./img/月饼2.png" width="30px" alt="">
<p id="fen" style="text-align:center;color:rgb(221, 41, 41);font-size: 20px;">p>
<img src="./img/404.png" width="30px" alt="">
<img src="./img/月饼2.png" width="30px" alt="">
div>
div>
<div id="endBox">
<p>GAME OVER|游戏结束!p>
div>
body>
<script src="js/index.js">script>
html>
逻辑:
class person { //构造
constructor(tag) {
this.tag = tag;
};
}
let Main = new person({ //实例化
"go": document.getElementById("go"), //存放标签
"difficulty": document.getElementsByName("difficulty"),
"container": document.getElementById("container"),
"burrows": document.getElementsByClassName("burrows"),
"body": document.getElementsByTagName("body")[0],
"susliks": document.getElementsByClassName("susliks"),
"initial": document.getElementById("initial"),
"wrapLife": document.getElementById("wrapLife"),
"life": document.getElementById("life"),
"h1": document.getElementById("h1"),
"wrapMark": document.getElementById("wrapMark"),
"mark": document.getElementById("mark"),
"endBox": document.getElementById("endBox"),
"wrap": document.getElementById("wrap"),
"timing": document.getElementById("timing"),
"finishMarkWrap": document.getElementById("finishMarkWrap"),
"timingT": "time",
"susliksTime": 0,
"markNum": 0,
"MarkNum": 0,
"InfiniteNum": 0,
"mod": "默认",
});
Object.assign(person.prototype, {
createHole(size) { //地洞
Main.tag.container.innerHTML = "";
for (; size--;) {
let divObj = document.createElement("div");
divObj.className = "burrows";
Main.tag.container.appendChild(divObj);
divObj.onclick = function () {
this.firstChild != null ? Main.susliksRemove(this.firstChild) : false;
}
}
},
hammerMove() { //锤子
let hammerObj = document.createElement("div");
hammerObj.id = "hammer";
document.body.appendChild(hammerObj);
document.getElementsByTagName("html")[0].style.cursor = "none";
return Main.tag.body.onmousemove = function () {
let X = event.clientX,
Y = event.clientY;
hammerObj.style.top = `${Y - (hammerObj.clientWidth) / 5}px`;
hammerObj.style.left = `${X - (hammerObj.clientHeight / 3)}px`;
}
},
susliksHole(HoleTime) { //创建地鼠
let arrJudge = [0, 1, 2],
susliksT;
return susliksT = setInterval(() => {
let len = Main.tag.burrows.length,
ran = Math.floor(Math.random() * len),
divObj,
immortal;
if (Main.tag.timing.innerText <= 0 || Main.tag.life.innerText <= 0) {
clearInterval(susliksT)
} else {
if (Main.tag.burrows[ran].firstChild == null) {
if (arrJudge[Math.floor(Math.random() * 3)]) {
divObj = document.createElement("div")
divObj.className = "susliks";
Main.tag.burrows[ran].appendChild(divObj);
} else {
immortal = document.createElement("div")
immortal.className = "immortal";
Main.tag.burrows[ran].appendChild(immortal);
}
}
}
}, HoleTime)
},
susliksMove(mode) { //地鼠动
let susliksMoveT;
return susliksMoveT = setInterval(() => {
let burrows = Main.tag.burrows,
len = burrows.length;
for (; len--;) {
if (burrows[len].firstChild !== null) {
burrows[len].firstChild.style.animation = `susliksMove ${Main.tag.susliksTime}s`;
if (burrows[len].firstChild.offsetTop > 65) {
burrows[len].firstChild.className == "susliks" ? Main.tag.life.innerText-- : false;
burrows[len].firstChild.remove();
if (mode == "无尽") {
Main.end(susliksMoveT);
}
}
}
}
}, 5)
},
susliksRemove(This) { //删除地鼠
if (This.className == "susliks") {
Main.tag.MarkNum += Main.tag.markNum;
This.style.backgroundImage = "url(img/粽b.png)";
Main.tag.life.innerText++
Main.litMark("+" + Main.tag.markNum);
} else {
This.style.backgroundImage = "url(img/龙b.png)";
Main.tag.MarkNum -= Main.tag.markNum * 2;
Main.tag.life.innerText--;
Main.litMark("-" + Main.tag.markNum * 2);
};
setTimeout(() => {
This.remove()
}, 120);
Main.tag.mark.innerHTML = Main.tag.MarkNum;
},
go() { //开始
this.tag.initial.style.display = "none";
this.tag.wrapLife.style.display = "flex";
this.tag.h1.style.display = "none";
this.tag.wrapMark.style.display = "flex";
this.tag.timing.style.display = "block";
Main.tag.markNum = 10000;
Main.tag.timing.innerText = 50;
Main.tag.life.innerText = 10;
Main.tag.finishMarkWrap.style.display = "none"
document.getElementById("explain").style.display = "none"
},
litMark(num) { //锤子打击出现分数
let goMrak = document.createElement("p"),
X = event.clientX,
Y = event.clientY;
goMrak.className = "goMrak";
goMrak.innerHTML = `${num}`;
goMrak.style.top = `${Y + 10}px`;
goMrak.style.left = `${X + 10}px`;
goMrak.style.animation = "goMrak 0.5s";
document.body.appendChild(goMrak);
parseInt(num) > 0 ? goMrak.style.color = "red" : goMrak.style.color = "#000";
setTimeout(() => {
goMrak.remove();
}, 500);
},
lit() { // 锤子打击动画
let count = 0;
return document.body.onclick = function () {
count++
if (document.getElementById("hammer")) {
let hammer = document.getElementById("hammer");
if (count != 1) {
hammer.style.animation = "lit 0.3s";
setTimeout(() => {
hammer.style.animation = "";
}, 100);
}
}
}
},
timingInfinite() { //无尽模式定时
let timingInfiniteT;
return timingInfiniteT = setInterval(() => {
Main.tag.InfiniteNum++
if (Main.tag.life.innerText <= 0) {
clearInterval(timingInfiniteT);
} else {
if (Main.tag.InfiniteNum == 10) {
Main.susliksHole(500);
Main.tag.susliksTime = 1.4;
} else if (Main.tag.InfiniteNum == 20) {
Main.susliksHole(450);
Main.tag.susliksTime = 1.3;
} else if (Main.tag.InfiniteNum == 40) {
Main.susliksHole(430);
Main.tag.susliksTime = 1.2;
} else if (Main.tag.InfiniteNum == 60) {
Main.susliksHole(420);
Main.tag.susliksTime = 1.1;
} else if (Main.tag.InfiniteNum == 80) {
Main.susliksHole(400);
Main.tag.susliksTime = 1;
} else if (Main.tag.InfiniteNum == 100) {
Main.susliksHole(380);
} else if (Main.tag.InfiniteNum == 200) {
Main.susliksHole(350);
} else if (Main.tag.InfiniteNum == 300) {
Main.susliksHole(330);
Main.tag.susliksTime = 0.9;
} else if (Main.tag.InfiniteNum == 400) {
Main.susliksHole(300);
} else if (Main.tag.InfiniteNum == 500) {
Main.susliksHole(250);
Main.tag.susliksTime = 0.8;
} else if (Main.tag.InfiniteNum == 600) {
Main.susliksHole(200);
Main.tag.susliksTime = 0.8;
}
}
}, 1000)
},
finishMark() {
let li = document.createElement("li");
li.innerHTML = `您的上把战绩:模式:${Main.tag.mod}您的分数:${Main.tag.mark.innerText}`
Main.tag.finishMarkWrap.appendChild(li)
console.log("您的积分", Main.tag.mark.innerText);
window.localStorage.setItem('gamenum', Main.tag.mark.innerText);
var gamenum = localStorage.getItem('gamenum');
console.log(gamenum);
var fen =document.getElementById("fen");
fen.innerText=`老铁:您上次端午打粽子的分数为:${gamenum}分!`
},
timing() { //普通模式定时
let timingT;
return timingT = setInterval(() => {
Main.tag.timing.innerText--
Main.end(timingT);
if (Main.tag.timing.innerText == 40) {
Main.susliksHole(500);
Main.tag.susliksTime = 1.1;
} else if (Main.tag.timing.innerText == 20) {
Main.susliksHole(400);
Main.tag.susliksTime = 0.9;
}
}, 1000)
},
end(T) { //结束
if (Main.tag.life.innerText <= 0 || Main.tag.timing.innerText <= 0) {
Main.finishMark()
clearInterval(T);
Main.tag.container.innerHTML = "";
Main.tag.initial.style.display = "block";
Main.tag.timing.style.display = "none"
Main.tag.wrapLife.style.display = "none";
Main.tag.h1.style.display = "block";
Main.tag.wrapMark.style.display = "none";
document.getElementById("hammer").remove();
document.getElementsByTagName("html")[0].style.cursor = "auto";
Main.tag.MarkNum = 0;
Main.tag.markNum = 0;
Main.tag.mark.innerText = 0;
Main.tag.wrap.style.display = "none";
Main.tag.endBox.style.display = "block"
Main.tag.finishMarkWrap.style.display = "block"
document.getElementById("explain").style.display = "block"
Main.tag.InfiniteNum = 0;
setTimeout(() => {
Main.tag.wrap.style.display = "block";
Main.tag.endBox.style.display = "none";
}, 1000)
}
}
})
Main.tag.go.onclick = function () { // 开始
Main.hammerMove();
Main.go();
Main.lit();
Main.tag.difficulty.forEach((v, i, arr) => {
if (v.checked) {
Main.createHole(12) //创建地洞
if (v.value == 0) { //无尽
Main.susliksHole(600); //创建地鼠时间
Main.susliksMove("无尽"); //地鼠移动时间
Main.tag.timing.style.display = "none";
Main.tag.susliksTime = 1.5;
Main.timingInfinite();
Main.tag.mod = "无尽"
} else { //普通
Main.tag.wrapLife.style.display = "none";
Main.timing()
Main.tag.life.innerText = 100;
Main.susliksHole(600);
Main.susliksMove("普通");
Main.tag.susliksTime = 1.2;
Main.tag.mod = "普通"
}
}
});
}
1、过关方式
从第一关(难度1)打起,每关都有固定数量的月饼和少量的404,打404加-20000分,打月饼加10000分。
2、选择模式
先选择合适自己的难度,普通/无尽,普通倒计时为50秒,无尽是倒计时10秒,点中一个月饼加一秒,直到倒计时为0时GAME OVER。
3.游戏建议
1.全神贯注,手眼并用,左右两手分别负责各自一边会更加有效。
2.偶尔会看到出来的不是可爱的月饼而是更可爱的404,也不要心软,照样砸下去。





