class Example extends Phaser.Scene { constructor() { super(); this.mouseCoordinates = null; this.background1 = null; this.background2 = null; this.barBackground = null; this.obj_pointer = null; this.player1 = null; this.player2 = null; this.player_modes = [ null, // mode 0 is null { // Starts fast but gets tired easily power: 8, // Speed added on a good hit. speed: 2, // Size of zones. technique: 3, // Speed lost on a bad hit. luck: 2, // Random chance to hit a missed ball. stamina: 3, // Effects values as the game progresses. }, { // Very quick, not too strong power: 3, // Speed added on a good hit. speed: 8, // Size of zones. technique: 7, // Speed lost on a bad hit. luck: 4, // Random chance to hit a missed ball. stamina: 4, // Effects values as the game progresses. }, { // Good all round, does not tire easily and suffers litle power: 5, // Speed added on a good hit. speed: 5, // Size of zones. technique: 8, // Speed lost on a bad hit. luck: 2, // Random chance to hit a missed ball. stamina: 8, // Effects values as the game progresses. }, { // Bad player but ery lucky power: 4, // Speed added on a good hit. speed: 5, // Size of zones. technique: 3, // Speed lost on a bad hit. luck: 8, // Random chance to hit a missed ball. stamina: 8, // Effects values as the game progresses. }, ]; this.player1mode = 0; this.player2mode = 0; this.player1_speed = 5; this.player2_speed = 5; this.state = "Start"; this.origins = { tLeft: [0, 0], cLeft: [0, .5], bLeft: [0, 1], tCenter: [0.5, 0], cCenter: [0.5, .5], bCenter: [0.5, 1], tRight: [1, 0], cRight: [1, .5], bRight: [1, 1], }; this.styles = { base: { fontFamily: 'Arial', fontSize: 24, color: '#ffffff', depth: 1, origin: 'tLeft', align: 'left', }, button: { backgroundColor: '#000000', align: 'center', padding: { x: 8, y: 3 }, depth: 100, origin: 'cCenter', flash: '#555555', //upSound: 'pop', border1: '1 #ffffff', }, overlayButton: { depth: 1001, }, overlayControl: { depth: 1001, backgroundColor: '#990000', border1: '1 #ffffff', border2: '2 #990000', padding: { x: 3, y: 1 }, }, unPause: { depth: 10001, background: '#003300', padding: { x: 20, y: 20 }, }, messages: { fill: '#000000', backgroundColor: '#ffffff', fontFamily: 'Georgia', align: 'center', origin: 'tRight', depth: 2000, padding: { x: 10, y: 10 } }, floatingText: { fill: '#ffffff', stroke: '#000000', strokeThickness: 3, origin: 'cCenter', depth: 999, fontSize: 20, }, titleScreenTitle: { fontSize: '64px', fontStyle: 'bold', fill: '#22ff00', stroke: '#000000', strokeThickness: 6, origin: 'tCenter', depth: 1001 }, titleScreenSubTitle: { fontSize: '28px', fontStyle: 'bold', fill: '#22ff00', stroke: '#000000', strokeThickness: 2, origin: 'tCenter', depth: 1001 }, gameWonTitle: { fontSize: '64px', fontStyle: 'bold', fill: '#ffffed', stroke: '#000000', strokeThickness: 6, origin: 'tCenter', depth: 1001 }, gameWonSubTitle: { fontSize: '28px', fontStyle: 'bold', fill: '#ffffed', stroke: '#000000', strokeThickness: 2, origin: 'tCenter', depth: 1001 }, highScore: { align: 'center', origin: 'tCenter', depth: 1001 }, overlayTitle: { align: 'center', origin: 'cCenter', depth: 1001, fontSize: '36px', fontStyle: 'bold', }, overlaySubTitle: { align: 'center', origin: 'cCenter', depth: 1001, fontSize: '32px', fontStyle: 'bold', }, overlaySubSubTitle: { align: 'center', origin: 'cCenter', depth: 1001, fontSize: '24px', fontStyle: 'bold', }, achievementsGreenLeft: { fill: '#00ff00', depth: 1001, origin: 'cLeft', }, achievementsRedLeft: { fill: '#ff0000', depth: 1001, origin: 'cLeft', }, achievementsGreenRight: { fill: '#00ff00', depth: 1001, origin: 'cRight', align: 'cRight' }, achievementsRedRight: { fill: '#ff0000', depth: 1001, origin: 'cRight', align: 'cRight' }, attributeText: { align: 'center', origin: 'cCenter', depth: 1001, fontSize: '24px', stroke: '#000000', strokeThickness: 3, }, titleButtons: { depth: 1001, backgroundColor: '#000000', border1: '2 #ffffff', border2: '2 #000000', padding: { x: 8, y: 4 }, }, }; } preload() { this.load.image('pointer', `https://play.rosebud.ai/assets/pointer.png?i4Of`); this.load.image('man1_vic', `https://play.rosebud.ai/assets/man1_vic.png?5KKZ`); this.load.image('man1_def', `https://play.rosebud.ai/assets/man1_def.png?8N6W`); this.load.image('man1_swi', `https://play.rosebud.ai/assets/man1_swi.png?SoWi`); this.load.image('robot', `https://play.rosebud.ai/assets/robot.png?ahFj`); this.load.image('woman', `https://play.rosebud.ai/assets/woman2.png?MTLq`); this.load.image('clown', `https://play.rosebud.ai/assets/clown.png?JAXL`); this.load.audio('miss', 'https://play.rosebud.ai/assets/miss.mp3?CHB2'); this.load.audio('bad_hit', 'https://play.rosebud.ai/assets/bad_hit.mp3?RljL'); this.load.audio('normal_hit', 'https://play.rosebud.ai/assets/normal_hit.mp3?fZeW'); this.load.audio('lucky_hit', 'https://play.rosebud.ai/assets/lucky hit.mp3?NJI5'); this.load.audio('intro', 'https://play.rosebud.ai/assets/intro2.mp3?6mCn'); this.load.audio('song', 'https://play.rosebud.ai/assets/song.mp3?Xju0'); } create() { this.bossIntro = this.sound.add('intro'); this.bossMusic = this.sound.add('song'); this.bossIntro.setVolume(.3); this.bossMusic.setVolume(.3); this.bossMusic.setLoop(true); this.bossIntro.play(); // Play intro music, then prolog this.bossIntro.once('complete', () => { this.bossMusic.play(); }); this.backdrop = this.add.rectangle(400, 300, 800, 600, 0x000000); this.backdrop.depth = 1000; this.backdrop.alpha = .9; this.title = this.createText(400, 50, "Super Tennis", 'titleScreenTitle'); this.subTitle = this.createText(400, 130, "Select player mode", 'titleScreenSubTitle'); this.directions = this.createText(400, 520, "Player 1 presses Q to swing.\nPlayer 2 presses P to swing.", 'titleScreenSubTitle'); // Add the new orchard background this.background1 = this.add.rectangle(0, 0, 800, 400, 0x33cc00); this.background1.setOrigin(0, 0); this.background2 = this.add.rectangle(0, 400, 800, 200, 0x0033cc); this.background2.setOrigin(0, 0); this.barBackground = this.add.rectangle(400, 480, 700, 60, 0x000000); this.barBackground.setOrigin(0.5, 0.5); // ===================== this.obj_pointer = this.add.image(400, 490, 'pointer'); this.obj_pointer.setOrigin(0.5, 0.5); this.obj_pointer.alpha = 0; this.player1 = this.add.image(200, 200, 'man1_swi'); this.player1.setScale(0.1); this.player2 = this.add.image(600, 200, 'man1_swi'); this.player2.setScale(0.1); this.mouseCoordinates = this.add.text(10, 550, '', { fontSize: '16px', fill: '#fff' }); //. ===================== this.p1AttrText = this.createText(200,450, 'Power: ? \n'+ 'Speed: ? \n'+ // Size of zones. 'Technique: ? \n'+ // Speed lost on a bad hit. 'Stamina: ? \n'+ 'Luck: ? ', // Random chance to hit a missed ball. 'attributeText'), this.p2AttrText = this.createText(600,450, 'Power: ? \n'+ 'Speed: ? \n'+ // Size of zones. 'Technique: ? \n'+ // Speed lost on a bad hit. 'Stamina: ? \n'+ 'Luck: ? ', // Random chance to hit a missed ball. 'attributeText'), this.startButton = this.createButton(400, 400, 'Start!', 'titleButtons'), this.startButton.alpha = 0; this.titleItems = [ this.createButton(200, 200, 'Player 1 Man', 'titleButtons'), this.createButton(200, 250, 'Player 1 Woman', 'titleButtons'), this.createButton(200, 300, 'Player 1 Robot', 'titleButtons'), this.createButton(200, 350, 'Player 1 Clown', 'titleButtons'), this.createButton(600, 200, 'Player 2 Man', 'titleButtons'), this.createButton(600, 250, 'Player 2 Woman', 'titleButtons'), this.createButton(600, 300, 'Player 2 Robot', 'titleButtons'), this.createButton(600, 350, 'Player 2 Clown', 'titleButtons'), this.startButton, this.p2AttrText, this.p1AttrText, this.backdrop, this.title, this.subTitle ]; this.time.addEvent({ delay: 15, callback: this.update15ms, callbackScope: this, loop: true }); this.input.keyboard.on('keydown-Q', (event) => { if(this.state == "Player1Ready"){ this.state = "p2Turn"; this.player1.toggleFlipX(); this.sound.play('normal_hit'); } if (this.state == "p1Turn") { let myX = this.obj_pointer.x; // Ball is moving to the left, // Player 1 zone is actie. this.player1.toggleFlipX(); let luck = (this.p1_luckyChance < Math.random() * 100); if(myX > 200 + this.p1_yellow_radius){ // Early swing, if(luck){ this.player1_speed -= this.p1_badHitSubtraction; this.state = "p2Turn"; this.sound.play('lucky_hit'); }else{ this.state = "p1_miss"; this.sound.play('miss'); } }else if(myX > 200 + this.p1_green_radius){ // poor swing, early this.player1_speed -= this.p1_badHitSubtraction; this.state = "p2Turn"; this.sound.play('bad_hit'); }else if(myX > 200 - this.p1_green_radius){ // good swing this.player1_speed += this.p1_goodHitAddition; this.state = "p2Turn"; this.sound.play('normal_hit'); }else if(myX > 200 - this.p1_yellow_radius){ // poor swing, late this.player1_speed -= this.p1_badHitSubtraction; this.state = "p2Turn"; this.sound.play('bad_hit'); }else if(myX > 50){ // late miss, do nothing if(luck){ this.player1_speed -= this.p1_badHitSubtraction; this.state = "p2Turn"; this.sound.play('lucky_hit'); }else{ this.state = "p1_miss"; this.sound.play('miss'); } }else{ // Out of bounds, do nothing this.state = "p1_miss"; this.sound.play('miss'); } if(this.player1_speed < 4){ this.player1_speed = 4; } this.shringZones(); } }); this.input.keyboard.on('keydown-P', (event) => { if(this.state == "Player2Ready"){ this.state = "p1Turn"; this.player2.toggleFlipX(); this.sound.play('normal_hit'); } if (this.state == "p2Turn") { let myX = this.obj_pointer.x; // Ball is moving to the right, // Player 2 zone is actie. this.player2.toggleFlipX(); let luck = (this.p2_luckyChance < Math.random() * 100); if(myX < 600 - this.p2_yellow_radius ){ // Early swing if(luck){ this.player2_speed -= this.p2_badHitSubtraction; this.state = "p1Turn"; this.sound.play('lucky_hit'); }else{ this.state = "p2_miss"; this.sound.play('miss'); } }else if(myX < 600 - this.p2_green_radius){ // poor swing, early this.player2_speed -= this.p2_badHitSubtraction; this.state = "p1Turn"; this.sound.play('bad_hit'); }else if(myX < 600 + this.p2_green_radius){ // good swing this.player2_speed += this.p2_goodHitAddition; this.state = "p1Turn"; this.sound.play('normal_hit'); }else if(myX < 600 + this.p2_yellow_radius){ // poor swing, late this.player2_speed -= this.p2_badHitSubtraction; this.state = "p1Turn"; this.sound.play('bad_hit'); }else if(myX < 750){ // late miss, if(luck){ this.player2_speed -= this.p2_badHitSubtraction; this.state = "p1Turn"; this.sound.play('lucky_hit'); }else{ this.state = "p2_miss"; this.sound.play('miss'); } }else{ // Out of bounds this.state = "p2_miss"; this.sound.play('miss'); } if(this.player2_speed < 4){ this.player2_speed = 4; } this.shringZones(); } }); } doFunction(name, params, tarObject = null) { /* if (!this.resourcesLoaded || !this.created || this.gameEnded || this.paused) { return; } if (tarObject !== null && tarObject.deactivated) { return; } */ name = name.replace('_', ' '); switch (name) { case 'Player 1 Man': this.player1mode = 1; this.player1.destroy(); this.player1 = this.add.image(200, 200, 'man1_swi'); this.player1.setScale(0.35); break; case 'Player 1 Woman': this.player1mode = 2; this.player1.destroy(); this.player1 = this.add.image(200, 200, 'woman'); this.player1.setScale(0.35); break; case 'Player 1 Robot': this.player1mode = 3; this.player1.destroy(); this.player1 = this.add.image(200, 200, 'robot'); this.player1.setScale(0.35); break; case 'Player 1 Clown': this.player1mode = 4; this.player1.destroy(); this.player1 = this.add.image(200, 200, 'clown'); this.player1.setScale(0.35); break; case 'Player 2 Man': this.player2mode = 1; this.player2.destroy(); this.player2 = this.add.image(600, 200, 'man1_swi'); this.player2.setScale(0.35); break; case 'Player 2 Woman': this.player2mode = 2; this.player2.destroy(); this.player2 = this.add.image(600, 200, 'woman'); this.player2.setScale(0.35); break; case 'Player 2 Robot': this.player2mode = 3; this.player2.destroy(); this.player2 = this.add.image(600, 200, 'robot'); this.player2.setScale(0.35); break; case 'Player 2 Clown': this.player2mode = 4; this.player2.destroy(); this.player2 = this.add.image(600, 200, 'clown'); this.player2.setScale(0.35); break; case 'Start!': if(this.player1mode != 0 && this.player2mode != 0){ for(let i = 0; i < this.titleItems.length; i++){ this.titleItems[i].destroy(); } this.state = "Player1Ready"; this.p1_goodHitAddition = this.player_modes[this.player1mode].power * .4; this.p1_badHitSubtraction = this.player_modes[this.player1mode].technique * .2; this.p1_zoneIncrease = this.player_modes[this.player1mode].speed * 3; this.p1_luckyChance = this.player_modes[this.player1mode].luck * 3; this.p1_zoneReduction = ((10-this.player_modes[this.player1mode].stamina) * .002) + .01; this.p2_goodHitAddition = this.player_modes[this.player2mode].power * .4; this.p2_badHitSubtraction = this.player_modes[this.player2mode].technique * .2; this.p2_zoneIncrease = this.player_modes[this.player2mode].speed * 3; this.p2_luckyChance = this.player_modes[this.player2mode].luck * 3; this.p2_zoneReduction = ((10-this.player_modes[this.player2mode].stamina) * .002) + .01; this.p1_green_radius = (20+this.p1_zoneIncrease) / 2; this.p1_yellow_radius = (60+this.p1_zoneIncrease*3) / 2; this.p2_green_radius = (20+this.p2_zoneIncrease) / 2; this.p2_yellow_radius = (60+this.p2_zoneIncrease*3) / 2; this.p1_yellow_radius_shrink = this.p1_yellow_radius * this.p1_zoneReduction; this.p1_green_radius_shrink = this.p1_green_radius * this.p1_zoneReduction; this.p2_yellow_radius_shrink = this.p2_yellow_radius * this.p2_zoneReduction; this.p2_green_radius_shrink = this.p2_green_radius * this.p2_zoneReduction; this.leftYellowBlock = this.add.rectangle(200, 480, this.p1_yellow_radius*2, 60, 0xffff00); this.leftYellowBlock.setOrigin(0.5, 0.5); this.leftGreenBlock = this.add.rectangle(200, 480, this.p1_green_radius*2, 60, 0x00aa00); this.leftGreenBlock.setOrigin(0.5, 0.5); this.rightYellowBlock = this.add.rectangle(600, 480, this.p2_yellow_radius*2, 60, 0xffff00); this.rightYellowBlock.setOrigin(0.5, 0.5); this.rightGreenBlock = this.add.rectangle(600, 480, this.p2_green_radius*2, 60, 0x00aa00); this.rightGreenBlock.setOrigin(0.5, 0.5); this.obj_pointer.alpha = 1; this.obj_pointer.x = 200; this.obj_pointer.y = 490; this.obj_pointer.depth = 500; } break; } if(this.player1mode != 0 && this.player2mode != 0){ this.startButton.alpha = 1; } if(this.player1mode != 0){ this.p1AttrText.setText( 'Power: '+this.player_modes[this.player1mode].power+' \n'+ 'Speed: '+this.player_modes[this.player1mode].speed+' \n'+ // Size of zones. 'Technique: '+this.player_modes[this.player1mode].technique+' \n'+ // Speed lost on a bad hit. 'Stamina: '+this.player_modes[this.player1mode].stamina+' \n'+ 'Luck: '+this.player_modes[this.player1mode].luck+' ', ); } if(this.player2mode != 0){ this.p2AttrText.setText( 'Power: '+this.player_modes[this.player2mode].power+' \n'+ 'Speed: '+this.player_modes[this.player2mode].speed+' \n'+ // Size of zones. 'Technique: '+this.player_modes[this.player2mode].technique+' \n'+ // Speed lost on a bad hit. 'Stamina: '+this.player_modes[this.player2mode].stamina+' \n'+ 'Luck: '+this.player_modes[this.player2mode].luck+' ', ); } } update15ms() { if(this.obj_pointer.x > 750 || this.obj_pointer.x < 50){ this.state = "miss"; } if (this.state == "p1Turn") { this.obj_pointer.x -= this.player2_speed; }else if (this.state == "p2Turn") { this.obj_pointer.x += this.player1_speed; }else{ //this.obj_pointer.destroy(); } // Update mouse coordinates text this.mouseCoordinates.setText(`State: `+this.state); } shringZones(){ this.p1_yellow_radius -= this.p1_yellow_radius_shrink; this.p1_green_radius -= this.p1_green_radius_shrink; this.p2_yellow_radius -= this.p2_yellow_radius_shrink; this.p2_green_radius -= this.p2_green_radius_shrink; this.leftYellowBlock.destroy(); this.leftGreenBlock.destroy(); this.rightYellowBlock.destroy(); this.rightGreenBlock.destroy(); if(this.p1_yellow_radius > 0){ this.leftYellowBlock = this.add.rectangle(200, 480, this.p1_yellow_radius*2, 60, 0xffff00); this.leftYellowBlock.setOrigin(0.5, 0.5); this.leftGreenBlock = this.add.rectangle(200, 480, this.p1_green_radius*2, 60, 0x00aa00); this.leftGreenBlock.setOrigin(0.5, 0.5); } if(this.p2_yellow_radius > 0){ this.rightYellowBlock = this.add.rectangle(600, 480, this.p2_yellow_radius*2, 60, 0xffff00); this.rightYellowBlock.setOrigin(0.5, 0.5); this.rightGreenBlock = this.add.rectangle(600, 480, this.p2_green_radius*2, 60, 0x00aa00); this.rightGreenBlock.setOrigin(0.5, 0.5); } } createButton(x, y, text, style) { let textArr = text.split('|'); let visualText = textArr[0].split('.')[0]; visualText = this.unToken(visualText); let myStyle = null; if (typeof style == 'string') { if (style in this.styles) { myStyle = { ...this.styles.base, ...this.styles.button, ...this.styles[style] }; } else { myStyle = { ...this.styles.base, ...this.styles.button, ...{ color: style } }; } } else if (typeof style == 'object' && style) { myStyle = { ...this.styles.base, ...this.styles.button, ...style }; } else { myStyle = { ...this.styles.base, ...this.styles.button }; } let button = this.add.text( x, y, visualText, myStyle ); button.setOrigin(this.origins[myStyle.origin][0], this.origins[myStyle.origin][1]); button.setDepth(myStyle.depth); button.myOriginalStyle = myStyle; button.deactivated = false; if ('border2' in myStyle) { button.myBorder2 = this.addBorder(button, myStyle.border2); button.on('destroy', () => { button.myBorder2.destroy(); }); } if ('border1' in myStyle) { button.myBorder1 = this.addBorder(button, myStyle.border1); button.on('destroy', () => { button.myBorder1.destroy(); }); } // Add pointer down effect button.on('pointerdown', () => { if( button.deactivated){ return; } if ('downSound' in button.myOriginalStyle) { this.playSound(button.myOriginalStyle.downSound); } if ('flash' in button.myOriginalStyle) { button.setBackgroundColor(button.myOriginalStyle.flash); } }); // Add pointer up effect button.on('pointerup', () => { if( button.deactivated){ return; } if ('upSound' in button.myOriginalStyle) { this.playSound(button.myOriginalStyle.upSound); } button.setBackgroundColor(button.myOriginalStyle.backgroundColor); }); button.on('pointerout', () => { button.setBackgroundColor(button.myOriginalStyle.backgroundColor); }); button.setInteractive(); if (textArr.length == 1) { button.on('pointerup', () => this.doFunction(textArr[0], [], button), this); } else { let tar = textArr.shift() button.on('pointerup', () => this.doFunction(tar, textArr, button), this); } return button; } addBorder(button, def) { let defArr = def.split(' '); let size = parseInt(defArr[0]) * 2; let color = defArr[1]; if (color.charAt(0) == '#') { color = color.replace('#', '0x'); } let obj = this.add.rectangle( button.x, button.y, button.width + size, button.height + size, color ); obj.setDepth(button.depth); button.setDepth(parseInt(button.depth) + 1); return obj; } unToken(text) { let textArr = text.split('~'); let newText = ''; for (let i = 0; i < textArr.length; i++) { if (i % 2 == 0) { newText = newText + textArr[i]; } else { let myPath = textArr[i].split('.'); if (myPath.length == 1 && (myPath[0] in this) ) { newText = newText + this[myPath[0]]; } else if (myPath.length == 2 && (myPath[0] in this) && (myPath[1] in this[myPath[0]]) ) { newText = newText + this[myPath[0]][myPath[1]]; } else if (myPath.length == 3 && (myPath[0] in this) && (myPath[1] in this[myPath[0]]) && (myPath[2] in this[myPath[0]][myPath[1]]) ) { newText = newText + this[myPath[0]][myPath[1]][myPath[2]]; } else if (myPath.length == 4 && (myPath[0] in this) && (myPath[1] in this[myPath[0]]) && (myPath[2] in this[myPath[0]][myPath[1]]) && (myPath[2] in this[myPath[0]][myPath[1]][myPath[2]]) ) { newText = newText + this[myPath[0]][myPath[1]][myPath[2]][myPath[3]]; } else { newText = newText + '---'; } } } return newText; } createText(x, y, text, style) { text = this.unToken(text); let myStyle = null; if (typeof style == 'string') { if (style in this.styles) { myStyle = { ...this.styles.base, ...this.styles[style] }; } else { myStyle = { ...this.styles.base, ...{ color: style } }; } } else if (typeof style == 'object' && style) { myStyle = { ...this.styles.base, ...style }; } else { myStyle = { ...this.styles.base, }; } let button = this.add.text( x, y, text, myStyle ); button.setOrigin(this.origins[myStyle.origin][0], this.origins[myStyle.origin][1]); button.setDepth(myStyle.depth); return button; } } const container = document.getElementById('renderDiv'); const config = { type: Phaser.AUTO, parent: 'renderDiv', pixelArt: true, scale: { mode: Phaser.Scale.FIT, autoCenter: Phaser.Scale.CENTER_BOTH, }, width: 800, height: 600, scene: Example }; window.phaserGame = new Phaser.Game(config);