Drawing game with rewards library's game

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

No:14900

112

←

Prev Next

→

Drawing game with rewards library
Developer User6424｜Date and time 23/9/4 21:37:45
Build time 24.867 sec｜Game capacity 2.622KB｜

Script

Sure! Here's a simple drawing game using JavaScript. The game allows you to draw on a canvas using your smartphone, and it includes a reward library feature. Please note that as an AI text-based model, I cannot provide an actual HTML file, but you can copy and paste the code into an HTML file yourself.

In the above code, when you touch and drag on the canvas, it allows you to draw using filled rectangles. When you release your touch, the drawing stops. Additionally, whenever you tap on the canvas, a randomly selected reward from the reward library will be displayed at the tapped location. You can customize the rewards by adding or modifying the entries in the `rewards` object. Feel free to replace the pictograms with something that suits your preference. Remember, you will need to save the code above into an HTML file and open it on a browser to play the game and see the drawing canvas.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Draw and Win Game</title>
</head>
<body>
  <canvas id="drawingCanvas" width="500" height="500"></canvas>

// Start drawing on touch
    canvas.addEventListener('touchstart', (event) => {
      isDrawing = true;
      draw(event.touches[0].clientX, event.touches[0].clientY);
    });

// Continue drawing as the touch moves
    canvas.addEventListener('touchmove', (event) => {
      if (isDrawing) {
        draw(event.touches[0].clientX, event.touches[0].clientY);
      }
    });

// Stop drawing on touch release
    canvas.addEventListener('touchend', () => {
      isDrawing = false;
    });

// Function to draw on the canvas
    function draw(x, y) {
      context.fillRect(x, y, 10, 10);
    }

// Reward library
    const rewards = {
      "star": "🌟",
      "heart": "❤️",
      "trophy": "🏆",
      "gift": "🎁"
    };

// Function to randomly select a reward from the library
    function getRandomReward() {
      const rewardKeys = Object.keys(rewards);
      const randomIndex = Math.floor(Math.random() * rewardKeys.length);
      return rewards[rewardKeys[randomIndex]];
    }

// Function to display a random reward when the canvas is tapped
    canvas.addEventListener('touchstart', (event) => {
      const x = event.touches[0].clientX;
      const y = event.touches[0].clientY;
      context.fillText(getRandomReward(), x, y);
    });
  </script>
</body>
</html>
```

You can customize the rewards by adding or modifying the entries in the `rewards` object. Feel free to replace the pictograms with something that suits your preference.

Remember, you will need to save the code above into an HTML file and open it on a browser to play the game and see the drawing canvas.