AI game creator

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

No:10006

←

Prev Next

→

Shooting Game
Developer User4460｜Date and time 23/7/28 19:27:39
Build time 39.114 sec｜Game capacity 4.973KB｜

Script

Score: 0

Game Over

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

<html>
<head>
    <style>
        body {
            background-color: black;
        }
        canvas {
            border: 1px solid white;
            display: block;
            margin: 20px auto;
        }
        #score {
            color: white;
            font-size: 24px;
            text-align: center;
        }
        #game-over {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-size: 48px;
            text-align: center;
            display: none;
        }
    </style>
</head>
<body>
<canvas id="game" width="400" height="400"></canvas>
<div id="score">Score: 0</div>
<div id="game-over">Game Over</div>
<script>
    // Define the game variables
    var canvas = document.getElementById("game");
    var context = canvas.getContext("2d");
    var scoreElement = document.getElementById("score");
    var gameOverElement = document.getElementById("game-over");

var score = 0;
    var gameSpeed = 2;
    var gameOver = false;

// Define the player object
    var player = {
        x: canvas.width / 2,
        y: canvas.height - 50,
        width: 50,
        height: 50,
        color: "white"
    };

// Define the bullet array to store fired bullets
    var bullets = [];

// Define the enemy array to store enemy objects
    var enemies = [];

// Function to create the enemy objects
    function createEnemy() {
        var enemy = {
            x: Math.random() * (canvas.width - 25),
            y: -25,
            width: 25,
            height: 25,
            color: "red"
        };
        
        enemies.push(enemy);
    }

// Function to handle the player movement
    function movePlayer(event) {
        player.x = event.touches[0].clientX - canvas.offsetLeft;
    }

// Function to handle the bullet firing
    function fireBullet() {
        var bullet = {
            x: player.x,
            y: player.y,
            width: 5,
            height: 10,
            color: "yellow"
        };
        
        bullets.push(bullet);
    }

// Function to handle collision detection between bullets and enemies
    function detectCollisions() {
        for (var i = 0; i < bullets.length; i++) {
            for (var j = 0; j < enemies.length; j++) {
                if (bullets[i].x < enemies[j].x + enemies[j].width &&
                    bullets[i].x + bullets[i].width > enemies[j].x &&
                    bullets[i].y < enemies[j].y + enemies[j].height &&
                    bullets[i].y + bullets[i].height > enemies[j].y) {
                    bullets.splice(i, 1);
                    enemies.splice(j, 1);
                    score += 10;
                    scoreElement.innerText = "Score: " + score;
                }
            }
        }
    }

// Function to update the game state and handle game logic
    function updateGame() {
        context.clearRect(0, 0, canvas.width, canvas.height);

moveEnemies();
        moveBullets();
        detectCollisions();
        renderPlayer();
        renderEnemies();
        renderBullets();

if (gameOver) {
            gameOverElement.style.display = "block";
            return;
        }

requestAnimationFrame(updateGame);
    }

// Function to move the enemies
    function moveEnemies() {
        for (var i = 0; i < enemies.length; i++) {
            if (enemies[i].y > canvas.height) {
                gameOver = true;
            }
            enemies[i].y += gameSpeed;
        }

if (Math.random() < 0.03) {
            createEnemy();
        }
    }

// Function to move the bullets
    function moveBullets() {
        for (var i = 0; i < bullets.length; i++) {
            if (bullets[i].y < 0) {
                bullets.splice(i, 1);
            }
            bullets[i].y -= gameSpeed * 2;
        }
    }

// Function to render the player object
    function renderPlayer() {
        context.fillStyle = player.color;
        context.fillRect(player.x, player.y, player.width, player.height);
    }

// Function to render the enemies
    function renderEnemies() {
        for (var i = 0; i < enemies.length; i++) {
            context.fillStyle = enemies[i].color;
            context.fillRect(enemies[i].x, enemies[i].y, enemies[i].width, enemies[i].height);
        }
    }

// Function to render the bullets
    function renderBullets() {
        for (var i = 0; i < bullets.length; i++) {
            context.fillStyle = bullets[i].color;
            context.fillRect(bullets[i].x, bullets[i].y, bullets[i].width, bullets[i].height);
        }
    }

// Event listener to handle player movement on touch
    canvas.addEventListener("touchmove", movePlayer);

// Event listener to handle bullet firing on touch
    canvas.addEventListener("touchend", fireBullet);

// Start the game initially
    updateGame();
</script>
</body>
</html>