Make a survival game.'s game

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

No:30339

←

Prev Next

→

Make a survival game.
Developer User14724｜Date and time 23/12/21 7:52:10
Build time 20.581 sec｜Game capacity 3.28KB｜

Script

Certainly! Here's a simple implementation of a survival game using HTML and JavaScript:

This implementation sets up a simple survival game on a canvas. The player (represented by a blue rectangle) can be controlled using the arrow keys. The goal is to collect the green food items and avoid the red obstacles. The score is displayed on the top left corner of the canvas. Please note that this is a basic example and can be expanded upon to add more features and complexity based on your requirements.

←

Prev　Next

→ 　

Back　

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

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

Certainly! Here's a simple implementation of a survival game using HTML and JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Survival Game</title>
  <style>
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>

function startGame() {
      canvas = document.getElementById("gameCanvas");
      ctx = canvas.getContext("2d");

player = { x: 20, y: 20, width: 20, height: 20 };
      food = { x: 200, y: 200, width: 20, height: 20 };
      obstacle = { x: 100, y: 100, width: 20, height: 20 };

document.addEventListener("keydown", movePlayer);

setInterval(updateGame, 20);
    }

function updateGame() {
      if (gameOver) return;

clearCanvas();
      drawPlayer();
      drawFood();
      drawObstacle();
      checkCollision();
      updateScore();
    }

function clearCanvas() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
    }

function drawPlayer() {
      ctx.fillStyle = "blue";
      ctx.fillRect(player.x, player.y, player.width, player.height);
    }

function drawFood() {
      ctx.fillStyle = "green";
      ctx.fillRect(food.x, food.y, food.width, food.height);
    }

function drawObstacle() {
      ctx.fillStyle = "red";
      ctx.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);
    }

function checkCollision() {
      if (
        player.x < 0 ||
        player.y < 0 ||
        player.x + player.width > canvas.width ||
        player.y + player.height > canvas.height
      ) {
        gameOver = true;
        alert("Game Over! Final Score: " + score);
        location.reload(); // Restart the game
      }

if (
        player.x === food.x &&
        player.y === food.y
      ) {
        score++;
        food.x = Math.floor(Math.random() * (canvas.width / 20)) * 20;
        food.y = Math.floor(Math.random() * (canvas.height / 20)) * 20;
      }

if (
        player.x === obstacle.x &&
        player.y === obstacle.y
      ) {
        gameOver = true;
        alert("Game Over! Final Score: " + score);
        location.reload(); // Restart the game
      }
    }

function updateScore() {
      ctx.font = "16px Arial";
      ctx.fillStyle = "black";
      ctx.fillText("Score: " + score, 10, 20);
    }
    
    startGame();
  </script>
</body>
</html>
```

Please note that this is a basic example and can be expanded upon to add more features and complexity based on your requirements.