最近在學(xué)JavaScript，就用學(xué)的知識寫了兩個充滿童年回憶的小游戲--迷宮和打地鼠，現(xiàn)在讓我們一起來看看怎么實現(xiàn)吧~
1.簡單迷宮
這是一個不能再簡單的迷宮了，游戲規(guī)則：從迷宮中走到終點就贏了；碰墻就輸；從地圖外走到終點算作弊。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部分的關(guān)鍵在于給元素添加Listener，相當(dāng)于附加個觸發(fā)器，一旦事件發(fā)生如“mouseleave”(鼠標(biāo)離開對應(yīng)元素區(qū)域)就調(diào)用對應(yīng)的函數(shù)。另外注意面向?qū)ο缶幊獭?/p>
2.打地鼠
這個游戲比較復(fù)雜，也比較有意思，加上了計時和計分功能，還可以控制游戲的開始和結(jié)束并顯示游戲狀態(tài)。游戲結(jié)束時彈出結(jié)果。
游戲規(guī)則：打中地鼠加一分，打錯扣一分，不打分不變，玩家可以挑戰(zhàn)30秒內(nèi)能打中多少只地鼠。(拼手速的時刻到了~)
在這里插入圖片描述
由于代碼有點長，這里小編就不附上了。詳見：https://gitee.com/Hometown2020/mole
3.游戲鏈接
看了代碼，接下來就是體驗游戲了，這里小編附上自己的游戲鏈接，有興趣的朋友可以體驗一下~
PS：如果你對開發(fā)小游戲感興趣又不想打碼的話，推薦一個對新手很友好的開發(fā)平臺construct3，這里小編寫了一個簡單的植物大戰(zhàn)僵尸塔防版，有興趣的了解一下~
如何在construct3上開發(fā)游戲&游戲展示
