A 3d raycasting maze game's game

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

No:31810

←

Prev Next

→

A 3d raycasting maze game
Developer User15241｜Date and time 23/12/28 11:16:23
Build time 38.51 sec｜Game capacity 4.242KB｜

Script

Sure! Here's a simplified implementation of a 3D raycasting maze game in a single HTML file with JavaScript:

This implementation provides a basic 3D raycasting experience using a simple maze. The player can use touch controls on their smartphone to rotate and navigate through the maze. The walls are rendered using 3D raycasting techniques, creating a pseudo-3D effect. The player's position is displayed as a red dot on the map.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

Sure! Here's a simplified implementation of a 3D raycasting maze game in a single HTML file with JavaScript:

```html
<!DOCTYPE html>
<html>
  <head>
    <title>3D Raycasting Maze Game</title>
    <style>
      #gameCanvas {
        width: 100%;
        height: 100%;
        background-color: #000;
      }
    </style>
  </head>
  <body>
    <canvas id="gameCanvas"></canvas>

// Game setup
      const canvas = document.getElementById("gameCanvas");
      const ctx = canvas.getContext("2d");
      const gridSize = 32; // Each cell size in pixels
      const mapSize = 16; // Number of cells in each row/column of the map
      const player = {
        x: 2.5,
        y: 2.5,
        direction: Math.PI / 4, // Initial player direction in radians
        speed: 0.1, // Player movement speed
      };
      const map = [
        [1, 1, 1, 1, 1, 1, 1],
        [1, 0, 0, 0, 0, 0, 1],
        [1, 0, 1, 1, 1, 0, 1],
        [1, 0, 1, 0, 0, 0, 1],
        [1, 0, 1, 0, 1, 0, 1],
        [1, 0, 0, 0, 1, 0, 1],
        [1, 1, 1, 1, 1, 1, 1],
      ];

// Game loop
      function gameLoop(currentTime) {
        clearCanvas();
        update();
        draw();
        requestAnimationFrame(gameLoop);
      }

// Function to clear the canvas on each frame
      function clearCanvas() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
      }

// Function to update the game state
      function update() {
        // Player movement logic
        const newX = player.x + Math.cos(player.direction) * player.speed;
        const newY = player.y + Math.sin(player.direction) * player.speed;

// Checking if the new position is a valid cell on the map
        if (map[Math.floor(newY)][Math.floor(newX)] === 0) {
          player.x = newX;
          player.y = newY;
        }
      }

// Function to draw the game on the canvas
      function draw() {
        // Drawing the 3D raycasting walls
        for (let x = 0; x < canvas.width; x++) {
          const rayAngle =
            (player.direction - Math.PI / 6) +
            ((2 * Math.PI) / canvas.width) * x;

let rayDistance = 0;
          let hitWall = false;

while (!hitWall && rayDistance < 16) {
            const rayX = player.x + Math.cos(rayAngle) * rayDistance;
            const rayY = player.y + Math.sin(rayAngle) * rayDistance;

if (map[Math.floor(rayY)][Math.floor(rayX)] === 1) {
              hitWall = true;
            }

rayDistance += 0.01;
          }

const ceilingHeight = ((canvas.height / 2) * gridSize) / rayDistance;
          const floorHeight = canvas.height - ceilingHeight;

const wallColor = hitWall ? "#fff" : "#333";

ctx.fillStyle = wallColor;
          ctx.fillRect(x, 0, 1, ceilingHeight);

ctx.fillStyle = "#999";
          ctx.fillRect(x, ceilingHeight, 1, floorHeight);
        }

// Drawing the player's position on the map
        const mapCellSize = canvas.width / mapSize;

ctx.fillStyle = "#f00";
        ctx.fillRect(
          player.x * mapCellSize - 2.5,
          player.y * mapCellSize - 2.5,
          5,
          5
        );
      }

// Handle smartphone touch events for player movement
      function handleTouchStart(event) {
        if (event.touches.length === 1) {
          const touchX = event.touches[0].clientX;
          const screenCenterX = window.innerWidth / 2;
          const touchOffsetX = touchX - screenCenterX;

player.direction += (touchOffsetX * Math.PI) / 180;
        }
      }

// Start the game loop and touch event listener
      document.addEventListener("DOMContentLoaded", function () {
        requestAnimationFrame(gameLoop);
        canvas.addEventListener("touchstart", handleTouchStart, false);
      });
    </script>
  </body>
</html>
```