A game about shooting monsters's game

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

No:25214

←

Prev Next

→

A game about shooting monsters
Developer User12299｜Date and time 23/11/19 6:31:05
Build time 112.101 sec｜Game capacity 5.596KB｜

Script

Sure! Here's a simple game about shooting monsters using JavaScript and pictograms. Please note that due to the limitations of the text-based format, interactive gameplay cannot be fully represented here, but the game logic is provided for you to understand.

In the above code, the game creates a canvas and displays a player (controlled by mouse/touch) and monsters falling from the top. The goal is to shoot the monsters by touching them, and the score increases for each successful hit. The game ends if a monster reaches the bottom or collides with the player.

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Monster Shooter Game</title>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>

// Pictogram images for player and monsters
        var playerImage = new Image();
        playerImage.src = "player.png";

var monsterImage = new Image();
        monsterImage.src = "monster.png";

// Player object
        function Player(x, y) {
            this.x = x;
            this.y = y;
            this.width = 32;
            this.height = 32;
        }

// Monster object
        function Monster(x, y) {
            this.x = x;
            this.y = y;
            this.width = 32;
            this.height = 32;
        }

// Initialize the game
        function startGame() {
            canvas = document.getElementById("gameCanvas");
            ctx = canvas.getContext("2d");

player = new Player(canvas.width / 2, canvas.height - 50);
            monsters = [];
            score = 0;

// Spawn initial monsters
            spawnMonster();

// Start game loop
            gameInterval = setInterval(updateGame, 20);

// Register touch event for mobile devices
            canvas.addEventListener("touchstart", shootMonster);
        }

// Update the game state
        function updateGame() {
            clearCanvas();

// Move and draw player
            player.x = getMouseX(canvas);
            player.y = getMouseY(canvas);
            drawImage(playerImage, player.x, player.y);

// Move and draw monsters
            for (var i = 0; i < monsters.length; i++) {
                var monster = monsters[i];
                monster.y += 2;
                drawImage(monsterImage, monster.x, monster.y);

// Check collision with player
                if (checkCollision(player, monster)) {
                    gameOver();
                    return;
                }

// Check if monster reached bottom
                if (monster.y > canvas.height) {
                    score++;
                    monsters.splice(i, 1);
                }
            }

// Display score
            ctx.font = "20px Arial";
            ctx.fillStyle = "white";
            ctx.fillText("Score: " + score, 10, 30);
        }

// Clear the canvas
        function clearCanvas() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
        }

// Spawn a monster at random x coordinate
        function spawnMonster() {
            var x = Math.random() * (canvas.width - monsterImage.width);
            var y = -monsterImage.height;
            monsters.push(new Monster(x, y));
        }

// Shoot a monster when touched
        function shootMonster(event) {
            event.preventDefault();
            
            var touchX = event.touches[0].clientX;
            var touchY = event.touches[0].clientY;
            
            for (var i = 0; i < monsters.length; i++) {
                var monster = monsters[i];
                
                if (
                    touchX >= monster.x &&
                    touchX <= monster.x + monster.width &&
                    touchY >= monster.y &&
                    touchY <= monster.y + monster.height
                ) {
                    monsters.splice(i, 1);
                    score += 10;
                    return;
                }
            }
        }

// Game over
        function gameOver() {
            clearInterval(gameInterval);

// Display game over message
            ctx.font = "40px Arial";
            ctx.fillStyle = "red";
            ctx.textAlign = "center";
            ctx.fillText("Game Over", canvas.width / 2, canvas.height / 2);
        }

// Get the x coordinate of mouse/touch event relative to canvas
        function getMouseX(canvas) {
            var rect = canvas.getBoundingClientRect();
            return event.clientX - rect.left;
        }

// Get the y coordinate of mouse/touch event relative to canvas
        function getMouseY(canvas) {
            var rect = canvas.getBoundingClientRect();
            return event.clientY - rect.top;
        }

// Draw an image at given coordinates
        function drawImage(image, x, y) {
            ctx.drawImage(image, x, y, image.width, image.height);
        }

// Check collision between two objects
        function checkCollision(obj1, obj2) {
            return (
                obj1.x < obj2.x + obj2.width &&
                obj1.x + obj1.width > obj2.x &&
                obj1.y < obj2.y + obj2.height &&
                obj1.y + obj1.height > obj2.y
            );
        }

// Start the game when page loads
        window.addEventListener("load", startGame);
    </script>
</body>
</html>
```