A simple game of any kind but with tricks to make it look 3d's game

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

No:33676

109

←

Prev Next

→

A simple game of any kind but with tricks to make ..ALL
Developer User3550｜Date and time 24/1/6 4:13:46
Build time 54.222 sec｜Game capacity 4.345KB｜

Script

Sure! Here's a simple game called "Picto Maze" implemented as a single HTML file with JavaScript enclosed in script tags. This game is playable on smartphones and uses pictograms to create a 3D-like illusion. The objective is to guide the character through a maze to reach the goal.

To use this code, you need to have three image files: `emozi_bear.png`, `emozi_chicken.png`, and `emozi_rabbit.png`, which should be placed in the same directory as the HTML file. Note: This is just a simple example to demonstrate the concept. You can enhance this game further by adding more levels, increasing complexity, and refining the user interface.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Picto Maze</title>
  <style>
    canvas {
      display: block;
      margin: 0 auto;
      border: 1px solid black;
    }
  </style>
</head>
<body>

const goalImg = new Image();
    goalImg.src = 'goal.png';

const wallImg = new Image();
    wallImg.src = 'wall.png';

// Game variables
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');
    const gridSize = 20;
    const maze = [
      [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
      [1, 0, 0, 0, 0, 0, 0, 0, 0, 1],
      [1, 0, 1, 1, 0, 1, 1, 1, 0, 1],
      [1, 0, 0, 1, 0, 0, 0, 0, 0, 1],
      [1, 0, 0, 1, 1, 1, 1, 1, 0, 1],
      [1, 0, 0, 0, 0, 0, 0, 0, 0, 1],
      [1, 0, 1, 1, 0, 1, 1, 1, 0, 1],
      [1, 0, 0, 1, 0, 0, 0, 0, 0, 1],
      [1, 0, 0, 1, 1, 1, 1, 2, 0, 1],
      [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
    ];
    const numRows = maze.length;
    const numCols = maze[0].length;
    let characterX = 1;
    let characterY = 1;

// Handle touch events
    canvas.addEventListener('touchstart', handleTouchStart, false);
    canvas.addEventListener('touchmove', handleTouchMove, false);

let startX = null;
    let startY = null;

function handleTouchStart(event) {
      const touch = event.touches[0];
      startX = touch.pageX;
      startY = touch.pageY;
    }

function handleTouchMove(event) {
      event.preventDefault();
      if (!startX || !startY) {
        return;
      }

const touch = event.touches[0];
      const deltaX = touch.pageX - startX;
      const deltaY = touch.pageY - startY;

startX = touch.pageX;
      startY = touch.pageY;

if (Math.abs(deltaX) > Math.abs(deltaY)) {
        // Horizontal swipe
        if (deltaX > 0) {
          moveCharacter(1, 0);
        } else {
          moveCharacter(-1, 0);
        }
      } else {
        // Vertical swipe
        if (deltaY > 0) {
          moveCharacter(0, 1);
        } else {
          moveCharacter(0, -1);
        }
      }
    }

// Move the character in the maze
    function moveCharacter(dx, dy) {
      const newCharacterX = characterX + dx;
      const newCharacterY = characterY + dy;

if (maze[newCharacterY][newCharacterX] !== 1) {
        characterX = newCharacterX;
        characterY = newCharacterY;
      }

if (maze[characterY][characterX] === 2) {
        alert('Congratulations, you reached the goal!');
        resetGame();
      }

drawGame();
    }

// Reset the game to initial state
    function resetGame() {
      characterX = 1;
      characterY = 1;
    }

// Draw the game on the canvas
    function drawGame() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

for (let y = 0; y < numRows; y++) {
        for (let x = 0; x < numCols; x++) {
          const xPos = x * gridSize;
          const yPos = y * gridSize;

if (maze[y][x] === 1) {
            ctx.drawImage(wallImg, xPos, yPos, gridSize, gridSize);
          } else if (maze[y][x] === 2) {
            ctx.drawImage(goalImg, xPos, yPos, gridSize, gridSize);
          }
        }
      }

// Adjust character position to create 3D-like effect
      const xOffset = (gridSize / 2) + (characterX * gridSize);
      const yOffset = (gridSize / 2) + (characterY * gridSize);

ctx.drawImage(characterImg, xOffset, yOffset, gridSize, gridSize);
    }

// Start the game
    function startGame() {
      drawGame();
    }

startGame();
  </script>
</body>
</html>
```

To use this code, you need to have three image files: `character.png`, `goal.png`, and `wall.png`, which should be placed in the same directory as the HTML file.

Note: This is just a simple example to demonstrate the concept. You can enhance this game further by adding more levels, increasing complexity, and refining the user interface.