AI game creator

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

No:42714

←

Prev Next

→

A overworld game
Developer User18955｜Date and time 24/2/12 21:24:20
Build time 18.679 sec｜Game capacity 4.39KB｜

Script

Sure, here's an example of a simple overworld game implemented in a single HTML file using JavaScript. This game allows the player to move a character around a grid-based map using smartphone operations (tapping or swiping) and displays pictograms as representations of the character and obstacles.

This code sets up a canvas element and handles touch or swipe events to move the player character on the map. The game map is defined as a 2D array, where each cell represents a specific type (0 for empty space, 1 for an obstacle, 2 for the player, and 3 for the goal). The player moves on the map by tapping or swiping in the desired direction, and the current state of the game is drawn on the canvas using pictograms. Please note that this is just a basic implementation to demonstrate the concept of an overworld game. You may need to customize and enhance it further based on your specific requirements and design.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Overworld Game</title>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>
  
  <script>
    // Initialize game variables
    var canvas = document.getElementById("gameCanvas");
    var context = canvas.getContext("2d");
    var gridSize = 40; // Size of each grid cell
    var map = [
      [1, 1, 1, 0, 1],
      [1, 2, 1, 1, 1],
      [1, 1, 1, 1, 0],
      [0, 1, 1, 1, 1],
      [1, 1, 1, 1, 3]
    ]; // 2D array representing the grid-based map
    var playerX = 0; // Player's X position on the map
    var playerY = 0; // Player's Y position on the map
    var gameOver = false; // Whether the game is over or not
    
    // Draw the game map
    function drawMap() {
      context.clearRect(0, 0, canvas.width, canvas.height);
      
      for (var y = 0; y < map.length; y++) {
        for (var x = 0; x < map[y].length; x++) {
          var cell = map[y][x];
          
          // Draw pictogram based on cell type
          switch(cell) {
            case 0: // Empty space
              context.fillStyle = "#ffffff";
              break;
            case 1: // Obstacle
              context.fillStyle = "#000000";
              break;
            case 2: // Player
              context.fillStyle = "#ff0000";
              break;
            case 3: // Goal
              context.fillStyle = "#00ff00";
              break;
          }
          
          context.fillRect(x * gridSize, y * gridSize, gridSize, gridSize);
        }
      }
    }
    
    // Handle player movement
    function movePlayer(direction) {
      if (!gameOver) {
        var newX = playerX;
        var newY = playerY;
        
        switch(direction) {
          case "up":
            newY--;
            break;
          case "down":
            newY++;
            break;
          case "left":
            newX--;
            break;
          case "right":
            newX++;
            break;
        }
        
        // Check if new position is within map bounds and not an obstacle
        if (newX >= 0 && newX < map[0].length && newY >= 0 && newY < map.length && map[newY][newX] !== 1) {
          playerX = newX;
          playerY = newY;
          
          // Check if player reached the goal
          if (map[playerY][playerX] === 3) {
            gameOver = true;
            alert("Congratulations! You reached the goal!");
          }
        }
        
        drawMap();
      }
    }
    
    // Handle touch or swipe events
    function handleTouch(e) {
      var touchX = e.changedTouches[0].clientX;
      var touchY = e.changedTouches[0].clientY;
      
      var canvasRect = canvas.getBoundingClientRect();
      var canvasX = touchX - canvasRect.left;
      var canvasY = touchY - canvasRect.top;
      
      var gridX = Math.floor(canvasX / gridSize);
      var gridY = Math.floor(canvasY / gridSize);
      
      if (gridX === playerX && gridY === playerY) {
        return;
      }
      
      if (Math.abs(gridX - playerX) > Math.abs(gridY - playerY)) {
        if (gridX > playerX) {
          movePlayer("right");
        } else {
          movePlayer("left");
        }
      } else {
        if (gridY > playerY) {
          movePlayer("down");
        } else {
          movePlayer("up");
        }
      }
    }
    
    canvas.addEventListener("touchend", handleTouch, false);
    
    // Start the game
    drawMap();
  </script>
</body>
</html>
```

Please note that this is just a basic implementation to demonstrate the concept of an overworld game. You may need to customize and enhance it further based on your specific requirements and design.