Saludos a todos! mi nombre es marlon soy de honduras, soy estudiante de informatica y es un placer ser parte de esta comunidad, entre aqui porque estoy muy interesado en aprender javascipt pero no para cualquier pagina web, mi interes principal es crear un juego rpg en linea (estilo pokemon para gameboy color pero mas sencillo) en java script y quiero que me digan que tan posible es realizar esta tarea mi idea no es muy compleja basta con una imagen que cambie de animacion al presionar las teclas(las flechas del teclado) y dependiendo de que tecla presione aumentarle 5 pixeles a la posicion tambien necesitare una funcion que detecte las colisiones con otras imagenes. hasta ahora solo he logrado mover la imagen por la pantalla con un codigo que no entiendo bien y que saque de internet(lo dejare adjunto) si alguien puede proporcionarme las funciones que necesito(cambiar de pocision la imagen, saber la pocision actual de la imagen, cambiar de imagen y algo que detecte si 2 imagenes comparten pocision) estare muy agradecido, tambien comenten sobre mi proyecto y cualquier aporte es bienvenido. muchas gracias :)
Código:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
*{ margin:0; padding:0;}
#box{ width:50px; height:80px; position:absolute; background:rgb(0,0,0,.5)}
</style>
<script>
function cancelEvent(e){
if(e && e.preventDefault)
e.preventDefault();
else if(window.event)
window.event.returnValue=false;
}
function $(x){return document.getElementById(x);}
var keys=[];
keys['up'] = false;
keys['down'] = false;
keys['left'] = false;
keys['right'] = false;
function handleKeyDown(e) {
cancelEvent(e);
e=e || event;
var code=e.keyCode || e.which;
switch (code) {
case 38:
case 87:
keys['up'] = true;
break;
case 40:
case 83:
keys['down'] = true;
break;
case 39:
case 68:
keys['right'] = true;
break;
case 37:
case 65:
keys['left'] = true;
break;
}
}
function handleKeyUp(e) {
cancelEvent(e);
e=e || event;
var code=e.keyCode || e.which;
switch (code) {
case 38:
keys['up'] = false;
break;
case 40:
keys['down'] = false;
break;
case 39:
keys['right'] = false;
break;
case 37:
keys['left'] = false;
break;
}
}
function update(){
if (keys['left']) {
$('box').style.left=parseInt($('box').style.left ) -5+'px';
}
if (keys['right']) {
$('box').style.left=parseInt($('box').style.left) +5+'px';
}
if (keys['up']) {
$('box').style.top=parseInt($('box').style.top) -5+'px';
}
if (keys['down']) {
document.getElementById('box').src="recursos\imagenes\personaje\personajepaso1.png";
$('box').style.top=parseInt($('box').style.top) +5+'px';
}
setTimeout(update,80);
}
onload=function(){
document.onkeydown=handleKeyDown;
document.onkeyup=handleKeyUp;
$('box').style.left=$('box').style.top=0;
update();
}
</script>
</head>
<body>
<IMG id="box" SRC="recursos\imagenes\personaje\personajedepie.png" ALT="personaje">
</body>
</html>