I want to make a first-person shooter game.'s game

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

No:800

342

←

Prev Next

→

I want to make a first-person shooter game.
Developer User3140｜Date and time 23/6/17 18:37:20
Build time 30.561 sec｜Game capacity 3.251KB｜

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>一人称視点のシューティングゲーム</title>
    <style>
        canvas {
            width: 100%;
            height: 100%;
        }
        body {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas"></canvas>
    <script>
        const canvas = document.getElementById("gameCanvas");
        const context = canvas.getContext("2d");
        
        let playerX = canvas.width / 2;
        let playerY = canvas.height / 2;

let moveSpeed = 5;
        let bullets = [];

function drawPlayer() {
            context.fillStyle = "yellow";
            context.beginPath();
            context.arc(playerX, playerY, 20, 0, Math.PI * 2);
            context.fill();
        }

function drawBullets() {
            context.fillStyle = "red";
            for (let i = 0; i < bullets.length; i++) {
                context.beginPath();
                context.arc(bullets[i].x, bullets[i].y, 5, 0, Math.PI * 2);
                context.fill();
            }
        }

function gameLoop() {
            context.clearRect(0, 0, canvas.width, canvas.height);
            drawPlayer();
            drawBullets();
            moveBullets();
            detectHit();
        }

document.addEventListener("keydown", movePlayer);
        let gameLoop = setInterval(gameLoop, 30);
    </script>
</body>
</html>