Jogo com música lofi com boneco atira no inimigo zumbib mais dimensões mais árvores no terreno mais uma cidade 🌆's game

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

No:41396

←

Prev Next

→

Jogo com música lofi com boneco atira no inimigo z..ALL
Developer User18527｜Date and time 24/2/7 8:27:13
Build time 29.255 sec｜Game capacity 9.603KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Jogo Lofi-Zombie</title>
    <script>
        // Variáveis
        var canvas, ctx, player, zombies, bullets, objects, score, gameover;
        var gameWidth = 800; 
        var gameHeight = 400; 
        var groundHeight = 50;
        var lofiMusic = new Audio('lofi.mp3');
        var winMusic = new Audio('win.mp3');
        var gameoverMusic = new Audio('gameover.mp3');
        
        // Função para iniciar o jogo
        function startGame() {
            canvas = document.getElementById("gameCanvas");
            ctx = canvas.getContext("2d");
            player = new Player();
            zombies = [];
            bullets = [];
            objects = [];
            score = 0;
            gameover = false;
            
            // Geração aleatória de zumbis e objetos
            setInterval(function() {
                if (!gameover) {
                    zombies.push(new Zombie());
                    if (Math.random() < 0.2) {
                        objects.push(new Tree());
                    }  
                    if (Math.random() < 0.1) {
                        objects.push(new City());
                    } 
                }
            }, 3000);

// Atualiza e desenha o jogo a cada frame
            setInterval(updateGameArea, 20);
        }
        
        // Objeto do jogador
        function Player() {
            this.x = 50;
            this.y = gameHeight - groundHeight - 50;
            this.width = 50;
            this.height = 50;
            this.speedX = 0;
            this.image = new Image();
            this.image.src = "player.png";
            
            // Função para desenhar o jogador na tela
            this.draw = function() {
                ctx.drawImage(this.image, this.x, this.y, this.width, this.height);
            }
            
            // Função para atualizar a posição do jogador
            this.update = function() {
                this.x += this.speedX;
                if (this.x < 0) {
                    this.x = 0;
                } else if (this.x + this.width > gameWidth) {
                    this.x = gameWidth - this.width;
                }
            }
            
            // Função para disparar tiros
            this.shoot = function() {
                bullets.push(new Bullet(this.x + this.width / 2));
            }
        }
        
        // Objeto do zumbi
        function Zombie() {
            this.x = gameWidth;
            this.y = gameHeight - groundHeight - 50;
            this.width = 50;
            this.height = 50;
            this.speedX = Math.random() * (-2) - 1;
            this.image = new Image();
            this.image.src = "zombie.png";
            
            // Função para desenhar o zumbi na tela
            this.draw = function() {
                ctx.drawImage(this.image, this.x, this.y, this.width, this.height);
            }
            
            // Função para atualizar a posição do zumbi
            this.update = function() {
                this.x += this.speedX;
                if (this.x + this.width < 0) {
                    zombies.splice(zombies.indexOf(this), 1);
                }

// Verifica se houve colisão com o jogador
                if (checkCollision(this, player)) {
                    endGame();
                }
            }
        }
        
        // Objeto da bala
        function Bullet(x) {
            this.x = x;
            this.y = gameHeight - groundHeight - 50 - 10;
            this.width = 10;
            this.height = 10;
            this.speedX = 5;
            
            // Função para desenhar a bala na tela
            this.draw = function() {
                ctx.fillStyle = "black";
                ctx.fillRect(this.x, this.y, this.width, this.height);
            }
            
            // Função para atualizar a posição da bala
            this.update = function() {
                this.x += this.speedX;
                if (this.x > gameWidth) {
                    bullets.splice(bullets.indexOf(this), 1);
                } else {
                    // Verifica se houve colisão com algum zumbi
                    zombies.forEach(function(zombie) {
                        if (checkCollision(this, zombie)) {
                            zombies.splice(zombies.indexOf(zombie), 1);
                            bullets.splice(bullets.indexOf(this), 1);
                            score += 10;
                        }
                    }, this);
                }
            }
        }
        
        // Objeto da árvore
        function Tree() {
            this.x = gameWidth;
            this.y = gameHeight - groundHeight - 50;
            this.width = 100;
            this.height = 50;
            this.speedX = Math.random() * (-2) - 1;
            this.image = new Image();
            this.image.src = "tree.png";
            
            // Função para desenhar a árvore na tela
            this.draw = function() {
                ctx.drawImage(this.image, this.x, this.y, this.width, this.height);
            }
            
            // Função para atualizar a posição da árvore
            this.update = function() {
                this.x += this.speedX;
                if (this.x + this.width < 0) {
                    objects.splice(objects.indexOf(this), 1);
                }
            }
        }
        
        // Objeto da cidade
        function City() {
            this.x = gameWidth;
            this.y = gameHeight - groundHeight - 100;
            this.width = 200;
            this.height = 100;
            this.speedX = Math.random() * (-2) - 1;
            this.image = new Image();
            this.image.src = "city.png";
            
            // Função para desenhar a cidade na tela
            this.draw = function() {
                ctx.drawImage(this.image, this.x, this.y, this.width, this.height);
            }
            
            // Função para atualizar a posição da cidade
            this.update = function() {
                this.x += this.speedX;
                if (this.x + this.width < 0) {
                    objects.splice(objects.indexOf(this), 1);
                }
            }
        }
        
        // Função para verificar colisões
        function checkCollision(obj1, obj2) {
            var obj1Left = obj1.x;
            var obj1Right = obj1.x + obj1.width;
            var obj1Top = obj1.y;
            var obj1Bottom = obj1.y + obj1.height;
            
            var obj2Left = obj2.x;
            var obj2Right = obj2.x + obj2.width;
            var obj2Top = obj2.y;
            var obj2Bottom = obj2.y + obj2.height;
            
            return obj1Left < obj2Right && obj1Right > obj2Left &&
                   obj1Top < obj2Bottom && obj1Bottom > obj2Top;
        }
        
        // Função para atualizar o jogo a cada frame
        function updateGameArea() {
            // Limpa o canvas
            ctx.clearRect(0, 0, gameWidth, gameHeight);

// Desenha o jogador
            player.draw();
            
            // Atualiza o jogador
            player.update();
            
            // Desenha os zumbis
            zombies.forEach(function(zombie) {
                zombie.draw();
            });
            
            // Atualiza os zumbis
            zombies.forEach(function(zombie) {
                zombie.update();
            });

// Desenha as balas
            bullets.forEach(function(bullet) {
                bullet.draw();
            });
            
            // Atualiza as balas
            bullets.forEach(function(bullet) {
                bullet.update();
            });
            
            // Desenha os objetos
            objects.forEach(function(object) {
                object.draw();
            });
            
            // Atualiza os objetos
            objects.forEach(function(object) {
                object.update();
            });

// Desenha a pontuação
            ctx.font = "20px Arial";
            ctx.fillText("Pontuação: " + score, 20, 30);
        }
        
        // Função para encerrar o jogo
        function endGame() {
            gameover = true;
            lofiMusic.pause();
            gameoverMusic.play();
            ctx.font = "40px Arial";
            ctx.fillStyle = "red";
            ctx.fillText("GAME OVER", gameWidth / 2 - 100, gameHeight / 2);
        }
        
        // Função para reiniciar o jogo
        function restartGame() {
            if (gameover) {
                startGame();
                lofiMusic.currentTime = 0;
                lofiMusic.play();
                gameoverMusic.pause();
            }
        }
        
        // Eventos de teclado
        window.addEventListener("keydown", function(event) {
            if (event.keyCode === 37) { // Seta esquerda
                player.speedX = -5;
            } else if (event.keyCode === 39) { // Seta direita
                player.speedX = 5;
            } else if (event.keyCode === 32) { // Espaço (atirar)
                player.shoot();
            }
        });
        
        window.addEventListener("keyup", function(event) {
            if (event.keyCode === 37 || event.keyCode === 39) { // Seta esquerda/direita
                player.speedX = 0;
            }
        });
    </script>
</head>
<body onload="startGame()">
    <canvas id="gameCanvas" width="800" height="400"></canvas>
</body>
</html>