La versión completa de JavaScript Snake está totalmente anotada y orientada a objetos.
Copie el código de código de la siguiente manera:
<html>
<cabeza>
<título>Serpiente v2.4</título>
<estilo>
cuerpo{
tamaño de fuente: 9 puntos;
}
mesa{
colapso fronterizo: colapso;
borde: sólido #333 1px;
}
td{
altura: 10px;
ancho: 10px;
tamaño de fuente: 0px;
}
.completado{
color de fondo: azul;
}
</estilo>
</cabeza>
<guión>
función $(id){return document.getElementById(id);}
/*************************************************** ***** *************
* serpiente javascript v2.4 <br />
* v2.4 corrigió el color del cuerpo de la serpiente para que se mueva a medida que la serpiente avanza
************************************************** * *************/
//Serpientes codiciosas
var Serpiente = {
tbl: nulo,
/**
* cuerpo: cuerpo de serpiente, cada sección de la serpiente se coloca en la matriz,
* Estructura de datos {x:x0, y:y0, color:color0},
* x, y representan coordenadas, el color representa el color
**/
cuerpo: [],
//La dirección actual del movimiento, los valores 0, 1, 2, 3, representan respectivamente arriba, derecha, abajo, izquierda, presione las teclas de dirección del teclado para cambiarla
dirección: 0,
// temporizador
temporizador: nulo,
//velocidad
velocidad: 250,
//Si ha sido pausado
pausado: verdadero,
//número de filas
número de filas: 30,
//Número de columnas
recuento de columnas: 30,
//inicialización
inicio: función(){
var colores = ['rojo','naranja','amarillo','verde','azul','púrpura','#ccc'];
this.tbl = $("principal");
var x = 0;
var y = 0;
var índice de color = 0;
//Generar dirección de movimiento inicial
esta.dirección = Math.floor(Math.random()*4);
//Construir tabla
for(var fila=0;fila<this.rowCount;fila++){
var tr=this.tbl.insertRow(-1);
for(var col=0;col<this.colCount;col++) {
var td=tr.insertCell(-1);
}
}
//Generar 20 nodos sueltos
para(var i=0; i<10; i++){
x = Math.floor(Math.random()*this.colCount);
y = Math.floor(Math.random()*this.rowCount);
colorIndex = Math.floor(Math.random()*7);
si(!this.isCellFilled(x,y)){
this.tbl.rows[y].cells[x].style.backgroundColor = colores[colorIndex];
}
}
//generar cabeza de serpiente
mientras (verdadero) {
x = Math.floor(Math.random()*this.colCount);
y = Math.floor(Math.random()*this.rowCount);
si(!this.isCellFilled(x,y)){
this.tbl.rows[y].cells[x].style.backgroundColor = "negro";
this.body.push({x:x,y:y,color:'negro'});
romper;
}
}
this.paused = verdadero;
//Añadir evento de teclado
documento.onkeydown= función(e){
if (!e)e=ventana.evento;
cambiar(e.keyCode | e.cuál | e.charCode){
caso 13: {
si(Serpiente.en pausa){
Serpiente.move();
Serpiente.pausada = false;
}
demás{
//Si no hay pausa, deja de moverte
Serpiente.pausa();
Serpiente.pausada = verdadero;
}
romper;
}
caso 37:{//izquierda
//Evita que la serpiente camine hacia atrás
if(Serpiente.dirección==1){
romper;
}
Dirección.serpiente = 3;
romper;
}
caso 38:{//arriba
//Las teclas de acceso directo funcionan aquí
si(event.ctrlKey){
Serpiente.speedUp(-20);
romper;
}
if(Snake.direction==2){//Evita que la serpiente camine hacia atrás
romper;
}
Dirección.serpiente = 0;
romper;
}
caso 39:{//derecha
if(Snake.direction==3){//Evita que la serpiente camine hacia atrás
romper;
}
Dirección.serpiente = 1;
romper;
}
caso 40:{//abajo
si(event.ctrlKey){
Serpiente.speedUp(20);
romper;
}
if(Snake.direction==0){//Evita que la serpiente camine hacia atrás
romper;
}
Dirección.serpiente = 2;
romper;
}
}
}
},
//mover
mover: función(){
this.timer = setInterval(función(){
Serpiente.erase();
Serpiente.moveOneStep();
Serpiente.paint();
}, esta.velocidad);
},
//Mueve una sección del cuerpo
moverUnPaso: función(){
si(this.checkNextStep()==-1){
clearInterval(este.temporizador);
alert("¡Se acabó el juego!/nPresiona Reiniciar para continuar.");
devolver;
}
si(this.checkNextStep()==1){
var _point = this.getNextPos();
var _x = _punto.x;
var _y = _punto.y;
var _color = this.getColor(_x,_y);
this.body.unshift({x:_x,y:_y,color:_color});
//Debido a que se come un alimento, se genera otro alimento
this.generateDood();
devolver;
}
//ventana.status = this.toString();
punto var = this.getNextPos();
//Mantiene el color de la primera sección
var color = this.body[0].color;
//El color avanza
for(var i=0; i<this.body.length-1; i++){
este.cuerpo[i].color = este.cuerpo[i+1].color;
}
// Resta una sección de la cola de la serpiente y agrega una sección a la cola de la serpiente para mostrar el efecto de la serpiente avanzando.
este.cuerpo.pop();
this.body.unshift({x:punto.x,y:punto.y,color:color});
//ventana.status = this.toString();
},
//Explora dónde ir a continuación
pausa: función(){
clearInterval(Serpiente.temporizador);
esta.pintura();
},
obtenerNextPos: función(){
var x = this.body[0].x;
var y = this.body[0].y;
var color = this.body[0].color;
//arriba
si(esta.dirección==0){
y--;
}
//A la derecha
de lo contrario si (esta.dirección==1){
x++;
}
//abajo
de lo contrario si (esta.dirección==2){
y++;
}
//izquierda
demás{
incógnita--;
}
//Devuelve una coordenada
devolver {x:x,y:y};
},
//Comprueba cuál es el siguiente paso a seguir
comprobarSiguientePaso: función(){
punto var = this.getNextPos();
var x = punto.x;
var y = punto.y;
if(x<0||x>=this.colCount||y<0||y>=this.rowCount){
return -1;//Cuando se toca el límite, el juego termina
}
for(var i=0; i<this.body.length; i++){
if(este.cuerpo[i].x==x&&este.cuerpo[i].y==y){
return -1;//Cuando toca tu propio cuerpo, el juego termina
}
}
si(this.isCellFilled(x,y)){
return 1;//Hay algo
}
devolver 0;//espacio abierto
},
//Borra el cuerpo de la serpiente
borrar: función(){
for(var i=0; i<this.body.length; i++){
this.eraseDot(este.cuerpo[i].x, este.cuerpo[i].y);
}
},
//Dibuja el cuerpo de la serpiente
pintar: función(){
for(var i=0; i<this.body.length; i++){
this.paintDot(este.cuerpo[i].x, este.cuerpo[i].y,este.cuerpo[i].color);
}
},
//borrar una sección
borrarPunto: función(x,y){
this.tbl.rows[y].cells[x].style.backgroundColor = "";
},
pintarPunto: función(x,y,color){
this.tbl.rows[y].cells[x].style.backgroundColor = color;
},
//Obtiene el color en una coordenada
obtenerColor: función(x,y){
devuelve this.tbl.rows[y].cells[x].style.backgroundColor;
},
//para depurar
toString: función(){
var cadena = "";
for(var i=0; i<this.body.length; i++){
str += "x:" + this.body[i].x + " y:" + this.body[i].y + "color:" + this.body[i].color + " - ";
}
devolver cadena;
},
//Comprueba si un punto de coordenadas está lleno
isCellFilled: función(x,y){
if(this.tbl.rows[y].cells[x].style.backgroundColor == ""){
devolver falso;
}
devolver verdadero;
},
//Reanudar
reiniciar: función(){
si(este.temporizador){
clearInterval(este.temporizador);
}
for(var i=0; i<this.rowCount;i++){
this.tbl.deleteRow(0);
}
este.cuerpo = [];
this.init();
esta.velocidad = 250;
},
//acelerar
acelerar: función (tiempo) {
si(!esto.pausado){
if(esta.velocidad+tiempo<10||esta.velocidad+tiempo>2000){
devolver;
}
esta.velocidad +=tiempo;
this.pausa();
this.move();
}
},
//Producir alimentos.
generarDood: función(){
var colores = ['rojo','naranja','amarillo','verde','azul','púrpura','#ccc'];
var x = Math.floor(Math.random()*this.colCount);
var y = Math.floor(Math.random()*this.rowCount);
var colorIndex = Math.floor(Math.random()*7);
si(!this.isCellFilled(x,y)){
this.tbl.rows[y].cells[x].style.backgroundColor = colores[colorIndex];
}
}
};
</script>
<cuerpo onload="Serpiente.init();">
/*************************************************** ***** ************<br />
* serpiente javascript v2.4<br />
************************************************** * *************/<br />
<table id="main" cellspace="0" cellpadding="0"></table>
<input type="button" id="btn" value="Inicio/Pausa" />Haz clic en el botón izquierdo o presiona Enter para iniciar/pausar el juego<br />
<input type="botón" id="reset" value="Comenzar de nuevo" /><br />
<input type="button" id="upSpeed" value="Accelerate" />Haga clic en el botón izquierdo o presione Ctrl + ↑ para acelerar<br />
<input type="button" id="downSpeed" value="Desacelerar" />Haga clic en el botón izquierdo o presione Ctrl + ↓ para reducir la velocidad
<guión>
$('btn').onclick = función(){
si(Serpiente.en pausa){
Serpiente.move();
Serpiente.pausada = false;
}
demás{
Serpiente.pausa();
Serpiente.pausada = verdadero;
}
};
$("reset").onclick = función(){
Serpiente.reiniciar();
this.desenfoque();
};
$("upSpeed").onclick = función(){
Serpiente.speedUp(-20);
};
$("downSpeed").onclick = función(){
Serpiente.speedUp(20);
};
</script>
</cuerpo>
</html>