diff --git a/Code/assets/btnDuel.png b/Code/assets/btnDuel.png new file mode 100644 index 0000000..ce8898b Binary files /dev/null and b/Code/assets/btnDuel.png differ diff --git a/Code/assets/btnFlag.png b/Code/assets/btnFlag.png new file mode 100644 index 0000000..d9e3416 Binary files /dev/null and b/Code/assets/btnFlag.png differ diff --git a/Code/assets/btnLast.png b/Code/assets/btnLast.png new file mode 100644 index 0000000..1fab8d1 Binary files /dev/null and b/Code/assets/btnLast.png differ diff --git a/Code/assets/btnMap.png b/Code/assets/btnMap.png new file mode 100644 index 0000000..b4e44a6 Binary files /dev/null and b/Code/assets/btnMap.png differ diff --git a/Code/assets/btnTeam.png b/Code/assets/btnTeam.png new file mode 100644 index 0000000..916f375 Binary files /dev/null and b/Code/assets/btnTeam.png differ diff --git a/Code/index.html b/Code/index.html index 16b36e6..0a8da76 100644 --- a/Code/index.html +++ b/Code/index.html @@ -8,12 +8,12 @@ - + +
+ + -
- - diff --git a/Code/public/js/app.min.js b/Code/public/js/app.min.js index 55f8917..819c5f0 100644 --- a/Code/public/js/app.min.js +++ b/Code/public/js/app.min.js @@ -1 +1 @@ -var EnemyBots=new Array(5),myself=new Robot(5,5);EnemyBots.push(new Robot(1,1)),console.log(myself.height);const WIDTH_WINDOW=$(document).width()-30,HEIGHT_WINDOW=$(document).height()-30;var config={type:Phaser.AUTO,width:WIDTH_WINDOW,height:HEIGHT_WINDOW,parent:"game",backgroundColor:"#35363A",scene:[Boot]},game=new Phaser.Game(config); \ No newline at end of file +var EnemyBots=new Array(5),myself=new Robot(5,5);EnemyBots.push(new Robot(1,1)),console.log(myself.height);const WIDTH_WINDOW=$(document).width()-30,HEIGHT_WINDOW=$(document).height()-30;var config={type:Phaser.AUTO,width:WIDTH_WINDOW,height:HEIGHT_WINDOW,parent:"all",backgroundColor:"#35363A",scene:[Boot,Type,Game,GamingBoard]},game=new Phaser.Game(config); \ No newline at end of file diff --git a/Code/public/js/class.min.js b/Code/public/js/class.min.js index d769db3..5640fcf 100644 --- a/Code/public/js/class.min.js +++ b/Code/public/js/class.min.js @@ -1 +1 @@ -class Boot extends Phaser.Scene{constructor(){super("Boot"),this.active,this.currentScene}preload(){this.load.spritesheet("btn_play","assets/btnPlay.png",{frameWidth:650,frameHeight:170}),this.load.image("background","assets/background.png")}create(){this.add.image(0,0,"background").alpha=.1;this.add.text(WIDTH_WINDOW/2,HEIGHT_WINDOW/3,"WARIA",{font:"200px stencil",fill:"#e2e2e2"}).setOrigin(.5,.5);let t=this.add.sprite(WIDTH_WINDOW/2,HEIGHT_WINDOW/3*2,"btn_play").setInteractive();t.on("pointerout",()=>t.setFrame(0)),t.on("pointerover",()=>t.setFrame(1)),t.on("pointerdown",()=>this.clickPlay(t))}clickPlay(t){t.setFrame(2),console.log("Play")}}class Robot{constructor(t,e){this.height=t,this.width=e}} \ No newline at end of file +class Boot extends Phaser.Scene{constructor(){super("Boot")}preload(){this.load.spritesheet("btn_play","assets/btnPlay.png",{frameWidth:650,frameHeight:170}),this.load.spritesheet("btn_duel","assets/btnDuel.png",{frameWidth:269,frameHeight:262}),this.load.spritesheet("btn_last","assets/btnLast.png",{frameWidth:269,frameHeight:262}),this.load.spritesheet("btn_team","assets/btnTeam.png",{frameWidth:269,frameHeight:262}),this.load.spritesheet("btn_flag","assets/btnFlag.png",{frameWidth:269,frameHeight:262}),this.load.spritesheet("btn_map","assets/btnMap.png",{frameWidth:269,frameHeight:262}),this.load.image("background","assets/background.png")}create(){this.add.text(WIDTH_WINDOW/2,HEIGHT_WINDOW/3,"WARIA",{font:"200px stencil",fill:"#e2e2e2"}).setOrigin(.5,.5);let t=this.add.sprite(WIDTH_WINDOW/2,HEIGHT_WINDOW/3*2,"btn_play").setInteractive();t.on("pointerout",()=>t.setFrame(0)),t.on("pointerover",()=>t.setFrame(1)),t.on("pointerdown",()=>this.clickPlay(t))}clickPlay(t){t.setFrame(2),console.log("Play"),this.scene.start("Type")}}class Game extends Phaser.Scene{constructor(){super("Game")}preload(){}create(){let t=this.add.sprite(WIDTH_WINDOW/1.5,HEIGHT_WINDOW/3*2,"btn_play").setOrigin(.5,.5).setInteractive();t.on("pointerout",()=>t.setFrame(0)),t.on("pointerover",()=>t.setFrame(1)),t.on("pointerdown",()=>this.clickPlay(t)),this.scene.launch("GamingBoard")}}class GamingBoard extends Phaser.Scene{constructor(){super("GamingBoard")}preload(){WIDTH_WINDOWt.setFrame(0)),t.on("pointerover",()=>t.setFrame(1)),t.on("pointerdown",()=>this.clickPlay(t))}clickPlay(t){this.scene.start("Game")}} \ No newline at end of file diff --git a/Code/src/js/Init.js b/Code/src/js/Init.js index 5ad174d..f317869 100644 --- a/Code/src/js/Init.js +++ b/Code/src/js/Init.js @@ -9,9 +9,9 @@ var config = { type: Phaser.AUTO, width: WIDTH_WINDOW, height: HEIGHT_WINDOW, - parent: 'game', + parent: 'all', backgroundColor: '#35363A', - scene: [ Boot ] + scene: [ Boot, Type, Game, GamingBoard ] }; var game = new Phaser.Game(config); diff --git a/Code/src/js/classes/Boot.js b/Code/src/js/classes/Boot.js index 6c37171..bec87e5 100644 --- a/Code/src/js/classes/Boot.js +++ b/Code/src/js/classes/Boot.js @@ -1,28 +1,31 @@ class Boot extends Phaser.Scene { constructor() { super('Boot'); - this.active; - this.currentScene; } - preload () { - this.load.spritesheet('btn_play', 'assets/btnPlay.png', { frameWidth: 650, frameHeight: 170 }); + + preload() { + this.load.spritesheet('btn_play', 'assets/btnPlay.png', {frameWidth: 650, frameHeight: 170}); + this.load.spritesheet('btn_duel', 'assets/btnDuel.png', {frameWidth: 269, frameHeight: 262}); + this.load.spritesheet('btn_last', 'assets/btnLast.png', {frameWidth: 269, frameHeight: 262}); + this.load.spritesheet('btn_team', 'assets/btnTeam.png', {frameWidth: 269, frameHeight: 262}); + this.load.spritesheet('btn_flag', 'assets/btnFlag.png', {frameWidth: 269, frameHeight: 262}); + this.load.spritesheet('btn_map', 'assets/btnMap.png', {frameWidth: 269, frameHeight: 262}); this.load.image('background', 'assets/background.png'); } - create () { - this.add.image(0,0,'background').alpha = 0.1; - - let style = { font : '200px stencil', fill: "#e2e2e2"}; - this.add.text(WIDTH_WINDOW / 2,HEIGHT_WINDOW / 3, "WARIA", style).setOrigin(0.5,0.5); - let btn = this.add.sprite(WIDTH_WINDOW / 2,(HEIGHT_WINDOW / 3) * 2, 'btn_play').setInteractive(); + create() { + let style = {font: '200px stencil', fill: "#e2e2e2"}; + this.add.text(WIDTH_WINDOW / 2, HEIGHT_WINDOW / 3, "WARIA", style).setOrigin(0.5, 0.5); + let btn = this.add.sprite(WIDTH_WINDOW / 2, (HEIGHT_WINDOW / 3) * 2, 'btn_play').setInteractive(); //btn.setFrame(0); btn.on('pointerout', () => btn.setFrame(0)); btn.on('pointerover', () => btn.setFrame(1)); btn.on('pointerdown', () => this.clickPlay(btn)); } - clickPlay (btn) { + clickPlay(btn) { btn.setFrame(2); console.log("Play"); + this.scene.start('Type'); } } \ No newline at end of file diff --git a/Code/src/js/classes/Game.js b/Code/src/js/classes/Game.js index e69de29..fef0591 100644 --- a/Code/src/js/classes/Game.js +++ b/Code/src/js/classes/Game.js @@ -0,0 +1,20 @@ +class Game extends Phaser.Scene { + constructor() { + super('Game'); + } + + preload() { + } + + create() { + //this.add.image(0,0,'background').alpha = 0.1; + + let btn = this.add.sprite(WIDTH_WINDOW / 1.5, (HEIGHT_WINDOW / 3) * 2, 'btn_play').setOrigin(0.5, 0.5).setInteractive(); + //btn.setFrame(0); + btn.on('pointerout', () => btn.setFrame(0)); + btn.on('pointerover', () => btn.setFrame(1)); + btn.on('pointerdown', () => this.clickPlay(btn)); + this.scene.launch('GamingBoard'); + //this.scene.isActive('GamingBoard'); + } +} \ No newline at end of file diff --git a/Code/src/js/classes/GamingBoard.js b/Code/src/js/classes/GamingBoard.js new file mode 100644 index 0000000..0760aa9 --- /dev/null +++ b/Code/src/js/classes/GamingBoard.js @@ -0,0 +1,23 @@ +class GamingBoard extends Phaser.Scene { + constructor() { + super('GamingBoard'); + } + + preload() { + if (WIDTH_WINDOW < HEIGHT_WINDOW) + this.width = WIDTH_WINDOW * 0.8; + + else + this.width = HEIGHT_WINDOW * 0.8; + this.cameras.main.setViewport(WIDTH_WINDOW / 10, HEIGHT_WINDOW / 10, this.width, this.width); + + } + + create() { + this.add.image(0, 0, 'background').alpha = 0.1; + + this.add.circle(this.width*0.1,this.width*0.1,this.width*0.05, 0x6666ff); + this.add.circle(this.width*0.9,this.width*0.9,this.width*0.05, 0xff33cc); + + } +} \ No newline at end of file diff --git a/Code/src/js/classes/Type.js b/Code/src/js/classes/Type.js new file mode 100644 index 0000000..d4baf0f --- /dev/null +++ b/Code/src/js/classes/Type.js @@ -0,0 +1,40 @@ +class Type extends Phaser.Scene { + constructor() { + super('Type'); + } + + preload() { + } + + create() { + let style = {font: '200px stencil', fill: "#e2e2e2"}; + this.add.text(WIDTH_WINDOW / 2, HEIGHT_WINDOW / 4, "WARIA", style).setOrigin(0.5, 1); + + let btnDuel = this.add.sprite((WIDTH_WINDOW / 8) * 3, (HEIGHT_WINDOW / 4) * 2, 'btn_duel').setInteractive(); + this.createbutton(btnDuel); + + let btnLast = this.add.sprite((WIDTH_WINDOW / 8) * 5, (HEIGHT_WINDOW / 4) * 2, 'btn_last').setInteractive(); + this.createbutton(btnLast); + + let btnTeam = this.add.sprite((WIDTH_WINDOW / 8) * 2, (HEIGHT_WINDOW / 4) * 3, 'btn_team').setInteractive(); + this.createbutton(btnTeam); + + let btnFlag = this.add.sprite((WIDTH_WINDOW / 8) * 4, (HEIGHT_WINDOW / 4) * 3, 'btn_flag').setInteractive(); + this.createbutton(btnFlag); + + let btnMap = this.add.sprite((WIDTH_WINDOW / 8) * 6, (HEIGHT_WINDOW / 4) * 3, 'btn_map').setInteractive(); + this.createbutton(btnMap); + } + + createbutton(btn) { + btn.displayHeight = HEIGHT_WINDOW / 4; + btn.scaleX = btn.scaleY; + btn.on('pointerout', () => btn.setFrame(0)); + btn.on('pointerover', () => btn.setFrame(1)); + btn.on('pointerdown', () => this.clickPlay(btn)); + } + + clickPlay(btn) { + this.scene.start('Game'); + } +} \ No newline at end of file