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

No:20526

←

Prev Next

→

Oneshot
Developer User9088｜Date and time 23/10/10 3:37:36
Build time 21.055 sec｜Game capacity 3.479KB｜

Script

Sure, here's a simple game implemented as a single HTML file using JavaScript, enclosed in script tags. The game involves tapping on pictograms displayed on the screen. You can play it on a smartphone. Give it a try!

Pictogram Tapper Game

To play the game, simply open the HTML file in a web browser on your smartphone and start tapping on the pictograms displayed on the canvas. The objective is to score as many points as possible within the given time limit. Once the time is up, a game over message will be shown with your final score. Enjoy!

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Pictogram Tapper Game</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
    }
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <h1>Pictogram Tapper Game</h1>
  <canvas id="gameCanvas" width="400" height="400"></canvas>

// Game variables
    var score = 0;
    var timeLeft = 20;
    var timerId;

// Function to start the game
    function startGame() {
      var canvas = document.getElementById('gameCanvas');
      var ctx = canvas.getContext('2d');

// Add click event listener to the canvas
      canvas.addEventListener('click', function(e) {
        var rect = canvas.getBoundingClientRect();
        var clickedX = e.clientX - rect.left;
        var clickedY = e.clientY - rect.top;

// Loop through pictogram positions and check if clicked position matches any
        for (var i = 0; i < pictograms.length; i++) {
          var pictogram = pictograms[i];
          if (clickedX > pictogram.x && clickedX < pictogram.x + pictogram.width &&
              clickedY > pictogram.y && clickedY < pictogram.y + pictogram.height) {
            // Pictogram clicked, increase score
            score += 1;
            pictograms.splice(i, 1); // remove clicked pictogram
            break;
          }
        }
      });

// Generate pictograms at random positions
      var pictograms = [];
      for (var i = 0; i < images.length; i++) {
        var x = Math.random() * (canvas.width - 50) + 25;
        var y = Math.random() * (canvas.height - 50) + 25;
        var width = 50;
        var height = 50;
        pictograms.push({ image: images[i], x: x, y: y, width: width, height: height });
      }

// Start game timer
      timerId = setInterval(function() {
        timeLeft -= 1;
        if (timeLeft <= 0) {
          endGame();
        }
      }, 1000);

// Game main loop
      function update() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.font = '30px Arial';
        ctx.fillStyle = 'black';
        ctx.fillText('Score: ' + score, 10, 30);
        ctx.fillText('Time left: ' + timeLeft, 10, canvas.height - 10);

for (var i = 0; i < pictograms.length; i++) {
          var pictogram = pictograms[i];
          ctx.fillText(pictogram.image, pictogram.x, pictogram.y);
        }

if (timeLeft > 0) {
          requestAnimationFrame(update);
        }
      }

update(); // Start the game loop
    }

// Function to end the game
    function endGame() {
      clearInterval(timerId);
      alert('Game Over! Your score: ' + score);
    }

// Start the game when page is loaded
    window.onload = function() {
      startGame();
    };
  </script>
</body>
</html>
```