i need a 2d adventure mase with wall and trees game made with javascript code. Y

Question

i need a 2d adventure mase with wall and trees game made with javascript code.

You will use a 2D array to dynamically draw a simple maze consisting of bricks and trees. The player will push 1 of four buttons moving their character in that direction one square. If the player runs into a monster the player will attack the monster (But not move to the square).   After the player has moved all of the monsters will move, if the monster moves on the player it will attack the player (but not move to the square). Monsters and Players cannot move through trees or walls. There will be at least 2 potions on the map that will restore the player’s health if they move on to them. (The potion will then be destroyed after it is collected). If all the monsters have died then print “You Win” on the screen. If the player is killed, then you will print “Game Over”.   Both the monsters and the hero will have the following properties:

·         HP – Health

·         MHP – Max health

·         ATK – Attack bonus

·         DEF – Defense bonus

·         X – X coordinate (on the grid not the pixel value)

·         Y – Y coordinate (on the grid not the pixel value)

·         PIC – The variable pointing to the html image for the appropriate character.

Both the player and the monster will be rendered by images, they will also have a health bar next to them. (You pick the orientation).   The images will be rendered on the appropriate grid based on the X and Y value.   Since both the hero and the monster use the same render function you may want to use inheritance. For combat you will follow the equation: Damage = (other.ATK-this.DEF or 1 whichever is higher)*random number 1-6. Again this could be implemented in a parent class. You will have three monsters with varying difficulty and one hero.   I will let you decide what the attributes should be. The game should be challenging but not impossible. Submit a zipped folder with all your files inside it. The tree and the rock/wall will be rendered through the 2D context draw functions.

*please have an screenshot of the game *

Explanation / Answer

function getOffset(el) {
return {
  top: el.offsetTop,
  left: el.offsetLeft,
  bottom: el.offsetTop + el.offsetHeight,
  right: el.offsetLeft + el.offsetWidth
};
}

// Which keys are pressed:
var keys = {
left: false,
right: false,
up: false,
down: false
};

// Keydown listener
document.body.addEventListener('keydown', function(e) {
e = e.keyCode;
if (e === 37) keys.left = true;
if (e === 39) keys.right = true;
if (e === 38) keys.up    = true;
if (e === 40) keys.down = true;
});

// Keyup listener
document.body.addEventListener('keyup', function(e) {
e = e.keyCode;
if (e === 37) keys.left = false;
if (e === 39) keys.right = false;
if (e === 38) keys.up    = false;
if (e === 40) keys.down = false;
});

// Game constructor:
var Game = function(viewportEl) {
var cs = getComputedStyle(viewportEl);

// Starting values:
this.score = 0;
this.finished = false;
this.player = {};
this.step = 2;

// Viewport element & dimensions:
this.viewport = {
  el: viewportEl,
  width: parseInt(cs.width, 10),
  height: parseInt(cs.height, 10)
};

// Grab necessary game elements:
this.solidEls = qsa('.solid', viewportEl);
this.coinEls   = qsa('.coin',   viewportEl);
this.scoreEls = qsa('.score', viewportEl);
this.finishI = sudo.indexOf(this.solidEls, qs(".finish", viewportEl));
this.player.el = qs(".player", viewportEl);

// Cache positions of solids:
this.solids = sudo.map(this.solidEls, getOffset);

// Cache coin positions:
this.coins = sudo.map(this.coinEls, getOffset);

// Cache player position:
this.player.pos = getOffset(this.player.el);

// Setup interval. Delay controlls tickrate:
this.frameRefresher = createInterval(function() {
  this.movTick();
}, 10, this);

this.frameRefresher.start();
};

// Update score:
Game.prototype.setScore = function(method, amount) {
if (method === 'add') this.score += amount;
else                  this.score -= amount;

sudo.forEach(this.scoreEls, function(scoreEl) {
  scoreEl.textContent = this.score;
}, this);
};

// Checks if an element is inside its viewport:
Game.prototype.insideGameArea = function(offset) {
return !(
  offset.left < 0 ||
  offset.top < 0 ||
  offset.right > this.viewport.width ||
  offset.bottom > this.viewport.height
);
};

// Checks if element a overlaps element b
Game.prototype.elOverlap = function(a, b) {
// a and b overlap if a is not left, right, above, or below b:
return !(
  // Is a to the left of b?
  a.right <= b.left ||
  //b.left >= a.right ||

  // Is a to the right of b?
  b.right <= a.left ||

  // Is a above b?
  a.bottom <= b.top ||
  //b.top >= a.bottom ||

  // Is a below b?
  b.bottom <= a.top
);
};

// Move one pixel for each direction and check if move is valid.
Game.prototype.movTick = function() {
var moved = false;
var t = this;

var offset = {
  top: t.player.pos.top,
  left: t.player.pos.left,
  bottom: t.player.pos.bottom,
  right: t.player.pos.right
};

if (!(keys.up && keys.down)) {
  if      (keys.up)    { offset.top -= t.step; offset.bottom -= t.step; moved = true; }
  else if (keys.down) { offset.top += t.step; offset.bottom += t.step; moved = true; }
}
if (!(keys.left && keys.right)) {
  if      (keys.left) { offset.left -= t.step; offset.right -= t.step; moved = true; }
  else if (keys.right) { offset.left += t.step; offset.right += t.step; moved = true; }
}

if (!moved) return;
var moveAllowed = true;

// Check if move is inside the game area:
if (t.insideGameArea(offset)) {

  // Solid collision:
  sudo.forEach(t.solids, function(solidPos, i) {
   if (this.elOverlap(offset, solidPos)) {
    moveAllowed = false; // Checks if there is any overlap on a solid object.

    // Finish collision:
    if (!this.finished && i === this.finishI) {
     this.setScore('add', 250);
     this.finished = true;
    }
   }
  }, t);

  // Coin collision:
  sudo.forEach(t.coins, function(coinPos, i) {
   if (this.elOverlap(offset, coinPos)) {
    this.setScore('add', 50);
    delete this.coins[i];
    this.coinEls[i].parentNode.removeChild(this.coinEls[i]);
   }
  }, t);

} else {
  moveAllowed = false;
}

var ps = t.player.el.style;
if (moveAllowed) { // Move player:
  ps.left = offset.left + 'px';
  ps.top = offset.top + 'px';
  t.player.pos = offset;
}
};

// Create a game:
var game = new Game(qs(".game"));

Related Questions

Navigate

• Browse (All)
• Browse I
• Subjects

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.