Galáctico Explorer, poligonais: world.CSS tree.CSS's game

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

No:13296

156

←

Prev Next

→

Galáctico Explorer, poligonais: world.CSS tree.CSS
Developer User5784｜Date and time 23/8/27 23:45:10
Build time 25.429 sec｜Game capacity 5.139KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Galáctico Explorer</title>
    <style>
        body {
            margin: 0;
        }
        
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="600" height="400"></canvas>
    <script>
        // Galáctico Explorer - Jogo de Exploração Galáctica

// Obtendo o elemento canvas do documento
        const canvas = document.getElementById("gameCanvas");
        const context = canvas.getContext("2d");

// Definindo as constantes do jogo
        const canvasWidth = canvas.width;
        const canvasHeight = canvas.height;
        const playerWidth = 50;
        const playerHeight = 50;
        const playerSpeed = 5;
        
        // Carregando as imagens dos elementos do jogo
        const playerImage = new Image();
        playerImage.src = "path_to_player_image.png";
        const enemyImage = new Image();
        enemyImage.src = "path_to_enemy_image.png";
        
        // Definindo o objeto jogador
        const player = {
            x: canvasWidth / 2 - playerWidth / 2,
            y: canvasHeight / 2 - playerHeight / 2,
            width: playerWidth,
            height: playerHeight,
            image: playerImage
        };
        
        // Definindo o objeto inimigo
        const enemy = {
            x: Math.random() * (canvasWidth - playerWidth),
            y: Math.random() * (canvasHeight - playerHeight),
            width: playerWidth,
            height: playerHeight,
            image: enemyImage
        };
        
        // Definindo a função de renderização do jogo
        function draw() {
            context.clearRect(0, 0, canvasWidth, canvasHeight);
            
            // Desenhando o jogador
            context.drawImage(player.image, player.x, player.y, player.width, player.height);
            
            // Desenhando o inimigo
            context.drawImage(enemy.image, enemy.x, enemy.y, enemy.width, enemy.height);
        }
        
        // Definindo a função de atualização do jogo
        function update() {
            // Movendo o jogador para a esquerda ao pressionar a seta para esquerda
            if (leftArrowPressed) {
                player.x -= playerSpeed;
            }
            
            // Movendo o jogador para a direita ao pressionar a seta para direita
            if (rightArrowPressed) {
                player.x += playerSpeed;
            }
            
            // Movendo o jogador para cima ao pressionar a seta para cima
            if (upArrowPressed) {
                player.y -= playerSpeed;
            }
            
            // Movendo o jogador para baixo ao pressionar a seta para baixo
            if (downArrowPressed) {
                player.y += playerSpeed;
            }
            
            // Verificando se houve colisão entre o jogador e o inimigo
            if (checkCollision(player, enemy)) {
                // Game over
                alert("Game Over");
            }
        }
        
        // Verificando a colisão entre dois objetos
        function checkCollision(object1, object2) {
            return object1.x < object2.x + object2.width &&
                   object1.x + object1.width > object2.x &&
                   object1.y < object2.y + object2.height &&
                   object1.y + object1.height > object2.y;
        }
        
        // Detectando o pressionamento de teclas
        let leftArrowPressed = false;
        let rightArrowPressed = false;
        let upArrowPressed = false;
        let downArrowPressed = false;
        
        document.addEventListener("keydown", function(event) {
            switch(event.keyCode) {
                case 37: // Seta para a esquerda
                    leftArrowPressed = true;
                    break;
                case 38: // Seta para cima
                    upArrowPressed = true;
                    break;
                case 39: // Seta para a direita
                    rightArrowPressed = true;
                    break;
                case 40: // Seta para baixo
                    downArrowPressed = true;
                    break;
            }
        });
        
        document.addEventListener("keyup", function(event) {
            switch(event.keyCode) {
                case 37: // Seta para a esquerda
                    leftArrowPressed = false;
                    break;
                case 38: // Seta para cima
                    upArrowPressed = false;
                    break;
                case 39: // Seta para a direita
                    rightArrowPressed = false;
                    break;
                case 40: // Seta para baixo
                    downArrowPressed = false;
                    break;
            }
        });
        
        // Loop principal do jogo
        function gameLoop() {
            update();
            draw();
            
            requestAnimationFrame(gameLoop);
        }
        
        // Iniciando o loop principal do jogo
        gameLoop();
    </script>
</body>
</html>