Faça um jogo de raycasting simples, com botões de movimento's game

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

No:15732

←

Prev Next

→

Faça um jogo de raycasting simples, com botões de..ALL
Developer User6852｜Date and time 23/9/11 4:34:47
Build time 23.711 sec｜Game capacity 3.032KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Jogo de Raycasting</title>
    <style>
        #canvas {
            display: block;
            margin: 0 auto;
            border: 1px solid gray;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="500" height="500"></canvas>

// Função para atualizar a posição do jogador
        function updatePlayerPosition(direction) {
            if (direction === "up") {
                player.x += Math.cos(player.angle) * player.speed;
                player.y += Math.sin(player.angle) * player.speed;
            } else if (direction === "down") {
                player.x -= Math.cos(player.angle) * player.speed;
                player.y -= Math.sin(player.angle) * player.speed;
            } else if (direction === "left") {
                player.angle -= Math.PI / 30;
            } else if (direction === "right") {
                player.angle += Math.PI / 30;
            }

draw();
        }

// Função para desenhar na tela
        function draw() {
            // Limpar o canvas
            context.clearRect(0, 0, canvas.width, canvas.height);

// Desenhar o jogador
            context.fillStyle = "yellow";
            context.beginPath();
            context.arc(player.x, player.y, 5, 0, 2 * Math.PI);
            context.fill();

// Desenhar uma linha representando a direção do jogador
            const lineLength = 50;
            const x2 = player.x + Math.cos(player.angle) * lineLength;
            const y2 = player.y + Math.sin(player.angle) * lineLength;
            context.strokeStyle = "red";
            context.beginPath();
            context.moveTo(player.x, player.y);
            context.lineTo(x2, y2);
            context.stroke();
        }

// Event listener para os botões de movimento
        document.getElementById("upButton").addEventListener("click", function() {
            updatePlayerPosition("up");
        });

document.getElementById("downButton").addEventListener("click", function() {
            updatePlayerPosition("down");
        });

document.getElementById("leftButton").addEventListener("click", function() {
            updatePlayerPosition("left");
        });

document.getElementById("rightButton").addEventListener("click", function() {
            updatePlayerPosition("right");
        });

// Chamar a função draw para desenhar o jogador inicialmente
        draw();
    </script>