Directorio de artículos
Recientemente, acabo de aprender JavaScript y utilicé el conocimiento que aprendí para escribir dos pequeños juegos llenos de recuerdos de la infancia: Maze y Hamster. Ahora echemos un vistazo a cómo lograrlo ~
1. Laberinto simple
Este es un laberinto que no puede ser más simple. Las reglas del juego: ganas cuando caminas desde el laberinto hasta el final, pierdes cuando golpeas la pared, caminar desde el mapa hasta el final es hacer trampa. S es el punto de partida y E es el punto final.
Código HTML completo
<!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>
código 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;
}
código 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;
});
}
La clave de la parte js es agregar un Listener al elemento, que es equivalente a adjuntar un disparador. Una vez que ocurre un evento, como "mouseleave" (el mouse sale del área del elemento correspondiente), se llama a la función correspondiente. También preste atención a la programación orientada a objetos.
2. Batir el mole
Este juego es más complicado e interesante. Con la adición de funciones de cronometraje y puntuación, también puede controlar el inicio y el final del juego y mostrar el estado del juego. El resultado aparecerá cuando termine el juego.
Reglas del juego: Se agregará un punto por golpear a un hámster, y se deducirá un punto por golpear un error. El jugador puede cuestionar cuántos hámsters pueden ser golpeados en 30 segundos. (El momento de luchar contra la velocidad de la mano está aquí ~)
Dado que el código es un poco largo, no lo adjuntaré aquí. Para más detalles: https://gitee.com/Hometown2020/mole
3. Enlace de juego
Después de leer el código, el siguiente paso es experimentar el juego. Aquí adjunto mi propio enlace de juego, y los amigos que estén interesados pueden experimentarlo ~
PD: Si estás interesado en desarrollar juegos pequeños y no quieres codificar, recomienda una plataforma de desarrollo construct3 que sea muy amigable para los principiantes. Aquí hay una versión simple de la defensa de la torre de Plants vs.Zombies. Si estás interesado en aprender sobre ella ~
cómo usar construct3 Juegos de desarrollo en línea y programa de juegos