Código de JavaScript - Juego de la serpiente canvas(beta)

Imágen de perfil
Val: 597
Bronce
Ha disminuido 1 puesto en JavaScript (en relación al último mes)
Gráfica de JavaScript

Juego de la serpiente canvas(beta)gráfica de visualizaciones


JavaScript

Actualizado el 17 de Marzo del 2018 por Humberto (Publicado el 11 de Marzo del 2018)
1.431 visualizaciones desde el 11 de Marzo del 2018
Juego de la serpiente, por ahora solo se anima el cubo

descarga

Requerimientos

Navegador de Internet que soporte canvas

Si es de tu ayuda y quieres aprender mas visita:
https://www.youtube.com/channel/UCWSKQyNDhvBVrddHIhzx5Zg?view_as=subscriber

0.5

Publicado el 11 de Marzo del 2018gráfica de visualizaciones de la versión: 0.5
233 visualizaciones desde el 11 de Marzo del 2018
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script>
        let cubo = {
            y: 0,
            x: 0,
            width: 10,
            height: 10
        };
        let pause = false;
        let direccion;
window.onload = function(){
    const c = document.getElementsByTagName('canvas')[0],
        ctx = c.getContext("2d");
 
    function actualizar(){
        limpiar();
        ctx.fillRect(cubo.x,cubo.y,cubo.width,cubo.height);
        //setInterval(actualizar(),50);
    }
    function limpiar() {
        ctx.clearRect(0,0,c.width,c.height);
    }
    window.onkeydown = function (event) {
        //console.log(event.keyCode);
        var x = event.which || event.keyCode;
        switch (x){
            case 13://enter
            if(!pause){
                clearTimeout(tiempo);
                pause = true;
            }
            else if (pause) {
                tiempo = setInterval(tiempo, 100);
                pause = false;
            }
                break;
            case 37://izquierda
                direccion="derecha";
                break;
            case 38://arriba
                direccion="arriba";
                break;
            case 39:// derecha
                direccion="izquierda";
                break;
            case 40://abajo
                direccion="abajo";
                break;
        }
        borde();
    };
    function borde(){
        if (cubo.x > c.width) {
            cubo.x = 0;
        }
        if (cubo.x < 0) {
            cubo.x = c.width;
        }
        if (cubo.y < 0) {
            cubo.y = c.height;
        }
        if (cubo.y > c.height) {
            cubo.y = 0;
        }
    }
    function ubicacion() {
        switch (direccion) {
            case 'derecha':
                cubo.x-=10;
                break;
            case 'arriba':
                cubo.y-=10;
                break;
            case 'izquierda':
                cubo.x+=10;
                break;
            case 'abajo':
                cubo.y+=10;
                break;
        }
    }
    var timeFrame = window.setInterval(tiempo, 100);
    function tiempo() {
        if(pause == false){
            ubicacion()
            actualizar();
            borde();
        }
    }
}
    </script>
    <body>
<canvas id="micanvas">
</canvas>
</body>
</head>
</html>



Comentarios sobre la versión: 0.5 (0)


No hay comentarios
 

Comentar la versión: 0.5

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios
Es necesario revisar y aceptar las políticas de privacidad

0.8

Actualizado el 22 de Marzo del 2018 (Publicado el 14 de Marzo del 2018)gráfica de visualizaciones de la versión: 0.8
1.199 visualizaciones desde el 14 de Marzo del 2018
http://lwp-l.com/s4479