AI game creator

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

No:26711

←

Prev Next

→

O
Developer User13229｜Date and time 23/12/2 5:45:52
Build time 49.368 sec｜Game capacity 2.857KB｜

Script

I have created a simple game in the form of a single HTML file using JavaScript. The game is designed to be played on a smartphone and utilizes pictograms. Here's the code:

In this game, pictogram images are displayed on the canvas and the user needs to tap on the right side of the screen if they recognize the pictogram correctly or on the left side if they don't. The game progresses to the next pictogram until all pictograms have been correctly identified or the user makes a mistake. A congratulatory message is displayed upon successfully completing the game.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

I have created a simple game in the form of a single HTML file using JavaScript. The game is designed to be played on a smartphone and utilizes pictograms. Here's the code:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Pictogram Game</title>
</head>
<body>
  <canvas id="gameCanvas" width="320" height="480"></canvas>

// Pictogram images
    var pictogramImages = {};
    pictogramImages["apple"] = "https://example.com/apple.png";
    pictogramImages["car"] = "https://example.com/car.png";
    pictogramImages["cat"] = "https://example.com/cat.png";

// Array of pictogram names
    var pictogramNames = ["apple", "car", "cat"];

// Variables to track current pictogram
    var currentPictogramIndex = 0;
    var currentPictogramName = pictogramNames[currentPictogramIndex];

// Function to draw the pictogram
    function drawPictogram() {
      var image = new Image();
      image.src = pictogramImages[currentPictogramName];
      image.onload = function() {
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.drawImage(image, 0, 0, canvas.width, canvas.height);
      };
    }

// Function to handle user input (tap)
    function handleTap(event) {
      var x = event.touches[0].clientX;
      var y = event.touches[0].clientY;

if (x < canvas.width / 2) {
        // User tapped on the left side of the screen
        showMessage("Wrong! Try again.");
      } else {
        // User tapped on the right side of the screen
        if (currentPictogramIndex === pictogramNames.length - 1) {
          showMessage("Congratulations! You won the game.");
        } else {
          currentPictogramIndex++;
          currentPictogramName = pictogramNames[currentPictogramIndex];
          drawPictogram();
        }
      }
    }

// Function to display a message on the canvas
    function showMessage(message) {
      context.clearRect(0, 0, canvas.width, canvas.height);
      context.fillStyle = "black";
      context.font = "24px Arial";
      context.textAlign = "center";
      context.fillText(message, canvas.width / 2, canvas.height / 2);
    }

// Event listener for touch events
    canvas.addEventListener("touchstart", handleTap);

// Start the game by drawing the first pictogram
    drawPictogram();
  </script>
</body>
</html>
```