a 2d game where you run around giving people they're lost cats and dogs and water melons at the end you get turned into a iPad's game

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

No:8914

124

←

Prev Next

→

a 2d game where you run around giving people th..ALL
Developer User4270｜Date and time 23/7/19 18:51:07
Build time 38.006 sec｜Game capacity 4.084KB｜

Script

Here's a simple example of a 2D game where you run around giving lost cats, dogs, and watermelons to people. However, instead of getting turned into an iPad at the end (since that's not technically feasible within the scope of this game), let's just display a congratulatory message. Please note that this is a small snippet and not a fully functional game, but it demonstrates the basic concept. Enjoy!

Congratulations! You completed the game.

In this game, you can control the character using the arrow keys on your keyboard. The character can move around the game container, and when they collide with a person, the person's background color will change to gray. Once you have interacted with all the people (turned them gray), a congratulatory message will be displayed, indicating that you have completed the game.

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    #game-container {
      position: relative;
      width: 500px;
      height: 500px;
      border: 1px solid black;
    }
    .character {
      position: absolute;
      width: 50px;
      height: 50px;
      background-color: blue;
    }
    .person {
      position: absolute;
      width: 50px;
      height: 50px;
      background-color: green;
    }
    .item {
      position: absolute;
      width: 50px;
      height: 50px;
      background-color: yellow;
    }
    #message {
      display: none;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 24px;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <div id="game-container">
    <div id="character" class="character"></div>
    <div id="person1" class="person"></div>
    <div id="person2" class="person"></div>
    <div id="item1" class="item"></div>
    <div id="item2" class="item"></div>
    <div id="item3" class="item"></div>
  </div>
  <div id="message">Congratulations! You completed the game.</div>

character.style.top = '200px';
    character.style.left = '200px';

function moveCharacter(event) {
      var key = event.keyCode;
      var step = 50;

if (key === 37) {
        // Left arrow key
        character.style.left = parseInt(character.style.left) - step + 'px';
      } else if (key === 38) {
        // Up arrow key
        character.style.top = parseInt(character.style.top) - step + 'px';
      } else if (key === 39) {
        // Right arrow key
        character.style.left = parseInt(character.style.left) + step + 'px';
      } else if (key === 40) {
        // Down arrow key
        character.style.top = parseInt(character.style.top) + step + 'px';
      }

for (var i = 0; i < people.length; i++) {
        if (collisionCheck(character, people[i])) {
          // Check collision with people
          people[i].style.backgroundColor = 'gray';
          if (allPeopleCompleted()) {
            completeGame();
          }
        }
      }

for (var j = 0; j < items.length; j++) {
        if (collisionCheck(character, items[j])) {
          // Check collision with items
          items[j].style.display = 'none';
        }
      }
    }

function collisionCheck(obj1, obj2) {
      var rect1 = obj1.getBoundingClientRect();
      var rect2 = obj2.getBoundingClientRect();

return (
        rect1.top <= rect2.bottom &&
        rect2.top <= rect1.bottom &&
        rect1.left <= rect2.right &&
        rect2.left <= rect1.right
      );
    }

function completeGame() {
      gameCompleted = true;
      message.style.display = 'block';
    }

// Start game
    window.addEventListener('keydown', moveCharacter);
  </script>
</body>
</html>
```