A space runner space shop's game

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

No:25815

←

Prev Next

→

A space runner space shop
Developer User12686｜Date and time 23/11/25 0:16:26
Build time 109.412 sec｜Game capacity 4.112KB｜

Script

Sure! Here is an example of a simple space runner game implemented as a single HTML file with JavaScript code enclosed in script tags. It can be played on a smartphone and uses pictograms to represent objects in the game:

This code sets up a simple space runner game where the player controls a spaceship using the "jump" action on a smartphone screen. The objective is to avoid the red obstacles scrolling from right to left. The player's score increases by successfully avoiding obstacles, and the game ends if the player collides with an obstacle.

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Space Runner Space Shop</title>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="600"></canvas>
  
  <script>
    // Game variables
    var canvas, ctx;
    var player, obstacles;
    var score;
    var gameSpeed;
    var keys = {};

// Player object
    var player = {
      x: 200,
      y: 500,
      width: 50,
      height: 50,
      color: 'blue',
      isJumping: false,
      jumpStrength: 15,
      gravity: 0.5,
      velocityY: 0,
      draw: function() {
        ctx.fillStyle = this.color;
        ctx.fillRect(this.x, this.y, this.width, this.height);
      },
      jump: function() {
        if (!this.isJumping) {
          this.velocityY -= this.jumpStrength;
          this.isJumping = true;
        }
      },
      update: function() {
        if (this.isJumping) {
          this.velocityY += this.gravity;
          this.y += this.velocityY;
          
          if (this.y >= canvas.height - this.height) {
            this.y = canvas.height - this.height;
            this.velocityY = 0;
            this.isJumping = false;
          }
        }
      }
    };

// Obstacle object
    function Obstacle(x, width) {
      this.x = x;
      this.y = canvas.height - 50;
      this.width = width;
      this.height = 50;
      this.color = 'red';
      this.draw = function() {
        ctx.fillStyle = this.color;
        ctx.fillRect(this.x, this.y, this.width, this.height);
      };
    }

// Game initialization
    function init() {
      canvas = document.getElementById('gameCanvas');
      ctx = canvas.getContext('2d');
      player = Object.assign({}, player);
      obstacles = [];
      score = 0;
      gameSpeed = 3;

document.addEventListener('keydown', function(event) {
        keys[event.code] = true;
      });
      
      document.addEventListener('keyup', function(event) {
        keys[event.code] = false;
      });

spawnObstacle();

// Game loop
      setInterval(function() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

player.draw();
        player.update();

for (var i = 0; i < obstacles.length; i++) {
          obstacles[i].x -= gameSpeed;
          obstacles[i].draw();
          
          if (collided(player, obstacles[i])) {
            gameOver();
          }
          
          if (obstacles[i].x + obstacles[i].width < 0) {
            obstacles.splice(i, 1);
            i--;
            score++;
          }
        }

ctx.fillStyle = 'black';
        ctx.font = '20px Arial';
        ctx.fillText('Score: ' + score, 10, 40);
      }, 16);
    }

// Spawn obstacles
    function spawnObstacle() {
      if (Math.random() > 0.5) {
        var width = Math.floor(Math.random() * 100) + 50;
        obstacles.push(new Obstacle(canvas.width + width, width));
      }
      setTimeout(spawnObstacle, Math.random() * 2000 + 1000);
    }

// Check collision between player and obstacle
    function collided(player, obstacle) {
      if (player.x < obstacle.x + obstacle.width &&
          player.x + player.width > obstacle.x &&
          player.y < obstacle.y + obstacle.height &&
          player.y + player.height > obstacle.y) {
        return true;
      }
      return false;
    }

// Game over
    function gameOver() {
      alert('Game Over! Your score: ' + score);
      location.reload();
    }

init();
  </script>
</body>
</html>
```