This project is a lot more massive than the last project. I'm most likely going to split the JavaScript files into different files just to make it a little bit easier. There are a lot of things that I'm going to have to go over to talk about everything. There are a few things that make this page what it is. First, let's talk about what I'm going to have to code to make this game work out. I'll need a player that can attack, I'll need enemies and a score.
Building the game board
Every game needs a gameboard this game is no exception. I want to have the canvas draw a board that can that has four columns and four rows. This will give me sixteen spaces in total. This is the first thing that I have to build to make the game.
Canvas JavaScript
let c = document.getElementById('canvas');
let ctx = c.getContext('2d');
const gameBoard = [
['open', 'open', 'open', 'open'],
['open', 'open', 'open', 'open'],
['open', 'open', 'open', 'open'],
['open', 'open', 'open', 'open']]
Okay the first thing you need, if you are going to be drawing to the canvas, is getting the element from the HTML. Which is done with a document get element by id. Next, you will need to get the context. This is going to be the way you draw to the board. I also create a variable to hold what spots are open on the game board. Next is drawing the board
Gameboard Fundementals
function direct(area, width, height, x, y){
area.beginPath();
area.rect(x,y,width,height)
ctx.stroke()
}
function drawFillRect(area, width, height, x, y,color){
area.fillStyle = color
area.beginPath();
area.fillRect(x,y,width,height)
ctx.stroke()
area.fillStyle = 'FFFFFF'
}
function clearCanvas(){
ctx.clearRect(0,0,300,300)
}
function drawboard(){
for (var x = 0; x < 4; x++) {
for (var y = 0; y < 4; y++) {
drawrect(ctx,50,50,x*50+50,y*50+50)
}
}
}
Okay the first thing you need, if you are going to be drawing to the canvas, is getting the element from the HTML. Which is done with a document get element by id. Next, you will need to get the context. This is going to be the way you draw to the board. I also create a variable to hold what spots are open on the game board. Next is drawing the board
I used four functions to get the fundamental of the board that I need. The first thing is to draw rect. This function will draw a rectangle with my width, height, x, y. I'll need this later to draw all sixteen spaces.
I used four functions to get the fundamental of the board that I need. The first thing is to draw rect. This function will draw a rectangle with my width, height, x, y. I'll need this later to draw all sixteen spaces.
I used four functions to get the fundamental of the board that I need. The first thing is to draw rect. This function will draw a rectangle with my width, height, x, y. I'll need this later to draw all sixteen spaces.
Other Gameboard Functions
function cordToNum(num){
if (num == 25) {
return 0
}else{
switch (num/5) {
case 35:
return 3
break;
case 25:
return 2
break;
case 15:
return 1
break;
default:
}
}
}
function cleanUpBoard(arr){
for (var i = 0; i < arr.length; i++) {
for (var j = 0; j < arr[i].length; j++) {
arr[i][j] = 'open'
}
}
}
function searchcord(piece,arr){
let xcord = cordToNum(piece.x);
let ycord = cordToNum(piece.y);
arr[xcord][ycord] = 'closed';
}
function numToCord(num){
switch (num) {
case 0:
return 25;
break;
case 1:
return 75;
break;
case 2:
return 125;
break;
case 3:
return 175;
break;
default:
}
}
function gameBoardUpdate(player1,arr){
cleanUpBoard(gameBoard)
searchcord(player1,gameBoard);
if (arr.length == 0) {
}else{
for (var i = 0; i < arr.length; i++) {
searchcord(arr[i],gameBoard)
}
}
}
I used four functions to get the fundamental of the board that I need. The first thing is to draw rect. This function will draw a rectangle with my width, height, x, y. I'll need this later to draw all sixteen spaces.
I used four functions to get the fundamental of the board that I need. The first thing is to draw rect. This function will draw a rectangle with my width, height, x, y. I'll need this later to draw all sixteen spaces.
Next is the fill rect function. This is going to be the way that the player and the monsters get drawn to the board. The only difference between this and the other function is that it fills the space in between the rectangle. that‘s why it has a color augment.
The clear canvas function is a simple one. This function takes the whole area of the canvas and clears it out. This is going to be used to help create the frames later to run the game.
The clear canvas function is a simple one. This function takes the whole area of the canvas and clears it out. This is going to be used to help create the frames later to run the game.
Finally, we have the draw board function. This will go through two for loops to draw all sixteen squares to the canvas to make the gameboard. These four functions are the foundation of the gameboard and the game. This is how most things will be drawn. Now let's talk about some not-so-conventional functions for the game board
