Title of this article:
Use the code to develop a small game of making rice dumplings before the Dragon Boat Festival
Technology stack of this paper :
javascipt /html/css
Icon declaration :
The game Zong/Dragon icon refers to the iconfont of Alimama MUX, which is only for personal learning and entertainment, not for commercial use
1. Game development inspiration:
The well-known small game of whack-a-mole , not much to say,
2. Game content analysis:
1. Home page structure:
HTML is adopted, and the large structure is composed of several large div blocks.
The background is a dragon image introduced by the background background image attribute of the body's css, so that it looks beautiful.
2. The upper part of the home page:
Using a large div and the type="radio" attribute of the input tag in HTML, I set the attribute with the same name so that the user can only choose one mode to avoid mistakes.
Start making rice dumplings - it is a button set with a button button, after clicking
Enter the copy of Zongzi and wait for the countdown. In a square area, the place is full of cracks in time and space, and you cannot move.
When the countdown starts, the image of the dragon and the zongzi pops up, and then press the mouse button,
There will be a big hammer, you can knock on the head of the dragon and the rice dumpling, you will get -20,000 points for hitting the dragon, and you will get 10,000 points for hitting the rice dumpling.
2. Brief description
After clicking to start making rice dumplings, you can directly enter the game. At this moment, the gophers will inadvertently poke out a head or a pair of eyes from the burrows, trying to avoid the player's sight. Don't be soft-hearted, just tap your hand, clap your hands down, and try to be accurate one at a time, one hits one, and two hits a pair.
3. Game mode
1. How to pass the level
First choose the pass percentage that suits you, starting from the first level (difficulty 1), each level has a fixed number of zongzi and a small number of dragons, and you get -20,000 points for playing dragons, and 10,000 points for hitting zongzi.
2. Custom difficulty mode
Choose the difficulty that suits you first, normal/endless, the normal countdown is 50 seconds, and the endless countdown is 10 seconds. Click a zongzi and add one second until the countdown is 0 when GAME OVER.
4. Game suggestion
1. Concentrate on it, use both hands and eyes, and it will be more effective if the left and right hands are responsible for their respective sides.
2. Occasionally you will see a cuter dragon instead of a zongzi, don't be soft-hearted, just smash it down.
3. Not only requires fast speed, but also must be accurate. Sometimes because of impatience, you may hit the wrong hole, and points will be deducted.
3. Game code open source:
Brothers who understand the relevant front-end knowledge can follow the following code for 2 developments
1. HTML page + css style code open source
<!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://ae01.alicdn.com/kf/H3bcea8dc2baf4d49baade4ba06772815Z.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 code open source
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 = "普通"
}
}
});
}
The img images are these:
Use the code to develop the Zongzi game before the Dragon Boat Festival. This is the end of this article.
I am Fengshang, authored by Fengshang Cloud Network
http://1813783665.3 vzhuji.cc/Welcome everyone to comment and learn below