A versão completa do JavaScript Snake é totalmente anotada e orientada a objetos
Copie o código do código da seguinte forma:
<html>
<cabeça>
<title>Serpente v2.4</title>
<estilo>
corpo{
tamanho da fonte: 9pt;
}
mesa{
colapso da fronteira: colapso;
borda:sólido #333 1px;
}
td{
altura: 10px;
largura: 10px;
tamanho da fonte: 0px;
}
.preenchido{
cor de fundo:azul;
}
</estilo>
</head>
<roteiro>
função $(id){retornar documento.getElementById(id);}
/********************************************** ***** *************
* cobra javascript v2.4 <br />
* v2.4 corrigiu a cor do corpo da cobra para se mover conforme a cobra avança
************************************************** *************/
//cobras gananciosas
var Cobra = {
tbl: nulo,
/**
* corpo: corpo da cobra, cada seção da cobra é colocada na matriz,
* Estrutura de dados {x:x0, y:y0, cor:color0},
* x, y representa coordenadas, cor representa cor
**/
corpo: [],
//A direção atual do movimento, os valores 0, 1, 2, 3, representam respectivamente para cima, direita, baixo, esquerda, pressione as teclas de direção do teclado para alterá-la
direção: 0,
//temporizador
temporizador: nulo,
//velocidade
velocidade: 250,
//Se foi pausado
pausado: verdadeiro,
//número de linhas
contagem de linhas: 30,
//Número de colunas
contagem de col: 30,
//inicialização
inicialização: função(){
var cores = ['vermelho','laranja','amarelo','verde','azul','roxo','#ccc'];
isto.tbl = $("principal");
var x = 0;
var y = 0;
var colorIndex = 0;
//Gera a direção inicial do movimento
esta.direção = Math.floor(Math.random()*4);
//Constrói tabela
for(var linha=0;linha<this.rowCount;linha++){
var tr=this.tbl.insertRow(-1);
for(var col=0;col<this.colCount;col++) {
var td=tr.insertCell(-1);
}
}
//Gera 20 nós soltos
for(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);
if(!this.isCellFilled(x,y)){
this.tbl.rows[y].cells[x].style.backgroundColor = cores[colorIndex];
}
}
//gera cabeça de cobra
enquanto(verdadeiro){
x = Math.floor(Math.random()*this.colCount);
y = Math.floor(Math.random()*this.rowCount);
if(!this.isCellFilled(x,y)){
this.tbl.rows[y].cells[x].style.backgroundColor = "preto";
this.body.push({x:x,y:y,cor:'preto'});
quebrar;
}
}
isto.pausado = verdadeiro;
//Adiciona evento de teclado
document.onkeydown= função(e){
if (!e)e=window.event;
switch(e.keyCode | e.qual | e.charCode){
caso 13: {
if(Snake.pausado){
Cobra.move();
Cobra.pausado = falso;
}
outro{
//Se não houver pausa, pare de se mover
Cobra.pause();
Snake.paused = verdadeiro;
}
quebrar;
}
caso 37:{//esquerda
//Impede a cobra de andar para trás
if(Snake.direção==1){
quebrar;
}
Cobra.direção = 3;
quebrar;
}
caso 38:{//acima
//As teclas de atalho funcionam aqui
if(event.ctrlKey){
Snake.speedUp(-20);
quebrar;
}
if(Snake.direction==2){//Evita que a cobra ande para trás
quebrar;
}
Serpente.direção = 0;
quebrar;
}
caso 39:{//certo
if(Snake.direction==3){//Evita que a cobra ande para trás
quebrar;
}
Serpente.direção = 1;
quebrar;
}
caso 40:{//para baixo
if(event.ctrlKey){
Snake.speedUp(20);
quebrar;
}
if(Snake.direction==0){//Evita que a cobra ande para trás
quebrar;
}
Cobra.direção = 2;
quebrar;
}
}
}
},
//mover
mover: função(){
this.timer = setInterval(function(){
Cobra.erase();
Snake.moveOneStep();
Cobra.paint();
}, this.speed);
},
//Move uma seção do corpo
moveOneStep: function(){
if(this.checkNextStep()==-1){
clearInterval(this.timer);
alert("Fim de jogo!/nPressione Reiniciar para continuar.");
retornar;
}
if(this.checkNextStep()==1){
var _ponto = this.getNextPos();
var _x = _ponto.x;
var _y = _ponto.y;
var _color = this.getColor(_x,_y);
this.body.unshift({x:_x,y:_y,cor:_color});
//Porque um alimento é consumido, outro alimento é gerado
this.generateDood();
retornar;
}
//janela.status = this.toString();
var ponto = this.getNextPos();
//Mantém a cor da primeira seção
var cor = this.body[0].color;
//A cor avança
for(var i=0; i<this.body.length-1; i++){
this.body[i].color = this.body[i+1].color;
}
//Subtraia uma seção da cauda da cobra e adicione uma seção à cauda da cobra para mostrar o efeito da cobra avançando.
this.body.pop();
this.body.unshift({x:ponto.x,y:ponto.y,cor:cor});
//janela.status = this.toString();
},
//Explore para onde ir em seguida
pausa: função(){
clearInterval(Snake.timer);
this.paint();
},
getNextPos: função(){
var x = this.body[0].x;
var y = this.body[0].y;
var cor = this.body[0].color;
//acima
if(esta.direção==0){
você--;
}
//Para a direita
senão if(this.direction==1){
x++;
}
//abaixo
senão if(this.direction==2){
y++;
}
//esquerda
outro{
x--;
}
//Retorna uma coordenada
retornar {x:x,y:y};
},
//Verifique qual é o próximo passo para avançar
checkNextStep: função(){
var ponto = this.getNextPos();
var x = ponto.x;
var y = ponto.y;
if(x<0||x>=this.colCount||y<0||y>=this.rowCount){
return -1;//Quando o limite é tocado, o jogo termina
}
for(var i=0; i<this.body.length; i++){
if(este.corpo[i].x==x&&este.corpo[i].y==y){
return -1;//Quando ele toca seu próprio corpo, o jogo termina
}
}
if(this.isCellFilled(x,y)){
return 1;//Há algo
}
return 0; //abre espaço
},
//Apaga o corpo da cobra
apagar: function(){
for(var i=0; i<this.body.length; i++){
this.eraseDot(this.body[i].x, this.body[i].y);
}
},
//Desenhe o corpo da cobra
pintar: função(){
for(var i=0; i<this.body.length; i++){
this.paintDot(this.body[i].x, this.body[i].y,this.body[i].color);
}
},
//Apaga uma seção
apagarDot: função(x,y){
this.tbl.rows[y].cells[x].style.backgroundColor = "";
},
paintDot: function(x,y,cor){
this.tbl.rows[y].cells[x].style.backgroundColor = cor;
},
//Obtém a cor em uma coordenada
getCor: função(x,y){
retorne this.tbl.rows[y].cells[x].style.backgroundColor;
},
//para depuração
toString: função(){
varstr = "";
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 + " - ";
}
retornar string;
},
//Verifica se um ponto de coordenada está preenchido
isCellFilled: função(x,y){
if(this.tbl.rows[y].cells[x].style.backgroundColor == ""){
retornar falso;
}
retornar verdadeiro;
},
//reiniciar
reiniciar: função(){
if(este.temporizador){
clearInterval(this.timer);
}
for(var i=0; i<this.rowCount;i++){
this.tbl.deleteRow(0);
}
este.corpo = [];
this.init();
esta.velocidade = 250;
},
//acelerar
acelerar: função(tempo){
if(!this.pausado){
if(this.velocidade+tempo<10||esta.velocidade+tempo>2000){
retornar;
}
this.speed +=tempo;
this.pause();
this.move();
}
},
//Produzir alimentos.
gerarDood: function(){
var cores = ['vermelho','laranja','amarelo','verde','azul','roxo','#ccc'];
var x = Math.floor(Math.random()*this.colCount);
var y = Math.floor(Math.random()*this.rowCount);
var colorIndex = Math.floor(Math.random()*7);
if(!this.isCellFilled(x,y)){
this.tbl.rows[y].cells[x].style.backgroundColor = cores[colorIndex];
}
}
};
</script>
<body onload="Snake.init();">
/********************************************** *****************<br />
* cobra javascript v2.4<br />
************************************************** *************/<br />
<table id="main" cellpacing="0" cellpadding="0"></table>
<input type="button" id="btn" value="Iniciar/Pausar" />Clique no botão esquerdo ou pressione Enter para iniciar/pausar o jogo<br />
<input type="button" id="reset" value="Recomeçar" /><br />
<input type="button" id="upSpeed" value="Accelerate" />Clique no botão esquerdo ou pressione Ctrl + ↑ para acelerar<br />
<input type="button" id="downSpeed" value="Slow down" />Clique no botão esquerdo ou pressione Ctrl + ↓ para desacelerar
<roteiro>
$('btn').onclick = function(){
if(Snake.pausado){
Cobra.move();
Cobra.pausado = falso;
}
outro{
Cobra.pause();
Snake.paused = verdadeiro;
}
};
$("redefinir").onclick = function(){
Snake.restart();
this.blur();
};
$("upSpeed").onclick = function(){
Snake.speedUp(-20);
};
$("downSpeed").onclick = function(){
Snake.speedUp(20);
};
</script>
</body>
</html>