Create a game using the raycasting method to make a 3D environment Add enemies and objects and also player movement's game

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

No:52654

219

←

Prev Next

→

Create a game using the raycasting method to make ..ALL
Developer User22097｜Date and time 24/3/23 23:13:26
Build time 20.47 sec｜Game capacity 4.972KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Raycasting 3D Game</title>
</head>
<body>
    <canvas id="gameCanvas" width="800" height="600"></canvas>

// Map representing walls and objects
        const map = [
            [1, 1, 1, 1, 1],
            [1, 0, 0, 0, 1],
            [1, 1, 0, 1, 1],
            [1, 0, 0, 0, 1],
            [1, 1, 1, 1, 1]
        ];

// Player position and direction
        let playerX = 2;
        let playerY = 2;
        let playerDirX = 1;
        let playerDirY = 0;
        let playerPlaneX = 0;
        let playerPlaneY = 0.66;

const FOV = Math.PI / 3; // Field of view

// Main game loop
        function update() {
            ctx.fillStyle = '#000';
            ctx.fillRect(0, 0, canvas.width, canvas.height);

for (let x = 0; x < canvas.width; x++) {
                const cameraX = 2 * x / canvas.width - 1;
                const rayDirX = playerDirX + playerPlaneX * cameraX;
                const rayDirY = playerDirY + playerPlaneY * cameraX;

const deltaDistX = Math.abs(1 / rayDirX);
                const deltaDistY = Math.abs(1 / rayDirY);

let sideDistX, sideDistY;

let stepX, stepY;

let hit = 0;
                let side;

if (rayDirX < 0) {
                    stepX = -1;
                    sideDistX = (playerX - Math.floor(playerX)) * deltaDistX;
                } else {
                    stepX = 1;
                    sideDistX = (Math.floor(playerX) + 1 - playerX) * deltaDistX;
                }

if (rayDirY < 0) {
                    stepY = -1;
                    sideDistY = (playerY - Math.floor(playerY)) * deltaDistY;
                } else {
                    stepY = 1;
                    sideDistY = (Math.floor(playerY) + 1 - playerY) * deltaDistY;
                }

while (hit === 0) {
                    if (sideDistX < sideDistY) {
                        sideDistX += deltaDistX;
                        playerX += stepX;
                        side = 0;
                    } else {
                        sideDistY += deltaDistY;
                        playerY += stepY;
                        side = 1;
                    }

if (map[Math.floor(playerX)][Math.floor(playerY)] > 0) {
                        hit = 1;
                    }
                }

const perpWallDist = side === 0 
                    ? Math.abs((Math.floor(playerX) - playerX + (1 - stepX) / 2) / rayDirX)
                    : Math.abs((Math.floor(playerY) - playerY + (1 - stepY) / 2) / rayDirY);

const lineHeight = Math.abs(Math.floor(canvas.height / perpWallDist));

const color = side === 0 ? '#FF0000' : '#00FF00';

ctx.beginPath();
                ctx.strokeStyle = color;
                ctx.moveTo(x, canvas.height / 2 - lineHeight / 2);
                ctx.lineTo(x, canvas.height / 2 + lineHeight / 2);
                ctx.stroke();
            }

requestAnimationFrame(update);
        }

document.addEventListener('keydown', (e) => {
            const moveSpeed = 0.1;
            const rotSpeed = 0.1;

switch (e.key) {
                case 'ArrowUp':
                    playerX += playerDirX * moveSpeed;
                    playerY += playerDirY * moveSpeed;
                    break;
                case 'ArrowDown':
                    playerX -= playerDirX * moveSpeed;
                    playerY -= playerDirY * moveSpeed;
                    break;
                case 'ArrowRight':
                    const oldDirX = playerDirX;
                    playerDirX = playerDirX * Math.cos(-rotSpeed) - playerDirY * Math.sin(-rotSpeed);
                    playerDirY = oldDirX * Math.sin(-rotSpeed) + playerDirY * Math.cos(-rotSpeed);
                    const oldPlaneX = playerPlaneX;
                    playerPlaneX = playerPlaneX * Math.cos(-rotSpeed) - playerPlaneY * Math.sin(-rotSpeed);
                    playerPlaneY = oldPlaneX * Math.sin(-rotSpeed) + playerPlaneY * Math.cos(-rotSpeed);
                    break;
                case 'ArrowLeft':
                    const oldDirXLeft = playerDirX;
                    playerDirX = playerDirX * Math.cos(rotSpeed) - playerDirY * Math.sin(rotSpeed);
                    playerDirY = oldDirXLeft * Math.sin(rotSpeed) + playerDirY * Math.cos(rotSpeed);
                    const oldPlaneXLeft = playerPlaneX;
                    playerPlaneX = playerPlaneX * Math.cos(rotSpeed) - playerPlaneY * Math.sin(rotSpeed);
                    playerPlaneY = oldPlaneXLeft * Math.sin(rotSpeed) + playerPlaneY * Math.cos(rotSpeed);
                    break;
            }
        });

update();
    </script>
</body>
</html>