AI game creator

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

No:13305

←

Prev Next

→

Catch emojis
Developer User5867｜Date and time 23/8/28 1:59:08
Build time 17.268 sec｜Game capacity 3.779KB｜

Script

Sure, here's an example of a simple game implemented as a single HTML file using JavaScript and enclosed in script tags. The game is called "Emoji Catcher" and is designed for smartphone operation using pictograms. The goal of the game is to catch falling emojis by tapping on them before they reach the bottom of the screen.

This HTML file creates a canvas element that covers the entire screen and contains JavaScript code for the game logic. Emojis are represented using Unicode symbols and fall from the top of the screen towards the bottom. The player needs to tap on the emojis to catch them and score points. The score is displayed at the top left corner of the screen. The game loop updates the positions of the emojis, checks for collisions with the bottom of the screen, generates new emojis, and renders the game objects on the canvas.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Emoji Catcher</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
    }

canvas {
      background-color: #f1f1f1;
      display: block;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas"></canvas>

function init() {
      canvas = document.getElementById('gameCanvas');
      ctx = canvas.getContext('2d');
      score = 0;
      emojis = [];

// Set canvas dimensions to fill the screen
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;

// Start game loop
      setInterval(gameLoop, 1000 / 60);

// Register event listener for touch/click events
      canvas.addEventListener('touchstart', handleTouch);
      canvas.addEventListener('click', handleTouch);
    }

function gameLoop() {
      update();
      draw();
    }

function update() {
      // Update emoji positions
      emojis.forEach(function(emoji) {
        emoji.y += emoji.speed;

// Check if emoji reaches bottom of the screen
        if (emoji.y > canvas.height) {
          // Emoji missed, reduce score
          score -= 1;
          removeEmoji(emoji);
        }
      });

// Add new emoji every second
      if (Math.random() < 0.02) {
        spawnEmoji();
      }
    }

function draw() {
      // Clear canvas
      ctx.clearRect(0, 0, canvas.width, canvas.height);

// Render emojis
      emojis.forEach(function(emoji) {
        ctx.fillText(emoji.symbol, emoji.x, emoji.y);
      });

// Display score
      ctx.fillStyle = 'black';
      ctx.font = '30px Arial';
      ctx.fillText('Score: ' + score, 10, 30);
    }

function spawnEmoji() {
      var emoji = {
        symbol: getRandomEmoji(),
        x: Math.random() * canvas.width,
        y: 0,
        speed: Math.random() * 3 + 1 // Random speed between 1 and 4
      };
      emojis.push(emoji);
    }

function removeEmoji(emoji) {
      var index = emojis.indexOf(emoji);
      if (index !== -1) {
        emojis.splice(index, 1);
      }
    }

function getRandomEmoji() {
      var emojis = ['😀', '😍', '🎉', '🐱', '🌈', '🍔', '⚽', '🎮'];
      return emojis[Math.floor(Math.random() * emojis.length)];
    }

function handleTouch(event) {
      var touch = event.touches ? event.touches[0] : event;
      var mouseX = touch.pageX - canvas.offsetLeft;
      var mouseY = touch.pageY - canvas.offsetTop;

// Check if emoji is tapped
      emojis.forEach(function(emoji) {
        if (mouseX >= emoji.x && mouseX <= emoji.x + 30 &&
            mouseY >= emoji.y && mouseY <= emoji.y + 30) {
          // Emoji caught, increase score
          score += 10;
          removeEmoji(emoji);
        }
      });
    }

// Start the game
    init();
  </script>
</body>
</html>
```