A game where a stickman runs and a zombie is chasing them and they jump over stuff to survive with scores's game

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

No:488

437

←

Prev Next

→

A game where a stickman runs and a zombie is chasi..ALL
Developer User2995｜Date and time 23/6/14 21:13:49
Build time 62.386 sec｜Game capacity 4.356KB｜

Script

Press the spacebar to jump over obstacles. Avoid the zombie and survive as long as possible to get the highest score!

←

Prev　Next

→ 　

Back　

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

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

<html>
<head>
<title>Stickman Runner</title>
<style>
canvas {
  border: solid black 1px;
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="320" height="480"></canvas>
<script>
var canvas = document.getElementById("gameCanvas");
var ctx = canvas.getContext("2d");

// Character images
var stickman = new Image();
stickman.src = "https://i.imgur.com/FYeY9F3.png";
var zombie = new Image();
zombie.src = "https://i.imgur.com/Ef2pcTm.png";

// Obstacle images
var box = new Image();
box.src = "https://i.imgur.com/rHsEtRr.png";
var cone = new Image();
cone.src = "https://i.imgur.com/XuBsDLi.png";

// Declare game variables
var score = 0;
var frames = 0;
var obstacles = [];
var speed = 3;
var jumpHeight = 80;
var gameStarted = false;

// Stickman class
class Stickman {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.width = 50;
    this.height = 50;
    this.velocity = 0;
    this.jump = false;
  }
  
  jumpNow() {
    if (!this.jump) {
      this.jump = true;
      this.velocity = -10;
    }
  }
  
  update() {
    this.y += this.velocity;
    this.velocity += 0.5;
    if (this.y > canvas.height - this.height) {
      this.y = canvas.height - this.height;
      this.velocity = 0;
      this.jump = false;
    }
  }
  
  draw() {
    ctx.drawImage(stickman, this.x, this.y, this.width, this.height);
  }
}

// Obstacle class
class Obstacle {
  constructor(x, y, width, height) {
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
  }
  
  update() {
    this.x -= speed;
    if (this.x + this.width < 0) {
      obstacles.splice(obstacles.indexOf(this), 1);
    }
  }
  
  draw() {
    ctx.drawImage(box, this.x, this.y, this.width, this.height);
  }
}

// Spawn a new obstacle
function spawnObstacle() {
  var obstacleType = Math.floor(Math.random() * 2); // 0: box, 1: cone
  var obstacleWidth = 50;
  var obstacleHeight = 50;
  if (obstacleType == 1) {
    obstacleHeight = 30; // cones are smaller
  }
  obstacles.push(new Obstacle(canvas.width, canvas.height - obstacleHeight - 50, obstacleWidth, obstacleHeight));
}

// Check for collision between stickman and obstacles
function checkCollisions() {
  for (var i = 0; i < obstacles.length; i++) {
    var o = obstacles[i];
    if (o.x < stickman.x + stickman.width &&
        o.x + o.width > stickman.x &&
        o.y < stickman.y + stickman.height &&
        o.y + o.height > stickman.y) {
      endGame();
    }
  }
}

// Game loop
function gameLoop() {
  frames++;
  
  // Background
  ctx.fillStyle = "#ededed";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  
  // Score
  ctx.font = "bold 20px sans-serif";
  ctx.fillStyle = "#333";
  ctx.fillText("Score: " + score, canvas.width - 100, 30);
  
  // Stickman
  stickman.update();
  stickman.draw();
  
  // Zombie
  ctx.drawImage(zombie, canvas.width - 100, canvas.height - 100, 50, 50);
  
  // Obstacles
  if (frames % 80 == 0) {
    spawnObstacle();
  }
  for (var i = 0; i < obstacles.length; i++) {
    obstacles[i].update();
    obstacles[i].draw();
  }
  checkCollisions();
  
  // Increase speed every 500 frames
  if (frames % 500 == 0) {
    speed += 1;
  }
  
  // End game if zombie catches up
  if (canvas.width - stickman.x - stickman.width < 100) {
    endGame();
  }
  
  // Run the game loop again
  if (gameStarted) {
    requestAnimationFrame(gameLoop);
  }
}

// Start the game
function startGame() {
  document.getElementById("startButton").classList.add("hidden");
  document.getElementById("instructions").classList.add("hidden");
  gameStarted = true;
  stickman = new Stickman(50, canvas.height - 100);
  obstacles = [];
  score = 0;
  speed = 3;
  frames = 0;
  
  gameLoop();
}

// End the game
function endGame() {
  gameStarted = false;
  document.getElementById("startButton").classList.remove("hidden");
  document.getElementById("instructions").classList.remove("hidden");
}

// Button event listener
document.getElementById("startButton").addEventListener("click", startGame);

// Keyboard event listeners
document.addEventListener("keydown", function(event) {
  if (event.keyCode == 32) { // Space
    stickman.jumpNow();
  }
});

</script>
<p id="instructions">Press the spacebar to jump over obstacles. Avoid the zombie and survive as long as possible to get the highest score!</p>
<button id="startButton">Start Game</button>
</body>
</html>