Untitled

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Offline Game Creator</title>
  <style>
    body { font-family: sans-serif; text-align: center; background: #f5f5f5; }
    #canvas { border: 2px solid #333; background: white; cursor: crosshair; }
    .controls { margin: 10px; }
    button { margin: 5px; padding: 8px 12px; font-size: 14px; }
  </style>
</head>
<body>
  <h1>Offline Maze Creator & Player</h1>
 
  <div class="controls">
    <button onclick="setMode('wall')">Place Walls</button>
    <button onclick="setMode('start')">Set Start</button>
    <button onclick="setMode('goal')">Set Goal</button>
    <button onclick="playGame()">Play</button>
    <button onclick="saveMaze()">Save</button>
    <button onclick="loadMaze()">Load</button>
    <button onclick="resetMaze()">Clear</button>
  </div>

  <canvas id="canvas" width="400" height="400"></canvas>

  <script>
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    const size = 20; // grid cell size
    const rows = canvas.height / size;
    const cols = canvas.width / size;

    let grid = Array(rows).fill().map(() => Array(cols).fill(0));
    let start = null, goal = null;
    let mode = 'wall';
    let player = null;
    let playing = false;

    function drawGrid() {
      ctx.clearRect(0,0,canvas.width,canvas.height);
      for (let r=0;r<rows;r++) {
        for (let c=0;c<cols;c++) {
          if (grid[r][c] === 1) { // wall
            ctx.fillStyle = 'black';
            ctx.fillRect(c*size,r*size,size,size);
          }
        }
      }
      if (goal) {
        ctx.fillStyle = 'red';
        ctx.fillRect(goal.c*size, goal.r*size, size, size);
      }
      if (start) {
        ctx.fillStyle = 'green';
        ctx.fillRect(start.c*size, start.r*size, size, size);
      }
      if (player) {
        ctx.fillStyle = 'blue';
        ctx.fillRect(player.c*size, player.r*size, size, size);
      }
      ctx.strokeStyle = '#ccc';
      for (let r=0;r<=rows;r++) {
        ctx.beginPath();
        ctx.moveTo(0,r*size); ctx.lineTo(canvas.width,r*size);
        ctx.stroke();
      }
      for (let c=0;c<=cols;c++) {
        ctx.beginPath();
        ctx.moveTo(c*size,0); ctx.lineTo(c*size,canvas.height);
        ctx.stroke();
      }
    }

    function setMode(m) {
      mode = m;
      playing = false;
      player = null;
      drawGrid();
    }

    canvas.addEventListener('click', e => {
      if (playing) return;
      const rect = canvas.getBoundingClientRect();
      const c = Math.floor((e.clientX-rect.left)/size);
      const r = Math.floor((e.clientY-rect.top)/size);
      if (mode === 'wall') {
        grid[r][c] = grid[r][c] === 1 ? 0 : 1;
      } else if (mode === 'start') {
        start = {r,c};
      } else if (mode === 'goal') {
        goal = {r,c};
      }
      drawGrid();
    });

    function playGame() {
      if (!start || !goal) {
        alert("Set a start and goal first!");
        return;
      }
      player = {...start};
      playing = true;
      drawGrid();
    }

    document.addEventListener('keydown', e => {
      if (!playing) return;
      let {r,c} = player;
      if (e.key === 'ArrowUp' || e.key === 'w') r--;
      if (e.key === 'ArrowDown' || e.key === 's') r++;
      if (e.key === 'ArrowLeft' || e.key === 'a') c--;
      if (e.key === 'ArrowRight' || e.key === 'd') c++;
      if (r<0||c<0||r>=rows||c>=cols) return;
      if (grid[r][c]===1) return;
      player = {r,c};
      if (goal && r===goal.r && c===goal.c) {
        alert("🎉 You reached the goal!");
        playing = false;
      }
      drawGrid();
    });

    function saveMaze() {
      const data = {grid,start,goal};
      localStorage.setItem('maze', JSON.stringify(data));
      alert("Maze saved!");
    }

    function loadMaze() {
      const data = JSON.parse(localStorage.getItem('maze'));
      if (!data) { alert("No saved maze!"); return; }
      grid = data.grid;
      start = data.start;
      goal = data.goal;
      playing = false;
      player = null;
      drawGrid();
    }

    function resetMaze() {
      grid = Array(rows).fill().map(() => Array(cols).fill(0));
      start = goal = player = null;
      playing = false;
      drawGrid();
    }

    drawGrid();
  </script>
</body>
</html>
Editor is loading...