最近、JavaScriptを学び、学んだ知識を使って、子供の頃の思い出に満ちた2つの小さなゲーム、MazeとHamsterを作成しました。それを実現する方法を見てみましょう〜
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部分の鍵は、トリガーをアタッチするのと同じように、要素にリスナーを追加することです。「mouseleave」（マウスが対応する要素領域を離れる）などのイベントが発生すると、対応する関数が呼び出されます。オブジェクト指向のプログラミングにも注意を払ってください。
2.ほくろを倒す
このゲームはより複雑で興味深いものです。タイミング機能とスコアリング機能が追加されているため、ゲームの開始と終了を制御したり、ゲームのステータスを表示したりすることもできます。ゲームが終了すると、結果がポップアップ表示されます。
ゲームのルール：ハムスターを打つと1ポイントが加算され、ミスを打つと1ポイントが差し引かれます。プレイヤーは、30秒以内にヒットできるハムスターの数に挑戦できます。（手のスピードと戦う時間はこちら〜）
コードが少し長いのでここには付けません。詳細については、https：//gitee.com/Hometown2020/moleをご覧ください。
3.ゲームリンク
コードを読んだら、次のステップはゲームを体験することです。ここに自分のゲームリンクを添付すると、興味のある友達が体験できます〜
PS：小さなゲームの開発に興味があるが、コーディングしたくない場合は、初心者に非常に使いやすい開発プラットフォームconstruct3をお勧めします。これはPlants vs. Zombiesタワーディフェンスの簡単なバージョンです。それについて学びたい場合は〜3の
構築方法オンライン開発ゲーム＆ゲームショー