Ayuda con código

Hola, descargue este código JavaScript del juego Snake pero resulta que está desfasado: no se muestra la serpiente. ¿Me podéis ayudar? Ya cambié algún parámetro que busqué y estaba obsoleto, pero no se por qué no se muestra la serpiente. ?_?

<html>
<head>
<title>Culebra</title>
<style type ="text/css">
  .cul { position: absolute; top: 20; left: 20; width: 20; height: 20; background-color: gray; }
  .tab1 { position: absolute; background-color: #eeeeee; top: 20; left: 25%; width: 500; height: 500; }
</style>
 
<script type="text/javascript">
window.document.onkeydown = tecla;
 
var posy = 0;
var y = 20;
var posx = 0;
var randomx;
var randomy;
var x = 20;
var cola = 1;
var v = 2;
var divi = document.getElementsByTagName('div');
var tempo;
var Tenter = 0;
var randomcom;
 
//FUNCION MOV
function mov() {
    movCulebra();
    document.all.div0.style.top = y = y + posy;
    document.all.div0.style.left = x = x + posx;
    if (y + 'px' == divi[cola].style.top && x + 'px' == divi[cola].style.left) {
        Random();
    }
    if (y / 20 < 0 || y / 20 > 24) {
        fin();
    }
    if (x / 20 < 0 || x / 20 > 24) {
        fin();
    }
    for (i = 2; i < cola - 1; i++) {
        if (y + 'px' == divi[i].style.top && x + 'px' == divi[i].style.left) {
            fin();
        }
    }
}
 
// FUNCION TECLA: EVENT ONKEYDOWN
function tecla() {
    switch (window.event.keyCode) {
        case 13: //ENTER
            if (Tenter == 0) {
                Random();
                tempo = window.setInterval('mov()', 100);
                posx = 20;
                posy = 0;
                Tenter = 2;
            } else if (Tenter == 1) {
                tempo = window.setInterval('mov()', 100);
                Tenter = 2;
            }
            break;
        case 37: //FLECHA IZQUIERDA
            if (posx == 0) {
                posy = 0;
                posx = -20;
            }
            break;
        case 38: //FLECHA ARRIVA
            if (posy == 0) {
                posy = -20;
                posx = 0;
            }
            break;
        case 39: //FLECHA DERECHA
            if (posx == 0) {
                posy = 0;
                posx = 20;
            }
            break;
        case 40: //FLECHA ABAJO
            if (posy == 0) {
                posy = 20;
                posx = 0;
            }
            break;
        case 80: //TECLA P PAUSA
            window.clearInterval(tempo);
            Tenter = 1;
            break;
        case 67: //TECLA C CARGAR
            Random();
            break;
    }
}
 
// FUNCION RANDOM--
function Random() {
    cola = cola + 1;
    randomy = (Math.round(Math.random() * 24));
    randomx = (Math.round(Math.random() * 24));
    document.all.area.insertAdjacentHTML("BeforeEnd", "<div id=div" + cola + " style = 'position:absolute;width:20;height:20;top:" + randomy * 20 + ";left:" + randomx * 20 + ";background-color:black'></div>");
}
 
// FUNCION MOVCULEBRA--
function movCulebra() {
    v = v + 1;
    if (v >= cola) {
        v = 2;
    }
    if (v < cola) {
        divi[v].style.left = x;
        divi[v].style.top = y;
    }
}
 
function fin() {
    alert('Perdiste');
    window.clearInterval(tempo);
}
</script>
</head>
 
<body>
  <div id="area" class="tab1">
    <div id="div0" class="cul"></div>
  </div>
</body>
</html>

Respuestas

He probado el código que muestras y funciona bien. Sólo tienes que darle al <Enter> para empezar a jugar y luego mueves la serpiente con las flechas del teclado.

Lo que sí que había que corregir un poco era el código HTML y CSS de la página. Por ejemplo en el <body> he añadido las comillas para encerrar los valores de los atributos class e id:

<body>
  <div id="area" class="tab1">
    <div id="div0" class="cul"></div>
  </div>
</body>

Por otra parte, el código CSS original era el siguiente:

<style type = text/css>
  .cul { position: absolute; top: 20; left: 20; width: 20; height: 20; background-color=gray }
  .tab1 { position: absolute; background-color: #eeeeee; top: 20; left: 25%; width: 500;  height: 500 }
</style>

Lo primero era corregir la etiqueta <style> de apertura:

<style type="text/css">

Lo segundo era corregir el estilo background-color=gray de la clase .cul para cambiarlo por background-color: gray.

He actualizado el contenido original de tu pregunta para mostrar el código completo tal y como me funciona bien a mí.

@javiereguiluz

2 marzo 2015, 12:58

Muchas gracias, era eso!

@sinergya

2 marzo 2015, 13:07