AI game creator

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

No:12626

←

Prev Next

→

Fps shooter
Developer User5345｜Date and time 23/8/21 1:53:18
Build time 24.687 sec｜Game capacity 6.839KB｜

Script

Sure! Here's a simple FPS shooter game implemented as a single HTML file using JavaScript, enclosed in script tags. The game assumes smartphone operation and uses pictograms for better visualization. Simply copy and paste the code into an HTML file, save it, and open it in a web browser to play the game.

This game creates a canvas element that covers the entire screen and allows you to control a blue square as the player using the arrow keys or 'WASD' keys. The objective is to shoot green squares using the mouse click, represented by red bullets. You earn points for hitting enemies, and the game ends when an enemy touches the player. The score is displayed in the top left corner of the screen.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>FPS Shooter Game</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <script>
        // Game settings
        const canvasWidth = window.innerWidth;
        const canvasHeight = window.innerHeight;
        const playerSize = 50;
        const bulletSize = 10;
        const enemySize = 40;
        const enemySpeed = 5;
        const maxBullets = 3;
        const spawnRate = 2000;
        const scoreIncrement = 10;
        
        // Game state
        let canvas, ctx, player, bullets, enemies, scoreTimer, spawnTimer, score;

function init() {
            canvas = document.createElement('canvas');
            canvas.width = canvasWidth;
            canvas.height = canvasHeight;
            ctx = canvas.getContext('2d');
            document.body.appendChild(canvas);

player = {
                x: (canvasWidth / 2) - (playerSize / 2),
                y: (canvasHeight / 2) - (playerSize / 2)
            };

bullets = [];
            enemies = [];

scoreTimer = setInterval(() => {
                score += scoreIncrement;
            }, 1000);

spawnTimer = setInterval(spawnEnemy, spawnRate);

score = 0;

document.addEventListener('click', shoot);
            document.addEventListener('keydown', handleKeyDown);
            document.addEventListener('keyup', handleKeyUp);

update();
        }

function update() {
            ctx.clearRect(0, 0, canvasWidth, canvasHeight);

handleBullets();
            handleEnemies();
            handlePlayer();

drawPlayer();
            drawBullets();
            drawEnemies();

drawScore();

requestAnimationFrame(update);
        }

function handleKeyUp(event) {
            if (
                (event.key === 'ArrowUp' || event.key === 'w') &&
                (event.key === 'ArrowDown' || event.key === 's')
            ) {
                player.y = player.y;
            } else if (
                (event.key === 'ArrowLeft' || event.key === 'a') &&
                (event.key === 'ArrowRight' || event.key === 'd')
            ) {
                player.x = player.x;
            }
        }

function shoot() {
            if (bullets.length >= maxBullets) return;

bullets.push({
                x: player.x + (playerSize / 2) - (bulletSize / 2),
                y: player.y + (playerSize / 2) - (bulletSize / 2),
                size: bulletSize
            });
        }

function handleBullets() {
            bullets.forEach((bullet, index) => {
                bullet.y -= 10;

if (bullet.y < 0) {
                    bullets.splice(index, 1);
                }
            });
        }

function handleEnemies() {
            enemies.forEach((enemy, index) => {
                enemy.y += enemySpeed;

if (enemy.y > canvasHeight) {
                    enemies.splice(index, 1);
                }

bullets.forEach((bullet, bulletIndex) => {
                    if (
                        bullet.x < enemy.x + enemySize &&
                        bullet.x + bullet.size > enemy.x &&
                        bullet.y < enemy.y + enemySize &&
                        bullet.y + bullet.size > enemy.y
                    ) {
                        enemies.splice(index, 1);
                        bullets.splice(bulletIndex, 1);
                        score += scoreIncrement;
                    }
                });

if (
                    player.x < enemy.x + enemySize &&
                    player.x + playerSize > enemy.x &&
                    player.y < enemy.y + enemySize &&
                    player.y + playerSize > enemy.y
                ) {
                    clearInterval(scoreTimer);
                    clearInterval(spawnTimer);
                    alert('Game Over!\nYour score: ' + score);
                    window.location.reload();
                }
            });
        }

function handlePlayer() {
            if (player.x < 0) {
                player.x = 0;
            } else if (player.x > canvasWidth - playerSize) {
                player.x = canvasWidth - playerSize;
            }

if (player.y < 0) {
                player.y = 0;
            } else if (player.y > canvasHeight - playerSize) {
                player.y = canvasHeight - playerSize;
            }
        }

function drawPlayer() {
            ctx.fillStyle = 'blue';
            ctx.fillRect(player.x, player.y, playerSize, playerSize);
        }

function drawBullets() {
            bullets.forEach((bullet) => {
                ctx.fillStyle = 'red';
                ctx.fillRect(bullet.x, bullet.y, bullet.size, bullet.size);
            });
        }

function drawEnemies() {
            enemies.forEach((enemy) => {
                ctx.fillStyle = 'green';
                ctx.fillRect(enemy.x, enemy.y, enemySize, enemySize);
            });
        }

function spawnEnemy() {
            enemies.push({
                x: Math.random() * (canvasWidth - enemySize),
                y: -enemySize,
                size: enemySize
            });
        }

function drawScore() {
            ctx.font = '20px Arial';
            ctx.fillStyle = 'black';
            ctx.fillText('Score: ' + score, 10, 30);
        }

init();
    </script>
</body>
</html>
```

This game creates a canvas element that covers the entire screen and allows you to control a blue square as the player using the arrow keys or 'WASD' keys. The objective is to shoot green squares using the mouse click, represented by red bullets. You earn points for hitting enemies, and the game ends when an enemy touches the player. The score is displayed in the top left corner of the screen.