Guy flying with a gun's game

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

No:10937

←

Prev Next

→

Guy flying with a gun
Developer User4721｜Date and time 23/8/5 22:43:49
Build time 42.368 sec｜Game capacity 6.001KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Flying Gunner Game</title>
</head>
<body>
    <script>
        // Game constants
        const GAME_WIDTH = 400;
        const GAME_HEIGHT = 600;
        const PLAYER_WIDTH = 50;
        const PLAYER_HEIGHT = 50;
        const BULLET_WIDTH = 20;
        const BULLET_HEIGHT = 10;
        const ENEMY_WIDTH = 40;
        const ENEMY_HEIGHT = 40;
        const PLAYER_SPEED = 5;
        const BULLET_SPEED = 8;
        const ENEMY_SPEED = 3;

// Game variables
        let game;
        let player;
        let bullets;
        let enemies;
        let score;

// Pictograms
        const playerPictogram = '👨‍✈️';
        const bulletPictogram = '🔫';
        const enemyPictogram = '🛩️';

function startGame() {
            game = new rectGame(GAME_WIDTH, GAME_HEIGHT);
            game.start();
            player = new rectObject(PLAYER_WIDTH, PLAYER_HEIGHT, game.width / 2 - PLAYER_WIDTH / 2, game.height - PLAYER_HEIGHT, playerPictogram);
            bullets = [];
            enemies = [];
            score = 0;
            
            document.addEventListener('keydown', handleKeyDown);
            document.addEventListener('keyup', handleKeyUp);
        }

function rectGame(width, height) {
            this.width = width;
            this.height = height;
            this.canvas = document.createElement("canvas");
            this.context = this.canvas.getContext("2d");
            this.canvas.width = this.width;
            this.canvas.height = this.height;
            
            document.body.insertBefore(this.canvas, document.body.childNodes[0]);

this.start = function () {
                this.interval = setInterval(updateGame, 20);
            }

this.clear = function () {
                this.context.clearRect(0, 0, this.width, this.height);
            }
        }

function rectObject(width, height, x, y, pictogram) {
            this.width = width;
            this.height = height;
            this.x = x;
            this.y = y;
            this.pictogram = pictogram;

this.update = function () {
                let ctx = game.context;
                ctx.font = `${this.width}px serif`;
                ctx.fillText(this.pictogram, this.x, this.y + this.height);
            }

this.moveLeft = function () {
                this.x -= PLAYER_SPEED;
                if (this.x < 0) {
                    this.x = 0;
                }
            }

this.moveRight = function () {
                this.x += PLAYER_SPEED;
                if (this.x > game.width - this.width) {
                    this.x = game.width - this.width;
                }
            }

this.shoot = function () {
                let bullet = new rectObject(BULLET_WIDTH, BULLET_HEIGHT, this.x + this.width / 2 - BULLET_WIDTH / 2, this.y - BULLET_HEIGHT, bulletPictogram);
                bullets.push(bullet);
            }
        }

function createRandomEnemy() {
            let x = Math.floor(Math.random() * (game.width - ENEMY_WIDTH));
            let enemy = new rectObject(ENEMY_WIDTH, ENEMY_HEIGHT, x, -ENEMY_HEIGHT, enemyPictogram);
            enemies.push(enemy);
        }

function updateGame() {
            game.clear();
            player.update();

for (let i = 0; i < bullets.length; i++) {
                bullets[i].y -= BULLET_SPEED;
                bullets[i].update();

// Check if bullet hits any enemy
                for (let j = 0; j < enemies.length; j++) {
                    if (checkCollision(bullets[i], enemies[j])) {
                        score++;
                        bullets.splice(i, 1);
                        enemies.splice(j, 1);
                        break;
                    }
                }
            }

for (let i = 0; i < enemies.length; i++) {
                enemies[i].y += ENEMY_SPEED;
                enemies[i].update();

// Check if enemy hits the player
                if (checkCollision(player, enemies[i])) {
                    endGame();
                    return;
                }
            }

// Create new enemy randomly
            if (Math.random() < 0.02) {
                createRandomEnemy();
            }

game.context.fillText("Score: " + score, 10, 20);
        }

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
            )
        }