Comentario: Comer de serpientes, las funciones principales: 1. El movimiento de la serpiente 2. Cambie la dirección de la serpiente 3. Coloque la comida 4. Aumente el sacrificio de uno mismo 5. Cómo colgarlo, la implementación específica es la siguiente. Es simple y práctico en 60 líneas. Los amigos interesados pueden referirse a él. Espero que sea útil para todos.
Raramente presté atención a HTML5 en el pasado. Siento que elegir HTML se ha convertido gradualmente en una tendencia, por lo que quiero saberlo. Encontré un juego para aprenderlo. Después de escribir este juego, sentí que HTML5 y JS estaban muy estrechamente integrados, si JS no era particularmente bueno. Supongo que primero necesito tomar una tutoría JS. Este es solo mi consejo personal y puede no ser preciso. Otra cosa es que debe ser particularmente claro sobre su pensamiento y lógica, de lo contrario escribir juegos puede ser doloroso.Las principales funciones de las serpientes codiciosas: 1. La serpiente se mueve 2. Cambia la dirección de la serpiente 3. Coloque la comida 4. Aumente sacrificando 5. Cómo colgarlo.
La primera vez que escribí un juego, la primera vez que escribí HTML5, se sintió muy difícil. He terminado de escribir y lo compartiré contigo. Comunicación entre ellos ... Si no comprende o tiene alguna sugerencia, déjame un mensaje. . . El código es muy corto, solo 60 líneas.
Pero este es un producto semi-acabado, y está terminado. Actualizar nuevamente
<! Doctype html>
<html>
<Body>
<Canvas> </Canvas>
<script type = "text/javaScript">
var c = document.getElementById ("mycanvas");
tiempo var = 160; // velocidad de serpiente
var cxt = c.getContext ("2d");
var x = y = 8;
var a = 0; // Coordenadas de alimentos
var t = 20; // sacrifica tu vida
var map = []; // Grabar la ruta de ejecución de serpientes
tamaño var = 8; // Tamaño de la unidad del cuerpo de serpiente
dirección var = 2; // 1 arriba 2 derecha 0 izquierda 3 hacia abajo
interval = window.setInterval (set_game_speed, tiempo); // mover la serpiente
función set_game_speed () {// Mover Snake
interruptor (dirección) {
Caso 1: y = y tamaño y; ruptura;
Caso 2: x = x+tamaño; romper;
Caso 0: x = x-tamaño; ruptura;
Caso 3: y = y+tamaño; romper;
}
if (x> 400 || y> 400 || x <0 || y <0) {
alerta ("Estás muerto, sigue trabajando duro! Razón del fracaso: estoy golpeando una pared ..."); Window.location.Reload ();
}
para (var i = 0; i <map.length; i ++) {
if (parseInt (map [i] .x) == x && parseInt (map [i] .y) == y) {
alerta ("¡Estás muerto, sigue trabajando duro! La razón del fracaso: me topé conmigo ..."); Window.location.Reload ();
}
}
if (map.length> t) {// Mantenga su longitud de sacrificio
var cl = map.shift (); // Eliminar el primer elemento de la matriz y devolver el elemento original
cxt.clearrect (cl ['x'], cl ['y'], tamaño, tamaño);
};
map.push ({'x': x, 'y': y}); // Agregar datos al final de la matriz original
cxt.fillstyle = "#006699"; // color de relleno interno
cxt.strokestyle = "#006699"; // color de borde
cxt.fillrect (x, y, tamaño, tamaño); // dibujar rectángulo
if ((a*8) == x && (a*8) == y) {// come comida
rand_frog (); t ++;
}
}
document.Onkeydown = function (e) {// Cambia la dirección de la serpiente
Código var = E.KeyCode - 37;
switch (código) {
Caso 1: dirección = 1; romper; //
Caso 2: dirección = 2; ruptura; // Derecha
Caso 3: dirección = 3; romper; // Siguiente
Caso 0: dirección = 0; ruptura; // izquierda
}
}
// colocar comida al azar
función rand_frog () {
a = math.ceil (math.random ()*50);
cxt.fillstyle = "#00000"; // color de relleno interno
cxt.strokestyle = "#00000"; // color de borde
cxt.fillrect (a*8, a*8, 8, 8); // Dibuja el rectángulo
}
// colocar comida al azar
rand_frog ();
</script>
</body>
</html>