Run away from the farm's game | AI game creator

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

No:25298

64

Run away from the farm
Developer User12362｜Date and time 23/11/20 7:00:32
Build time 110.113 sec｜Game capacity 6.637KB｜

Oh no! You are stuck on a farm. Can you escape?

This is a simple "Escape the Farm Game" implemented as a single HTML file. It uses JavaScript to handle the game logic and updates the game state accordingly. The game is designed for smartphone operation and uses pictograms to represent different elements. The game starts with the player being stuck on a farm. The player can click on the buttons (North, West, East, South) to move in different directions. Each direction leads to a different location (fence, cow, horse). The game state is stored in the `currentLocation` variable, which is updated based on the player's movements. The `move` function handles the logic of changing the location, and the `updateGame` function updates the game board based on the current location. On the game board, there is a message displaying the current location, along with pictograms representing the different elements (farmer, fence, cow, horse). To play the game, simply open the HTML file in a web browser (preferably on a smartphone for the best experience) and start exploring the farm by clicking on the directional buttons. The game will update the board and provide messages based on your movements. Please make sure to have the pictogram images (farmer.png, fence.png, cow.png, horse.png) in the same directory or update the image file paths accordingly in the code.

→ 　

0　

0　

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

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html>
  <head>
    <title>Escape the Farm Game</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        background-color: #f9f9f9;
      }

#game-container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
      }

#game-board {
        border: 2px solid #000000;
        padding: 20px;
        background-color: #ffffff;
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
      }

#message {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 10px;
      }

#buttons-container {
        display: flex;
        justify-content: space-evenly;
        margin-top: 20px;
      }

.button {
        padding: 10px 20px;
        background-color: #4caf50;
        border: none;
        color: #ffffff;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        cursor: pointer;
        transition-duration: 0.2s;
        border-radius: 4px;
      }

.button:hover {
        background-color: #45a049;
      }
    </style>
  </head>
  <body>
    <div id="game-container">
      <div id="game-board">
        <div id="message">Oh no! You are stuck on a farm. Can you escape?</div>

<div id="emoji-container">
          <img src="pictograms/farmer.png" id="farmer-emoji" alt="Farmer Emoji" />
          <img src="pictograms/fence.png" id="fence-emoji" alt="Fence Emoji" />
          <img src="pictograms/cow.png" id="cow-emoji" alt="Cow Emoji" />
          <img src="pictograms/horse.png" id="horse-emoji" alt="Horse Emoji" />
        </div>

<div id="buttons-container">
          <button class="button" onclick="move('north')">North</button>
          <button class="button" onclick="move('west')">West</button>
          <button class="button" onclick="move('east')">East</button>
          <button class="button" onclick="move('south')">South</button>
        </div>
      </div>
    </div>

<script>
      // Game state variables
      var currentLocation = "farm";

// Move function to change the location
      function move(direction) {
        var newLocation;

if (currentLocation === "farm") {
          if (direction === "north") newLocation = "fence";
          else if (direction === "west") newLocation = "cow";
          else if (direction === "east") newLocation = "horse";
          else if (direction === "south") newLocation = "farm";
        } else if (currentLocation === "fence") {
          if (direction === "north") newLocation = "fence";
          else if (direction === "west") newLocation = "fence";
          else if (direction === "east") newLocation = "fence";
          else if (direction === "south") newLocation = "farm";
        } else if (currentLocation === "cow") {
          if (direction === "north") newLocation = "fence";
          else if (direction === "west") newLocation = "cow";
          else if (direction === "east") newLocation = "cow";
          else if (direction === "south") newLocation = "farm";
        } else if (currentLocation === "horse") {
          if (direction === "north") newLocation = "horse";
          else if (direction === "west") newLocation = "horse";
          else if (direction === "east") newLocation = "horse";
          else if (direction === "south") newLocation = "farm";
        }

currentLocation = newLocation;
        updateGame();
      }

// Update the game board based on the current location
      function updateGame() {
        var messageElement = document.getElementById("message");
        var farmerEmojiElement = document.getElementById("farmer-emoji");
        var fenceEmojiElement = document.getElementById("fence-emoji");
        var cowEmojiElement = document.getElementById("cow-emoji");
        var horseEmojiElement = document.getElementById("horse-emoji");

if (currentLocation === "farm") {
          messageElement.innerHTML = "You are at the farm.";
          farmerEmojiElement.style.display = "inline";
          fenceEmojiElement.style.display = "none";
          cowEmojiElement.style.display = "none";
          horseEmojiElement.style.display = "none";
        } else if (currentLocation === "fence") {
          messageElement.innerHTML = "You are at the fence.";
          farmerEmojiElement.style.display = "none";
          fenceEmojiElement.style.display = "inline";
          cowEmojiElement.style.display = "none";
          horseEmojiElement.style.display = "none";
        } else if (currentLocation === "cow") {
          messageElement.innerHTML = "You are with the cow.";
          farmerEmojiElement.style.display = "none";
          fenceEmojiElement.style.display = "none";
          cowEmojiElement.style.display = "inline";
          horseEmojiElement.style.display = "none";
        } else if (currentLocation === "horse") {
          messageElement.innerHTML = "You are with the horse.";
          farmerEmojiElement.style.display = "none";
          fenceEmojiElement.style.display = "none";
          cowEmojiElement.style.display = "none";
          horseEmojiElement.style.display = "inline";
        }
      }

// Initial game setup
      updateGame();
    </script>
  </body>
</html>
```

This is a simple "Escape the Farm Game" implemented as a single HTML file. It uses JavaScript to handle the game logic and updates the game state accordingly. The game is designed for smartphone operation and uses pictograms to represent different elements.

The game starts with the player being stuck on a farm. The player can click on the buttons (North, West, East, South) to move in different directions. Each direction leads to a different location (fence, cow, horse).

The game state is stored in the `currentLocation` variable, which is updated based on the player's movements. The `move` function handles the logic of changing the location, and the `updateGame` function updates the game board based on the current location.

On the game board, there is a message displaying the current location, along with pictograms representing the different elements (farmer, fence, cow, horse).

To play the game, simply open the HTML file in a web browser (preferably on a smartphone for the best experience) and start exploring the farm by clicking on the directional buttons. The game will update the board and provide messages based on your movements.

Please make sure to have the pictogram images (farmer.png, fence.png, cow.png, horse.png) in the same directory or update the image file paths accordingly in the code.