AI game creator

Click here for free DL of the app version that can save data.

No:52055

280

←

Prev Next

→

Joho da Cobrinha
Developer User19080｜Date and time 24/3/17 13:49:18
Build time 8.535 sec｜Game capacity 2.869KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
<title>Jogo da Cobrinha</title>
<style>
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
    }
    canvas {
        border: 1px solid black;
    }
</style>
</head>
<body>
<canvas id="snakeCanvas" width="400" height="400"></canvas>
<script>
    const canvas = document.getElementById('snakeCanvas');
    const ctx = canvas.getContext('2d');
    
    const box = 20;
    
    let snake = [];
    snake[0] = { x: 10 * box, y: 10 * box };
    
    let food = {
        x: Math.floor(Math.random() * 20) * box,
        y: Math.floor(Math.random() * 20) * box
    };
    
    let score = 0;
    
    let d;
    
    document.addEventListener('keydown', direction);
    
    function direction(event) {
        if (event.keyCode == 37 && d != 'RIGHT') {
            d = 'LEFT';
        } else if (event.keyCode == 38 && d != 'DOWN') {
            d = 'UP';
        } else if (event.keyCode == 39 && d != 'LEFT') {
            d = 'RIGHT';
        } else if (event.keyCode == 40 && d != 'UP') {
            d = 'DOWN';
        }
    }
    
    function collision(head, array) {
        for (let i = 0; i < array.length; i++) {
            if (head.x == array[i].x && head.y == array[i].y) {
                return true;
            }
        }
        return false;
    }
    
    function draw() {
        ctx.fillStyle = 'lightgreen';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
    
        for (let i = 0; i < snake.length; i++) {
            ctx.fillStyle = (i === 0) ? 'green' : 'white';
            ctx.fillRect(snake[i].x, snake[i].y, box, box);
        }
    
        ctx.fillStyle = 'red';
        ctx.fillRect(food.x, food.y, box, box);
    
        let snakeX = snake[0].x;
        let snakeY = snake[0].y;
    
        if (d == 'LEFT') snakeX -= box;
        if (d == 'UP') snakeY -= box;
        if (d == 'RIGHT') snakeX += box;
        if (d == 'DOWN') snakeY += box;
    
        if (snakeX == food.x && snakeY == food.y) {
            score++;
            food = {
                x: Math.floor(Math.random() * 20) * box,
                y: Math.floor(Math.random() * 20) * box
            };
        } else {
            snake.pop();
        }
    
        let newHead = {
            x: snakeX,
            y: snakeY
        };
    
        if (snakeX < 0 || snakeX >= canvas.width || snakeY < 0 || snakeY >= canvas.height || collision(newHead, snake)) {
            clearInterval(game);
            alert('Fim de jogo! Pontuação: ' + score);
            location.reload();
        }
    
        snake.unshift(newHead);
    
        ctx.fillStyle = 'white';
        ctx.font = '24px Arial';
        ctx.fillText('Pontuação: ' + score, box, box);
    }
    
    let game = setInterval(draw, 100);
</script>
</body>
</html>