3D gun game in 3D with camera movement and you can look up and down and you can look and diagonals doom graphics's game

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

No:11463

100

←

Prev Next

→

3D gun game in 3D with camera movement and you can..ALL
Developer User4887｜Date and time 23/8/10 6:59:20
Build time 23.871 sec｜Game capacity 4.457KB｜

Script

In this game, the player can navigate a 3D environment represented by 2D pictographic tiles. The player can move forward and backward, rotate left or right, and look around by changing the viewing angle. The game uses a simple raycasting technique similar to the graphics in the game Doom. The player can explore the map and interact with the environment. The game is controlled using smartphone operation, assuming touch events and onscreen controls are added to the code.

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>3D Gun Game</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

canvas {
            background-color: black;
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="800" height="600"></canvas>

// Player position and direction
        let playerX = 8;
        let playerY = 8;
        let playerAngle = 0;

// Game map
        const map = [
            "11111111111111111111",
            "1................1",
            "1................1",
            "1................1",
            "122221111111111...1",
            "1..............1...1",
            "1..............1...1",
            "1.....111111111....1",
            "1.....1............1",
            "1.....1............1",
            "11111111111111111111",
        ];

const mapWidth = map[0].length;
        const mapHeight = map.length;
        const tileSize = 64;

function drawTile(x, y, tile) {
            context.drawImage(tile, x * tileSize, y * tileSize, tileSize, tileSize);
        }

function drawPlayer() {
            // Rotate the player based on the viewing angle
            context.save();
            context.translate(playerX * tileSize + tileSize / 2, playerY * tileSize + tileSize / 2);
            context.rotate(playerAngle);
            context.drawImage(playerImage, -32, -32, 64, 64);
            context.restore();
        }

function handleInput(event) {
            const key = event.code;

if (key === "KeyA") {
                playerAngle -= Math.PI / 10;
            } else if (key === "KeyD") {
                playerAngle += Math.PI / 10;
            } else if (key === "ArrowUp") {
                const newX = playerX + Math.cos(playerAngle) * 0.1;
                const newY = playerY + Math.sin(playerAngle) * 0.1;

if (map[Math.floor(newY)][Math.floor(newX)] === '.') {
                    playerX = newX;
                    playerY = newY;
                }
            } else if (key === "ArrowDown") {
                const newX = playerX - Math.cos(playerAngle) * 0.1;
                const newY = playerY - Math.sin(playerAngle) * 0.1;

if (map[Math.floor(newY)][Math.floor(newX)] === '.') {
                    playerX = newX;
                    playerY = newY;
                }
            }
        }

function gameLoop() {
            context.clearRect(0, 0, canvas.width, canvas.height);

// Draw the map
            for (let y = 0; y < mapHeight; y++) {
                for (let x = 0; x < mapWidth; x++) {
                    const tileId = map[y][x];
                    const tileImage = document.getElementById(tileId);

drawTile(x, y, tileImage);
                }
            }

// Draw the player
            drawPlayer();

requestAnimationFrame(gameLoop);
        }

function startGame() {
            // Create image elements for tiles
            for (let y = 0; y < mapHeight; y++) {
                for (let x = 0; x < mapWidth; x++) {
                    const tileId = map[y][x];
                    const tileImage = new Image();
                    tileImage.src = `${tileId}.png`;

map[y][x] = tileImage;
                }
            }

// Load player image
            playerImage = new Image();
            playerImage.src = "player.png";
            
            // Register input event listener
            document.addEventListener("keydown", handleInput);
            
            // Start the game loop
            gameLoop();
        }

// Load all resources before starting the game
        window.addEventListener("load", startGame);

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