Trong bài viết này, hãy bắt đầu tạo một trò chơi rắn với JavaScript.
El juego de la serpiente is un juego sencillo en the que una serpiente se mueve adentro de una caja y trata de comerse una manzana. Una vez que se come la manzana, la serpiente crece de largo y se mueve more fastido.
El juego termina una vez que la serpiente se choca con sí misma o con cualquiera de las cuatro paredes.
Bueno, comencemos con HTML y CSS (los cimientos de nuestro juego).
HTML
<h1>Nokia 3310 snake</h1>
<div class="muestraPuntaje"></div>
<div class="cuadrilla"></div>
<div class="boton">
<button class="superior">superior</button>
<button class="fondo">fondo</button>
<button class="izquierda">izquierda</button>
<button class="derecha">derecha</button>
</div>
<div class="popup">
<button class="juegaDeNuevo">Inténtelo de nuevo</button>
</div>Nó có kỹ năng HTML tốt nhất hiện nay:
- Un div de clase
muestraPuntajeque mostrará nuestro puntaje. - Un div de clase
cuadrillaen el que se desarrollará el juego (cuadrilla sê-ri de 10 bởi 10). - một lớp
butonque contiene un botón para los usuarios que juegan en el teléfono (lo automatizaremos con el teclado para Los usuarios de computer). - một lớp
popupthứ mà bạn tìm thấy nhiều nhất là “Inténtelo de nuevo”.
Ahora le añadiremos un poco de estilo con CSS.
CSS
body {
background: rgb(212, 211, 211);
}
.cuadrilla {
width: 200px;
height: 200px;
border: 1px solid red;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
.cuadrilla div {
width: 20px;
height: 20px;
/*border:1px black solid;
box-sizing:border-box*/
}
.serpiente {
background: blue;
}
.manzana {
background: yellow;
border-radius: 20px;
}
.popup {
background: rgb(32, 31, 31);
width: 100px;
height: 100px;
position: fixed;
top: 100px;
left: 100px;
display: flex;
justify-content: center;
align-items: center;
}Trong CSS, la cuadrillaque es el tablero del juego, tiene una dimensions establecida y un display de flex. Esto allow que los contenidos (div) de esta cuadrilla estén alineados de forma vertical como si fuesen elementos en línea en lugar de la sposición normal de los bloques.
La propiedad flex wrap mueve los divs hacia la próxima línea para que no traspasen la dimensions del elemento padre establecida (cuadrilla).
Crearemos de forma dinámica Loss Contenidos Tablero del Juego desde JS pero podemos Darle Anchor và Altura Desde CSS (con el .cuadrilla div). Ví dụ, bao gồm các bình luận cho ayudarte và ver los divs; por lo que, medida que avancemos dejaremos el codigo sin comentarios.
las clases serpiente y manzana nos muestran donde está la serpiente y el thưởng en el juego, mientras que la clase popup es un div fijo que alberga el botón juegaDeNuevo.
En este punto, obtendrás lo siguiente:
Ahora estamos listo para empezar con JavaScript.
JavaScript
Đầu tiên, những điều mà bạn cần xác định là các biến:
let cuadrilla = document.querySelector(".cuadrilla")
let popup = document.querySelector(".popup");
let juegaDeNuevo = document.querySelector(".juegaDeNuevo");
let muestraPuntaje = document.querySelector(".muestraPuntaje")
let izquierda = document.querySelector(".izquierda")
let fondo = document.querySelector(".fondo")
let derecha = document.querySelector(".derecha")
let arriba = document.querySelector(".superior")
let ancho = 10;
let indiceActual = 0
let indiceManzana = 0
let serpienteActual = [2,1,0]
let direccion = 1
let puntaje = 0
let velocidad = 0.8
let tiempoInterval = 0
let interval = 0La biến ancho es la anchura de la cuadrilla (10). Las otras các biến có xu hướng más sentidos medida que avancemos. Tội lỗi cấm vận, aunque no lo crereas, nuestra serpiente en realidad es un arreglo lạc đà không bướu serpienteActual.
Ahora veamos las chức năng:
document.addEventListener("DOMContentLoaded",function(){
document.addEventListener("keyup",control)
crearTablero()
comiezaJuego()
juegaDeNuevo.addEventListener("click", repeticion);
})Bảng tin eventListener en el objeto del documento llamado DomContentLoaded Đây là sự kiện mà ejecutará una vez que el contenido del HTML se cargue en la pantalla.
Una vez que esto sucede, establecemos un eventListener en el documento para Esperar clics del teclado (después veremos esto con chi tiết hơn). Luego, queremos crear el juego de mesa, empezar el juego and prestarle atención a los clics en el botón de juegaDeNuevo.
Función crearTablero
function crearTablero(){
popup.style.display = "none";
for(let i=0;i<100;i++){
let div = document.createElement("div")
cuadrilla.appendChild(div)
}
} Như đã đề cập trước đó, đây là một con cuadrilla de 10 por 10 por lo cual vamos a necesitar 100 divs. Entonces, co el fragmento anterior, cerramos el div popup, creamos un nuevo div con un bucle de 100 iteraciones and insertamos a la cuadrilla (juego de meza).
Inmediatamente se añadirán algunos de los estilos creados en un Principio (el .cuadrilla div). nước tẩy Puedes /* */đánh giá CSS và quan sát các div sáng tạo (vuelve agregar los /* */).
Chức năng bắt đầu Trò chơi
function comenzaJuego(){
let cuadrados = document.querySelectorAll(".cuadrilla div")
manzanaAlAzar(cuadrados)
// manzana al azar
direccion = 1
mostrarPuntaje.innerHTML = puntaje
tiempoInterval = 1000
serpienteActual = [2,1,0]
indiceActual = 0
serpienteActual.forEach(index => cuadrados[index].classList.add("serpiente"))
interval = setInterval(moverResultado,tiempoInterval)
} Chức năng comenzaJuego primero toma todos los divs (ya que estamos creando los divs en el tiempo de ejecución, no podemos incluirlos en la parte superior del código).
Điều đó có nghĩa là bạn đã chọn một con đường dẫn đến một cuộc tấn công manzana. Esto se realizará more abajo intro de la función manzanaAlAzar. La biến direccion se refiere hacia donde se dirige la serpiente -1 para la derecha, -1 para la izquierda y así.
Côn tiempoInterval se establece el tiempo que le toma a la serpiente moverse, mientras que serpienteActual xác định la ubicación precisiona de la serpiente en el cuadrilla (ten en cuenta que básicamente la serpiente está formada por un par de divs con un color specific).
Để có được một con rắn mới nhất trong pantalla, thực hiện các khóa chặt chẽ sobre el arregloserpienteActual lừa đảo forEach. Cada valor obtenido, se utilizará con cuadrados. Recuerda que debes utilizar querySelectorAll để truy cập vào divs của cuadrilla, sau đó, bạn có thể truy cập vào một cái tên giống như một mảng được sử dụng bởi các số. En este caso, estos son los valores de serpienteActual.
Sau đó, bạn có thể chèn phương pháp này setInterval (moverResultado, tiempoInterval) trong biến interval. Con esto podemos llamar fácilmente a clearInterval en esa biến.
moverResultado se ejecuta cada 1000ms (1s) y básicamente xác định qué sucede cuando mueves la serpiente.
Función moverKết quả
function moverResultado() {
let cuadrados = document.querySelectorAll(".cuadrilla div")
if(compruebaPorGolpes(squares)) {
alert("golpeaste algo")
popup.style.display="flex"
return clearInterval(interval)
} else {
mueveSerpiente(cuadrados)
}
} Como con la función comenzaJuego mencionada previamente, primero obtenemos todos los cuadrilla divs y luego verificamos si la función compruebaPorGolpes biến mất thật (verdadero).
Nếu vậy, hãy quyết định rằng con rắn chắc sẽ cho có con số và xuất hiện nút “Inténtelo de nuevo” và borra el interval. Si la función devuelve false (fal also), la serpiente no chocó con nada y podemos mover la serpiente con la función mueveSerpiente.
Por lo tanto, cada 1 segundo el juego termina si compruebaPorGolpes là thật o la serpiente realiza un moviemiento más si compruebaPorGolpes là sai. Primero giải thích chức năng mueveSerpiente.
Función mueveSerpiente
function mueveSerpiente(cuadrados){
let cola = serpienteActual.pop()
cuadrados[cola].classList.remove("serpiente")
serpienteActual.unshift(serpienteActual[0]+direccion)
// movimiento termina aquí
comeManzanas(cuadrados,cola)
cuadrados[serpienteActual[0]].classList.add("serpiente")
} Chức năng mueveSerpiente recibe un argumento llamado cuadrados lo que no es necesario obtener de nuevo el .cuadrilla div trong chức năng này.
Lo primeo que necesitamos hacer es quitar el último elemento del arreglo serpienteActual con un pop (este sería la cola y el primer elemento del arreglo sería la cabeza). Básicamente, la serpiente se mueve un paso hacia adelante y sale de la posición en la que estaba anteriormente. Sau đó, hãy chèn một giá trị mới nhất vào nguyên tắc của hợp đồng di chuyển.
Supongamos que nuestra serpiente empezó a mover y se dirige hacia la derecha (direction = 1). La directión se añadirá a cabeza serpienteActual y la suma se colocará como el nuevo cabezaDeSerpiente.
Por ejemplo, si la serpiente estaba en posición [2,1,0], loại bỏ yếu tố tối đa và vị trí [2,1]. Luego, tomamos la cabeza que sería el elemento 2, le añadimos la dirección que es el elemento 1 và hacemos que este valor sea el nuevo valor [3,2,1] que mueve nuestra serpiente un paso hacia a la derecha después de un segundo.
Nếu queremos mover la serpiente hacia abajo, la derección se establecerá a el ancho (que es 10) y se insertará en el primero (que es 12 y se xem xét nguyên tắc của arreglo) [12,2,1].
Sau đó, xác minh rằng con rắn sẽ bắt đầu manzana và bạn sẽ thấy hình ảnh mới của cabeza de la con rắn trong DOM.
Función compruebaPorGolpes
function compruebaPorGolpes(cuadrados) {
if (
(serpienteActual[0] + ancho >=(ancho * ancho) && direccion === ancho) ||
(serpienteActual[0] % ancho === ancho -1 && direccion ===1) ||
(serpienteActual[0] % ancho === 0 && direccion === -1) ||
(serpienteActual[0] - ancho <= 0 && direccion === -ancho) ||
cuadrados[serpienteActual[0] + direccion].classList.contains("serpiente")
) {
return true
} else {
return false
}
} Chức năng compruebaPorGolpes tiene una sentencia nếu. Según la condición definida, podría devolver thật (la serpiente se chocó con algo) o sai.
La primera condición es si serpienteActual [0] (la cabeza de la serpiente) + ancho (10) es igual al total del área del ancho (que es ancho * ancho = 100) y la dirección es igual al ancho.
Ahora asumamos que la cabeza de la serpiente está en posición 97 que es la última capa de nuestro cuadrilla. Si añadieses 10 a 97 (= 107), superaría al total de la cuadrilla que es de 100. Si la directión de la serpiente continúa hacia abajo, quiere decir que la serpiente se chocó con el borde kém hơn.
Si la serpiente estaba en 97 (97 + 10= 107) pero el jugador pudo cambiar la dirección a 1 (tocando la tecla izquierda), no se chocará con nada.
Si la cabeza de la serpiente está en posición 39 y la directión todavía es 1 (la serpiente sigue dirigiéndose hacia la pared) y se chocará con el borde derecho.
Cualquier otra condición es prácticamente lo contrario de las dos condiciones anteriores. La última condición allow que si la cabeza de la serpiente se dirige hacia otro elemento que ya contiene la clase serpiente, la serpiente se chocará con sí misma.
Por lo que si una de las condiciones mencionadas previamente se cumple, significa que la serpiente se choco con algo y se devolverá thật (chữ Hán sai). Y en ese caso, el juego se terminó. Pero si es falso, con mueveSerpiente mueves la serpiente realiza otro movimiento.
Chức năng đếnManzanas
function comeManzanas(cuadrados,cola){
if(cuadrados[serpienteActual[0]].classList.contains("manzanas")){
cuadrados[serpienteActual[0]].classList.remove("manzanas")
cuadrados[cola].classList.add("serpiente")
serpienteActual.push(cola)
manzanaAlAzar(cuadrados)
puntaje++
muestraPuntaje.textContent = puntaje
clearInterval(interval)
tiempoInterval = tiempoInterval * velocidad
interval = setInterval(moverResultado, tiempoInterval)
}
} Một chức năng comeManzana se la llama desde la función mueveSerpiente cada vez que la serpiente realiza un moviemiento.
Recibe dos argumentos cuadrados, .cuadrilla div y cola, básicamente es el valor que apareció de la serpiente en moverResultado. Luego xác minh rằng vị trí tiên phong của bộ phim là contiene una manzana.
Si lo hace, simplemente añade la cola que sacamos devuelta al arreglo. Esto sucede porque cada vez que nuestra serpiente se come una manzana, su largo incrementa un valor.
Después solo tenemos que selectar una nueva posición para nuestra manzana con manzanaAlAzar (ver más adelante). Y insertamos un valor de uno a nuestra puntuación, se lo mostramos al usuario, y borramos el tiempoInterval (para poder incrementar la velocidad de la serpiente). Cuối cùng, establecemos el intervalo de nuevo.
Función manzanaAlAzar
function manzanaAlAzar(cuadrados){
do {
appleIndex = Math.floor(Math.random() * cuadrados.length)
} while(cuadrados[appleIndex].classList.contains("serpiente"))
cuadrados[appleIndex].classList.add("manzana")
} Lo que hace manzanaAlAzar là lựa chọn của một lugar donde ubicar a nuestra manzana al utilizar un bucle làm trong khi. Primero select a posición al azar con Math.random() en el bucle do y verify that the lugar selectado ya contiene la clase serpiente.
Esto quiere decir que la condición en la sentencia do se ejecutará hasta que encuentre un lugar en el que no esté la serpiente (esto se continua ejecutando hasta que sea thật). Una vez que encuentre un lugar, le da a ese lugar la clase manzana.
Bộ điều khiển ổn định
Ahora tenemos que establecer nuestros controles. Vamos a empezar con los usuarios del teclado.
function control(e){
if (e.keycode === 39){
direccion = 1 // derecha
} else if (e.keycode === 38){
direccion = -ancho // si presionamos la flecha de arriba, la serpiente irá 10 divs hacia arriba
}else if (e.keycode === 37){
direccion = -1 // izquierda, la serpiente irá un div a la izquierda
}else if (e.keycode === 40){
direccion = +ancho // la serpiente irá 10 divs hacia abajo desde el div actual
}
} Recuerda que etablecimos un eventListener para bàn phím. Chức năng này sẽ được đưa ra ngay lập tức trước và sau đó là một tecla.
Ahora cada botón del teclado tiene un valor llamado keycode (numeros) desde the tenemos cual acceso y nos allowe saber qué numero se cliqueó. Básicamente, estaremos atentos a las flechas con susrespectivos valores (mã khóa). Gracias a esto, cambiamos la directión, por ejemplo -1, 10 y así.
Espero que hayan comprendido cómo ahora se podrá mover a la serpiente.
El siguiente conjunto de botones es para dispositivos moviles y básicamente estamos haciendo lo mismo:
arriba.addEventListener("click",() => direccion = -ancho )
fondo.addEventListener("click",() => direccion = +ancho )
izquierda.addEventListener("click",() => direccion = -1 )
derecha.addEventListener("click",() => direccion = 1 )Cuối cùng, necesitamos crear el div repetición que aparecerá cuando la serpiente se choque con algo. Con este botón, podremos borar el juego.
Chức năng lặp lại
function repetición() {
cuadrilla.innerHTML=""
crearTablero()
comiezaJuego()
popup.style.display = "none";
} Con este fragmento, borramos la cuadrilla (juego de mesa) và ejecutamos las funciones previas.
¡Felicidades! Hợp pháp cuối cùng. Aquí tenemos el resultado final:
Espero que hayas podido seguir el código y lo hayas disfrutado.
Trong hướng dẫn này, hãy chuẩn bị một trò chơi rắn chắc với JavaScript. Algunos de los conceptos importantes que vimos incluyen đẩy, bật, setInterval, ClearInterval y eventListener.
Để giải quyết vấn đề này, hãy nhấp vào:
Gracias por leer el artículo. Sigueme en Twitter:
Traducido del artículo de Fakorede Damilola – Cách xây dựng trò chơi rắn trong JavaScript
