- Pide Ya Lo Que Quieras


<html>
< cabeza >
< título > Lienzo espacial </ título >
</cabeza>
< cuerpo >
    < h1 > Juego de nave espacial con Canvas </ h1 >
    < lienzo  id = " espacioCanvas " ancho = " 300 " alto = " 300 " >
    </ lienzo >
 </ cuerpo >
</html>
< guión >
lienzo  =  documento.getElementById ( " spaceCanvas " ) ;
ctx  =  lienzo . getContext ( "2d" ) ;

// definimos variables para almacenar imágenes que usaremos.
var  fondo antiguo ;
var  nuevoFondo ;
var  barco ;

// definimos e inicializamos variables para coordenadas.
var  viejoX  =  0 ; 
var  viejoY  =  0 ; 
var  nuevoX  =  0 ; 
var  newY  =  0 ; 

fondo ( ) ;
nave ( ) ;
setInterval ( bucle de juego ,  20 ) ;
documento .addEventListener ( " touchstart " , moverNave , verdadero ) ;  

función  fondo ( )  {
    // Primero lo pintamos negro
    ctx .fillStyle = "negro "  ; 
    ctx .rect ( 0 , 0 , 300 , 300 ) ;   
    ctx .fill ( ) ;

    // Dibujemos 100 estrellas
    ctx .fillStyle = "blanco "  ; 
    para  ( i  =  0 ;  i  <=  100 ;  i ++ )  {
        // Generamos coordenadas al azar entre 30 y 299
        var  x  =  30  +  Math.piso ( Math.random ( ) ) * 269 ) ;  
        var  y  =  30  +  Math.piso ( Math.random ( ) * 269 ) ;  

        // Dibujamos la estrella
        ctx .beginPath ( ) ;
        ctx . arc ( x ,  y ,  3 ,  0 ,  Math . PI  *  2 ) ;
        ctx .closePath ( ) ;
        ctx .fill ( ) ;
    }
    // inicializamos la imagen de fondo con el estado inicial
    nuevoFondo  =  ctx.getImageData ( 0,0,30,30 ) ;   
    fondoAnterior  =  fondoNuevo ;
}

función  nave ( )  {
    // Dibujamos la nave usando curbas de bezier.
    // Primero pintemos el fuselaje en azul
    ctx .fillStyle = "rgb(0, 0, 255) " ;  
    ctx .beginPath ( ) ;
    ctx . moveTo ( 28.4 ,  16.9 ) ;
    ctx .bezierCurveTo ( 28.4 , 19.7 , 22.9 , 22.0 , 16.0 , 22.0 ) ;     
    ctx .bezierCurveTo ( 9.1 , 22.0 , 3.6 , 19.7 , 3.6 , 16.9 ) ;     
    ctx .bezierCurveTo ( 3.6 , 14.1 , 9.1 , 11.8 , 16.0 , 11.8 ) ;     
    ctx .bezierCurveTo ( 22.9 , 11.8 , 28.4 , 14.1 , 28.4 , 16.9 ) ;     
    ctx .closePath ( ) ;
    ctx .fill ( ) ;

    // ahora la cabina en rojo
    ctx .fillStyle = "rgb(255, 0, 0) " ;  
    ctx .beginPath ( ) ;
    ctx . moveTo ( 22.3 ,  12.0 ) ;
    ctx .bezierCurveTo ( 22.3 , 13.3 , 19.4 , 14.3 , 15.9 , 14.3 ) ;     
    ctx .bezierCurveTo ( 12.4 , 14.3 , 9.6 , 13.3 , 9.6 , 12.0 ) ;     
    ctx .bezierCurveTo ( 9.6 , 10.8 , 12.4 , 9.7 , 15.9 , 9.7 ) ;     
    ctx .bezierCurveTo ( 19.4 , 9.7 , 22.3 , 10.8 , 22.3 , 12.0 ) ;     
    ctx .closePath ( ) ;
    ctx .fill ( ) ;

    // guardamos la imagen de la nave
    barco  =  ctx .getImageData ( 0 , 0 , 30 , 30 ) ;    
}

función  gameLoop ( )  {
    ctx . putImageData ( antiguoFondo ,  viejoX ,  viejoY ) ;
    ctx .putImageData ( barco , nuevoX , nuevoY ) ;  
}

función  moverNave  ( evento )  { 
    evento . preventDefault ( ) ;  //Para evitar el comportamiento predeterminado
    viejoX  =  nuevoX ;
    viejoY  =  nuevoY ;
    fondoAnterior  =  fondoNuevo ;
    ctx . putImageData ( antiguoFondo ,  viejoX , viejoY ) ;
    var  eventoTouch ;
    eventTouch  =  evento .changedTouches [ 0 ] ; 
    nuevoX  =  eventoTouch .pageX - 15 ;   
    newY  =  eventTouch . páginaY  -  60 ;
    nuevoFondo  =  ctx . getImageData ( nuevaX ,  nuevaY ,  30 ,  30 ) ;
}
</script>
Cart

Cart
