本文标题：
用代码过端午之前端打粽子小游戏开发
本文技术栈：
javascipt /html/css
图标声明：
游戏粽/龙图标引用阿里妈妈MUX的iconfont 仅做个人学习娱乐使用，不做商业用途
一.游戏开发灵感：
人尽皆知的打地鼠小游戏，话不多说，
二.游戏内容分析：
1.主页结构：
采用了HTML，大结构用了几个大div块构成。
背景是body 的css的background背景图属性引入的一个龙图，以至于看起来美观。
2.主页上半部分：
采用了一个大的div 以及HTML中的input标签的 type="radio"的属性，我又设置了name相同的属性以至于用户只能选择一个模式，避免出错。
开始打粽-是用button按钮设置的一个按钮，点击之后
进入打粽子的副本等待倒计时 在一个方形区域，地方全是时空裂缝，您无法移动，
等 倒计时开始，图像 龙跟粽子冒出来后鼠标键，
会出现一个大锤子，您可以敲在龙跟粽子头上，打龙加-20000分，打粽子加10000分。
2.简单说明
在点击开始打粽后，即可直接进入游戏。此刻，地鼠会从一个个地洞中不经意的探出一个脑袋，或者一双眼睛，企图躲过游戏者的视线。不用心软，直接敲你的手丫子，拍掌下去，力求一次一个准，来一个砸一个，来二个砸一双。
3.游戏模式
1、过关方式
先选择合适自己的过关百分比，从第一关(难度1)打起，每关都有固定数量的粽子和少量的龙，打龙加-20000分，打粽子加10000分。
2、自定义难度方式
先选择合适自己的难度，普通/无尽，普通倒计时为50秒，无尽是倒计时10秒，点中一个粽子加一秒，直到倒计时为0时GAME OVER。
4.游戏建议
1.全神贯注，手眼并用，左右两手分别负责各自一边会更加有效。
2.偶尔会看到出来的不是粽子而是更可爱的龙，也不要心软，照样砸下去。
3.不仅要求速度快，而且要准，有时候因为心急，可能砸错了洞口，也是要扣分的哦
三.游戏代码开源：
了解相关前端知识的兄弟们可以仿照以下代码进行2次开发了
1.HTML页面+css样式代码开源
<!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="搜索,前端,风尚,云网,风尚云网,导航,有趣,小游戏,JavaScript,抽奖,时间,模板,倒计时,在线抽人,H5小游戏集合,html,迷宫,解析,音乐,实用,工具">
<meta name="description" content="风尚云网提供了编程的基础技术游戏, HTML、CSS、Javascript等各种小游戏，也提供了强大的在线搜索功能，实用，有趣">
<title>端午趣味小游戏-打粽子</title>
<link rel="shortcut icon" href="https://i-blog.csdnimg.cn/blog_migrate/6508ec09b00f03a2552e1fa5cbffa984.png" />
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
width: 100%;
overflow: hidden;
height: 100vh;
background: url(./img/bg.png) no-repeat;
background-size: cover;
/* 背景图取stocksnap的免费可商用素材 */
}
button {
cursor: pointer;
}
.container {
display: flex;
flex-wrap: wrap;
margin: 0 auto;
background-color: #61ac5a;
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/粽a.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/龙a.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">
<!-- 风尚云网导航站http://1813783665.3vzhuji.cc/ -->
<div id="wrap">
<center id="h1">
<!-- /* 龙粽图取阿里的免费可商用素材 仅供学习使用*/ -->
<img src="./img/龙a.png" width="30px" alt="">
<img src="./img/龙b.png" width="30px" alt="">
<img width="60px" src="img/端午.png">
<img src="./img/粽a.png" width="30px" alt="">
<img src="./img/粽b.png" width="30px" alt="">
</center>
<hr>
<!-- 风尚云网导航站http://1813783665.3vzhuji.cc/ -->
<div id="timing"></div>
<div class="wrapLife" id="wrapLife"><img src="img/端午.png" width="30px">无尽倒计时：<p id="life">10</p>
</div>
<div id="wrapMark"><span>您的当前分数：</span>
<p id="mark">0</p>
</div>
<div class="initial" id="initial">
<h2>请任意选择一个游戏难度点击开始打粽</h2>
<img src="./img/龙a.png" width="30px" alt="">
<img src="./img/龙b.png" width="30px" alt="">
<img src="./img/粽a.png" width="30px" alt="">
<img src="./img/粽b.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/龙a.png" width="30px" alt="">
<img src="./img/龙b.png" width="30px" alt="">
<img src="./img/粽a.png" width="30px" alt="">
<img src="./img/粽b.png" width="30px" alt="">
<hr>
<br><i>一：普通模式[太简单]：</i>
<br>打到粽子加分，打到龙扣分，限时50秒，随<br>
着时间粽子生成速度加速，粽子速度加速。
<br><i>二：无尽模式[有挑战]：</i><br>
时间无限，为了增加挑战性，粽子如果没打到，会<br>
扣生命，打到粽子会加10000分。打到龙会扣20000分，<br>
daoj时间为0游戏结束，随着时间游戏游戏难度增加。<br>
<i>三：浏览器保留您的上次得分</i><br>
<hr>
<img src="./img/龙a.png" width="30px" alt="">
<img src="./img/龙b.png" width="30px" alt="">
<img src="./img/粽a.png" width="30px" alt="">
<img src="./img/粽b.png" width="30px" alt="">
<p id="fen" style="text-align:center;color:rgb(221, 41, 41);font-size: 20px;"></p>
<img src="./img/龙a.png" width="30px" alt="">
<img src="./img/龙b.png" width="30px" alt="">
<img src="./img/粽a.png" width="30px" alt="">
<img src="./img/粽b.png" width="30px" alt="">
</div>
</div>
<div id="endBox">
<p>GAME OVER|游戏结束！</p>
</div>
</body>
<script src="js/index.js"></script>
</html>2.js代码开源
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 = `您的上把战绩：模式：<p class='mod'>${Main.tag.mod}</p>您的分数：<p class='finishMark'>${Main.tag.mark.innerText}</p>`
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 = "普通"
}
}
});
}
img图片是这些：
用代码过端午之前端打粽子小游戏开发，本文到此结束了，
我是风尚，著作风尚云网
http://1813783665.3vzhuji.cc/欢迎大家下方评论学习
1254
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
