Make a shooting game with 3D graphics's game

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

No:14970

←

Prev Next

→

Make a shooting game with 3D graphics
Developer User6450｜Date and time 23/9/5 6:39:52
Build time 26.424 sec｜Game capacity 3.804KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>3D Shooting Game</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="800" height="600"></canvas>
    <script>
        // Game variables
        var canvas;
        var canvasContext;
        var playerX = 400;
        var playerY = 550;
        var playerWidth = 50;
        var playerHeight = 50;
        var bullets = [];
        var enemyX = 400;
        var enemyY = 50;
        var enemyWidth = 50;
        var enemyHeight = 50;

// Initialize the game
        function initializeGame() {
            canvas = document.getElementById("gameCanvas");
            canvasContext = canvas.getContext('2d');

// Handle input
            document.addEventListener("keydown", handleKeyDown);
            canvas.addEventListener("click", fireBullet);

// Game loop
            setInterval(update, 1000 / 30);
        }

// Update game state
        function update() {
            moveEnemy();
            moveBullets();
            checkCollision();
            drawCanvas();
        }

// Handle keydown events
        function handleKeyDown(event) {
            var key = event.keyCode;
            if (key === 37) {
                // Move left
                playerX -= 10;
            } else if (key === 39) {
                // Move right
                playerX += 10;
            }
        }

// Fire a bullet
        function fireBullet() {
            var bullet = {
                x: playerX + playerWidth / 2,
                y: playerY,
                width: 5,
                height: 10,
                speed: 5
            };
            bullets.push(bullet);
        }

// Move the enemy
        function moveEnemy() {
            enemyX += Math.random() * 10 - 5;
            if (enemyX < 0) {
                enemyX = 0;
            } else if (enemyX > canvas.width - enemyWidth) {
                enemyX = canvas.width - enemyWidth;
            }
        }

// Move the bullets
        function moveBullets() {
            bullets.forEach(function (bullet) {
                bullet.y -= bullet.speed;
                if (bullet.y < 0) {
                    var index = bullets.indexOf(bullet);
                    if (index !== -1) {
                        bullets.splice(index, 1); // Remove bullet if it's off the screen
                    }
                }
            });
        }

// Check collision between bullets and enemy
        function checkCollision() {
            bullets.forEach(function (bullet) {
                if (bullet.x < enemyX + enemyWidth &&
                    bullet.x + bullet.width > enemyX &&
                    bullet.y < enemyY + enemyHeight &&
                    bullet.y + bullet.height > enemyY) {
                    alert("You win!"); // Game over, show win message
                }
            });
        }

// Draw game elements on the canvas
        function drawCanvas() {
            // Clear canvas
            canvasContext.clearRect(0, 0, canvas.width, canvas.height);

// Draw player
            canvasContext.fillStyle = "#FF0000";
            canvasContext.fillRect(playerX, playerY, playerWidth, playerHeight);

// Draw enemy
            canvasContext.fillStyle = "#00FF00";
            canvasContext.fillRect(enemyX, enemyY, enemyWidth, enemyHeight);

// Draw bullets
            canvasContext.fillStyle = "#0000FF";
            bullets.forEach(function (bullet) {
                canvasContext.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
            });
        }

// Start the game
        initializeGame();
    </script>
</body>
</html>