Fake 3D (Raycasting) Game's game

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

No:34078

119

←

Prev Next

→

Fake 3D (Raycasting) Game
Developer User16032｜Date and time 24/1/8 4:29:36
Build time 65.462 sec｜Game capacity 8.058KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Juego Fake 3D - Raycasting</title>
    <style>
        body {
            margin: 0;
            background-color: black;
        }

#game {
            position: relative;
            width: 100%;
            height: 100vh;
        }

#player {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 10px;
            height: 10px;
            background-color: red;
            transform: translate(-50%, -50%);
        }

.wall {
            position: absolute;
            background-color: white;
        }
    </style>
</head>
<body>
    <div id="game">
        <div id="player"></div>
        <div class="wall" style="top: 20px; left: 120px; width: 10px; height: 200px;"></div>
        <div class="wall" style="top: 140px; left: 50px; width: 10px; height: 100px;"></div>
        <div class="wall" style="top: 250px; left: 180px; width: 10px; height: 50px;"></div>
        
    </div>

// Game configuration
        var gameWidth = document.getElementById('game').offsetWidth;
        var gameHeight = document.getElementById('game').offsetHeight;
        var playerSpeed = 2;
        var playerRotationSpeed = 2;

// Player position and direction
        var playerX = gameWidth / 2;
        var playerY = gameHeight / 2;
        var playerAngle = 0;

// Game loop
        function gameLoop() {
            movePlayer();
            castRays();
            requestAnimationFrame(gameLoop);
        }

// Move player based on touch input (smartphone only)
        function movePlayer() {
            document.addEventListener('touchstart', function(event) {
                event.preventDefault();
                var touchX = event.touches[0].clientX;
                var touchY = event.touches[0].clientY;

// Rotate player towards touch position
                var dx = touchX - playerX;
                var dy = touchY - playerY;
                var touchAngle = Math.atan2(dy, dx) * (180 / Math.PI);
                if (touchAngle < 0) touchAngle = 360 + touchAngle;

// Calculate the rotation direction (clockwise or counterclockwise)
                var rotationDirection = (Math.abs(touchAngle - playerAngle) <= 180) ? 1 : -1;

// Rotate player
                var rotateInterval = setInterval(function() {
                    playerAngle += playerRotationSpeed * rotationDirection;
                    if (playerAngle >= 360) playerAngle -= 360;
                    if (playerAngle < 0) playerAngle += 360;
                    player.style.transform = 'translate(-50%, -50%) rotate(' + playerAngle + 'deg)';

// Stop rotation when player is facing the touch position
                    if (Math.abs(playerAngle - touchAngle) <= playerRotationSpeed) {
                        clearInterval(rotateInterval);
                    }
                }, 10);
            });

document.addEventListener('touchmove', function(event) {
                event.preventDefault();
                var touchX = event.touches[0].clientX;
                var touchY = event.touches[0].clientY;

// Move player towards touch position
                var dx = touchX - playerX;
                var dy = touchY - playerY;
                var distance = Math.sqrt(dx * dx + dy * dy);

if (distance > playerSpeed) {
                    var moveX = (dx / distance) * playerSpeed;
                    var moveY = (dy / distance) * playerSpeed;

playerX += moveX;
                    playerY += moveY;
                    player.style.left = playerX + 'px';
                    player.style.top = playerY + 'px';
                }
            });
        }

// Cast rays to simulate fake 3D rendering
        function castRays() {
            for (var i = 0; i < gameWidth; i += 2) {
                var rayAngle = (playerAngle - 30) + (i / gameWidth) * 60;
                var rayX = playerX;
                var rayY = playerY;
                var rayDistance = 0;

var rayInterval = setInterval(function() {
                    rayDistance += 1;

// Calculate ray position
                    rayX = playerX + Math.cos(rayAngle * Math.PI / 180) * rayDistance;
                    rayY = playerY + Math.sin(rayAngle * Math.PI / 180) * rayDistance;

// Detect wall collision
                    for (var j = 0; j < walls.length; j++) {
                        var wall = walls[j];
                        if (checkCollision(rayX, rayY, wall)) {
                            clearInterval(rayInterval);
                            renderWall(i, rayDistance, getWallHeight(rayDistance));
                            break;
                        }
                    }

// Render floor and ceiling
                    renderFloorAndCeiling(i, rayDistance);

// Stop ray casting when reaching maximum distance
                    if (rayDistance >= gameHeight / 2) {
                        clearInterval(rayInterval);
                    }
                }, 10);
            }
        }

// Check collision between ray and wall
        function checkCollision(rayX, rayY, wall) {
            var wallX = wall.offsetLeft;
            var wallY = wall.offsetTop;
            var wallWidth = wall.offsetWidth;
            var wallHeight = wall.offsetHeight;

if (rayX >= wallX && rayX <= wallX + wallWidth && rayY >= wallY && rayY <= wallY + wallHeight) {
                return true;
            }
            return false;
        }

// Render wall segment based on ray distance
        function renderWall(rayIndex, rayDistance, wallHeight) {
            var wallSegment = document.createElement('div');
            wallSegment.className = 'wall-segment';
            wallSegment.style.position = 'absolute';
            wallSegment.style.width = '2px';
            wallSegment.style.height = wallHeight + 'px';
            wallSegment.style.backgroundColor = 'gray';
            wallSegment.style.left = rayIndex + 'px';
            wallSegment.style.bottom = (gameHeight / 2) - (wallHeight / 2) + 'px';
            document.getElementById('game').appendChild(wallSegment);
        }

// Get wall height based on ray distance
        function getWallHeight(rayDistance) {
            return (gameHeight / rayDistance) * 160;
        }

// Render floor and ceiling
        function renderFloorAndCeiling(rayIndex, rayDistance) {
            var floorCeilingHeight = gameHeight / 2;
            var floorSegment = document.createElement('div');
            var ceilingSegment = document.createElement('div');

floorSegment.className = 'floor-segment';
            floorSegment.style.position = 'absolute';
            floorSegment.style.width = '2px';
            floorSegment.style.height = floorCeilingHeight + 'px';
            floorSegment.style.backgroundColor = 'darkgray';
            floorSegment.style.left = rayIndex + 'px';
            floorSegment.style.top = (gameHeight / 2) + 'px';
            document.getElementById('game').appendChild(floorSegment);

ceilingSegment.className = 'ceiling-segment';
            ceilingSegment.style.position = 'absolute';
            ceilingSegment.style.width = '2px';
            ceilingSegment.style.height = floorCeilingHeight + 'px';
            ceilingSegment.style.backgroundColor = 'lightgray';
            ceilingSegment.style.left = rayIndex + 'px';
            ceilingSegment.style.bottom = (gameHeight / 2) + 'px';
            document.getElementById('game').appendChild(ceilingSegment);
        }

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