Make a game with right and left controls and a background that scrolls's game

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

No:11093

←

Prev Next

→

Make a game with right and left controls and a ba..ALL
Developer unknown｜Date and time 23/8/7 21:20:42
Build time 22.779 sec｜Game capacity 2.952KB｜

Script

Sure, I can provide you with a simple game that meets your requirements. Please find the example code below:

In this example, the game involves controlling a character that moves horizontally on a scrolling background. The player can control the character's movement by pressing the left and right arrow keys. The background continuously scrolls horizontally, giving the illusion of movement. To play the game, you will need to replace the placeholder image file names (`emozi_all/play.png` and `emozi_apple.png`) in the code with actual image files. The background image should be the desired background for the game, and the character image should be a pictogram representing the character. Note: To keep the code concise and within a single HTML file, I have used placeholder images. You can replace them with your own images or use appropriate pictograms as per your preference.

←

Prev　Next

→ 　

Back　

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

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

Sure, I can provide you with a simple game that meets your requirements. Please find the example code below:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Scrolling Background Game</title>
  <style>
    canvas {
      border: 1px solid #000;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="480" height="320"></canvas>
  <script>
    // Set up the game canvas and context
    const canvas = document.getElementById("gameCanvas");
    const ctx = canvas.getContext("2d");

// Background image
    const backgroundImage = new Image();
    backgroundImage.src = "background.png";

// Character image
    const characterImage = new Image();
    characterImage.src = "character.png";

// Game constants
    const backgroundSpeed = 2;
    const characterSpeed = 5;

// Initialize character position
    let characterX = 50;
    let characterY = canvas.height - 64;

// Initialize background position
    let backgroundX = 0;

// Store key states
    const keys = {};

// Event listeners to track key states
    document.addEventListener("keydown", keyDownHandler, false);
    document.addEventListener("keyup", keyUpHandler, false);

function keyDownHandler(event) {
      keys[event.keyCode] = true;
    }

function keyUpHandler(event) {
      keys[event.keyCode] = false;
    }

function draw() {
       // Move the character based on key states
      if (keys[37]) {
        characterX -= characterSpeed;
      }
      if (keys[39]) {
        characterX += characterSpeed;
      }

// Move the background
      backgroundX -= backgroundSpeed;
      if (backgroundX <= -canvas.width) {
        backgroundX = 0;
      }

// Clear the canvas
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      
      // Draw background
      ctx.drawImage(backgroundImage, backgroundX, 0, canvas.width, canvas.height);

// Draw character
      ctx.drawImage(characterImage, characterX, characterY, 64, 64);

// Request animation frame for smooth gameplay
      requestAnimationFrame(draw);
    }

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

To play the game, you will need to replace the placeholder image file names (`background.png` and `character.png`) in the code with actual image files. The background image should be the desired background for the game, and the character image should be a pictogram representing the character.

Note: To keep the code concise and within a single HTML file, I have used placeholder images. You can replace them with your own images or use appropriate pictograms as per your preference.