Warning!!! This README gotta be updated next days :P

Ava's Game Canvas

Another Openclassrooms Project

This project aims to create a simply gameboard on HTML5 Canvas for 2 players (or more) and deploy up to 4 weapons (pineapples would be a weapon :P)

The function that init the game is

avaGame();

which enclose all the global variables for the game includin images and the array for the map

It's based on JS classes to create:

The map

let gameMap = new Map(cols,rows,tileW,tileH,arr,ctx);

// cols ->declare how many cols for the map
// rows ->declare how many rows for the map
// tileW -> for the single width of any tile
// tileH -> for the single height of any tile
// arr -> here would be passed a bidimensional array (see the example below)
// ctx -> this to pass a variable with the canvas context

let map = [
        [21,21,34,23,23,35,21,21,21,21],
        [21,21,22,21,21,22,21,21,21,21],
        [21,34,26,23,23,32,23,23,35,21],
        [21,22,31,21,31,22,21,21,22,21],
        [21,36,27,23,23,33,23,23,25,21],
        [21,21,22,21,21,22,21,21,22,21],
        [21,34,26,35,21,22,21,21,22,31],
        [21,22,21,36,27,26,27,23,26,35],
        [21,22,21,21,22,31,22,21,31,22],
        [21,36,23,23,37,21,36,23,23,37]
    ];

To draw the map just use the drawMap Method passing a variable with the image tile-sheet 🌎 i.e: assuming the class Map was declared into a gameMap variable and was created a variable with the tile sheet image

gameMap.drawMap(tilesheet);
//where tilesheet is a variable with the tile sheet image

The Component class

This class gets the basic parameters for any component on the game, like width heigh and positions

class Component (area = 'a',x,y,width,height,color)
// area -> it set an area on map to deploy the component 
// x -> the x value of the objects
// y -> the y value of the objects
// width -> the width of objects on map
// height -> the height 
// color -> the color (by now) of components on map

The areas would be :

• a : the Top area
• b : the Middle area
• c : the Bottom area

The area declaration has a default value on the top area ('a')

⚠️ The color value is just temporary because it would be replaced by images

---

Before we get into the next classes there's need of empty arrays for weapons and players to be declared along with the other variables into the avaGame();

let weapons = [];
let players = [];

---

Before we go ahead ⚠️ Remember that Weapon and Player are extensions of Component Class

:squirrel: Ok, go ahead

The Weapon Class

Well this class creates a weapon extending the Component class

new Weapon(area,x,y,width,height,color,name, damage)
// name -> just set a name for the new weapon
// damage -> set the amount of damage for weapon

Note that I've just explained the name and damage because the another values are the same to be declared as the Component class.

The Player Class

Ehm!...well, now we can create a player with

new Player(area,x,y,width,height,color,name,weapons)
// name -> give a birth name to your players, the force would be with them 
// weapons -> gets the array of weapons with weapon objects

So, once the player is created remember to push it into the empty array for players

Now, I will explain some methods on Player class

---

Get a weapon on map

The method to get a weapon on map is the

player.getWeapon();

which could compare simply the tile index of player with the weapons objects tile indexes and once the tile index of both (any weapon) are equals , the player would decide to take it or not with this method

The Battle

🙈 Violence ... too much violence!!!

When the player tiles indexes are equals, the battle would begin

look at the console if you download it

This is 🚧 under construction right now

---

The Movements of Player

The methods for move the player are the next

• moveUp()
• moveDown()
• moveLeft()
• moveRight()

This movements will update the next method

player.newPos();

which update the position coordinates of player with new values take it by the relative method movements described up