<!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>
Crear cuenta
Comentarios sobre la versión: 0.5 (0)
No hay comentarios