Jogo da cobrinha
Autor: Porpps | Publicado: 2013-07-09T08:28:00-07:00




#controles .direcional{
width:50px;
height:50px;
margin-right:10px;
}












Mostrar/Esconder Controles
0 pontos

 Direcionais: move a cobra.
 Espaço: reiniciar.
 Clique em 2 pontos diferentes para desenhar um obstáculo.



  // shim layer with setTimeout fallback
  window.requestAnimFrame = (function(){
    return  window.requestAnimationFrame       ||
      window.webkitRequestAnimationFrame ||
      window.mozRequestAnimationFrame    ||
      function( callback ){
     window.setTimeout(callback, 1000 / 60);
      };
  })();
  
 document.body.onkeydown = function(event){
  event = event || window.event;
  var keycode = event.charCode || event.keyCode;
  return moveSnake(keycode);
 }
 
 document.getElementById("canvas").onclick = function(event){
  event = event || window.event;
  criarPontos(event.offsetX,event.offsetY);
  return false;
 }
 
 var toogle = false;
 function toogleCtr(){
  if(toogle)document.getElementById("controles").style.display = "none";
  else document.getElementById("controles").style.display = "block";
  toogle = !toogle;
 }
 function customRandom(ini,fim){
   return Math.random()*(fim-ini)+ini;
 }
 
 function criarPontos(x,y){
  if(ini_reta.length==0)
   ini_reta = [x,y];
  else{
   if(x==ini_reta[0])return;
   
   if(x<ini_reta[0]){
    var tmp = x;
    x = ini_reta[0];
    ini_reta[0] = tmp;
    tmp = y;
    y = ini_reta[1];
    ini_reta[1] = tmp;
   }
   
   var a = (y-ini_reta[1])/(x-ini_reta[0]);
   var b = y-a*x;
   for(var i=ini_reta[0];i<=x;i+=0.01){
    points[parseInt(i)+"x"+parseInt(a*i+b)] = true;
   }   
   var len_obs = obstaculos.length;
   obstaculos[len_obs]=[];
   obstaculos[len_obs]["xi"] = ini_reta[0];
   obstaculos[len_obs]["yi"] = ini_reta[1];
   obstaculos[len_obs]["xf"] = x;
   obstaculos[len_obs]["yf"] = y;
   ini_reta = [];
  } 
 }
 
 function desenhaObstaculos(){
  var len = obstaculos.length;
  context.strokeStyle = cor_obstaculo;
  for(var i=0;i<len;i++){
   context.moveTo(obstaculos[i]["xi"],obstaculos[i]["yi"]);
   context.lineTo(obstaculos[i]["xf"],obstaculos[i]["yf"]);
  }
  context.stroke();
 }
 
 function moveSnake(keycode){
  switch(keycode){
   case 32:initialize();
   case 37:if(head_dir!="D")head_dir="E";break;
   case 38:if(head_dir!="B")head_dir="C";break;
   case 39:if(head_dir!="E")head_dir="D";break;
   case 40:if(head_dir!="C")head_dir="B";break;
   default: return true;
  }
  return false;
 }

 var PixelCobra = function(x,y,dir){
  this.x = x;
  this.y = y;
  this.dir = dir;
 }

 var SIZE_INI = 20;
 var CANVAS_WIDTH = 300;
 var CANVAS_HEIGHT = 300;
 var TAM_PIXEL = 5;
 var DIR_INI = "D";
 var ESPACO = 5;
 var VELOCIDADE = 2;
 var ENGORDA = 2;
 
 var canvas = document.getElementById("canvas");
 var context = canvas.getContext("2d");
 canvas.width = CANVAS_WIDTH;
 canvas.height = CANVAS_HEIGHT;

 var cobra = [];
 var points = [];
 var ini_reta = [];
 var obstaculos = [];
 var head_dir = DIR_INI;
 var colidiu = false;
 var cor_normal = "white";
 var cor_derrota = "red";
 var fundo_normal = "rgb(200,200,200)";
 var fundo_derrota = "rgb(100,100,100)";
 var cor_obstaculo = "blue";
 var itemX = parseInt(customRandom(TAM_PIXEL,CANVAS_WIDTH-TAM_PIXEL));
 var itemY = parseInt(customRandom(TAM_PIXEL,CANVAS_HEIGHT-TAM_PIXEL));
 
 function generateCobra(tail){
   cobra[0] = tail;
   var j = 1;
   var SIZE_Y = 0;
   for(var i=tail.x+1;i<=tail.x+SIZE_INI;i++){
    cobra[j]=new PixelCobra(i,tail.y,DIR_INI);
    j++;
   }
 }
 
 function desenhaCobra(){
  var len = cobra.length;
  var points_cobra = [];

  context.beginPath();  
  for(var i=0;i<len;i++){
   var pixel_cobra = cobra[i];
   if(i%(TAM_PIXEL+ESPACO)==0){
    context.fillStyle = colidiu?cor_derrota:cor_normal;
    context.fillRect( pixel_cobra.x,pixel_cobra.y,TAM_PIXEL,TAM_PIXEL );
   }
   
   if(colidiu)continue;
   
   if(points_cobra[pixel_cobra.x+"x"+pixel_cobra.y]||points[pixel_cobra.x+"x"+pixel_cobra.y]){
    colidiu = true;
   }else{ 
    points_cobra[pixel_cobra.x+"x"+pixel_cobra.y] = true;
   }
   
   if(pixel_cobra.x0&&pixel_cobra.y>0){   
    switch(pixel_cobra.dir){
     case "D":pixel_cobra.x++;break;
     case "E":pixel_cobra.x--;break;
     case "B":pixel_cobra.y++;break;
     case "C":pixel_cobra.y--;break;
    }
   }else{
    if(pixel_cobra.x>=CANVAS_WIDTH)pixel_cobra.x-=CANVAS_WIDTH-1;
    else
    if(pixel_cobra.x<=0)pixel_cobra.x+=CANVAS_WIDTH-1;
    
    if(pixel_cobra.y>=CANVAS_HEIGHT)pixel_cobra.y-=CANVAS_HEIGHT-1;
    else
    if(pixel_cobra.y<=0)pixel_cobra.y+=CANVAS_HEIGHT-1;
   }
   if(i<len-1){
    pixel_cobra.dir = cobra[i+1].dir;
   }else{
    cobra[len-1].dir = head_dir;
   }
  }
  context.fill();
  verifica_ponto();
 }
 
 function verifica_ponto(){
  var len = cobra.length;
  if(Math.abs(cobra[len-1].x-itemX)<=TAM_PIXEL&&Math.abs(cobra[len-1].y-itemY)<=TAM_PIXEL){
   for(var i=len;i<len+ENGORDA*(TAM_PIXEL+ESPACO);i++){
    switch(cobra[i-1].dir){
     case "D":cobra[i] = new PixelCobra(cobra[i-1].x+1,cobra[i-1].y,cobra[i-1].dir);break;
     case "E":cobra[i] = new PixelCobra(cobra[i-1].x-1,cobra[i-1].y,cobra[i-1].dir);break;
     case "B":cobra[i] = new PixelCobra(cobra[i-1].x,cobra[i-1].y+1,cobra[i-1].dir);break;
     case "C":cobra[i] = new PixelCobra(cobra[i-1].x,cobra[i-1].y-1,cobra[i-1].dir);break;
    }
   }
   document.getElementById("score").innerHTML = (cobra.length-SIZE_INI)+" pontos";
   itemX = parseInt(customRandom(TAM_PIXEL,CANVAS_WIDTH-TAM_PIXEL));
   itemY = parseInt(customRandom(TAM_PIXEL,CANVAS_HEIGHT-TAM_PIXEL));
  }
  context.fillStyle = colidiu?cor_derrota:cor_normal;
  context.fillRect( itemX,itemY,TAM_PIXEL,TAM_PIXEL );
  context.fill();
 }
 function clearCanvas(){
  context.beginPath();
  context.fillStyle = colidiu?fundo_derrota:fundo_normal;   
  context.fillRect( 0, 0, CANVAS_WIDTH, CANVAS_HEIGHT );
  context.fill();   
 }
 function initialize(){
  cobra = [];
  points = [];
  ini_reta = [];
  obstaculos = [];
  head_dir = DIR_INI;
  colidiu = false;
  itemX = parseInt(customRandom(TAM_PIXEL,CANVAS_WIDTH-TAM_PIXEL));
  itemY = parseInt(customRandom(TAM_PIXEL,CANVAS_HEIGHT-TAM_PIXEL)); 
  generateCobra(new PixelCobra(50,100,DIR_INI));
  document.getElementById("score").innerHTML = (cobra.length-SIZE_INI)+" pontos";
 }
 initialize();
 (function animloop(){
  clearCanvas();
  desenhaObstaculos();
   requestAnimFrame(animloop);
   for(var i=0;i<VELOCIDADE;i++)desenhaCobra();   
 })();