AI game creator

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

No:10574

←

Prev Next

→

Shooting Game
Developer User4582｜Date and time 23/8/1 4:28:09
Build time 33.379 sec｜Game capacity 4.595KB｜

Script

Sure! Here's a simple shooting game implemented as a single HTML file using JavaScript. It uses pictograms for the game elements. Please note that this is a basic implementation and can be expanded upon as desired.

In this game, the player is represented by a pictogram image and can be controlled by touching and moving on the game container. The objective is to avoid collision with the falling enemy pictograms. If the player collides with an enemy, the game over message will be displayed, and the page will be reloaded to restart the game. Note: Remember to replace the placeholder URLs (`emozi_all/player.png` and `emozi_all/enemy.png`) with the actual image URLs you want to use for the player and enemy pictograms.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Shooting Game</title>
    <style>
        #game-container {
            width: 100%;
            height: 400px;
            background-color: black;
            position: relative;
            overflow: hidden;
        }

#player {
            width: 50px;
            height: 50px;
            background-image: url('pictogram_player.png');
            background-size: cover;
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
        }

.enemy {
            width: 50px;
            height: 50px;
            background-image: url('pictogram_enemy.png');
            background-size: cover;
            position: absolute;
            top: -50px;
        }
    </style>
</head>
<body>
    <div id="game-container">
        <div id="player"></div>
    </div>

// Player object
        var player = document.getElementById('player');
        var playerPosition = {
            x: 50,
            y: 350
        };

// Game container dimensions
        var gameContainer = document.getElementById('game-container');
        var containerWidth = gameContainer.offsetWidth;
        var containerHeight = gameContainer.offsetHeight;

// Generate enemies
        for (var i = 0; i < numOfEnemies; i++) {
            createEnemy();
        }

// Function to create enemies
        function createEnemy() {
            var enemy = document.createElement('div');
            enemy.className = 'enemy';
            enemy.style.left = Math.floor(Math.random() * (containerWidth - 50)) + 'px';

// Animate enemy's position
            var animationId = setInterval(function() {
                var currentTop = parseInt(enemy.style.top);
                
                if (currentTop >= containerHeight) {
                    clearInterval(animationId);
                    enemy.parentNode.removeChild(enemy);
                    createEnemy();
                } else {
                    enemy.style.top = (currentTop + 3) + 'px';
                }

// Check collision with player
                if (checkCollision(playerPosition, player.offsetWidth, player.offsetHeight, enemy.getBoundingClientRect())) {
                    alert('Game Over!');
                    window.location.reload(); // Reload the game after collision
                }
            }, 10);

gameContainer.appendChild(enemy);
        }

// Function to check collision between player and enemy
        function checkCollision(position1, width1, height1, position2) {
            if (position1.x < position2.right &&
                position1.x + width1 > position2.left &&
                position1.y < position2.bottom &&
                position1.y + height1 > position2.top) {
                return true;
            }

return false;
        }

// Move player with touch events
        gameContainer.addEventListener('touchstart', function(event) {
            var touchX = event.changedTouches[0].pageX;
            var touchY = event.changedTouches[0].pageY;
            
            playerPosition.x = touchX;
            player.style.left = (playerPosition.x - player.offsetWidth / 2) + 'px';
            
            event.preventDefault();
        });

gameContainer.addEventListener('touchmove', function(event) {
            var touchX = event.changedTouches[0].pageX;
            var touchY = event.changedTouches[0].pageY;
            
            playerPosition.x = touchX;
            player.style.left = (playerPosition.x - player.offsetWidth / 2) + 'px';
            
            event.preventDefault();
        });
    </script>
</body>
</html>
```

Note: Remember to replace the placeholder URLs (`pictogram_player.png` and `pictogram_enemy.png`) with the actual image URLs you want to use for the player and enemy pictograms.