Make a game where the goal is to draw a image inappropriate image and if the players doses it a trophy pops up and a restart button's game

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

No:31533

←

Prev Next

→

Make a game where the goal is to draw a image inap..ALL
Developer User15159｜Date and time 23/12/27 9:39:34
Build time 33.929 sec｜Game capacity 5.124KB｜

Script

Sure! Here's an example of a simple game where the goal is to draw an image correctly on a smartphone using pictograms. If the player succeeds, a trophy will pop up and a restart button will be displayed.

To play the game, you can save the code above into an HTML file and open it in a web browser on your smartphone. The game canvas will be displayed, and you can use your finger to draw an image within the canvas area. If the drawn image matches the predefined correct image (represented by the `correctImageData` array), a trophy will pop up, and you can restart the game by tapping on the restart button.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Draw Image Game</title>
  <style>
    canvas {
      border: 1px solid black;
      touch-action: none; /* to disable touch gestures on canvas */
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>

// Flag to track if trophy has been displayed
    let trophyDisplayed = false;

// Helper function to check if two arrays are equal
    function arraysEqual(a, b) {
      if (a === b) return true;
      if (a == null || b == null) return false;
      if (a.length !== b.length) return false;

for (let i = 0; i < a.length; ++i) {
        for (let j = 0; j < a[i].length; ++j) {
          if (a[i][j] !== b[i][j]) return false;
        }
      }

return true;
    }

// Helper function to clear the canvas
    function clearCanvas() {
      const canvas = document.getElementById('gameCanvas');
      const context = canvas.getContext('2d');
      context.clearRect(0, 0, canvas.width, canvas.height);
    }

// Helper function to display the trophy
    function displayTrophy() {
      if (!trophyDisplayed) {
        const trophyContainer = document.createElement('div');
        trophyContainer.style.position = 'fixed';
        trophyContainer.style.left = '50%';
        trophyContainer.style.top = '50%';
        trophyContainer.style.transform = 'translate(-50%, -50%)';
        trophyContainer.style.background = 'gold';
        trophyContainer.style.padding = '10px';
        trophyContainer.style.borderRadius = '5px';
        trophyContainer.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.3)';
        const trophyText = document.createElement('p');
        trophyText.innerText = 'Congratulations! You drew it!';
        const restartButton = document.createElement('button');
        restartButton.innerText = 'Restart';
        restartButton.addEventListener('click', startGame);
        trophyContainer.appendChild(trophyText);
        trophyContainer.appendChild(restartButton);
        document.body.appendChild(trophyContainer);
        trophyDisplayed = true;
      }
    }

// Function to start the game
    function startGame() {
      trophyDisplayed = false;
      clearCanvas();
      const canvas = document.getElementById('gameCanvas');
      const context = canvas.getContext('2d');

let isDrawing = false;
      let lastX = 0;
      let lastY = 0;

function draw(e) {
        if (!isDrawing) return;
        context.lineWidth = 20;
        context.lineCap = 'round';
        context.strokeStyle = 'black';
        context.beginPath();
        context.moveTo(lastX, lastY);
        context.lineTo(e.touches[0].clientX, e.touches[0].clientY);
        context.stroke();
        lastX = e.touches[0].clientX;
        lastY = e.touches[0].clientY;
      }

canvas.addEventListener('touchstart', (e) => {
        isDrawing = true;
        lastX = e.touches[0].clientX;
        lastY = e.touches[0].clientY;
      });

canvas.addEventListener('touchmove', draw);

canvas.addEventListener('touchend', () => {
        isDrawing = false;
        const imageData = [];
        const imageDataUrl = canvas.toDataURL();
        const img = new Image();
        img.src = imageDataUrl;
        img.onload = function () {
          context.clearRect(0, 0, canvas.width, canvas.height);
          context.drawImage(img, 0, 0, canvas.width, canvas.height);
          const tempCanvas = document.createElement('canvas');
          const tempContext = tempCanvas.getContext('2d');
          tempCanvas.width = canvas.width;
          tempCanvas.height = canvas.height;
          tempContext.drawImage(img, 0, 0, canvas.width, canvas.height);
          const tempImageData = tempContext.getImageData(0, 0, canvas.width, canvas.height).data;
          for (let y = 0; y < canvas.height; y++) {
            const row = [];
            for (let x = 0; x < canvas.width; x++) {
              const index = (y * canvas.width + x) * 4;
              const pixel = tempImageData[index + 3] !== 0 ? 1 : 0;
              row.push(pixel);
            }
            imageData.push(row);
          }

if (arraysEqual(imageData, correctImageData)) {
            displayTrophy();
          }
        };
      });
    }

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