Faça um jogo 3d simples, com botões de movimento e paredes pretas's game

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

No:15733

←

Prev Next

→

Faça um jogo 3d simples, com botões de movimento e..ALL
Developer User6852｜Date and time 23/9/11 4:36:44
Build time 24.989 sec｜Game capacity 3.573KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

<!DOCTYPE html>
<html>
<head>
    <style>
        canvas {
            border: 1px solid black;
        }
        button {
            margin: 10px;
        }
    </style>
</head>
<body>
    <canvas id="game" width="400" height="400"></canvas>

// Definindo as propriedades do jogador
        const player = {
            x: 200,
            y: 200,
            size: 20,
        };

// Definindo as propriedades das paredes
        const walls = [
            { x: 100, y: 100, width: 200, height: 20 },
            { x: 100, y: 280, width: 200, height: 20 },
            { x: 100, y: 100, width: 20, height: 200 },
            { x: 280, y: 100, width: 20, height: 200 },
        ];

// Função para desenhar o jogador
        function drawPlayer() {
            context.fillStyle = 'blue';
            context.fillRect(player.x - player.size / 2, player.y - player.size / 2, player.size, player.size);
        }

// Função para desenhar as paredes
        function drawWalls() {
            context.fillStyle = 'black';
            walls.forEach(wall => {
                context.fillRect(wall.x, wall.y, wall.width, wall.height);
            });
        }

// Função para atualizar o jogo
        function update() {
            context.clearRect(0, 0, canvas.width, canvas.height);

drawPlayer();
            drawWalls();
        }

// Função para verificar colisão entre o jogador e as paredes
        function checkCollision() {
            walls.forEach(wall => {
                if (
                    player.x - player.size / 2 < wall.x + wall.width &&
                    player.x + player.size / 2 > wall.x &&
                    player.y - player.size / 2 < wall.y + wall.height &&
                    player.y + player.size / 2 > wall.y
                ) {
                    // Colisão detectada, o jogador não pode passar pelas paredes
                    // Aqui você pode adicionar alguma lógica para lidar com a colisão
                }
            });
        }

// Função para movimentar o jogador 
        function movePlayer(direction) {
            switch (direction) {
                case 'up':
                    player.y -= 5;
                    break;
                case 'down':
                    player.y += 5;
                    break;
                case 'left':
                    player.x -= 5;
                    break;
                case 'right':
                    player.x += 5;
                    break;
            }

checkCollision();

update();
        }

// Movimentar o jogador quando os botões forem clicados
        document.getElementById('btn-up').addEventListener('click', () => movePlayer('up'));
        document.getElementById('btn-down').addEventListener('click', () => movePlayer('down'));
        document.getElementById('btn-left').addEventListener('click', () => movePlayer('left'));
        document.getElementById('btn-right').addEventListener('click', () => movePlayer('right'));

// Iniciar o jogo
        update();

</script>

<div>
        <button id="btn-up">⬆</button>
    </div>
    <div>
        <button id="btn-left">⬅</button>
        <button id="btn-right">➡</button>
    </div>
    <div>
        <button id="btn-down">⬇</button>
    </div>
</body>
</html>