Create a game where you control a dog's game

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

No:40869

←

Prev Next

→

Create a game where you control a dog
Developer User18279｜Date and time 24/2/4 11:35:07
Build time 9.676 sec｜Game capacity 2.705KB｜

Script

In this game, you control a dog using the arrow keys on your smartphone. The dog appears as a pictogram image (assuming the image is named "emozi_all/game.png" and is stored in the same directory as the HTML file). The dog can move up, down, left, or right within the game canvas, and its movements are restricted to stay within the canvas bounds. The game loop continuously updates the dog's position and re-renders the game on the canvas, resulting in smooth movement.

←

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>Dog Game</title>
  <style>
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>
  <script>
    // Game canvas and context variables
    let canvas;
    let ctx;

// Player dog variables
    let dog;
    let dogImage;
    const dogSize = 50;
    const dogSpeed = 5;
    let dogX = 0;
    let dogY = 0;

// Keyboard control variables
    let keys = {};

// Initialize the game
    function init() {
      canvas = document.getElementById("gameCanvas");
      ctx = canvas.getContext("2d");
      dogImage = new Image();
      dogImage.src = "dog.png";

// Set initial position for the dog
      dogX = canvas.width / 2 - dogSize / 2;
      dogY = canvas.height / 2 - dogSize / 2;

// Listen for keyboard events
      document.addEventListener("keydown", keyDownHandler, false);
      document.addEventListener("keyup", keyUpHandler, false);

// Start the game loop
      setInterval(gameLoop, 10);
    }

// Update game objects and handle input
    function gameLoop() {
      moveDog();
      drawGame();
    }

// Handle key down events
    function keyDownHandler(e) {
      keys[e.keyCode] = true;
    }

// Handle key up events
    function keyUpHandler(e) {
      keys[e.keyCode] = false;
    }

// Move the dog based on keyboard input
    function moveDog() {
      if (keys[38]) { // Up arrow
        dogY -= dogSpeed;
      }
      if (keys[40]) { // Down arrow
        dogY += dogSpeed;
      }
      if (keys[37]) { // Left arrow
        dogX -= dogSpeed;
      }
      if (keys[39]) { // Right arrow
        dogX += dogSpeed;
      }

// Make sure the dog stays within the canvas bounds
      dogX = Math.max(0, Math.min(canvas.width - dogSize, dogX));
      dogY = Math.max(0, Math.min(canvas.height - dogSize, dogY));
    }

// Draw the game objects on the canvas
    function drawGame() {
      // Clear the canvas
      ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw the dog
      ctx.drawImage(dogImage, dogX, dogY, dogSize, dogSize);
    }

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

In this game, you control a dog using the arrow keys on your smartphone. The dog appears as a pictogram image (assuming the image is named "dog.png" and is stored in the same directory as the HTML file). The dog can move up, down, left, or right within the game canvas, and its movements are restricted to stay within the canvas bounds. The game loop continuously updates the dog's position and re-renders the game on the canvas, resulting in smooth movement.