Crie um jogo 2d do homem aranha's game

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

No:18598

←

Prev Next

→

Crie um jogo 2d do homem aranha
Developer User8223｜Date and time 23/9/30 4:35:10
Build time 16.699 sec｜Game capacity 2.839KB｜

Script

// Encerrando o código do jogo dentro das tags

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Jogo do Homem-Aranha</title>
</head>
<body>
    <canvas id="gameCanvas" width="480" height="320"></canvas>

// Carregando imagens
        const spidermanImg = new Image();
        spidermanImg.src = "spiderman.png";

// Definindo objeto do Homem-Aranha
        const spiderman = {
            x: 200, // posição horizontal inicial
            y: 200, // posição vertical inicial
            width: 64,
            height: 64,
            dx: 0, // velocidade horizontal
            dy: 0, // velocidade vertical
            speed: 4 // velocidade de movimento
        };

// Processando entrada do jogador
        function handleInput(event) {
            if (event.keyCode === 37 && spiderman.x - spiderman.speed >= 0) {
                // Movendo para a esquerda quando a seta esquerda é pressionada
                spiderman.dx = -spiderman.speed;
            }
            else if (event.keyCode === 39 && spiderman.x + spiderman.width + spiderman.speed <= canvas.width) {
                // Movendo para a direita quando a seta direita é pressionada
                spiderman.dx = spiderman.speed;
            }
            else if (event.keyCode === 38 && spiderman.y - spiderman.speed >= 0) {
                // Movendo para cima quando a seta para cima é pressionada
                spiderman.dy = -spiderman.speed;
            }
            else if (event.keyCode === 40 && spiderman.y + spiderman.height + spiderman.speed <= canvas.height) {
                // Movendo para baixo quando a seta para baixo é pressionada
                spiderman.dy = spiderman.speed;
            }
        }

function update() {
            // Atualizando a posição do Homem-Aranha com base na velocidade
            spiderman.x += spiderman.dx;
            spiderman.y += spiderman.dy;

// Limpando o canvas
            ctx.clearRect(0, 0, canvas.width, canvas.height);

// Desenhando o Homem-Aranha
            ctx.drawImage(spidermanImg, spiderman.x, spiderman.y, spiderman.width, spiderman.height);

// Chamando a função de atualização novamente
            requestAnimationFrame(update);
        }

// Iniciando o jogo
        function startGame() {
            document.addEventListener("keydown", handleInput); // Capturando eventos de teclado
            update(); // Chamando a função de atualização
        }

// Iniciando o jogo quando o documento é carregado
        document.addEventListener("DOMContentLoaded", startGame);
    </script>
</body>
</html>