AI game creator

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

No:14256

←

Prev Next

→

Spruce Planks
Developer User6096｜Date and time 23/8/31 9:16:26
Build time 15.41 sec｜Game capacity 2.775KB｜

Script

Please note that the above code assumes you have an image file named "emozi_himawari.png" in the same directory as the HTML file. Make sure to update the image source `sprucePlanksImg.src` with the correct path to your image file. This code sets up a simple game where you control a spruce plank using arrow keys on a smartphone. The game canvas is a 400x400 pixel area, and the spruce plank is represented by an image. The `moveSprucePlanks` function is responsible for updating the plank's position based on the arrow key pressed. The `updateCanvas` function is used to clear the canvas and redraw the plank at its new position. Finally, the game starts by calling the `startGame` function which sets up event listeners for key presses and calls `updateCanvas` at regular intervals to create animation.

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Spruce Planks Game</title>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>

// Spruce Planks image
    const sprucePlanksImg = new Image();
    sprucePlanksImg.src = "sprucePlanks.png";

// Spruce Planks object
    const sprucePlanks = {
      x: 200,
      y: 200,
      width: 50,
      height: 50,
      speed: 5,
    };

// Move Spruce Planks
    function moveSprucePlanks(direction) {
      if (direction === "up") {
        sprucePlanks.y -= sprucePlanks.speed;
      } else if (direction === "down") {
        sprucePlanks.y += sprucePlanks.speed;
      } else if (direction === "left") {
        sprucePlanks.x -= sprucePlanks.speed;
      } else if (direction === "right") {
        sprucePlanks.x += sprucePlanks.speed;
      }
    }

// Update game canvas
    function updateCanvas() {
      context.clearRect(0, 0, canvas.width, canvas.height);
      context.drawImage(
        sprucePlanksImg,
        sprucePlanks.x,
        sprucePlanks.y,
        sprucePlanks.width,
        sprucePlanks.height
      );
    }

// Handle key press events
    function handleKeyPress(event) {
      const key = event.key;
      if (key === "ArrowUp") {
        moveSprucePlanks("up");
      } else if (key === "ArrowDown") {
        moveSprucePlanks("down");
      } else if (key === "ArrowLeft") {
        moveSprucePlanks("left");
      } else if (key === "ArrowRight") {
        moveSprucePlanks("right");
      }
    }

// Start the game
    function startGame() {
      document.addEventListener("keydown", handleKeyPress);
      setInterval(updateCanvas, 20);
    }

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

Please note that the above code assumes you have an image file named "sprucePlanks.png" in the same directory as the HTML file. Make sure to update the image source `sprucePlanksImg.src` with the correct path to your image file.

This code sets up a simple game where you control a spruce plank using arrow keys on a smartphone. The game canvas is a 400x400 pixel area, and the spruce plank is represented by an image. The `moveSprucePlanks` function is responsible for updating the plank's position based on the arrow key pressed. The `updateCanvas` function is used to clear the canvas and redraw the plank at its new position. Finally, the game starts by calling the `startGame` function which sets up event listeners for key presses and calls `updateCanvas` at regular intervals to create animation.