Y's style TurboGrafx's game

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

No:25071

←

Prev Next

→

Y's style TurboGrafx
Developer User12154｜Date and time 23/11/17 0:35:52
Build time 63.358 sec｜Game capacity 2.482KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

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

// Define the pictogram images
    const pictograms = [
      "https://example.com/pictogram1.png",
      "https://example.com/pictogram2.png",
      "https://example.com/pictogram3.png",
      // ... add more pictogram URLs here
    ];

// Define the player position
    let playerX = canvas.width / 2;
    let playerY = canvas.height / 2;

// Load and draw the initial pictogram
    const pictogramImg = new Image();
    pictogramImg.src = getRandomPictogram();
    pictogramImg.onload = () => {
      ctx.drawImage(
        pictogramImg,
        playerX - pictogramImg.width / 2,
        playerY - pictogramImg.height / 2
      );
    };

// Function to get a random pictogram URL
    function getRandomPictogram() {
      const randomIndex = Math.floor(Math.random() * pictograms.length);
      return pictograms[randomIndex];
    }

// Function to handle user touch on the canvas
    function handleTouch(event) {
      const rect = canvas.getBoundingClientRect();
      const touchX = event.touches[0].clientX - rect.left;
      const touchY = event.touches[0].clientY - rect.top;

// Check if the touch is within the pictogram's bounds
      if (
        touchX >= playerX - pictogramImg.width / 2 &&
        touchX <= playerX + pictogramImg.width / 2 &&
        touchY >= playerY - pictogramImg.height / 2 &&
        touchY <= playerY + pictogramImg.height / 2
      ) {
        // User touched the pictogram, generate a new one
        pictogramImg.src = getRandomPictogram();
        playerX = canvas.width / 2;
        playerY = canvas.height / 2;
      }
    }

// Register touch event handler
    canvas.addEventListener("touchstart", handleTouch);

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

// Draw the player and the pictogram
      ctx.drawImage(
        pictogramImg,
        playerX - pictogramImg.width / 2,
        playerY - pictogramImg.height / 2
      );

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

// Start the game loop
    update();
  </script>
</body>
</html>