Make a survival game's game

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

No:13122

120

←

Prev Next

→

Make a survival game
Developer User5795｜Date and time 23/8/27 2:57:56
Build time 23.385 sec｜Game capacity 3.561KB｜

Script

This single HTML file implements a basic survival game that can be played on a smartphone. The game uses a canvas element for rendering and JavaScript for game logic. The player, represented by a red rectangle, can be controlled using touch gestures on the smartphone screen. The player can move up, down, left, and right to avoid obstacles and survive for as long as possible. The game continuously updates the game area to animate the player's movement. Please note that this is a very basic framework for a survival game. You can enhance the game by adding more features such as obstacles, enemies, power-ups, scoring, and game over conditions.

←

Prev　Next

→ 　

Back　

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

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

```
<!DOCTYPE html>
<html>
<head>
  <title>Survival Game</title>
  <style>
    body {
      margin: 0;
      padding: 0;
    }
    
    canvas {
      display: block;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas"></canvas>
  
  <script>
    // Game Initialization
    function startGame() {
      myGameArea.start();
    }
    
    // Game Area Object
    var myGameArea = {
      canvas: document.getElementById("gameCanvas"),
      start: function() {
        this.canvas.width = window.innerWidth;
        this.canvas.height = window.innerHeight;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
        this.interval = setInterval(updateGameArea, 20);
      },
      clear: function() {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
      }
    };
    
    // Player Object
    var player = {
      x: 50,
      y: 50,
      width: 50,
      height: 50,
      speedX: 0,
      speedY: 0,
      update: function() {
        var ctx = myGameArea.context;
        ctx.fillStyle = "red";
        ctx.fillRect(this.x, this.y, this.width, this.height);
      },
      newPos: function() {
        this.x += this.speedX;
        this.y += this.speedY;
      }
    };
    
    // Input Handlers
    function moveUp() {
      player.speedY = -5;
    }
    
    function moveDown() {
      player.speedY = 5;
    }
    
    function moveLeft() {
      player.speedX = -5;
    }
    
    function moveRight() {
      player.speedX = 5;
    }

Please note that this is a very basic framework for a survival game. You can enhance the game by adding more features such as obstacles, enemies, power-ups, scoring, and game over conditions.