Tap a Dog, Turn into a Yo-Yo into a Zebra into a Cow into a Car into an Elephant into an Apple into an Octopus into a Penguin into a Dog's game

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

No:35245

←

Prev Next

→

Tap a Dog, Turn into a Yo-Yo into a Zebra into a C..ALL
Developer User16469｜Date and time 24/1/13 17:52:25
Build time 10.682 sec｜Game capacity 2.786KB｜

Script

This HTML file contains a simple game where you tap on the canvas to cycle through various pictograms. The initial pictogram is a dog, and each tap will transform it into the next pictogram in the sequence (Yo-Yo, Zebra, Cow, Car, Elephant, Apple, Octopus, Penguin) before looping back to the dog again. Each pictogram will be displayed centered at the tapped position on the canvas. You need to replace the image URLs (e.g., `"emozi_all/dog.png"`, `"emozi_dog.png"` etc.) with the actual image URLs of the corresponding pictograms. The images should be stored in the same directory as the HTML file. Note: This is a basic implementation, and you can customize the appearance and behavior according to your preferences and requirements.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Tap and Transform</title>
</head>
<body>
  <canvas id="gameCanvas" style="border:1px solid black;"></canvas>

var dogImage = new Image();
    dogImage.src = "dog.png";

var yoYoImage = new Image();
    yoYoImage.src = "yoyo.png";

var zebraImage = new Image();
    zebraImage.src = "zebra.png";

var cowImage = new Image();
    cowImage.src = "cow.png";

var carImage = new Image();
    carImage.src = "car.png";

var elephantImage = new Image();
    elephantImage.src = "elephant.png";

var appleImage = new Image();
    appleImage.src = "apple.png";

var octopusImage = new Image();
    octopusImage.src = "octopus.png";

var penguinImage = new Image();
    penguinImage.src = "penguin.png";

var currentImage = dogImage;

canvas.addEventListener("click", function(event) {
      var x = event.clientX;
      var y = event.clientY;

if (currentImage === dogImage) {
        currentImage = yoYoImage;
      } else if (currentImage === yoYoImage) {
        currentImage = zebraImage;
      } else if (currentImage === zebraImage) {
        currentImage = cowImage;
      } else if (currentImage === cowImage) {
        currentImage = carImage;
      } else if (currentImage === carImage) {
        currentImage = elephantImage;
      } else if (currentImage === elephantImage) {
        currentImage = appleImage;
      } else if (currentImage === appleImage) {
        currentImage = octopusImage;
      } else if (currentImage === octopusImage) {
        currentImage = penguinImage;
      } else if (currentImage === penguinImage) {
        currentImage = dogImage;
      }

context.clearRect(0, 0, canvas.width, canvas.height);
      context.drawImage(currentImage, x - 50, y - 50, 100, 100);
    });

dogImage.addEventListener("load", function() {
      context.drawImage(dogImage, 0, 0, 100, 100);
    });
  </script>
</body>
</html>
```

You need to replace the image URLs (e.g., `"dog.png"`, `"yoyo.png"` etc.) with the actual image URLs of the corresponding pictograms. The images should be stored in the same directory as the HTML file.

Note: This is a basic implementation, and you can customize the appearance and behavior according to your preferences and requirements.