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

No:20327

Crie um jogo do homem aranha
Developer User9013｜Date and time 23/10/9 5:20:56
Build time 10.094 sec｜Game capacity 2.414KB｜

Script

Jogo do Homem-Aranha

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Jogo do Homem-Aranha</title>
    <style>
        body {
            text-align: center;
            font-family: Arial, sans-serif;
            background-color: #d3d3d3;
        }

h1 {
            color: #ff0000;
        }

#canvas {
            background-color: #ffffff;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <h1>Jogo do Homem-Aranha</h1>
    <canvas id="canvas" width="400" height="400"></canvas>

// Posição inicial do Homem-Aranha
        let spidermanX = 200;
        let spidermanY = 200;

// Velocidade de movimento
        let spidermanSpeed = 5;

// Carregar a imagem do Homem-Aranha
        const spidermanImg = new Image();
        spidermanImg.src = 'spiderman.png';

// Função para desenhar o Homem-Aranha no canvas
        function drawSpiderman() {
            ctx.drawImage(spidermanImg, spidermanX, spidermanY, 50, 50);
        }

// Atualizar a posição do Homem-Aranha
        function updateSpidermanPosition() {
            if (keysState.ArrowUp && spidermanY > 0) {
                spidermanY -= spidermanSpeed;
            }
            if (keysState.ArrowDown && spidermanY < canvas.height - 50) {
                spidermanY += spidermanSpeed;
            }
            if (keysState.ArrowLeft && spidermanX > 0) {
                spidermanX -= spidermanSpeed;
            }
            if (keysState.ArrowRight && spidermanX < canvas.width - 50) {
                spidermanX += spidermanSpeed;
            }
        }

// Função principal do jogo
        function gameLoop() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

updateSpidermanPosition();
            drawSpiderman();

requestAnimationFrame(gameLoop);
        }

// Registrar o estado das teclas pressionadas
        const keysState = {};
        window.addEventListener('keydown', (event) => {
            keysState[event.code] = true;
        });
        window.addEventListener('keyup', (event) => {
            keysState[event.code] = false;
        });

// Iniciar o jogo
        spidermanImg.onload = () => {
            gameLoop();
        };

</script>
</body>
</html>