Juego "Snake" en Javascript.

  • Autor Autor zcriptz
  • Fecha de inicio Fecha de inicio
zcriptz

zcriptz

1
Ómicron
Programador
Verificación en dos pasos activada
Verificado por Whatsapp
Suscripción a IA
Lo hice de cero, todavía no le hice para que colisione con ella misma, coma, vaya agrandándose y haga caca xD.

Si colisiona con las "paredes".
Hay un bug que hace que se achique la serpiente al moverse mucho.

Cuando lo termine lo actualizo.

Código:
Insertar CODE, HTML o PHP:
<script>
    window.onload = function(){
        snake = document.getElementById('snakeDiv');
        snake.direction = 'down';
        snake.title = 'first';
        speed = 1;
        loseMsg = ['Perdiste :('];
        keyCodes = new Array;
        keyCodes[37] = moveLeft;
        keyCodes[38] = moveUp;
        keyCodes[39] = moveRight;
        keyCodes[40] = moveDown;
        moveInterval = new Array;
        snakeTmp = new Array;
        document.body.style.display = '';
    }
    function getStyle(e, s){
        if(e.style[s])
            return Number(e.style[s].replace('px', ''))
        ;else
            return 0
        ;
    }
    function checkLimits(n){
        if(n)
            return getStyle(snake, 'top') < 0 || getStyle(snake, 'top') >= document.body.offsetHeight-snake.offsetHeight
        ;else
            return getStyle(snake, 'left') < 0 || getStyle(snake, 'left') >= document.body.offsetWidth-snake.offsetWidth
        ;
    }

    function topMove(e, s){
        if(checkLimits(1))
            lose(0)
        ;else
            e.style.top = (getStyle(e, 'top')+s)+'px',
            snakeMove = setTimeout(
                function(){
                    topMove(e, s);
                },
            speed)
        ;
    }
   
    function leftMove(e, s){
        if(checkLimits(0))
            lose(0)
        ;else
            e.style.left = (getStyle(e, 'left')+s)+'px',
            snakeMove = setTimeout(
                function(){
                    leftMove(e, s);
                },
            speed)
        ;
    }

    function continueMove(s){
        if(s.direction == 'down')
            topMove(s, 1)
        ;else if(s.direction == 'up')
            topMove(s, -1)
        ;else if(s.direction == 'right')
            leftMove(s, 1)
        ;else if(s.direction == 'left')
            leftMove(s, -1)
        ;
    }
   
    function shortTail(tail, s){
        if(tail.direction == 'up'){
            tail.style.height = (getStyle(tail, 'height')-1)+'px';
            tail.style.top = (getStyle(tail, 'top')+1)+'px';
        }else if(tail.direction == 'down'){
            if(tail.title == 'first'){
                tail.style.top = (getStyle(tail, 'top')+1)+'px';
                startShort = 0
            }
            tail.style.height = (getStyle(tail, 'height')-1)+'px';
        }else{
            if(tail.direction == 'left' || snake.direction == 'right'){
                tail.style.width = (getStyle(tail, 'width')-1)+'px';
                if(tail.direction == 'left')
                    tail.style.left = (getStyle(tail, 'left')+1)+'px'
                ;
            }else
                tail.style.width = (getStyle(tail, 'width')-1)+'px'
            ;
        }
        if((tail.direction == 'down' || tail.direction == 'up') && tail.offsetHeight <= s.offsetHeight){
            document.body.removeChild(tail);
            continueMove(s);
        }else if((tail.direction == 'right' || tail.direction == 'left') && tail.offsetWidth <= s.offsetWidth){
            document.body.removeChild(tail);
            continueMove(s);
        }else{
            if(s.direction == 'down'){
                s.style.height = (getStyle(s, 'height')+1)+'px';
            }else if(s.direction == 'up'){
                s.style.height = (getStyle(s, 'height')+1)+'px';
                s.style.top = (getStyle(s, 'top')-1)+'px';
            }else if(s.direction == 'right')
                s.style.width = (getStyle(s, 'width')+1)+'px'
            ;else if(s.direction == 'left'){
                s.style.width = (getStyle(s, 'width')+1)+'px';
                s.style.left = (getStyle(s, 'left')-1)+'px';
            }
            if(tail.offsetTop)
                setTimeout(
                    function(){
                            shortTail(tail, s);
                    },
                speed)
            ;
        }
    }


    function moveDown(e){
        if(snake.direction == 'left' || snake.direction == 'right' || snake.title == 'first'){
            snake2 = snake.cloneNode();
            snake2.title = '';
            if(snake.title != 'first') snake2.style.width = snake.style.height;
            if(snake.direction == 'right')
                snake2.style.left = snake.offsetWidth-getStyle(snake, 'height')+getStyle(snake, 'left')
            ;
            snake.className = 'tail';
            snake2.direction = 'down';
            shortTail(snake, snake2);
            snake = snake2;
            document.body.appendChild(snake2);
        }
    }
   
    function moveUp(e){
        if(snake.direction == 'left' || snake.direction == 'right'){
            snake2 = snake.cloneNode();
            snake2.title = '';
            snake2.style.width = snake.style.height;
            if(snake.direction == 'right')
                snake2.style.left = snake.offsetWidth-getStyle(snake, 'height')+getStyle(snake, 'left')
            ;
            snake.className = 'tail';
            snake2.direction = 'up';
            shortTail(snake, snake2);
            snake = snake2;
            document.body.appendChild(snake2);
        }
    }
   
   
    function moveRight(e){
        if(snake.direction == 'up' || snake.direction == 'down'){
            snake2 = snake.cloneNode();
            snake2.title = '';
            snake2.style.height = snake.style.width;
            if(snake.direction == 'down')
                snake2.style.top = snake.offsetHeight-getStyle(snake, 'width')+getStyle(snake, 'top')
            ;
            snake.className = 'tail';
            snake2.direction = 'right';
            shortTail(snake, snake2);
            snake = snake2;
            document.body.appendChild(snake2);
        }
    }
   
    function moveLeft(e){
        if(snake.direction == 'up' || snake.direction == 'down'){
            snake2 = snake.cloneNode();
            snake2.title = '';
            snake2.style.height = snake.style.width;
            if(snake.direction == 'down')
                snake2.style.top = snake.offsetHeight-getStyle(snake, 'width')+getStyle(snake, 'top')
            ;
            snake.className = 'tail';
            snake2.direction = 'left';
            shortTail(snake, snake2);
            snake = snake2;
            document.body.appendChild(snake2);
           
        }
    }
   
    function setDirection(d){
        if(keyCodes[d])
            keyCodes[d](snake)
        ;
    }

    function keyDown(){
        setDirection(event.keyCode);
    }
   
    function lose(m){
        if(setDirection() != 'lose')
            alert(loseMsg[m]),
            setDirection = function(){
                return 'lose';
            }       
        ;
    }
   
    function start(f){
        document.body.onkeydown = keyDown;
        f.style.display = 'none';
        setDirection(40);
        return false
    }
   
</script>
<body style="display:none;color:white;margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:black">
    <form onsubmit="return start(this)">
        Velocidad:
        <select onchange="speed = this.value">
                <option value=1>R&aacute;pida</option>
                <option value=5>Media</option>
                <option value=10>Lenta</option>
                <option value=20>Muy lenta</option>
        </select><br>
        Largo:
        <input type="button" onclick="snake.style.height = getStyle(snake, 'height')-5" value="Achicar"><input type="button" onclick="snake.style.height = getStyle(snake, 'height')+5" value="Agrandar"><br>
        Ancho:<input type="button" onclick="snake.style.width = getStyle(snake, 'width')-1" value="Achicar"><input type="button" onclick="snake.style.width = getStyle(snake, 'width')+1" value="Agrandar"><br>
        <br>
        <input type="submit" value="Comenzar">
    </form>
    <div id="snakeDiv" style="background:white;position: absolute; width:20px; height: 200px; top:0px;left:500px;border-radius:20px"></div>
</body>

Demo: Snake
 
Última edición:
Guardar post, chale es un viejo amigo el snake.
 
Atrás
Arriba