AI game creator

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

No:35919

135

←

Prev Next

→

Fps shooter
Developer User16698｜Date and time 24/1/16 3:21:43
Build time 23.732 sec｜Game capacity 6.567KB｜

Script

Sure, here is a simple FPS shooter game implemented as a single HTML file using JavaScript:

This basic implementation creates an HTML canvas, lets the player control a blue circle (representing the player) with their mouse, allows the player to shoot red circles (representing bullets) at green circles (representing enemies). The player gains score whenever a bullet hits an enemy. If the player collides with an enemy, the game ends and the final score is displayed.

←

Prev　Next

→ 　

Back　

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

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

Sure, here is a simple FPS shooter game implemented as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
    <title>FPS Shooter Game</title>
</head>
<body>
    <canvas id="gameCanvas"></canvas>
    <script>
        // Game Variables
        var canvas, context;
        var player, bullets, enemies;
        var frameCount = 0;
        var score = 0;

// Initialize the game
        window.onload = function() {
            canvas = document.getElementById("gameCanvas");
            context = canvas.getContext("2d");

canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;

player = {
                x: canvas.width / 2,
                y: canvas.height / 2,
                size: 20,
                speed: 5
            };

bullets = [];
            enemies = [];

canvas.addEventListener("mousedown", shootBullet);

setInterval(update, 16);
        }

// Game Loop
        function update() {
            clearCanvas();
            updatePlayer();
            updateBullets();
            updateEnemies();
            drawScore();
            frameCount++;
        }

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

// Update the player position
        function updatePlayer() {
            var dx = player.x - mouseX;
            var dy = player.y - mouseY;
            var angle = Math.atan2(dy, dx);

player.x += Math.cos(angle) * player.speed;
            player.y += Math.sin(angle) * player.speed;

drawPlayer();
        }

// Draw the player on the canvas
        function drawPlayer() {
            context.fillStyle = "blue";
            context.beginPath();
            context.arc(player.x, player.y, player.size, 0, Math.PI * 2);
            context.closePath();
            context.fill();
        }

// Shoot a bullet from the player's position
        function shootBullet() {
            bullets.push({
                x: player.x,
                y: player.y,
                size: 5,
                speed: 10,
                angle: Math.atan2(player.y - mouseY, player.x - mouseX)
            });
        }

// Update the bullets position
        function updateBullets() {
            bullets.forEach(function(bullet) {
                bullet.x += Math.cos(bullet.angle) * bullet.speed;
                bullet.y += Math.sin(bullet.angle) * bullet.speed;

drawBullet(bullet);

// Check bullet collision with enemies
                enemies.forEach(function(enemy) {
                    if (circleCollision(bullet, enemy)) {
                        bullets.splice(bullets.indexOf(bullet), 1);
                        enemies.splice(enemies.indexOf(enemy), 1);
                        score++;
                    }
                });

// Remove bullets when they reach canvas boundaries
                if (bullet.x < 0 || bullet.x > canvas.width || bullet.y < 0 || bullet.y > canvas.height) {
                    bullets.splice(bullets.indexOf(bullet), 1);
                }
            });
        }

// Draw a bullet on the canvas
        function drawBullet(bullet) {
            context.fillStyle = "red";
            context.beginPath();
            context.arc(bullet.x, bullet.y, bullet.size, 0, Math.PI * 2);
            context.closePath();
            context.fill();
        }

// Update the enemies position
        function updateEnemies() {
            // Create new enemy every 50 frames
            if (frameCount % 50 === 0) {
                var enemySize = Math.random() * 20 + 10;
                var enemySpeed = Math.random() * 2 + 1;

enemies.push({
                    x: Math.random() * canvas.width,
                    y: Math.random() * canvas.height,
                    size: enemySize,
                    speed: enemySpeed
                });
            }

enemies.forEach(function(enemy) {
                enemy.x += Math.random() * enemy.speed - enemy.speed / 2;
                enemy.y += Math.random() * enemy.speed - enemy.speed / 2;

drawEnemy(enemy);

// Check enemy collision with player
                if (circleCollision(enemy, player)) {
                    // Game over
                    alert("Game Over! Your score: " + score);
                    location.reload();
                }
            });
        }

// Draw an enemy on the canvas
        function drawEnemy(enemy) {
            context.fillStyle = "green";
            context.beginPath();
            context.arc(enemy.x, enemy.y, enemy.size, 0, Math.PI * 2);
            context.closePath();
            context.fill();
        }

// Draw the score on the canvas
        function drawScore() {
            context.font = "20px Arial";
            context.fillStyle = "black";
            context.fillText("Score: " + score, 10, 30);
        }

// Check collision between two circles
        function circleCollision(obj1, obj2) {
            var distance = Math.sqrt(Math.pow(obj1.x - obj2.x, 2) + Math.pow(obj1.y - obj2.y, 2));
            return distance < obj1.size + obj2.size;
        }

// Get mouse position
        function getMousePos(event) {
            var rect = canvas.getBoundingClientRect();
            var root = document.documentElement;
            var mouseX = event.clientX - rect.left - root.scrollLeft;
            var mouseY = event.clientY - rect.top - root.scrollTop;
            return {
                x: mouseX,
                y: mouseY
            };
        }

// Mouse move event listener
        document.addEventListener("mousemove", function(event) {
            var mousePos = getMousePos(event);
            mouseX = mousePos.x;
            mouseY = mousePos.y;
        });

// Prevent right click context menu
        document.addEventListener("contextmenu", function(event) {
            event.preventDefault();
        });
    </script>
</body>
</html>
```