Fairy Game (Kawaii Art)'s game

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

No:9828

120

←

Prev Next

→

Fairy Game (Kawaii Art)
Developer User4437｜Date and time 23/7/28 4:16:02
Build time 17.371 sec｜Game capacity 2.372KB｜

Script

Sure, here's an example of a fairy game implemented as a single HTML file with JavaScript:

In this game, you control a fairy using touch events on a smartphone. The fairy image is displayed on a canvas, and you can move the fairy by dragging your finger on the screen. The fairy sprite is represented by the `emozi_all/game.png` image file which you need to provide. Please note that the code above assumes you have an image file named `emozi_all/fairy.png` in the same directory as the HTML file. You will need to replace `emozi_all/fairy.png` with the actual file path or URL to your fairy image.

←

Prev　Next

→ 　

Back　

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

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

Sure, here's an example of a fairy game implemented as a single HTML file with JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Fairy Game</title>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>
  <script>
    // Get the canvas element
    const canvas = document.getElementById("gameCanvas");
    const ctx = canvas.getContext("2d");
    
    // Set up fairy image
    const fairyImg = new Image();
    fairyImg.src = "fairy.png";
    
    // Set up fairy object
    const fairy = {
      x: 200,
      y: 200,
      width: 50,
      height: 50
    };
    
    // Handle touch events
    canvas.addEventListener("touchstart", handleTouchStart, false);
    canvas.addEventListener("touchmove", handleTouchMove, false);
    
    let initialX = null;
    let initialY = null;
    
    function handleTouchStart(event) {
      initialX = event.touches[0].clientX;
      initialY = event.touches[0].clientY;
    }
    
    function handleTouchMove(event) {
      if (initialX === null || initialY === null) {
        return;
      }
      
      const currentX = event.touches[0].clientX;
      const currentY = event.touches[0].clientY;
      
      const dx = currentX - initialX;
      const dy = currentY - initialY;
      
      fairy.x += dx;
      fairy.y += dy;
      
      initialX = currentX;
      initialY = currentY;
      
      // Prevent scrolling on touch devices
      event.preventDefault();
      
      // Redraw the fairy
      drawFairy();
    }
    
    // Draw the fairy on the canvas
    function drawFairy() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.drawImage(fairyImg, fairy.x, fairy.y, fairy.width, fairy.height);
    }
    
    // Start the game
    function startGame() {
      fairyImg.onload = function() {
        drawFairy();
      };
    }
    
    startGame();
  </script>
</body>
</html>
```

Please note that the code above assumes you have an image file named `fairy.png` in the same directory as the HTML file. You will need to replace `fairy.png` with the actual file path or URL to your fairy image.