最近刚学JavaScript，就用学的知识写了两个充满童年回忆的小游戏–迷宫和打地鼠，现在让我们一起来看看怎么实现吧~
1.简单迷宫
这是一个不能再简单的迷宫了，游戏规则：从迷宫中走到终点就赢了；碰墙就输；从地图外走到终点算作弊。S为起点，E为终点。
完整HTML代码
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>The Amazing Mouse Maze</title>
<meta charset="utf-8">
<script src="maze.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="maze.css">
</head>
<body>
<h1>The Amazing Mouse Maze</h1>
<p>
Move your mouse over the "S" to begin.
</p>
<div id="result"></div>
<div id="wholeMaze">
<div id="firstRow" class="wall"></div>
<div id="middle">
<div id="one" class="wall"></div>
<div id="two" class="wall"></div>
<div id="three" class="wall"></div>
<div id="start">S</div>
<div id="end">E</div>
</div>
<div id="lastRow" class="wall"></div>
</div>
<p class="info">The object of this game is to guide the mouse cursor through the start area and get to the end
area.Be
sure to avoid the walls.
</p><br /><br />
<div id="block"></div>
<p class="info">Good luck!</p>
</body>
</html>
css代码
h1,p{
text-align: center;
}
#wholeMaze{
position: relative;
top: 12px;
height: 300px;
width: 500px;
margin: auto;
}
#result{
text-align: center;
font-size: 20px;
height: 20px;
}
#firstRow{
width: 100%;
height: 50px;
margin: 0;
}
.wall{
border: 1px solid black ;
float: left;
background-color: #EEEEEE;
}
#middle{
margin: 0;
width: 100%;
height: 198px;
}
#one{
position: relative;
top: -1px;
width: 148px;
height: 148px;
margin-right: 0;
border-top: 1px solid #EEEEEE ;
}
#two{
position: relative;
left: 50px;
width: 100px;
height: 145px;
top: 41px;
margin: 0;
border-bottom: 1px solid #EEEEEE ;
z-index:2;/*用于覆盖*/
}
#three{
position: relative;
left: 100px;
top: -1px;
width: 148px;
height: 148px;
border: 0 1px 1px 1px;
margin: 0;
border-top: 1px solid #EEEEEE ;
}
#start{
line-height: 30px;
text-align: center;
position: relative;
float: left;
font-weight: bold;
font-size: 20px;
height: 30px;
width: 30px;
left: -402px;
top: 152px;
border: 1px solid black;
background-color:#83FF82;
}
#end{
line-height: 30px;
text-align: center;
position: relative;
float: left;
font-weight: bold;
font-size: 20px;
height: 30px;
width: 30px;
left: 36px;
top: 152px;
background-color: #8784FF;
border: solid black 1px;
}
#lastRow{
position: relative;
top: 37px;
width: 100%;
height: 48px;
margin: 0;
z-index: 1;
}
.info{
position: relative;
top: 20px;
text-align: left;
width: 600px;
margin: auto;
}
#block{
width: 100px;
height: 25px;
margin: auto;
background-color: #EEEEEE;
border: 1px solid black;
}
js代码
var isStart = false;
var isInMap = false;
window.onload = function () {
var wall = document.getElementsByClassName("wall");
/*start */
document.getElementById("start").addEventListener("mouseover", function () {
document.getElementById("result").textContent = "";
isStart = true;
isInMap = true;
for (var i = 0; i < wall.length; i++) {
wall[i].style.backgroundColor = "#EEEEEE"; }
})
/*out of the map */
document.getElementById("wholeMaze").addEventListener("mouseleave", function () {
isInMap = false;
});
/*wall */
for (var i = 0; i < wall.length; i++)
wall[i].addEventListener("mouseover", function (event) {
if (isStart) {
event.target.style.backgroundColor = "#FF0000";
document.getElementById("result").textContent = "You hit the wall, lost the game!";
isStart = false;
}
});
for (var i = 0; i < wall.length; i++)
wall[i].addEventListener("mouseleave", function (event) {
event.target.style.backgroundColor = "#EEEEEE";
});
/*end */
document.getElementById("end").addEventListener("mouseover", function () {
if (isStart) {
if (isInMap) {
document.getElementById("result").textContent = "Congratulation! You win the game!"; }
else {
document.getElementById("result").textContent = "Oh, my friend, please don't cheat!";
isStart = false;
}
}
isStart = false;
});
}
js部分的关键在于给元素添加Listener，相当于附加个触发器，一旦事件发生如“mouseleave”(鼠标离开对应元素区域)就调用对应的函数。另外注意面向对象编程。
2.打地鼠
这个游戏比较复杂，也比较有意思，加上了计时和计分功能，还可以控制游戏的开始和结束并显示游戏状态。游戏结束时弹出结果。
游戏规则：打中地鼠加一分，打错扣一分，不打分不变，玩家可以挑战30秒内能打中多少只地鼠。(拼手速的时刻到了~)
由于代码有点长，这里小编就不附上了。详见：https://gitee.com/Hometown2020/mole
3.游戏链接
看了代码，接下来就是体验游戏了，这里小编附上自己的游戏链接，有兴趣的朋友可以体验一下~
PS：如果你对开发小游戏感兴趣又不想打码的话，推荐一个对新手很友好的开发平台construct3，这里小编写了一个简单的植物大战僵尸塔防版，有兴趣的了解一下~
如何在construct3上开发游戏&游戏展示