Article Directory
Recently, I just learned JavaScript, and I used the knowledge I learned to write two small games full of childhood memories-Maze and Hamster. Now let us take a look at how to achieve it~
1. Simple maze
This is a maze that can't be simpler. The rules of the game: you win when you walk from the maze to the end; you lose when you hit the wall; walking from the map to the end is cheating. S is the starting point and E is the end point.
Complete HTML code
<!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 code
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 code
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;
});
}
The key to the js part is to add a Listener to the element, which is equivalent to attaching a trigger. Once an event occurs, such as "mouseleave" (mouse leaves the corresponding element area), the corresponding function is called. Also pay attention to object-oriented programming.
2. Beat the mole
This game is more complicated and interesting. With the addition of timing and scoring functions, it can also control the start and end of the game and display the game status. The result will pop up when the game ends.
Rules of the game: One point is added for hitting a hamster, and one point is deducted for a wrong hit. The player can challenge how many hamsters can be hit within 30 seconds. (The time to fight hand speed is here~)
Since the code is a bit long, I won't attach it here. For more details: https://gitee.com/Hometown2020/mole
3. Game Link
After reading the code, the next step is to experience the game. Here I attach my game link, and friends who are interested can experience it~
PS: If you are interested in developing small games but don’t want to code, recommend a development platform construct3 that is very friendly to novices. Here is a simple version of Plants vs. Zombies tower defense. If you are interested in learning about it~
how to use construct3 Online development games & game show