Catch emojis by a bag which moves when you tap's game

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

No:13307

←

Prev Next

→

Catch emojis by a bag which moves when you tap
Developer User5867｜Date and time 23/8/28 2:01:24
Build time 22.595 sec｜Game capacity 4.248KB｜

Script

Sure! Here's a simple game that meets all the requirements specified:

To play the game: 1. Save the above code as an HTML file (e.g., `game.html`). 2. Open the HTML file in a web browser (preferably one that supports touch events, like Safari on a smartphone). 3. Tap on the canvas to move the bag and try to catch the falling emojis. 4. Your score will increase whenever you catch an emoji. Note: The implemented game uses emoji code points as pictograms. It starts with a score of 0, and the bag moves horizontally to the tapped position on the canvas. The emojis fall from the top of the canvas, and whenever an emoji overlaps with the bag, it gets caught, increasing the score by one. The game continues indefinitely, with emojis falling at regular intervals.

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

Sure! Here's a simple game that meets all the requirements specified:

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    canvas { border: 1px solid black; }
  </style>
</head>
<body>
<canvas id="gameCanvas" width="320" height="480"></canvas>
<script>
  // Wait for the page to load before starting the game
  document.addEventListener("DOMContentLoaded", function() {

// Set up the game canvas and context
    var canvas = document.getElementById("gameCanvas");
    var ctx = canvas.getContext("2d");

// Variables to store game state
    var bagX = canvas.width / 2;
    var bagY = canvas.height - 50;
    var emojis = [];
    var score = 0;

// Add an event listener to detect taps on the canvas
    canvas.addEventListener("touchstart", function(event) {
      // Calculate the tap position relative to the canvas
      var rect = canvas.getBoundingClientRect();
      var tapX = event.touches[0].clientX - rect.left;
      var tapY = event.touches[0].clientY - rect.top;

// Move the bag to the tapped location
      bagX = tapX;
    });

// Function to check if two rectangles overlap
    function isRectOverlap(rect1, rect2) {
      return rect1.x < rect2.x + rect2.width &&
             rect1.x + rect1.width > rect2.x &&
             rect1.y < rect2.y + rect2.height &&
             rect1.y + rect1.height > rect2.y;
    }

// Function to update game state
    function update() {
      // Clear the canvas
      ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw the bag
      ctx.fillStyle = "#000000";
      ctx.fillRect(bagX - 25, bagY - 25, 50, 50);

// Move and draw emojis
      emojis.forEach(function(emoji) {
        emoji.y += 2; // Move emoji downwards
        ctx.fillText(String.fromCodePoint(emoji.code), emoji.x, emoji.y);

// Check if emoji overlaps with the bag
        var bagRect = {x: bagX - 25, y: bagY - 25, width: 50, height: 50};
        var emojiRect = {x: emoji.x, y: emoji.y, width: ctx.measureText(String.fromCodePoint(emoji.code)).width, height: 10};
        if (isRectOverlap(bagRect, emojiRect)) {
          score++; // Increase score
          // Remove the caught emoji from the list
          var index = emojis.indexOf(emoji);
          if (index > -1) {
            emojis.splice(index, 1);
          }
        }

// Remove emojis that go beyond the canvas height
        if (emoji.y > canvas.height) {
          var index = emojis.indexOf(emoji);
          if (index > -1) {
            emojis.splice(index, 1);
          }
        }
      });

// Draw the score
      ctx.fillStyle = "#000000";
      ctx.font = "24px Arial";
      ctx.fillText("Score: " + score, 10, 30);

// Request the next frame
      requestAnimationFrame(update);
    }

// Function to generate a random emoji code point
    function getRandomEmojiCode() {
      var minCodePoint = 0x1f601; // Smiling face with open mouth
      var maxCodePoint = 0x1f64f; // Person raising both hands in celebration
      return Math.floor(Math.random() * (maxCodePoint - minCodePoint + 1) + minCodePoint);
    }

// Function to create new emojis and add them to the list
    function createEmojis() {
      setInterval(function() {
        var x = Math.random() * (canvas.width - 32); // Random x position
        var emojiCode = getRandomEmojiCode(); // Random emoji code
        emojis.push({x: x, y: 0, code: emojiCode});
      }, 2000);
    }

// Start the game
    requestAnimationFrame(update);
    createEmojis();
  });
</script>
</body>
</html>
```

To play the game:

1. Save the above code as an HTML file (e.g., `game.html`).
2. Open the HTML file in a web browser (preferably one that supports touch events, like Safari on a smartphone).
3. Tap on the canvas to move the bag and try to catch the falling emojis.
4. Your score will increase whenever you catch an emoji.

Note: The implemented game uses emoji code points as pictograms. It starts with a score of 0, and the bag moves horizontally to the tapped position on the canvas. The emojis fall from the top of the canvas, and whenever an emoji overlaps with the bag, it gets caught, increasing the score by one. The game continues indefinitely, with emojis falling at regular intervals.