FPS game with mouse and keyboard support's game

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

No:19723

←

Prev Next

→

FPS game with mouse and keyboard support
Developer User8794｜Date and time 23/10/6 6:54:33
Build time 9.1 sec｜Game capacity 2.288KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>FPS Game</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="800" height="600"></canvas>

// Set up game variables
        let playerX = canvas.width / 2;
        let playerY = canvas.height - 50;
        let playerSize = 20;
        let playerSpeed = 5;

let movingLeft = false;
        let movingRight = false;

// Keyboard event listeners
        document.addEventListener("keydown", keyDownHandler, false);
        document.addEventListener("keyup", keyUpHandler, false);

function keyDownHandler(event) {
            if (event.key === "ArrowLeft") {
                movingLeft = true;
            } else if (event.key === "ArrowRight") {
                movingRight = true;
            }
        }

function keyUpHandler(event) {
            if (event.key === "ArrowLeft") {
                movingLeft = false;
            } else if (event.key === "ArrowRight") {
                movingRight = false;
            }
        }

// Mouse event listener
        canvas.addEventListener("mousemove", mouseMoveHandler, false);

function mouseMoveHandler(event) {
            const relativeX = event.clientX - canvas.offsetLeft;
            if (relativeX > 0 && relativeX < canvas.width) {
                playerX = relativeX - playerSize / 2;
            }
        }

// Game loop
        function draw() {
            // Clear canvas
            context.clearRect(0, 0, canvas.width, canvas.height);

// Draw player
            context.beginPath();
            context.fillRect(playerX, playerY, playerSize, playerSize);
            context.closePath();

// Move player
            if (movingLeft && playerX > 0) {
                playerX -= playerSpeed;
            }
            if (movingRight && playerX + playerSize < canvas.width) {
                playerX += playerSpeed;
            }

requestAnimationFrame(draw);
        }

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