From 9ad4f4df5491361d06e069a5bcef85c5293f82fe Mon Sep 17 00:00:00 2001 From: DebarunMitra Date: Thu, 19 Sep 2019 18:00:05 +0530 Subject: [PATCH 01/16] Version 1.0 players goblin cross point identified --- js/script.js | 41 +++++++++++++++++++++++++---------------- 1 file changed, 25 insertions(+), 16 deletions(-) diff --git a/js/script.js b/js/script.js index 44cb9b2..e3eb381 100644 --- a/js/script.js +++ b/js/script.js @@ -28,7 +28,7 @@ class Goblin{ putGoblin(gCtx,gx,gy) { let g=new Image(); - gx=(gx/2); gy=(gy/2); + (gx<200||gy<200)?gx=gy=275:false; g.src='images/goblin.png'; g.onload=()=>{ console.log(gx+' , '+gy); @@ -65,12 +65,13 @@ class Game{ //return this.players; } createGoblin(w,h){ + w=(w/2); h=(h/2); let gob=new Goblin('goblin',w,h); gob.putGoblin(this.ctx,w,h); this.goblin[0]=gob; } keyPress(e){ - console.log(this.players); + // console.log(this.players); this.makeBase(); //this.createGoblin(this.width,this.height); this.players.filter((data) =>(data.inputKey.includes(e.keyCode))).map((mainItem) => @@ -86,29 +87,37 @@ class Game{ let movePlayer2=new Player(per.name,per.type); movePlayer2.putPlayer(this.ctx,per.x,per.y); let vill=new Goblin('goblin',this.width,this.height); - if(this.goblin[0].x===mainItem.x || this.goblin[0].y===mainItem.y) - { - console.log('if:'+this.goblin[0].x+' , '+this.goblin[0].y); - movePlayer1.putPlayer(this.ctx,32,32); - movePlayer2.putPlayer(this.ctx,320,320); - vill.putGoblin(this.ctx,200,200); - } - else { - console.log('else:'+this.goblin[0].x+' , '+this.goblin[0].y); - vill.putGoblin(this.ctx,this.width,this.height); - } - }); + vill.putGoblin(this.ctx,(this.width/2),(this.height/2)); + }); // this.createGoblin(); - } - ); + + this.positionCheck(); + + }); + } + positionCheck() + { + console.log(this.goblin[0]); + console.log(this.players); + //console.log(this.players[0].x+200); + if((this.goblin[0].x===this.players[0].x+32) && (this.goblin[0].y===this.players[0].y+32)) + { + console.log('p1 cross'); } + else if((this.goblin[0].x===this.players[1].x-32) && (this.goblin[0].y===this.players[1].y+32)) + { + console.log('p2 cross'); + } + } } + let goblinGO=document.getElementById('myCanvas'); let game=new Game(goblinGO,550,550); game.makeBase(); game.createPlayers('alpha','player-1',550,550); game.createPlayers('beta','player-2',550,550); game.createGoblin(550,550); +game.positionCheck(); //game.play(); //console.log(players); From 0caeb3db39df81a6025a95bf5424adf5699b94dd Mon Sep 17 00:00:00 2001 From: DebarunMitra Date: Thu, 19 Sep 2019 19:18:51 +0530 Subject: [PATCH 02/16] Version 1.0 collision detection --- js/script.js | 20 ++++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/js/script.js b/js/script.js index e3eb381..50c773b 100644 --- a/js/script.js +++ b/js/script.js @@ -99,15 +99,23 @@ class Game{ { console.log(this.goblin[0]); console.log(this.players); - //console.log(this.players[0].x+200); - if((this.goblin[0].x===this.players[0].x+32) && (this.goblin[0].y===this.players[0].y+32)) + console.log("p1 x: "+Math.abs(((this.goblin[0].x+this.players[0].x)/2))); + console.log("p1 y: "+Math.abs(((this.goblin[0].y+this.players[0].y)/2))); + console.log("p2 x: "+Math.abs(((this.goblin[0].x+this.players[1].x)/2))); + console.log("p2 y: "+Math.abs(((this.goblin[0].y+this.players[1].y)/2))); + let p1x=Math.abs(((this.goblin[0].x+this.players[0].x)/2)); + let p1y=Math.abs(((this.goblin[0].y+this.players[0].y)/2)); + let p2x=Math.abs(((this.goblin[0].x+this.players[1].x)/2)); + let p2y=Math.abs(((this.goblin[0].y+this.players[1].y)/2)); + + if((p1x+10>=this.goblin[0].x || p1x-10<=this.goblin[0].x)||(p1y+10>=this.goblin[0].y || p1y-10<=this.goblin[0].y)) { console.log('p1 cross'); } - else if((this.goblin[0].x===this.players[1].x-32) && (this.goblin[0].y===this.players[1].y+32)) - { - console.log('p2 cross'); - } + // else if(p1y+10>=this.goblin[0].y || p1x-10<=this.goblin[0].y) + // { + // console.log('p2 cross'); + // } } } From 7b1fb8f18204b2dc831cecdd71abd37d3e3554c6 Mon Sep 17 00:00:00 2001 From: DebarunMitra Date: Thu, 19 Sep 2019 22:48:02 +0530 Subject: [PATCH 03/16] Version 1.0 actual cross point get --- js/script.js | 25 ++++++++----------------- 1 file changed, 8 insertions(+), 17 deletions(-) diff --git a/js/script.js b/js/script.js index 50c773b..e0a544e 100644 --- a/js/script.js +++ b/js/script.js @@ -99,23 +99,14 @@ class Game{ { console.log(this.goblin[0]); console.log(this.players); - console.log("p1 x: "+Math.abs(((this.goblin[0].x+this.players[0].x)/2))); - console.log("p1 y: "+Math.abs(((this.goblin[0].y+this.players[0].y)/2))); - console.log("p2 x: "+Math.abs(((this.goblin[0].x+this.players[1].x)/2))); - console.log("p2 y: "+Math.abs(((this.goblin[0].y+this.players[1].y)/2))); - let p1x=Math.abs(((this.goblin[0].x+this.players[0].x)/2)); - let p1y=Math.abs(((this.goblin[0].y+this.players[0].y)/2)); - let p2x=Math.abs(((this.goblin[0].x+this.players[1].x)/2)); - let p2y=Math.abs(((this.goblin[0].y+this.players[1].y)/2)); - - if((p1x+10>=this.goblin[0].x || p1x-10<=this.goblin[0].x)||(p1y+10>=this.goblin[0].y || p1y-10<=this.goblin[0].y)) - { - console.log('p1 cross'); - } - // else if(p1y+10>=this.goblin[0].y || p1x-10<=this.goblin[0].y) - // { - // console.log('p2 cross'); - // } + if(((Math.abs(this.goblin[0].x-this.players[0].x))<=40) && ((Math.abs(this.goblin[0].y-this.players[0].y))<=70)) + { + console.log('p1 cross'); + } + else if((Math.abs(this.goblin[0].x-this.players[1].x))<=40 && ((Math.abs(this.goblin[0].y-this.players[1].y))<=70)) + { + console.log('p2.cross'); + } } } From 46c36840c6ec98fe7c7ac6021fde5760f1c3b23e Mon Sep 17 00:00:00 2001 From: DebarunMitra Date: Fri, 20 Sep 2019 10:17:46 +0530 Subject: [PATCH 04/16] Version 1.0 inputs and players movements working properly --- js/script.js | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/js/script.js b/js/script.js index e0a544e..0c5528e 100644 --- a/js/script.js +++ b/js/script.js @@ -28,7 +28,7 @@ class Goblin{ putGoblin(gCtx,gx,gy) { let g=new Image(); - (gx<200||gy<200)?gx=gy=275:false; + //(gx>420||gy>420)?gx=gy=100:false; g.src='images/goblin.png'; g.onload=()=>{ console.log(gx+' , '+gy); @@ -47,6 +47,7 @@ class Game{ this.goblin=[]; this.ctx = canvas.getContext('2d'); document.addEventListener('keydown',this.keyPress.bind(this)); + document.addEventListener('keyup',this.keyPress.bind(this)); } makeBase(){ let ground=new Image(); @@ -61,11 +62,14 @@ class Game{ let dy=(type==='player-1')?(Math.floor(Math.random()*(y/3)/2)):(Math.floor(Math.random()*(y-((y/3)/2)))); let gplayer=new Player(name,type,dx,dy); gplayer.putPlayer(this.ctx,dx,dy); + console.log('length:'+this.players.length); + // (this.players.length<=3)?true:this.players=[]; this.players.push(gplayer); //return this.players; } createGoblin(w,h){ - w=(w/2); h=(h/2); + w=Math.floor(Math.random()*(w)); + h=Math.floor(Math.random()*(h)); let gob=new Goblin('goblin',w,h); gob.putGoblin(this.ctx,w,h); this.goblin[0]=gob; @@ -87,7 +91,7 @@ class Game{ let movePlayer2=new Player(per.name,per.type); movePlayer2.putPlayer(this.ctx,per.x,per.y); let vill=new Goblin('goblin',this.width,this.height); - vill.putGoblin(this.ctx,(this.width/2),(this.height/2)); + vill.putGoblin(this.ctx,this.goblin[0].x,this.goblin[0].y); }); // this.createGoblin(); @@ -98,15 +102,16 @@ class Game{ positionCheck() { console.log(this.goblin[0]); - console.log(this.players); + // console.log(this.players[0].name); if(((Math.abs(this.goblin[0].x-this.players[0].x))<=40) && ((Math.abs(this.goblin[0].y-this.players[0].y))<=70)) { - console.log('p1 cross'); + this.createGoblin(this.width,this.height); } else if((Math.abs(this.goblin[0].x-this.players[1].x))<=40 && ((Math.abs(this.goblin[0].y-this.players[1].y))<=70)) { - console.log('p2.cross'); + this.createGoblin(this.width,this.height); } + } } From a58f6ffce701fc75f602d1e62e2a7414a61e7370 Mon Sep 17 00:00:00 2001 From: AadeshNichite <54974312+AadeshNichite@users.noreply.github.com> Date: Fri, 20 Sep 2019 10:36:53 +0530 Subject: [PATCH 05/16] version 1.0 Individually scores,Names calculated, --- js/script.js | 251 +++++++++++++++++++++++++++------------------------ 1 file changed, 135 insertions(+), 116 deletions(-) diff --git a/js/script.js b/js/script.js index 0c5528e..a710178 100644 --- a/js/script.js +++ b/js/script.js @@ -1,127 +1,146 @@ -// Author: Debarun Mitra +// Author: Debarun Mitra,Aadesh Nichite // Technology used: HTML, CSS, JavaScript, JQuery, Bootstrap // objective: Create a responsive game using HTML canvas, CSS, JavaScript, jQuery,Bootstrap class Player{ - constructor(name,type,x,y) - { - this.name=name; - this.type=type; - this.x=x; - this.y=y; - this.inputKey=(type ==="player-1")?[65,68,87,83]:[37,39,38,40]; - } - putPlayer(canvasCtx,a,b){ - let p=new Image(); - p.src=(this.type==='player-1')?'images/player-1.png':'images/player-2.png'; - p.onload=()=>{ - canvasCtx.drawImage(p,a,b); + constructor(name,type,x,y) + { + this.name=name; + this.type=type; + this.x=x; + this.y=y; + this.inputKey=(type ==="player-1")?[65,68,87,83]:[37,39,38,40]; + } + putPlayer(canvasCtx,a,b){ + let p=new Image(); + p.src=(this.type==='player-1')?'/images/player-1.png':'/images/player-2.png'; + p.onload=()=>{ + canvasCtx.drawImage(p,a,b); + } } - } -} -class Goblin{ - constructor(type,x,y) - { - this.type=type; - this.x=x; - this.y=y; } - putGoblin(gCtx,gx,gy) - { - let g=new Image(); - //(gx>420||gy>420)?gx=gy=100:false; - g.src='images/goblin.png'; - g.onload=()=>{ - console.log(gx+' , '+gy); - gCtx.drawImage(g,gx,gy); + class Goblin{ + constructor(type,x,y) + { + this.type=type; + this.x=x; + this.y=y; } - } -} -class Game{ - constructor(canvas,width, height){ - this.canvas = canvas; - this.width = width; - this.height = height; - canvas.width = width; - canvas.height = height; - this.players=[]; - this.goblin=[]; - this.ctx = canvas.getContext('2d'); - document.addEventListener('keydown',this.keyPress.bind(this)); - document.addEventListener('keyup',this.keyPress.bind(this)); + putGoblin(gCtx,gx,gy) + { + let g=new Image(); + //(gx>420||gy>420)?gx=gy=100:false; + g.src='/images/goblin.png'; + g.onload=()=>{ + //console.log(gx+' , '+gy); + gCtx.drawImage(g,gx,gy); + } } - makeBase(){ - let ground=new Image(); - ground.src='images/playGround.png'; - ground.onload=()=>{ - this.ctx.drawImage(ground,0,0); + } + class Game{ + constructor(canvas,width, height){ + this.canvas = canvas; + this.width = width; + this.height = height; + canvas.width = width; + canvas.height = height; + this.players=[]; + this.goblin=[]; + this.ctx = canvas.getContext('2d'); + document.addEventListener('keydown',this.keyPress.bind(this)); + document.addEventListener('keyup',this.keyPress.bind(this)); + } + makeBase(){ + let ground=new Image(); + ground.src='/images/playGround.png'; + ground.onload=()=>{ + this.ctx.drawImage(ground,0,0); + } } + createPlayers(name,type,x,y){ + // let players=[]; + let dx=(type==='player-1')?(Math.floor(Math.random()*(x/3)/2)):(Math.floor(Math.random()*(x-((x/3)/2)))); + let dy=(type==='player-1')?(Math.floor(Math.random()*(y/3)/2)):(Math.floor(Math.random()*(y-((y/3)/2)))); + let gplayer=new Player(name,type,dx,dy); + gplayer.putPlayer(this.ctx,dx,dy); + console.log('length:'+this.players.length); + // (this.players.length<=3)?true:this.players=[]; + this.players.push(gplayer); + //return this.players; + let player1nm=sessionStorage.getItem("player1Name"); + let player2nm=sessionStorage.getItem("player2Name"); + // console.log(player1nm); + document.getElementById("player1Name").innerHTML=player1nm; + document.getElementById("player2Name").innerHTML=player2nm; + //return this.players; + let player1Sc=sessionStorage.getItem("player1Score"); + let player2Sc=sessionStorage.getItem("player2Score"); + document.getElementById("player1Score").innerHTML=player1Sc; + document.getElementById("player2Score").innerHTML=player2Sc; + } + createGoblin(w,h){ + w=Math.floor(Math.random()*(w)); + h=Math.floor(Math.random()*(h)); + let gob=new Goblin('goblin',w,h); + gob.putGoblin(this.ctx,w,h); + this.goblin[0]=gob; + } + keyPress(e){ + // console.log(this.players); + this.makeBase(); + //this.createGoblin(this.width,this.height); + this.players.filter((data) =>(data.inputKey.includes(e.keyCode))).map((mainItem) => + { + (mainItem.inputKey[0]===e.keyCode)?mainItem.x=mainItem.x-10: + (mainItem.inputKey[1]===e.keyCode)?mainItem.x=mainItem.x+10: + (mainItem.inputKey[2]===e.keyCode)?mainItem.y=mainItem.y-10: + (mainItem.inputKey[3]===e.keyCode)?mainItem.y=mainItem.y+10: + false; + let movePlayer1=new Player(mainItem.name,mainItem.type); + movePlayer1.putPlayer(this.ctx,mainItem.x,mainItem.y); + let p2=this.players.filter((item) =>(item.type!==mainItem.type)).map((per) =>{ + let movePlayer2=new Player(per.name,per.type); + movePlayer2.putPlayer(this.ctx,per.x,per.y); + let vill=new Goblin('goblin',this.width,this.height); + vill.putGoblin(this.ctx,this.goblin[0].x,this.goblin[0].y); + }); + // this.createGoblin(); + + this.positionCheck(); + + }); } - createPlayers(name,type,x,y){ - // let players=[]; - let dx=(type==='player-1')?(Math.floor(Math.random()*(x/3)/2)):(Math.floor(Math.random()*(x-((x/3)/2)))); - let dy=(type==='player-1')?(Math.floor(Math.random()*(y/3)/2)):(Math.floor(Math.random()*(y-((y/3)/2)))); - let gplayer=new Player(name,type,dx,dy); - gplayer.putPlayer(this.ctx,dx,dy); - console.log('length:'+this.players.length); - // (this.players.length<=3)?true:this.players=[]; - this.players.push(gplayer); - //return this.players; + positionCheck() + { + //console.log(this.goblin[0]); + // console.log(this.players[0].name); + if(((Math.abs(this.goblin[0].x-this.players[0].x))<=40) && ((Math.abs(this.goblin[0].y-this.players[0].y))<=70)) + { + let player1Sco=sessionStorage.getItem("player1Score"); + let val=parseInt(player1Sco, 10); + document.getElementById("player1Score").innerHTML=val+1; + sessionStorage.setItem("player1Score",val+1); + this.createGoblin(this.width,this.height); + + } + else if((Math.abs(this.goblin[0].x-this.players[1].x))<=40 && ((Math.abs(this.goblin[0].y-this.players[1].y))<=70)) + { + let player2Sco=sessionStorage.getItem("player2Score"); + let val=parseInt(player2Sco, 10); + document.getElementById("player2Score").innerHTML=val+1; + sessionStorage.setItem("player2Score",val+1); + this.createGoblin(this.width,this.height); + } + } - createGoblin(w,h){ - w=Math.floor(Math.random()*(w)); - h=Math.floor(Math.random()*(h)); - let gob=new Goblin('goblin',w,h); - gob.putGoblin(this.ctx,w,h); - this.goblin[0]=gob; - } - keyPress(e){ - // console.log(this.players); - this.makeBase(); - //this.createGoblin(this.width,this.height); - this.players.filter((data) =>(data.inputKey.includes(e.keyCode))).map((mainItem) => - { - (mainItem.inputKey[0]===e.keyCode)?mainItem.x=mainItem.x-10: - (mainItem.inputKey[1]===e.keyCode)?mainItem.x=mainItem.x+10: - (mainItem.inputKey[2]===e.keyCode)?mainItem.y=mainItem.y-10: - (mainItem.inputKey[3]===e.keyCode)?mainItem.y=mainItem.y+10: - false; - let movePlayer1=new Player(mainItem.name,mainItem.type); - movePlayer1.putPlayer(this.ctx,mainItem.x,mainItem.y); - let p2=this.players.filter((item) =>(item.type!==mainItem.type)).map((per) =>{ - let movePlayer2=new Player(per.name,per.type); - movePlayer2.putPlayer(this.ctx,per.x,per.y); - let vill=new Goblin('goblin',this.width,this.height); - vill.putGoblin(this.ctx,this.goblin[0].x,this.goblin[0].y); - }); - // this.createGoblin(); - - this.positionCheck(); - - }); - } - positionCheck() - { - console.log(this.goblin[0]); - // console.log(this.players[0].name); - if(((Math.abs(this.goblin[0].x-this.players[0].x))<=40) && ((Math.abs(this.goblin[0].y-this.players[0].y))<=70)) - { - this.createGoblin(this.width,this.height); - } - else if((Math.abs(this.goblin[0].x-this.players[1].x))<=40 && ((Math.abs(this.goblin[0].y-this.players[1].y))<=70)) - { - this.createGoblin(this.width,this.height); - } - } -} - - -let goblinGO=document.getElementById('myCanvas'); -let game=new Game(goblinGO,550,550); -game.makeBase(); -game.createPlayers('alpha','player-1',550,550); -game.createPlayers('beta','player-2',550,550); -game.createGoblin(550,550); -game.positionCheck(); -//game.play(); -//console.log(players); + + + let goblinGO=document.getElementById('myCanvas'); + let game=new Game(goblinGO,550,550); + game.makeBase(); + game.createPlayers('alpha','player-1',550,550); + game.createPlayers('beta','player-2',550,550); + game.createGoblin(550,550); + game.positionCheck(); + //game.play(); + //console.log(players); From 60a1caf538867ffbe3ac4d146e7d57c0e07b7314 Mon Sep 17 00:00:00 2001 From: DebarunMitra Date: Fri, 20 Sep 2019 17:28:34 +0530 Subject: [PATCH 06/16] Version 1.0 player name , score , icon added --- js/script.js | 127 --------------------------------------------------- 1 file changed, 127 deletions(-) delete mode 100644 js/script.js diff --git a/js/script.js b/js/script.js deleted file mode 100644 index 0c5528e..0000000 --- a/js/script.js +++ /dev/null @@ -1,127 +0,0 @@ -// Author: Debarun Mitra -// Technology used: HTML, CSS, JavaScript, JQuery, Bootstrap -// objective: Create a responsive game using HTML canvas, CSS, JavaScript, jQuery,Bootstrap -class Player{ - constructor(name,type,x,y) - { - this.name=name; - this.type=type; - this.x=x; - this.y=y; - this.inputKey=(type ==="player-1")?[65,68,87,83]:[37,39,38,40]; - } - putPlayer(canvasCtx,a,b){ - let p=new Image(); - p.src=(this.type==='player-1')?'images/player-1.png':'images/player-2.png'; - p.onload=()=>{ - canvasCtx.drawImage(p,a,b); - } - } -} -class Goblin{ - constructor(type,x,y) - { - this.type=type; - this.x=x; - this.y=y; - } - putGoblin(gCtx,gx,gy) - { - let g=new Image(); - //(gx>420||gy>420)?gx=gy=100:false; - g.src='images/goblin.png'; - g.onload=()=>{ - console.log(gx+' , '+gy); - gCtx.drawImage(g,gx,gy); - } - } -} -class Game{ - constructor(canvas,width, height){ - this.canvas = canvas; - this.width = width; - this.height = height; - canvas.width = width; - canvas.height = height; - this.players=[]; - this.goblin=[]; - this.ctx = canvas.getContext('2d'); - document.addEventListener('keydown',this.keyPress.bind(this)); - document.addEventListener('keyup',this.keyPress.bind(this)); - } - makeBase(){ - let ground=new Image(); - ground.src='images/playGround.png'; - ground.onload=()=>{ - this.ctx.drawImage(ground,0,0); - } - } - createPlayers(name,type,x,y){ - // let players=[]; - let dx=(type==='player-1')?(Math.floor(Math.random()*(x/3)/2)):(Math.floor(Math.random()*(x-((x/3)/2)))); - let dy=(type==='player-1')?(Math.floor(Math.random()*(y/3)/2)):(Math.floor(Math.random()*(y-((y/3)/2)))); - let gplayer=new Player(name,type,dx,dy); - gplayer.putPlayer(this.ctx,dx,dy); - console.log('length:'+this.players.length); - // (this.players.length<=3)?true:this.players=[]; - this.players.push(gplayer); - //return this.players; - } - createGoblin(w,h){ - w=Math.floor(Math.random()*(w)); - h=Math.floor(Math.random()*(h)); - let gob=new Goblin('goblin',w,h); - gob.putGoblin(this.ctx,w,h); - this.goblin[0]=gob; - } - keyPress(e){ - // console.log(this.players); - this.makeBase(); - //this.createGoblin(this.width,this.height); - this.players.filter((data) =>(data.inputKey.includes(e.keyCode))).map((mainItem) => - { - (mainItem.inputKey[0]===e.keyCode)?mainItem.x=mainItem.x-10: - (mainItem.inputKey[1]===e.keyCode)?mainItem.x=mainItem.x+10: - (mainItem.inputKey[2]===e.keyCode)?mainItem.y=mainItem.y-10: - (mainItem.inputKey[3]===e.keyCode)?mainItem.y=mainItem.y+10: - false; - let movePlayer1=new Player(mainItem.name,mainItem.type); - movePlayer1.putPlayer(this.ctx,mainItem.x,mainItem.y); - let p2=this.players.filter((item) =>(item.type!==mainItem.type)).map((per) =>{ - let movePlayer2=new Player(per.name,per.type); - movePlayer2.putPlayer(this.ctx,per.x,per.y); - let vill=new Goblin('goblin',this.width,this.height); - vill.putGoblin(this.ctx,this.goblin[0].x,this.goblin[0].y); - }); - // this.createGoblin(); - - this.positionCheck(); - - }); - } - positionCheck() - { - console.log(this.goblin[0]); - // console.log(this.players[0].name); - if(((Math.abs(this.goblin[0].x-this.players[0].x))<=40) && ((Math.abs(this.goblin[0].y-this.players[0].y))<=70)) - { - this.createGoblin(this.width,this.height); - } - else if((Math.abs(this.goblin[0].x-this.players[1].x))<=40 && ((Math.abs(this.goblin[0].y-this.players[1].y))<=70)) - { - this.createGoblin(this.width,this.height); - } - - } -} - - -let goblinGO=document.getElementById('myCanvas'); -let game=new Game(goblinGO,550,550); -game.makeBase(); -game.createPlayers('alpha','player-1',550,550); -game.createPlayers('beta','player-2',550,550); -game.createGoblin(550,550); -game.positionCheck(); -//game.play(); -//console.log(players); From 32b8783b206941489dd4daea2e757b1de5b8a504 Mon Sep 17 00:00:00 2001 From: DebarunMitra Date: Fri, 20 Sep 2019 17:32:42 +0530 Subject: [PATCH 07/16] Version 1.0 score page content added --- css/style.css | 23 ++++++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) diff --git a/css/style.css b/css/style.css index 591b558..5c7f96d 100644 --- a/css/style.css +++ b/css/style.css @@ -3,12 +3,33 @@ Author: Debarun Mitra Technology used: HTML, CSS, JavaScript, JQuery, Bootstrap objective: Create a responsive game using HTML canvas, CSS, JavaScript, jQuery,Bootstrap */ +body{ + background-color:white; +} .pos-center { max-width: 1000px; - margin-left: 10%; + margin-left: 20%; } #cid { margin-left: -30%; } +.player-icon +{ + height: 40px; +} +.score +{ + margin-left: 25px; + color: red; + font-size: 40px; + font-weight: bold; +} +.winner +{ + margin-top: -70px; + font-size: 30px; + font-weight:bold; + color: #ffff00; +} From 45bdb7ccc1f78f56d746b2635ce702b5d69842ff Mon Sep 17 00:00:00 2001 From: DebarunMitra Date: Fri, 20 Sep 2019 17:35:16 +0530 Subject: [PATCH 08/16] Version 1.0 change page name index to game --- game.html | 60 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 54 ------------------------------------------------ 2 files changed, 60 insertions(+), 54 deletions(-) create mode 100644 game.html delete mode 100644 index.html diff --git a/game.html b/game.html new file mode 100644 index 0000000..c14b0cc --- /dev/null +++ b/game.html @@ -0,0 +1,60 @@ + + + + + GoblinGo + + + + + + + + + + + + +
+
+
+
+
+

GoblinGO

+
+
+
+
+
+
+
+ player-1 + +
+
+ player-2 + +
+
+
+
+ + +
+
+
+

WINNER

+

Player 1

+
+
+
+
+ + +
+
+ + + diff --git a/index.html b/index.html deleted file mode 100644 index 1635456..0000000 --- a/index.html +++ /dev/null @@ -1,54 +0,0 @@ - - - - - - - - - - - - - - GoblinGo - - -
-
-
-

player-1

-
-
-

Time:02:20

-
-
-

player-2

-
-
-
-
-

score-1

-
-
-

-
-
-

score-2

-
-
-
-
-
- Sorry, your browser doesn't support the <canvas> element. -
-
-
-
- - - From 505167b14ed9db3c71e962586e8b56241763e2e4 Mon Sep 17 00:00:00 2001 From: DebarunMitra <50083511+DebarunMitra@users.noreply.github.com> Date: Fri, 20 Sep 2019 17:38:10 +0530 Subject: [PATCH 09/16] Version 1.0 score and player name added --- js/script.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/js/script.js b/js/script.js index a710178..3d04b49 100644 --- a/js/script.js +++ b/js/script.js @@ -12,7 +12,7 @@ class Player{ } putPlayer(canvasCtx,a,b){ let p=new Image(); - p.src=(this.type==='player-1')?'/images/player-1.png':'/images/player-2.png'; + p.src=(this.type==='player-1')?'images/player-1.png':'images/player-2.png'; p.onload=()=>{ canvasCtx.drawImage(p,a,b); } @@ -29,7 +29,7 @@ class Player{ { let g=new Image(); //(gx>420||gy>420)?gx=gy=100:false; - g.src='/images/goblin.png'; + g.src='images/goblin.png'; g.onload=()=>{ //console.log(gx+' , '+gy); gCtx.drawImage(g,gx,gy); @@ -51,7 +51,7 @@ class Player{ } makeBase(){ let ground=new Image(); - ground.src='/images/playGround.png'; + ground.src='images/playGround.png'; ground.onload=()=>{ this.ctx.drawImage(ground,0,0); } @@ -104,9 +104,9 @@ class Player{ vill.putGoblin(this.ctx,this.goblin[0].x,this.goblin[0].y); }); // this.createGoblin(); - + this.positionCheck(); - + }); } positionCheck() @@ -120,7 +120,7 @@ class Player{ document.getElementById("player1Score").innerHTML=val+1; sessionStorage.setItem("player1Score",val+1); this.createGoblin(this.width,this.height); - + } else if((Math.abs(this.goblin[0].x-this.players[1].x))<=40 && ((Math.abs(this.goblin[0].y-this.players[1].y))<=70)) { @@ -130,11 +130,11 @@ class Player{ sessionStorage.setItem("player2Score",val+1); this.createGoblin(this.width,this.height); } - + } } - - + + let goblinGO=document.getElementById('myCanvas'); let game=new Game(goblinGO,550,550); game.makeBase(); From 09475ad4854de6e949178a3f1580486c4be17729 Mon Sep 17 00:00:00 2001 From: DebarunMitra Date: Fri, 20 Sep 2019 22:13:09 +0530 Subject: [PATCH 10/16] Version 1.0 score page added and flow works properly --- css/style.css | 2 +- game.html | 105 ++++++++++++++++++++++++-------------------------- js/script.js | 49 ++++++++++++++++++----- score.html | 55 ++++++++++++++++++++++++++ 4 files changed, 147 insertions(+), 64 deletions(-) create mode 100644 score.html diff --git a/css/style.css b/css/style.css index 5c7f96d..b024021 100644 --- a/css/style.css +++ b/css/style.css @@ -4,7 +4,7 @@ Technology used: HTML, CSS, JavaScript, JQuery, Bootstrap objective: Create a responsive game using HTML canvas, CSS, JavaScript, jQuery,Bootstrap */ body{ - background-color:white; + /* background-color:white; */ } .pos-center { diff --git a/game.html b/game.html index c14b0cc..bbff373 100644 --- a/game.html +++ b/game.html @@ -1,60 +1,57 @@ - - - - - GoblinGo - - - - - - - - - - - - -
-
-
-
-
-

GoblinGO

-
-
-
-
+ + + + + + + + + + + + + GoblinGo + + +
-
-
- player-1 - -
-
- player-2 - +
+ player-1 +

player-1

+
+
+

Time:02:20

+
+
+ player-2 +

player-2

+
-
-
-
- - +
+
+

Score: score-1

+
+
+

+
+
+

Score: score-1

+
-
-
-

WINNER

-

Player 1

+
+
+
+ Sorry, your browser doesn't support the <canvas> element.
+
-
-
- - -
-
- - +
+ + + + diff --git a/js/script.js b/js/script.js index a710178..e5d73a6 100644 --- a/js/script.js +++ b/js/script.js @@ -12,7 +12,7 @@ class Player{ } putPlayer(canvasCtx,a,b){ let p=new Image(); - p.src=(this.type==='player-1')?'/images/player-1.png':'/images/player-2.png'; + p.src=(this.type==='player-1')?'images/player-1.png':'images/player-2.png'; p.onload=()=>{ canvasCtx.drawImage(p,a,b); } @@ -29,7 +29,7 @@ class Player{ { let g=new Image(); //(gx>420||gy>420)?gx=gy=100:false; - g.src='/images/goblin.png'; + g.src='images/goblin.png'; g.onload=()=>{ //console.log(gx+' , '+gy); gCtx.drawImage(g,gx,gy); @@ -51,7 +51,7 @@ class Player{ } makeBase(){ let ground=new Image(); - ground.src='/images/playGround.png'; + ground.src='images/playGround.png'; ground.onload=()=>{ this.ctx.drawImage(ground,0,0); } @@ -104,9 +104,9 @@ class Player{ vill.putGoblin(this.ctx,this.goblin[0].x,this.goblin[0].y); }); // this.createGoblin(); - + this.positionCheck(); - + }); } positionCheck() @@ -120,7 +120,7 @@ class Player{ document.getElementById("player1Score").innerHTML=val+1; sessionStorage.setItem("player1Score",val+1); this.createGoblin(this.width,this.height); - + } else if((Math.abs(this.goblin[0].x-this.players[1].x))<=40 && ((Math.abs(this.goblin[0].y-this.players[1].y))<=70)) { @@ -130,11 +130,41 @@ class Player{ sessionStorage.setItem("player2Score",val+1); this.createGoblin(this.width,this.height); } - + } + startTimer() { + var time_in_minutes = 1; + var current_time = Date.parse(new Date()); + var deadline = new Date(current_time + time_in_minutes*60*1000); + function time_remaining(endtime){ + var t = Date.parse(endtime) - Date.parse(new Date()); + var seconds = Math.floor( (t/1000) % 60 ); + var minutes = Math.floor( (t/1000/60) % 60 ); + var hours = Math.floor( (t/(1000*60*60)) % 24 ); + var days = Math.floor( t/(1000*60*60*24) ); + return {'total':t, 'days':days, 'hours':hours, 'minutes':minutes, 'seconds':seconds}; + } + function run_clock(id,endtime){ + var clock = document.getElementById('timer'); + function update_clock(){ + var t = time_remaining(endtime); + document.getElementById("timer").innerHTML=t.minutes+':'+t.seconds; + // clock.innerHTML = t.minutes+':'+t.seconds; + if(t.total<=0){ + clearInterval(timeinterval); + let player1Sc=sessionStorage.getItem("player1Score"); + let player2Sc=sessionStorage.getItem("player2Score"); + document.getElementById("player1Score").innerHTML=player1Sc; + document.getElementById("player2Score").innerHTML=player2Sc; + location.replace("score.html"); + } + } + update_clock(); // run function once at first to avoid delay + var timeinterval = setInterval(update_clock,1000); + } + run_clock('timer',deadline); + } } - - let goblinGO=document.getElementById('myCanvas'); let game=new Game(goblinGO,550,550); game.makeBase(); @@ -142,5 +172,6 @@ class Player{ game.createPlayers('beta','player-2',550,550); game.createGoblin(550,550); game.positionCheck(); + game.startTimer(); //game.play(); //console.log(players); diff --git a/score.html b/score.html new file mode 100644 index 0000000..6527f8e --- /dev/null +++ b/score.html @@ -0,0 +1,55 @@ + + + + + GoblinGo + + + + + + + + + + + + +
+
+
+
+
+

GoblinGO

+
+
+
+
+
+
+
+ player-1 +

20

+
+
+ player-2 +

20

+
+
+
+
+
+

WINNER

+

Player 1

+
+
+
+
+ +
+
+ + + From e7e6454eaf472a4ef7d45c244f87ffef3b984fd5 Mon Sep 17 00:00:00 2001 From: DebarunMitra <50083511+DebarunMitra@users.noreply.github.com> Date: Sat, 21 Sep 2019 11:28:46 +0530 Subject: [PATCH 11/16] Version 1.0 goblin coordinate bounded --- js/script.js | 32 ++++++++------------------------ 1 file changed, 8 insertions(+), 24 deletions(-) diff --git a/js/script.js b/js/script.js index e5d73a6..c0242cf 100644 --- a/js/script.js +++ b/js/script.js @@ -1,4 +1,4 @@ -// Author: Debarun Mitra,Aadesh Nichite +// Author: Debarun Mitra // Technology used: HTML, CSS, JavaScript, JQuery, Bootstrap // objective: Create a responsive game using HTML canvas, CSS, JavaScript, jQuery,Bootstrap class Player{ @@ -28,10 +28,8 @@ class Player{ putGoblin(gCtx,gx,gy) { let g=new Image(); - //(gx>420||gy>420)?gx=gy=100:false; g.src='images/goblin.png'; g.onload=()=>{ - //console.log(gx+' , '+gy); gCtx.drawImage(g,gx,gy); } } @@ -57,37 +55,32 @@ class Player{ } } createPlayers(name,type,x,y){ - // let players=[]; let dx=(type==='player-1')?(Math.floor(Math.random()*(x/3)/2)):(Math.floor(Math.random()*(x-((x/3)/2)))); let dy=(type==='player-1')?(Math.floor(Math.random()*(y/3)/2)):(Math.floor(Math.random()*(y-((y/3)/2)))); let gplayer=new Player(name,type,dx,dy); gplayer.putPlayer(this.ctx,dx,dy); - console.log('length:'+this.players.length); - // (this.players.length<=3)?true:this.players=[]; this.players.push(gplayer); - //return this.players; let player1nm=sessionStorage.getItem("player1Name"); let player2nm=sessionStorage.getItem("player2Name"); - // console.log(player1nm); document.getElementById("player1Name").innerHTML=player1nm; document.getElementById("player2Name").innerHTML=player2nm; - //return this.players; let player1Sc=sessionStorage.getItem("player1Score"); let player2Sc=sessionStorage.getItem("player2Score"); document.getElementById("player1Score").innerHTML=player1Sc; document.getElementById("player2Score").innerHTML=player2Sc; } createGoblin(w,h){ + console.log('cg 1: '+w+' ,'+h); + (w>500 && h>500)?w=h=400:(h>480)?h-=20:(w>480)?w-=20:true; w=Math.floor(Math.random()*(w)); h=Math.floor(Math.random()*(h)); + console.log('cg random 2: '+w+' ,'+h); let gob=new Goblin('goblin',w,h); gob.putGoblin(this.ctx,w,h); this.goblin[0]=gob; } keyPress(e){ - // console.log(this.players); this.makeBase(); - //this.createGoblin(this.width,this.height); this.players.filter((data) =>(data.inputKey.includes(e.keyCode))).map((mainItem) => { (mainItem.inputKey[0]===e.keyCode)?mainItem.x=mainItem.x-10: @@ -103,16 +96,11 @@ class Player{ let vill=new Goblin('goblin',this.width,this.height); vill.putGoblin(this.ctx,this.goblin[0].x,this.goblin[0].y); }); - // this.createGoblin(); - this.positionCheck(); - }); } positionCheck() { - //console.log(this.goblin[0]); - // console.log(this.players[0].name); if(((Math.abs(this.goblin[0].x-this.players[0].x))<=40) && ((Math.abs(this.goblin[0].y-this.players[0].y))<=70)) { let player1Sco=sessionStorage.getItem("player1Score"); @@ -120,7 +108,6 @@ class Player{ document.getElementById("player1Score").innerHTML=val+1; sessionStorage.setItem("player1Score",val+1); this.createGoblin(this.width,this.height); - } else if((Math.abs(this.goblin[0].x-this.players[1].x))<=40 && ((Math.abs(this.goblin[0].y-this.players[1].y))<=70)) { @@ -133,7 +120,7 @@ class Player{ } startTimer() { - var time_in_minutes = 1; + var time_in_minutes = 10; var current_time = Date.parse(new Date()); var deadline = new Date(current_time + time_in_minutes*60*1000); function time_remaining(endtime){ @@ -149,7 +136,6 @@ class Player{ function update_clock(){ var t = time_remaining(endtime); document.getElementById("timer").innerHTML=t.minutes+':'+t.seconds; - // clock.innerHTML = t.minutes+':'+t.seconds; if(t.total<=0){ clearInterval(timeinterval); let player1Sc=sessionStorage.getItem("player1Score"); @@ -159,7 +145,7 @@ class Player{ location.replace("score.html"); } } - update_clock(); // run function once at first to avoid delay + update_clock(); var timeinterval = setInterval(update_clock,1000); } run_clock('timer',deadline); @@ -168,10 +154,8 @@ class Player{ let goblinGO=document.getElementById('myCanvas'); let game=new Game(goblinGO,550,550); game.makeBase(); - game.createPlayers('alpha','player-1',550,550); - game.createPlayers('beta','player-2',550,550); + game.createPlayers('alpha','player-1',50,50); + game.createPlayers('beta','player-2',500,500); game.createGoblin(550,550); game.positionCheck(); game.startTimer(); - //game.play(); - //console.log(players); From 79dac536e13b044b632340881cddff96d7e20571 Mon Sep 17 00:00:00 2001 From: DebarunMitra Date: Sat, 21 Sep 2019 11:31:38 +0530 Subject: [PATCH 12/16] Version 1.0 goblin coordinate bounded into canvus --- js/script.js | 32 ++++++++------------------------ 1 file changed, 8 insertions(+), 24 deletions(-) diff --git a/js/script.js b/js/script.js index e5d73a6..c0242cf 100644 --- a/js/script.js +++ b/js/script.js @@ -1,4 +1,4 @@ -// Author: Debarun Mitra,Aadesh Nichite +// Author: Debarun Mitra // Technology used: HTML, CSS, JavaScript, JQuery, Bootstrap // objective: Create a responsive game using HTML canvas, CSS, JavaScript, jQuery,Bootstrap class Player{ @@ -28,10 +28,8 @@ class Player{ putGoblin(gCtx,gx,gy) { let g=new Image(); - //(gx>420||gy>420)?gx=gy=100:false; g.src='images/goblin.png'; g.onload=()=>{ - //console.log(gx+' , '+gy); gCtx.drawImage(g,gx,gy); } } @@ -57,37 +55,32 @@ class Player{ } } createPlayers(name,type,x,y){ - // let players=[]; let dx=(type==='player-1')?(Math.floor(Math.random()*(x/3)/2)):(Math.floor(Math.random()*(x-((x/3)/2)))); let dy=(type==='player-1')?(Math.floor(Math.random()*(y/3)/2)):(Math.floor(Math.random()*(y-((y/3)/2)))); let gplayer=new Player(name,type,dx,dy); gplayer.putPlayer(this.ctx,dx,dy); - console.log('length:'+this.players.length); - // (this.players.length<=3)?true:this.players=[]; this.players.push(gplayer); - //return this.players; let player1nm=sessionStorage.getItem("player1Name"); let player2nm=sessionStorage.getItem("player2Name"); - // console.log(player1nm); document.getElementById("player1Name").innerHTML=player1nm; document.getElementById("player2Name").innerHTML=player2nm; - //return this.players; let player1Sc=sessionStorage.getItem("player1Score"); let player2Sc=sessionStorage.getItem("player2Score"); document.getElementById("player1Score").innerHTML=player1Sc; document.getElementById("player2Score").innerHTML=player2Sc; } createGoblin(w,h){ + console.log('cg 1: '+w+' ,'+h); + (w>500 && h>500)?w=h=400:(h>480)?h-=20:(w>480)?w-=20:true; w=Math.floor(Math.random()*(w)); h=Math.floor(Math.random()*(h)); + console.log('cg random 2: '+w+' ,'+h); let gob=new Goblin('goblin',w,h); gob.putGoblin(this.ctx,w,h); this.goblin[0]=gob; } keyPress(e){ - // console.log(this.players); this.makeBase(); - //this.createGoblin(this.width,this.height); this.players.filter((data) =>(data.inputKey.includes(e.keyCode))).map((mainItem) => { (mainItem.inputKey[0]===e.keyCode)?mainItem.x=mainItem.x-10: @@ -103,16 +96,11 @@ class Player{ let vill=new Goblin('goblin',this.width,this.height); vill.putGoblin(this.ctx,this.goblin[0].x,this.goblin[0].y); }); - // this.createGoblin(); - this.positionCheck(); - }); } positionCheck() { - //console.log(this.goblin[0]); - // console.log(this.players[0].name); if(((Math.abs(this.goblin[0].x-this.players[0].x))<=40) && ((Math.abs(this.goblin[0].y-this.players[0].y))<=70)) { let player1Sco=sessionStorage.getItem("player1Score"); @@ -120,7 +108,6 @@ class Player{ document.getElementById("player1Score").innerHTML=val+1; sessionStorage.setItem("player1Score",val+1); this.createGoblin(this.width,this.height); - } else if((Math.abs(this.goblin[0].x-this.players[1].x))<=40 && ((Math.abs(this.goblin[0].y-this.players[1].y))<=70)) { @@ -133,7 +120,7 @@ class Player{ } startTimer() { - var time_in_minutes = 1; + var time_in_minutes = 10; var current_time = Date.parse(new Date()); var deadline = new Date(current_time + time_in_minutes*60*1000); function time_remaining(endtime){ @@ -149,7 +136,6 @@ class Player{ function update_clock(){ var t = time_remaining(endtime); document.getElementById("timer").innerHTML=t.minutes+':'+t.seconds; - // clock.innerHTML = t.minutes+':'+t.seconds; if(t.total<=0){ clearInterval(timeinterval); let player1Sc=sessionStorage.getItem("player1Score"); @@ -159,7 +145,7 @@ class Player{ location.replace("score.html"); } } - update_clock(); // run function once at first to avoid delay + update_clock(); var timeinterval = setInterval(update_clock,1000); } run_clock('timer',deadline); @@ -168,10 +154,8 @@ class Player{ let goblinGO=document.getElementById('myCanvas'); let game=new Game(goblinGO,550,550); game.makeBase(); - game.createPlayers('alpha','player-1',550,550); - game.createPlayers('beta','player-2',550,550); + game.createPlayers('alpha','player-1',50,50); + game.createPlayers('beta','player-2',500,500); game.createGoblin(550,550); game.positionCheck(); game.startTimer(); - //game.play(); - //console.log(players); From e4d6a5f43c74abe0ee45dd1c850795c3a6ca90b3 Mon Sep 17 00:00:00 2001 From: DebarunMitra Date: Sat, 21 Sep 2019 12:17:51 +0530 Subject: [PATCH 13/16] Version 1.0 files modified for upload --- css/style.css | 3 --- game.html | 2 +- js/script.js | 6 +++--- score.html | 55 --------------------------------------------------- 4 files changed, 4 insertions(+), 62 deletions(-) delete mode 100644 score.html diff --git a/css/style.css b/css/style.css index b024021..17708ac 100644 --- a/css/style.css +++ b/css/style.css @@ -3,9 +3,6 @@ Author: Debarun Mitra Technology used: HTML, CSS, JavaScript, JQuery, Bootstrap objective: Create a responsive game using HTML canvas, CSS, JavaScript, jQuery,Bootstrap */ -body{ - /* background-color:white; */ -} .pos-center { max-width: 1000px; diff --git a/game.html b/game.html index bbff373..292a340 100644 --- a/game.html +++ b/game.html @@ -50,7 +50,7 @@
- + diff --git a/js/script.js b/js/script.js index c0242cf..f9b9bf1 100644 --- a/js/script.js +++ b/js/script.js @@ -1,4 +1,4 @@ -// Author: Debarun Mitra +// Author: Debarun Mitra,Aadesh Nichite // Technology used: HTML, CSS, JavaScript, JQuery, Bootstrap // objective: Create a responsive game using HTML canvas, CSS, JavaScript, jQuery,Bootstrap class Player{ @@ -120,7 +120,7 @@ class Player{ } startTimer() { - var time_in_minutes = 10; + var time_in_minutes = 2; var current_time = Date.parse(new Date()); var deadline = new Date(current_time + time_in_minutes*60*1000); function time_remaining(endtime){ @@ -158,4 +158,4 @@ class Player{ game.createPlayers('beta','player-2',500,500); game.createGoblin(550,550); game.positionCheck(); - game.startTimer(); + game.startTimer(); \ No newline at end of file diff --git a/score.html b/score.html deleted file mode 100644 index 6527f8e..0000000 --- a/score.html +++ /dev/null @@ -1,55 +0,0 @@ - - - - - GoblinGo - - - - - - - - - - - - -
-
-
-
-
-

GoblinGO

-
-
-
-
-
-
-
- player-1 -

20

-
-
- player-2 -

20

-
-
-
-
-
-

WINNER

-

Player 1

-
-
-
-
- -
-
- - - From be41f727c77547bca1f3d088db1ac01c06b8f2cd Mon Sep 17 00:00:00 2001 From: Debarun Mitra <50083511+DebarunMitra@users.noreply.github.com> Date: Wed, 27 Nov 2019 23:05:02 +0530 Subject: [PATCH 14/16] documented --- js/script.js | 317 +++++++++++++++++++++++++++------------------------ 1 file changed, 168 insertions(+), 149 deletions(-) diff --git a/js/script.js b/js/script.js index f9b9bf1..a34af4a 100644 --- a/js/script.js +++ b/js/script.js @@ -1,161 +1,180 @@ -// Author: Debarun Mitra,Aadesh Nichite +// Author: Debarun Mitra // Technology used: HTML, CSS, JavaScript, JQuery, Bootstrap // objective: Create a responsive game using HTML canvas, CSS, JavaScript, jQuery,Bootstrap -class Player{ - constructor(name,type,x,y) - { - this.name=name; - this.type=type; - this.x=x; - this.y=y; - this.inputKey=(type ==="player-1")?[65,68,87,83]:[37,39,38,40]; +class Player { + constructor(name, type, x, y) { + this.name = name; + this.type = type; + this.x = x; + this.y = y; + this.inputKey = (type === "player-1") ? [65, 68, 87, 83] : [37, 39, 38, 40]; + } + /*put players into canvas start*/ + putPlayer(canvasCtx, a, b) { + let p = new Image(); + p.src = (this.type === 'player-1') ? 'images/player-1.png' : 'images/player-2.png'; + p.onload = () => { + canvasCtx.drawImage(p, a, b); } - putPlayer(canvasCtx,a,b){ - let p=new Image(); - p.src=(this.type==='player-1')?'images/player-1.png':'images/player-2.png'; - p.onload=()=>{ - canvasCtx.drawImage(p,a,b); - } - } } - class Goblin{ - constructor(type,x,y) - { - this.type=type; - this.x=x; - this.y=y; + /*put players into canvas end*/ +} +class Goblin { + constructor(type, x, y) { + this.type = type; + this.x = x; + this.y = y; + } + /*put goblinGO into canvas start*/ + putGoblin(gCtx, gx, gy) { + let g = new Image(); + g.src = 'images/goblin.png'; + g.onload = () => { + gCtx.drawImage(g, gx, gy); } - putGoblin(gCtx,gx,gy) - { - let g=new Image(); - g.src='images/goblin.png'; - g.onload=()=>{ - gCtx.drawImage(g,gx,gy); - } + } + /*put goblinGO into canvas end*/ +} +class Game { + constructor(canvas, width, height) { + this.canvas = canvas; + this.width = width; + this.height = height; + canvas.width = width; + canvas.height = height; + this.players = []; + this.goblin = []; + this.ctx = canvas.getContext('2d'); + document.addEventListener('keydown', this.keyPress.bind(this)); + document.addEventListener('keyup', this.keyPress.bind(this)); + } + /*create playground start*/ + makeBase() { + let ground = new Image(); + ground.src = 'images/playGround.png'; + ground.onload = () => { + this.ctx.drawImage(ground, 0, 0); } } - class Game{ - constructor(canvas,width, height){ - this.canvas = canvas; - this.width = width; - this.height = height; - canvas.width = width; - canvas.height = height; - this.players=[]; - this.goblin=[]; - this.ctx = canvas.getContext('2d'); - document.addEventListener('keydown',this.keyPress.bind(this)); - document.addEventListener('keyup',this.keyPress.bind(this)); - } - makeBase(){ - let ground=new Image(); - ground.src='images/playGround.png'; - ground.onload=()=>{ - this.ctx.drawImage(ground,0,0); - } - } - createPlayers(name,type,x,y){ - let dx=(type==='player-1')?(Math.floor(Math.random()*(x/3)/2)):(Math.floor(Math.random()*(x-((x/3)/2)))); - let dy=(type==='player-1')?(Math.floor(Math.random()*(y/3)/2)):(Math.floor(Math.random()*(y-((y/3)/2)))); - let gplayer=new Player(name,type,dx,dy); - gplayer.putPlayer(this.ctx,dx,dy); - this.players.push(gplayer); - let player1nm=sessionStorage.getItem("player1Name"); - let player2nm=sessionStorage.getItem("player2Name"); - document.getElementById("player1Name").innerHTML=player1nm; - document.getElementById("player2Name").innerHTML=player2nm; - let player1Sc=sessionStorage.getItem("player1Score"); - let player2Sc=sessionStorage.getItem("player2Score"); - document.getElementById("player1Score").innerHTML=player1Sc; - document.getElementById("player2Score").innerHTML=player2Sc; - } - createGoblin(w,h){ - console.log('cg 1: '+w+' ,'+h); - (w>500 && h>500)?w=h=400:(h>480)?h-=20:(w>480)?w-=20:true; - w=Math.floor(Math.random()*(w)); - h=Math.floor(Math.random()*(h)); - console.log('cg random 2: '+w+' ,'+h); - let gob=new Goblin('goblin',w,h); - gob.putGoblin(this.ctx,w,h); - this.goblin[0]=gob; - } - keyPress(e){ - this.makeBase(); - this.players.filter((data) =>(data.inputKey.includes(e.keyCode))).map((mainItem) => - { - (mainItem.inputKey[0]===e.keyCode)?mainItem.x=mainItem.x-10: - (mainItem.inputKey[1]===e.keyCode)?mainItem.x=mainItem.x+10: - (mainItem.inputKey[2]===e.keyCode)?mainItem.y=mainItem.y-10: - (mainItem.inputKey[3]===e.keyCode)?mainItem.y=mainItem.y+10: - false; - let movePlayer1=new Player(mainItem.name,mainItem.type); - movePlayer1.putPlayer(this.ctx,mainItem.x,mainItem.y); - let p2=this.players.filter((item) =>(item.type!==mainItem.type)).map((per) =>{ - let movePlayer2=new Player(per.name,per.type); - movePlayer2.putPlayer(this.ctx,per.x,per.y); - let vill=new Goblin('goblin',this.width,this.height); - vill.putGoblin(this.ctx,this.goblin[0].x,this.goblin[0].y); - }); - this.positionCheck(); + /*create playground end*/ + /*create players randomly start*/ + createPlayers(name, type, x, y) { + let dx = (type === 'player-1') ? (Math.floor(Math.random() * (x / 3) / 2)) : (Math.floor(Math.random() * (x - ((x / 3) / 2)))); + let dy = (type === 'player-1') ? (Math.floor(Math.random() * (y / 3) / 2)) : (Math.floor(Math.random() * (y - ((y / 3) / 2)))); + let gplayer = new Player(name, type, dx, dy); + gplayer.putPlayer(this.ctx, dx, dy); + this.players.push(gplayer); + let player1nm = sessionStorage.getItem("player1Name"); + let player2nm = sessionStorage.getItem("player2Name"); + document.getElementById("player1Name").innerHTML = player1nm; + document.getElementById("player2Name").innerHTML = player2nm; + let player1Sc = sessionStorage.getItem("player1Score"); + let player2Sc = sessionStorage.getItem("player2Score"); + document.getElementById("player1Score").innerHTML = player1Sc; + document.getElementById("player2Score").innerHTML = player2Sc; + } + /*create players randomly start*/ + /*create goblin randomly start*/ + createGoblin(w, h) { + (w > 500 && h > 500) ? w = h = 400: (h > 480) ? h -= 20 : (w > 480) ? w -= 20 : true; + w = Math.floor(Math.random() * (w)); + h = Math.floor(Math.random() * (h)); + let gob = new Goblin('goblin', w, h); + gob.putGoblin(this.ctx, w, h); + this.goblin[0] = gob; + } + /*create goblin randomly end*/ + /*key press event identify start*/ + keyPress(e) { + this.makeBase(); + this.players.filter((data) => (data.inputKey.includes(e.keyCode))).map((mainItem) => { + (mainItem.inputKey[0] === e.keyCode) ? mainItem.x = mainItem.x - 10: + (mainItem.inputKey[1] === e.keyCode) ? mainItem.x = mainItem.x + 10 : + (mainItem.inputKey[2] === e.keyCode) ? mainItem.y = mainItem.y - 10 : + (mainItem.inputKey[3] === e.keyCode) ? mainItem.y = mainItem.y + 10 : + false; + let movePlayer1 = new Player(mainItem.name, mainItem.type); + movePlayer1.putPlayer(this.ctx, mainItem.x, mainItem.y); + let p2 = this.players.filter((item) => (item.type !== mainItem.type)).map((per) => { + let movePlayer2 = new Player(per.name, per.type); + movePlayer2.putPlayer(this.ctx, per.x, per.y); + let vill = new Goblin('goblin', this.width, this.height); + vill.putGoblin(this.ctx, this.goblin[0].x, this.goblin[0].y); }); + this.positionCheck(); + }); + } + /*key press event identify end*/ + /* + goblin position start + positionCheck():- checks the collition between goblin and players + 1) change the goblin position when the players and goblin x-axis difference is 40 and y-axis difference is 70 + */ + positionCheck() { + if (((Math.abs(this.goblin[0].x - this.players[0].x)) <= 40) && ((Math.abs(this.goblin[0].y - this.players[0].y)) <= 70)) { + let player1Sco = sessionStorage.getItem("player1Score"); + let val = parseInt(player1Sco, 10); + document.getElementById("player1Score").innerHTML = val + 1; + sessionStorage.setItem("player1Score", val + 1); + this.createGoblin(this.width, this.height); + } else if ((Math.abs(this.goblin[0].x - this.players[1].x)) <= 40 && ((Math.abs(this.goblin[0].y - this.players[1].y)) <= 70)) { + let player2Sco = sessionStorage.getItem("player2Score"); + let val = parseInt(player2Sco, 10); + document.getElementById("player2Score").innerHTML = val + 1; + sessionStorage.setItem("player2Score", val + 1); + this.createGoblin(this.width, this.height); } - positionCheck() - { - if(((Math.abs(this.goblin[0].x-this.players[0].x))<=40) && ((Math.abs(this.goblin[0].y-this.players[0].y))<=70)) - { - let player1Sco=sessionStorage.getItem("player1Score"); - let val=parseInt(player1Sco, 10); - document.getElementById("player1Score").innerHTML=val+1; - sessionStorage.setItem("player1Score",val+1); - this.createGoblin(this.width,this.height); - } - else if((Math.abs(this.goblin[0].x-this.players[1].x))<=40 && ((Math.abs(this.goblin[0].y-this.players[1].y))<=70)) - { - let player2Sco=sessionStorage.getItem("player2Score"); - let val=parseInt(player2Sco, 10); - document.getElementById("player2Score").innerHTML=val+1; - sessionStorage.setItem("player2Score",val+1); - this.createGoblin(this.width,this.height); - } + } + /*goblin position end*/ + /*game time start*/ + startTimer() { + let time_in_minutes = 1; + let current_time = Date.parse(new Date()); + let deadline = new Date(current_time + time_in_minutes * 60 * 1000); + + function time_remaining(endtime) { + let t = Date.parse(endtime) - Date.parse(new Date()); + let seconds = Math.floor((t / 1000) % 60); + let minutes = Math.floor((t / 1000 / 60) % 60); + let hours = Math.floor((t / (1000 * 60 * 60)) % 24); + let days = Math.floor(t / (1000 * 60 * 60 * 24)); + return { + 'total': t, + 'days': days, + 'hours': hours, + 'minutes': minutes, + 'seconds': seconds + }; + } + + function run_clock(id, endtime) { + let clock = document.getElementById('timer'); + function update_clock() { + let t = time_remaining(endtime); + (t.seconds < 10) ? t.seconds = '0' + t.seconds: true; + document.getElementById("timer").innerHTML = t.minutes + ':' + t.seconds; + if (t.total <= 0) { + clearInterval(timeinterval); + let player1Sc = sessionStorage.getItem("player1Score"); + let player2Sc = sessionStorage.getItem("player2Score"); + document.getElementById("player1Score").innerHTML = player1Sc; + document.getElementById("player2Score").innerHTML = player2Sc; + location.replace("score.html"); + } + } + update_clock(); + let timeinterval = setInterval(update_clock, 1000); } - startTimer() { - var time_in_minutes = 2; - var current_time = Date.parse(new Date()); - var deadline = new Date(current_time + time_in_minutes*60*1000); - function time_remaining(endtime){ - var t = Date.parse(endtime) - Date.parse(new Date()); - var seconds = Math.floor( (t/1000) % 60 ); - var minutes = Math.floor( (t/1000/60) % 60 ); - var hours = Math.floor( (t/(1000*60*60)) % 24 ); - var days = Math.floor( t/(1000*60*60*24) ); - return {'total':t, 'days':days, 'hours':hours, 'minutes':minutes, 'seconds':seconds}; - } - function run_clock(id,endtime){ - var clock = document.getElementById('timer'); - function update_clock(){ - var t = time_remaining(endtime); - document.getElementById("timer").innerHTML=t.minutes+':'+t.seconds; - if(t.total<=0){ - clearInterval(timeinterval); - let player1Sc=sessionStorage.getItem("player1Score"); - let player2Sc=sessionStorage.getItem("player2Score"); - document.getElementById("player1Score").innerHTML=player1Sc; - document.getElementById("player2Score").innerHTML=player2Sc; - location.replace("score.html"); - } - } - update_clock(); - var timeinterval = setInterval(update_clock,1000); - } - run_clock('timer',deadline); - } + run_clock('timer', deadline); } - let goblinGO=document.getElementById('myCanvas'); - let game=new Game(goblinGO,550,550); - game.makeBase(); - game.createPlayers('alpha','player-1',50,50); - game.createPlayers('beta','player-2',500,500); - game.createGoblin(550,550); - game.positionCheck(); - game.startTimer(); \ No newline at end of file + /*game time end*/ +} +let goblinGO = document.getElementById('myCanvas'); +let game = new Game(goblinGO, 550, 550); +game.makeBase(); +game.createPlayers('alpha', 'player-1', 50, 50); +game.createPlayers('beta', 'player-2', 500, 500); +game.createGoblin(550, 550); +game.positionCheck(); +game.startTimer(); From 007c5320f33230b8011df8194c3bf0d9d5fbbf55 Mon Sep 17 00:00:00 2001 From: Debarun Mitra <50083511+DebarunMitra@users.noreply.github.com> Date: Wed, 27 Nov 2019 23:15:25 +0530 Subject: [PATCH 15/16] Update README.md --- README.md | 41 ++++++++++++++++++++++++++++++++++++++--- 1 file changed, 38 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 42dae36..df43992 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,39 @@ # CanvasGame -Simple canvas game using HTML,CSS,javaScript,jquery,Bootstrap. -## Author -Aadesh, Debarun + +GoblinGo, a JavaScript based multiplayer canvas game. In this game there are three characters present, player-one player-two and goblin. Goblin is the villain of this game. This game will continue for one minute. In this time, both players will try to kill the goblin and everytime goblin will appear in some new place. At the end of one minute which player would collect more scores ,he/she will be the winner. + +## Application Name +GoblinGo + +## Author: + +[Aadesh Nichite](https://github.com/AadeshNichite) + +[Debarun Mitra](https://github.com/DebarunMitra) + +## Technology Used: + +HTML,Canvas, CSS, JavaScript(ES6), Bootstrap + +## Objective: + +Create a GoblinGo game + +## Game Rules: + +#### 1) First set a player name. +#### 2) Click on to the start button and play. +#### 3) Timer runs for one minute. +#### 4) Player who score more will win. + +## Image: +![Drag Racing](images/start.PNG) +#### ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +![Drag Racing](images/play.PNG) +#### ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +![Drag Racing](images/score.PNG) + +## Video: +[GoblinGo Video](images/GoblinGo.mp4) +## Visit: +[GoblinGO](https://aadeshnichite.github.io/CanvasGame/) From 3230ffa94a2acbb69b1109a5430003c657294c4b Mon Sep 17 00:00:00 2001 From: Debarun Mitra <50083511+DebarunMitra@users.noreply.github.com> Date: Wed, 27 Nov 2019 23:16:21 +0530 Subject: [PATCH 16/16] Update README.md --- README.md | 7 ------- 1 file changed, 7 deletions(-) diff --git a/README.md b/README.md index df43992..2204e61 100644 --- a/README.md +++ b/README.md @@ -26,13 +26,6 @@ Create a GoblinGo game #### 3) Timer runs for one minute. #### 4) Player who score more will win. -## Image: -![Drag Racing](images/start.PNG) -#### ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -![Drag Racing](images/play.PNG) -#### ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -![Drag Racing](images/score.PNG) - ## Video: [GoblinGo Video](images/GoblinGo.mp4) ## Visit: