AI game creator

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

No:50031

←

Prev Next

→

3D enemy shooter
Developer User21218｜Date and time 24/3/7 14:13:31
Build time 9.242 sec｜Game capacity 2.365KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Enemy Shooter Game</title>
<style>
    canvas {
        display: block;
        margin: 0 auto;
    }
</style>
</head>
<body>
<canvas id="gameCanvas" width="800" height="600"></canvas>
<script>
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');

// Player variables
    let playerX = canvas.width / 2;
    let playerY = canvas.height / 2;
    let playerSize = 20;
    let playerSpeed = 5;

// Enemy variables
    let enemyX = Math.random() * canvas.width;
    let enemyY = Math.random() * canvas.height;
    let enemySize = 20;
    let enemySpeed = 3;

function drawPlayer() {
        ctx.fillStyle = 'blue';
        ctx.fillRect(playerX - playerSize / 2, playerY - playerSize / 2, playerSize, playerSize);
    }

function drawEnemy() {
        ctx.fillStyle = 'red';
        ctx.fillRect(enemyX - enemySize / 2, enemyY - enemySize / 2, enemySize, enemySize);
    }

function movePlayer(event) {
        switch(event.key) {
            case 'ArrowUp':
                playerY -= playerSpeed;
                break;
            case 'ArrowDown':
                playerY += playerSpeed;
                break;
            case 'ArrowLeft':
                playerX -= playerSpeed;
                break;
            case 'ArrowRight':
                playerX += playerSpeed;
                break;
        }
    }

function moveEnemy() {
        let dx = playerX - enemyX;
        let dy = playerY - enemyY;
        let angle = Math.atan2(dy, dx);
        enemyX += Math.cos(angle) * enemySpeed;
        enemyY += Math.sin(angle) * enemySpeed;
    }

function checkCollision() {
        let distance = Math.sqrt((playerX - enemyX) ** 2 + (playerY - enemyY) ** 2);
        if (distance < playerSize / 2 + enemySize / 2) {
            alert('Game Over! You collided with the enemy.');
            location.reload();
        }
    }

function gameLoop() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        moveEnemy();
        drawPlayer();
        drawEnemy();
        checkCollision();
        requestAnimationFrame(gameLoop);
    }

document.addEventListener('keydown', movePlayer);
    gameLoop();
</script>
</body>
</html>