A game with blood and arrows to move and space to shoot and blood and enemies to shoot's game

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

No:42648

←

Prev Next

→

A game with blood and arrows to move and space to ..ALL
Developer User18853｜Date and time 24/2/12 12:31:19
Build time 17.516 sec｜Game capacity 7.142KB｜

Script

Como programador, irei criar um jogo simples em HTML usando JavaScript. O jogo será otimizado para operação em smartphones e utilizarei pictogramas se possível. Segue o código do jogo:

Esse código cria um jogo simples onde você controla um jogador vermelho usando as setas esquerda (←) e direita (→) para movimentar e a barra de espaço (Spacebar) para atirar. O objetivo é acertar os inimigos azuis antes que eles se aproximem demais e evitar que te atinjam. Ao jogar, você verá um jogador vermelho na parte inferior da tela. Use as setas esquerda e direita para movê-lo horizontalmente. Pressione a barra de espaço para atirar contra os inimigos azuis que aparecem aleatoriamente. Se você for atingido por um inimigo ou um inimigo alcançar a parte inferior da tela, o jogo acaba. Espero que se divirta com este jogo simples!

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

Como programador, irei criar um jogo simples em HTML usando JavaScript. O jogo será otimizado para operação em smartphones e utilizarei pictogramas se possível. Segue o código do jogo:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Jogo Sangrento</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

#gameContainer {
            width: 100%;
            height: 100vh;
            background-color: black;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            position: relative;
        }

#player {
            width: 50px;
            height: 50px;
            background-color: red;
            position: absolute;
            bottom: 0;
            left: 0;
        }

.enemy {
            width: 50px;
            height: 50px;
            background-color: blue;
            position: absolute;
            bottom: 0;
            left: 0;
        }

#bullet {
            width: 10px;
            height: 10px;
            background-color: white;
            position: absolute;
            bottom: 60px;
            left: 0;
            display: none;
        }
    </style>
    <script>
        var player, bullet, enemies, gameContainer;
        var isGameRunning = false;
        var bulletInterval;
        var gameSpeed = 5;

function createPlayer() {
            player = document.createElement("div");
            player.id = "player";
            gameContainer.appendChild(player);
        }

function controlPlayer(event) {
            var keycode = event.keyCode;

if (keycode === 37) { // Left Arrow
                movePlayer(-gameSpeed);
            } else if (keycode === 39) { // Right Arrow
                movePlayer(gameSpeed);
            } else if (keycode === 32) { // Spacebar
                shoot();
            }
        }

function movePlayer(amount) {
            var currentPosition = parseInt(getComputedStyle(player).left);
            var newPosition = currentPosition + amount;

if (newPosition >= 0 && newPosition <= (gameContainer.clientWidth - player.clientWidth)) {
                player.style.left = newPosition + "px";
            }
        }

function createBullet() {
            bullet = document.createElement("div");
            bullet.id = "bullet";
            gameContainer.appendChild(bullet);
        }

function shoot() {
            if (bullet.style.display === "none") {
                bullet.style.display = "block";
                var bulletPosition = parseInt(getComputedStyle(player).left) + (player.clientWidth / 2);
                bullet.style.left = bulletPosition + "px";

bulletInterval = setInterval(function () {
                    var currentBulletPosition = parseInt(getComputedStyle(bullet).bottom);

if (currentBulletPosition >= window.innerHeight) {
                        clearInterval(bulletInterval);
                        bullet.style.display = "none";
                    } else {
                        bullet.style.bottom = (currentBulletPosition + 10) + "px";
                        checkCollision();
                    }
                }, gameSpeed);
            }
        }

function createEnemy() {
            var enemy = document.createElement("div");
            enemy.classList.add("enemy");
            enemy.style.left = Math.floor(Math.random() * (gameContainer.clientWidth - enemy.clientWidth)) + "px";
            gameContainer.appendChild(enemy);
            return enemy;
        }

function moveEnemies() {
            enemies = document.querySelectorAll(".enemy");

if (enemies.length > 0) {
                setInterval(function () {
                    for (var i = 0; i < enemies.length; i++) {
                        var currentEnemyPosition = parseInt(getComputedStyle(enemies[i]).bottom);

if (currentEnemyPosition >= window.innerHeight) {
                            gameOver();
                        } else {
                            enemies[i].style.bottom = (currentEnemyPosition + gameSpeed) + "px";
                            checkCollision(enemies[i]);
                        }
                    }
                }, gameSpeed);
            }
        }

function checkCollision(enemy) {
            if (enemy) {
                var bulletX = parseInt(getComputedStyle(bullet).left);
                var bulletY = parseInt(getComputedStyle(bullet).bottom);
                var enemyX = parseInt(getComputedStyle(enemy).left);
                var enemyY = parseInt(getComputedStyle(enemy).bottom);

if (bulletX >= enemyX && bulletX <= (enemyX + enemy.clientWidth) &&
                    bulletY >= enemyY && bulletY <= (enemyY + enemy.clientHeight)) {
                    enemy.remove();
                    bullet.style.display = "none";
                    clearInterval(bulletInterval);
                }
            } else {
                for (var i = 0; i < enemies.length; i++) {
                    var playerX = parseInt(getComputedStyle(player).left);
                    var playerY = parseInt(getComputedStyle(player).bottom);
                    var enemyX = parseInt(getComputedStyle(enemies[i]).left);
                    var enemyY = parseInt(getComputedStyle(enemies[i]).bottom);

if (playerX <= (enemyX + enemies[i].clientWidth) && (playerX + player.clientWidth) >= enemyX &&
                        playerY <= (enemyY + enemies[i].clientHeight) && (playerY + player.clientHeight) >= enemyY) {
                        gameOver();
                    }
                }
            }
        }

function startGame() {
            if (!isGameRunning) {
                gameContainer = document.getElementById("gameContainer");

createPlayer();
                createBullet();
                moveEnemies();

window.addEventListener("keydown", controlPlayer);
                isGameRunning = true;
            }
        }

function gameOver() {
            isGameRunning = false;
            alert("Game Over!");
            window.location.reload();
        }
    </script>
</head>
<body>
    <div id="gameContainer"></div>

Ao jogar, você verá um jogador vermelho na parte inferior da tela. Use as setas esquerda e direita para movê-lo horizontalmente. Pressione a barra de espaço para atirar contra os inimigos azuis que aparecem aleatoriamente. Se você for atingido por um inimigo ou um inimigo alcançar a parte inferior da tela, o jogo acaba.

Espero que se divirta com este jogo simples!