Skip to content

Pr/2 #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
endurance21 merged 5 commits into from
Apr 3, 2019
Merged

Pr/2 #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
17d19fe
Merge pull request #1 from endurance21/master
devashish1099 Apr 3, 2019
4a6e274
added background and grass layer
devashish1099 Apr 3, 2019
641975c
a small rearrangement
devashish1099 Apr 3, 2019
587a953
minor bug fixes
endurance21 Apr 3, 2019
b02dc05
Merge branch 'development' into pr/2
endurance21 Apr 3, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,4 +19,6 @@ canvas{
#bulletCanvas{
z-index: 2;
}

#grassCanvas{
z-index: 3;
}
14 changes: 8 additions & 6 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,10 @@
<canvas id = "backgroundCanvas"></canvas>
<canvas id = "tankCanvas"></canvas>
<canvas id = "bulletCanvas"></canvas>

<canvas id = "grassCanvas"></canvas>

</div>

<!-- Loading all the classes -->
<script src = "js/Lib/Vec2.js"></script>
<script src = "js/Lib/ImageLoader.js"></script>
Expand All @@ -25,13 +26,14 @@
<script src = "js/Lib/Enemy.js"></script>
<script src = "js/Lib/Bullet.js"></script>
<script src = "js/Lib/Controller.js"></script>
<script src = "js/Lib/Cell.js"></script>
<script src = "js/Lib/Grid.js"></script>
<script src = "js/lib/RectangleCollision.js"></script>



<!-- Loading the code files -->
<script src = "js/init.js"></script>
<script src = "js/players.js"></script>
<script src = "js/main.js"></script>
<script src = "js/main.js"></script>
<script src = "js/controlPlayer.js"></script>
</body>
</html>
</html>
53 changes: 53 additions & 0 deletions js/Lib/Cell.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
class Cell {
constructor( a, b, position, cellWidth){
this.xIndex = a ;
this.yIndex = b ;
this.position = position ;
this.value = 0 ;
this.cellWidth = cellWidth ;
}

GetValue(){
return this.value ;
}

SetValue(value){
this.value = value ;
}

IncValue(){
this.value = this.value + 1 ;
}

colorBox(ctx){
let image = new Image();
switch (this.value) {
case 1 :
image.src = "./res/images/Environment/dirt.png";
break;
case 2 :
image.src = "./res/images/Environment/grass.png";
break;
case 3 :
image.src = "./res/images/Environment/sand.png";
break;
case 4 :
image.src = "./res/images/Environment/treeLarge.png";
break;
case 5 :
image.src = "./res/images/Environment/treeSmall.png";
break;
default:
console.log("wrong input") ;
console.log(this.value);
console.log("("+this.yIndex+","+this.xIndex+")");
}

image.onload = ()=>{
console.log(this.value);
ctx.clearRect( this.position.x, this.position.y, this.cellWidth, this.cellWidth);
ctx.drawImage( image, this.position.x, this.position.y, this.cellWidth, this.cellWidth);
}

}
}
43 changes: 43 additions & 0 deletions js/Lib/Grid.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
class Grid {
constructor( row = 0, column = 0, cellWidth = 0){
this.row = row ;
this.column = column ;
this.cellWidth = cellWidth ;
this.cell = [];
for (let i = 0; i < this.row ; i++) {
this.cell[i] = [];
}


this.intitializeCell();
}

intitializeCell(){
for (let i = 0; i < this.row; i++) {
for (let j = 0; j < this.column; j++) {
let position = new Vec2(j*this.cellWidth,i*this.cellWidth);
this.cell[i][j] = new Cell ( i, j, position , this.cellWidth);
}
}
}

drawGrid( ctx, a=0, b=0) {
let x = a ;
let y = b ;
ctx.strokeRect( x, y, this.column*this.cellWidth , this.row*this.cellWidth);
for (let i = 0; i < this.row; i++) {
for (let j = 0; j < this.column; j++) {
this.cell[i][j].x = x + this.cellWidth/2;
this.cell[i][j].y = y + this.cellWidth/2;
//ctx.strokeRect( x, y, this.cellWidth , this.cellWidth);
if(this.cell[i][j].value > 0){
this.cell[i][j].colorBox(ctx);
}
x = x + this.cellWidth;
}
x = 0;
y = y + this.cellWidth;
}
}

}
6 changes: 4 additions & 2 deletions js/init.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,15 @@ const PI = Math.PI ;
const tankCanvas = document.getElementById("tankCanvas");
const bulletCanvas = document.getElementById("bulletCanvas");
const backgroundCanvas = document.getElementById("backgroundCanvas");
const grassCanvas = document.getElementById("grassCanvas");

tankCanvas.width = bulletCanvas.width = backgroundCanvas.width = WIDTH;
tankCanvas.height = bulletCanvas.height = backgroundCanvas.height = HEIGHT;
tankCanvas.width = bulletCanvas.width = backgroundCanvas.width = grassCanvas.width = WIDTH;
tankCanvas.height = bulletCanvas.height = backgroundCanvas.height = grassCanvas.height = HEIGHT;

const tankCtx = tankCanvas.getContext("2d");
const bulletCtx = bulletCanvas.getContext("2d");
const backGroundCtx = backgroundCanvas.getContext("2d");
const grassCtx = grassCanvas.getContext("2d");

const BGCOLOR = "rgba(255, 255, 255, 1)";
const BULLET_SPEED = 10 ;
Expand Down
35 changes: 28 additions & 7 deletions js/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ Game.update = ()=>{
enemies[i].update();
enemies[i].updateBullet();
}

//Check for collisions

for(let i = 0; i<enemies.length; i++){
Expand Down Expand Up @@ -36,11 +36,11 @@ Game.update = ()=>{
// blastSound.play();
enemies[i].bullets[0].isAvailable = true;
playerIsAlive = false;

}
}
//controlling the player
controlPlayer(player);
controlPlayer(player);
}


Expand All @@ -52,14 +52,35 @@ Game.draw = ()=>{
//rendering players and enemies
player.draw(tankCtx);
if(!player.bullets[0].isAvailable)
player.bullets[0].draw(bulletCtx);
player.bullets[0].draw(bulletCtx);
for(let i = 0; i<enemies.length; i++){
enemies[i].draw(tankCtx);
if(!enemies[i].bullets[0].isAvailable)
enemies[i].bullets[0].draw(tankCtx);
}

//Ending the game
// if(!playerIsAlive) console.log("dead");
// Game.pause();
}

if(!playerIsAlive)
Game.pause();
}

const grid = new Grid(15,30,window.innerWidth/30);
for (let i = 0; i < 15; i++) {
for (let j = 0; j < 30; j++) {
grid.cell[i][j].value = 3;
}
}

grid.drawGrid(backGroundCtx);

const grassGrid = new Grid(8,16,window.innerWidth/16);

let numberofgrass = 3 + Math.floor(Math.random()*4) ;

for (let i = 0; i < numberofgrass ; i++) {
grassGrid.cell[Math.floor(Math.random()*7)][Math.floor(Math.random()*16)].value = 4;
}

grassGrid.drawGrid(grassCtx);