Bfdi game's game | AI game creator

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

No:35076

77

Bfdi game
Developer User15965｜Date and time 24/1/13 8:17:22
Build time 12.637 sec｜Game capacity 3.372KB｜

Sure! Here's a simple example of a game based on the popular animated web series "Battle for Dream Island" (BFDI) using JavaScript and pictograms. The game involves dragging and dropping pictograms onto a target area. You can save this code in a single HTML file and open it on a smartphone browser to play:

Pictogram 1

Pictogram 2

Pictogram 3

In this game, there is a target area (`#target`) where you need to drag and drop the pictograms (`#options`) to complete the game. The `checkWin()` function checks if all pictograms have been placed in the target area. Once you complete the game by placing all three pictograms in the target area, an alert will notify you of your success. Please note that the image URLs in the code (`emozi_bear.png`, etc.) should be replaced with actual image URLs that you want to use in the game. Also, make sure the images are accessible and publicly available. Feel free to modify this code further to enhance the game or add more functionality according to your needs. Good luck with your game development!

→ 　

0　

0　

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

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

(C)2023 HisashiApp

Sure! Here's a simple example of a game based on the popular animated web series "Battle for Dream Island" (BFDI) using JavaScript and pictograms. The game involves dragging and dropping pictograms onto a target area. You can save this code in a single HTML file and open it on a smartphone browser to play:

```html
<!DOCTYPE html>
<html>
<head>
<style>
  body {
    font-family: Arial, sans-serif;
    background-color: #f2f2f2;
  }
  
  #game {
    width: 100%;
    height: 90vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  #target {
    width: 200px;
    height: 200px;
    background-color: #e6e6e6;
    border: 2px dashed #999;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  #target img {
    max-width: 80%;
    max-height: 80%;
  }
  
  #options {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
  }
  
  .option {
    width: 80px;
    height: 80px;
    background-color: #fff;
    border: 2px solid #999;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .option img {
    width: 50%;
    height: auto;
  }
</style>
</head>
<body>
  <div id="game">
    <div id="target"></div>
  </div>
  
  <div id="options">
    <div class="option" draggable="true" ondragstart="drag(event)">
      <img src="https://example.com/pictogram1.png" alt="Pictogram 1">
    </div>
    <div class="option" draggable="true" ondragstart="drag(event)">
      <img src="https://example.com/pictogram2.png" alt="Pictogram 2">
    </div>
    <div class="option" draggable="true" ondragstart="drag(event)">
      <img src="https://example.com/pictogram3.png" alt="Pictogram 3">
    </div>
  </div>

<script>
  var draggedItem = null;

function drag(event) {
    draggedItem = event.target;
  }

function allowDrop(event) {
    event.preventDefault();
  }

function drop(event) {
    event.preventDefault();
    if (event.target.id === "target") {
      event.target.appendChild(draggedItem);
      draggedItem.removeAttribute("draggable");
      draggedItem.style.opacity = "0.5";
      checkWin();
    }
  }

function checkWin() {
    var pctCount = document.querySelectorAll("#target img").length;
    if (pctCount === 3) {
      alert("Congratulations! You completed the game!");
    }
  }

document.addEventListener("DOMContentLoaded", function() {
    var options = document.querySelectorAll(".option");
    for (var i = 0; i < options.length; i++) {
      options[i].addEventListener("dragover", allowDrop);
      options[i].addEventListener("drop", drop);
    }
  });
</script>
</body>
</html>
```

In this game, there is a target area (`#target`) where you need to drag and drop the pictograms (`#options`) to complete the game. The `checkWin()` function checks if all pictograms have been placed in the target area. Once you complete the game by placing all three pictograms in the target area, an alert will notify you of your success.

Please note that the image URLs in the code (`https://example.com/pictogram1.png`, etc.) should be replaced with actual image URLs that you want to use in the game. Also, make sure the images are accessible and publicly available.

Feel free to modify this code further to enhance the game or add more functionality according to your needs. Good luck with your game development!