slither.io Controle por setas's game

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

No:42315

←

Prev Next

→

slither.io Controle por setas
Developer User18853｜Date and time 24/2/11 10:55:43
Build time 17.116 sec｜Game capacity 6.03KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Slither.io</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="500" height="500"></canvas>

// Objeto Snake
        function Snake(body) {
            this.body = body;
            this.direction = "right";
            this.nextDirection = "right";
        }

// Função para criar a cobra inicialmente
        function createSnake() {
            var body = [];
            for (var i = 4; i >= 0; i--) {
                body.push({ x: i, y: 0 });
            }
            return new Snake(body);
        }

// Desenhar a cobra no canvas
        function drawSnake() {
            for (var i = 0; i < snake.body.length; i++) {
                drawBlock(snake.body[i]);
            }
        }

// Atualizar posição da cobra e demais elementos do jogo
        function update() {
            context.clearRect(0, 0, canvas.width, canvas.height);
            drawScore();
            moveSnake();
            drawSnake();
            drawApple();

if (isGameOver()) {
                gameOver();
            }
        }

// Movimentar a cobra
        function moveSnake() {
            var newHead;
            var head = snake.body[0];

snake.direction = snake.nextDirection;

if (snake.direction === "right") {
                newHead = { x: head.x + 1, y: head.y };
            } else if (snake.direction === "left") {
                newHead = { x: head.x - 1, y: head.y };
            } else if (snake.direction === "up") {
                newHead = { x: head.x, y: head.y - 1 };
            } else if (snake.direction === "down") {
                newHead = { x: head.x, y: head.y + 1 };
            }

snake.body.unshift(newHead);

if (newHead.x === apple.x && newHead.y === apple.y) {
                score++;
                generateNewApple();
            } else {
                snake.body.pop();
            }
        }

// Mudar a direção da cobra
        function changeDirection(event) {
            var keys = {
                37: "left",
                38: "up",
                39: "right",
                40: "down"
            };

if (event.keyCode in keys) {
                var newDirection = keys[event.keyCode];

if (
                    (newDirection === "right" && snake.direction !== "left") ||
                    (newDirection === "left" && snake.direction !== "right") ||
                    (newDirection === "up" && snake.direction !== "down") ||
                    (newDirection === "down" && snake.direction !== "up")
                ) {
                    snake.nextDirection = newDirection;
                }
            }
        }

// Gerar uma nova maçã
        function generateNewApple() {
            apple = {
                x: Math.floor(Math.random() * (widthInBlocks - 1)) + 1,
                y: Math.floor(Math.random() * (heightInBlocks - 1)) + 1
            };

for (var i = 0; i < snake.body.length; i++) {
                if (snake.body[i].x === apple.x && snake.body[i].y === apple.y) {
                    generateNewApple();
                    break;
                }
            }
        }

// Desenhar a maçã no canvas
        function drawApple() {
            context.fillStyle = "red";
            context.fillRect(
                apple.x * blockSize,
                apple.y * blockSize,
                blockSize,
                blockSize
            );
        }

// Desenhar um bloco
        function drawBlock(position) {
            var x = position.x * blockSize;
            var y = position.y * blockSize;
            context.fillStyle = "black";
            context.fillRect(x, y, blockSize, blockSize);
        }

// Desenhar a pontuação
        function drawScore() {
            context.font = "20px Arial";
            context.fillStyle = "black";
            context.fillText("Pontuação: " + score, blockSize, blockSize * 2);
        }

// Verificar se o jogo acabou
        function isGameOver() {
            var head = snake.body[0];

if (
                head.x < 0 ||
                head.x === widthInBlocks ||
                head.y < 0 ||
                head.y === heightInBlocks
            ) {
                return true;
            }

for (var i = 1; i < snake.body.length; i++) {
                if (head.x === snake.body[i].x && head.y === snake.body[i].y) {
                    return true;
                }
            }

return false;
        }

// Quando o jogo acabar
        function gameOver() {
            clearInterval(gameLoop);
            context.font = "50px Arial";
            context.fillStyle = "black";
            context.fillText("Game Over", canvas.width / 6, canvas.height / 3);
            context.font = "30px Arial";
            context.fillText(
                "Pontuação Final: " + score,
                canvas.width / 4,
                canvas.height / 2
            );
        }

// Iniciar o jogo
        function startGame() {
            snake = createSnake();
            apple = {};
            generateNewApple();
            var gameLoop = setInterval(update, 100);
        }

// Event listener para detectar mudança de direção
        document.addEventListener("keydown", changeDirection);

// Iniciar o jogo quando a página carregar
        window.onload = startGame;
    </script>
</body>
</html>