Skip to content
An online turn-based board game written in JavaScript in which 2 players play each turn to compete. Please follow the link to play
JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

JavaScript Game

OpenClassrooms: Front-end Web Developer

Project 6 - Build a turn-based board game in JavaScript

Project deliverables:

  • Randomly generate the game map
  • Randomly add 2 players, obstacles, and a maximum of 4 different weapons
  • Game players (👾 👽) shouldn't touch each other
  • Game weapons can be of any type (e.g.: programming languages)
  • Each weapon can inflict different damage points (default weapon must inflict 10 pts damage)
  • Game obstacles represent the unavailable (dimmed) boxes, players can't pass through these directly
  • For each turn, a player can move from one to three boxes (horizontally or vertically)
  • If a player passes over a box containing a weapon, they leave their current weapon on site and replace it with the new one
  • If players cross over adjacent squares (horizontally or vertically), a battle begins
  • During battle: each player attacks in turn
  • During battle: the damage depends on the player's weapon
  • During battle: if a player chooses to defend against the next shot, they only sustain 50% damage
  • As soon as the life points of a player (initially 100) falls to 0, they lose. A message appears and the game is over.

By Alexandre Formoso

March 2019

Play the game here 👉

game printscreen

Example Code

var Weapon = {
  initWeapon: function (type, name, damage, cssClass) {
    this.type = type; = name;
    this.damage = damage;
    this.cssClass = cssClass;
    this.position = {x:0, y:0};

*  Creating Weapons
map.prototype.Weapons = function() {
  var html = Object.create(Weapon);
  html.initWeapon("Markup", "HTML", "20", "weapon weapon-1");
  var css = Object.create(Weapon);
  css.initWeapon("Markup", "CSS", "50", "weapon weapon-2");
  var js = Object.create(Weapon);
  js.initWeapon("Scripting", "JS", "70", "weapon weapon-3");
  var cPlusPlus = Object.create(Weapon);
  cPlusPlus.initWeapon("Object-Oriented", "C++", "90", "weapon weapon-4");

  var badges = [html, css, js, cPlusPlus];
  this.weapons = badges;

  while(this.wallWeapPlayersCells.length < this.numbWalls + this.numbWeapons) { //while 12 < 16
    var tdNo = Math.ceil(Math.random()*(this.board[0].length*this.board.length) - 1);
    if(this.wallWeapPlayersCells.indexOf(tdNo) > -1) {
    this.wallWeapPlayersCells[this.wallWeapPlayersCells.length] = tdNo;

  for (var i = this.numbWalls; i < this.wallWeapPlayersCells.length; i ++) {
    var x = Math.floor(this.wallWeapPlayersCells[i] / this.board[0].length); 
    var y = this.wallWeapPlayersCells[i] - x * this.board[0].length;
    this.board[x][y].addClass(this.weapons[i - this.numbWalls].cssClass);
    this.weapons[i - this.numbWalls].position.x = x;
    this.weapons[i - this.numbWalls].position.y = y;
You can’t perform that action at this time.