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.step = 0; this.turn = 0; this.level = 1; this.score = 0; this.player1mode = 2; this.player2mode = 3; this.player1_speed = 5; this.player2_speed = 5; this.spaceKeyReady = true; this.state = "Start"; this.playerPoints = 0; this.compPoints = 0 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.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', fill: '#22ff00', stroke: '#000000', strokeThickness: 6, origin: 'tCenter', depth: 1001 }, titleScreenSubTitle: { fontSize: '28px', fill: '#ffffff', stroke: '#000000', strokeThickness: 2, align: 'center', origin: 'tCenter', depth: 1001 }, readyText: { fontSize: '32px', fontStyle: 'bold', fill: '#aa0000', stroke: '#000000', strokeThickness: 6, origin: 'tCenter', depth: 1001 }, scoreText: { fontSize: '28px', fontStyle: 'bold', fill: '#aa0000', stroke: '#000000', strokeThickness: 2, origin: 'tCenter', depth: 10 }, 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/ball3.png?pjLa`); 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.image('unknown', `https://play.rosebud.ai/assets/unknown.png?Uci4`); 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, "Single Button Tennis", 'titleScreenTitle'); this.subTitle = this.createText(400, 130, "Press Space to start\n\n\nInstructions\n\nPress Space to swing.\n"+ "The red pointer represents the ball location.\n"+ "Hitting on green will increase your ball speed.\n"+ "Hitting on Yellow will reduce your ball speed.\n"+ "Hitting on black is counted as a miss. However...\n"+ "there is a random chance that a miss can hit\n"+ "First player to get 10 points wins!\n", 'titleScreenSubTitle'); //this.levelText = this.createText(200, 550, "Level 1", 'titleScreenSubTitle'); this.scoreText = this.createText(600, 550, "Score 0", 'titleScreenSubTitle'); this.playerPointsText = this.createText(200, 360, "Points 0", 'scoreText'); this.compPointsText = this.createText(600, 360, "Points 0", 'scoreText'); // 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, 450, 'pointer'); this.obj_pointer.setOrigin(0.5, 0.5); this.obj_pointer.setScale(1); this.obj_pointer.alpha = 0; this.player1 = this.add.image(200, 200, 'woman'); this.player1.setScale(0.3); this.player2 = this.add.image(600, 200, 'robot'); this.player2.setScale(0.3); //. ===================== this.titleItems = [ this.backdrop, this.title, this.subTitle ]; this.time.addEvent({ delay: 15, callback: this.update15ms, callbackScope: this, loop: true }); this.input.keyboard.on('keyup-SPACE', (event) => { this.spaceKeyReady = true; }); this.input.keyboard.on('keydown-SPACE', (event) => { if(!this.spaceKeyReady){ return; } this.spaceKeyReady = false; if (this.state == "Start") { for (let i = 0; i < this.titleItems.length; i++) { this.titleItems[i].destroy(); } this.restartLevel(); return; } if (this.state == "Player1Ready") { this.subTitle.destroy(); this.state = "p2Turn"; this.player1.toggleFlipX(); this.sound.play('normal_hit'); return; } let myX = this.obj_pointer.x; if (this.state == "p1Turn" && myX < 400) { // Ball is moving to the left, // Player 1 zone is actie. this.player1.toggleFlipX(); let chance = Math.random() * 100; let luck = (this.p2_luckyChance > chance); 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.sound.play('miss'); this.computerPoint(); } } 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'); this.score += Math.floor(this.player2_speed * this.player1_speed * this.turn); } else if (myX > 200 - this.p1_green_radius) { // good swing this.player1_speed += this.p1_goodHitAddition; this.state = "p2Turn"; this.sound.play('normal_hit'); this.score += Math.floor(3 * this.player2_speed * this.player1_speed * this.turn); } 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'); this.score += Math.floor(this.player2_speed * this.player1_speed * this.turn); } 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.sound.play('miss'); this.computerPoint(); } } else { // Out of bounds, do nothing this.sound.play('miss'); this.computerPoint(); } if (this.player1_speed < 4) { this.player1_speed = 4; } this.shringZones(); } }); } restartLevel(){ this.state = "Player1Ready"; this.subTitle = this.createText(400, 200, "Ready...", 'readyText'); this.player1_speed = 5; this.player2_speed = 5; this.turn = 0; 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 = 450; this.obj_pointer.depth = 500; } computerHit() { 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 chance = Math.random() * 100; let luck = (this.p2_luckyChance > chance); if (myX < 600 - this.p2_yellow_radius) { // Early swing console.log(chance +' : '+ this.p2_luckyChance); if (luck) { this.player2_speed -= this.p2_badHitSubtraction; this.state = "p1Turn"; this.sound.play('lucky_hit'); } else { this.sound.play('miss'); this.playerPoint(); } } 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, console.log(chance +' : '+ this.p2_luckyChance); if (luck) { this.player2_speed -= this.p2_badHitSubtraction; this.state = "p1Turn"; this.sound.play('lucky_hit'); } else { this.sound.play('miss'); this.playerPoint(); } } else { // Out of bounds this.sound.play('miss'); this.playerPoint(); } if (this.player2_speed < 4) { this.player2_speed = 4; } this.shringZones(); } } update15ms() { if (this.obj_pointer.x > 750 && this.state == 'p2Turn') { this.playerPoint(); } if (this.obj_pointer.x < 50 && this.state == 'p1Turn') { this.computerPoint(); } this.step++; this.scoreText.setText( "Score " + this.score); if (this.state == "p1Turn") { this.obj_pointer.x -= this.player2_speed; } else if (this.state == "p2Turn") { this.obj_pointer.x += this.player1_speed; let levelFactor = .8 + ((9 - this.playerPoints)/6) let robotHitPoint = 600 + ((Math.random() * (this.turn*this.player1_speed*2*levelFactor)) - (this.turn*this.player1_speed*levelFactor)); if(this.obj_pointer.x > robotHitPoint){ this.turn++; this.computerHit(); } } else { //this.obj_pointer.destroy(); } } computerPoint(){ this.compPoints++; this.compPointsText.setText("Points "+this.compPoints); if(this.compPoints == 10){ this.state = 'Game Over'; this.backdrop = this.add.rectangle(400, 300, 800, 600, 0x000000); this.backdrop.depth = 1000; this.backdrop.alpha = .9; this.title = this.createText(400, 50, "Game Over", 'titleScreenTitle'); }else{ this.state = "p1_miss"; this.restartLevel(); } } playerPoint(){ this.playerPoints++; this.playerPointsText.setText("Points "+this.playerPoints); if(this.playerPoints == 10){ this.state = 'You Win!'; this.backdrop = this.add.rectangle(400, 300, 800, 600, 0x000000); this.backdrop.depth = 1000; this.backdrop.alpha = .9; this.title = this.createText(400, 50, "You Win!", 'titleScreenTitle'); }else{ this.state = "p2_miss"; this.restartLevel(); } } 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);