AI game creator

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

No:43573

133

←

Prev Next

→

Shooter
Developer User19184｜Date and time 24/2/16 3:39:57
Build time 17.839 sec｜Game capacity 5.896KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Shooter Game</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        #canvas {
            background-color: black;
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script>
        // Shooter game implementation

// Create canvas element
        const canvas = document.getElementById('canvas');
        const context = canvas.getContext('2d');

// Set canvas dimensions
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

// Create player object
        const player = {
            x: canvas.width / 2,
            y: canvas.height - 50,
            radius: 10,
            color: 'white'
        };

// Create bullets array to store the bullets fired by the player
        const bullets = [];

// Create enemies array to store the enemies
        const enemies = [];

// Function to create enemies
        function createEnemy() {
            const enemy = {
                x: Math.random() * canvas.width,
                y: 10,
                radius: 20,
                color: 'red',
                speed: Math.random() + 1
            };
            enemies.push(enemy);
        }

// Function to draw the player on the canvas
        function drawPlayer() {
            context.beginPath();
            context.arc(player.x, player.y, player.radius, 0, Math.PI * 2);
            context.fillStyle = player.color;
            context.fill();
            context.closePath();
        }

// Function to draw the bullets on the canvas
        function drawBullets() {
            for (let i = 0; i < bullets.length; i++) {
                context.beginPath();
                context.arc(bullets[i].x, bullets[i].y, bullets[i].radius, 0, Math.PI * 2);
                context.fillStyle = bullets[i].color;
                context.fill();
                context.closePath();
            }
        }

// Function to draw the enemies on the canvas
        function drawEnemies() {
            for (let i = 0; i < enemies.length; i++) {
                context.beginPath();
                context.arc(enemies[i].x, enemies[i].y, enemies[i].radius, 0, Math.PI * 2);
                context.fillStyle = enemies[i].color;
                context.fill();
                context.closePath();
            }
        }

// Function to update the player position based on user input
        function updatePlayerPosition(event) {
            const key = event.keyCode;
            if (key === 37 && player.x > player.radius) {
                player.x -= 10; // Move left
            }
            if (key === 39 && player.x < canvas.width - player.radius) {
                player.x += 10; // Move right
            }
            if (key === 32) {
                bullets.push({
                    x: player.x,
                    y: player.y,
                    radius: 5,
                    color: 'blue',
                    speed: 5
                }); // Fire bullet
            }
        }

// Function to update the bullets position and check for collision with enemies
        function updateBullets() {
            for (let i = 0; i < bullets.length; i++) {
                bullets[i].y -= bullets[i].speed; // Move bullet upwards

// Check collision with enemies
                for (let j = 0; j < enemies.length; j++) {
                    const dx = bullets[i].x - enemies[j].x;
                    const dy = bullets[i].y - enemies[j].y;
                    const distance = Math.sqrt(dx * dx + dy * dy);
                    if (distance < bullets[i].radius + enemies[j].radius) {
                        // Collision detected, remove bullet and enemy
                        bullets.splice(i, 1);
                        enemies.splice(j, 1);
                        break;
                    }
                }

// Check if bullet is out of the canvas
                if (bullets[i] && bullets[i].y < 0) {
                    bullets.splice(i, 1);
                    i--;
                }
            }
        }

// Function to update the enemies position and check for collision with player
        function updateEnemies() {
            for (let i = 0; i < enemies.length; i++) {
                enemies[i].y += enemies[i].speed; // Move enemy downwards

// Check collision with player
                const dx = player.x - enemies[i].x;
                const dy = player.y - enemies[i].y;
                const distance = Math.sqrt(dx * dx + dy * dy);
                if (distance < player.radius + enemies[i].radius) {
                    // Collision detected, game over
                    alert('Game Over');
                    document.location.reload();
                }

// Check if enemy is out of the canvas
                if (enemies[i] && enemies[i].y > canvas.height) {
                    enemies.splice(i, 1);
                    i--;
                }
            }
        }

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

// Main game loop
        function gameLoop() {
            clearCanvas();

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

updateBullets();
            updateEnemies();

requestAnimationFrame(gameLoop);
        }

// Event listener for player movement
        window.addEventListener('keydown', updatePlayerPosition);

// Start game with initial enemy creation
        setInterval(createEnemy, 2000);
        gameLoop();

</script>
</body>
</html>