diff --git a/Game.vue b/Game.vue index f51d2bf..17b4a62 100644 --- a/Game.vue +++ b/Game.vue @@ -50,7 +50,7 @@ export default { if (canvas.parentNode === container) container.removeChild(canvas); }, reload(name) { - this.game = games[name]({ + this.game = new games[name]({ containerId: this.containerId, onLose: () => { if (this.state !== STATE_LOSE) this.$emit("lost"); diff --git a/games/fishMaster/assets.js b/games/fishMaster/assets.js new file mode 100644 index 0000000..e53d240 --- /dev/null +++ b/games/fishMaster/assets.js @@ -0,0 +1,133 @@ +import fish1 from "./images/fish1.png"; +import fish2 from "./images/fish2.png"; +import fish3 from "./images/fish3.png"; +import fish4 from "./images/fish4.png"; +import fish5 from "./images/fish5.png"; +import fish6 from "./images/fish6.png"; +import fish7 from "./images/fish7.png"; +import fish8 from "./images/fish8.png"; +import fish9 from "./images/fish9.png"; +import fish10 from "./images/fish10.png"; +import shark1 from "./images/shark1.png"; +import shark2 from "./images/shark2.png"; +import cannon1 from "./images/cannon1.png"; +export const fishFrames = { + fish1: { + url: fish1, + swim: { start: 0, end: 3 }, + capture: { start: 4, end: 8 }, + size: [54, 22], + offsets: [2, 2], + frameWidth: 55, + frameHeight: 37, + }, + fish2: { + url: fish2, + swim: { start: 0, end: 3 }, + capture: { start: 4, end: 8 }, + size: [70, 35], + offsets: [10, 5], + frameWidth: 78, + frameHeight: 64, + }, + fish3: { + url: fish3, + swim: { start: 0, end: 3 }, + capture: { start: 4, end: 8 }, + size: [65, 36], + offsets: [5, 0], + frameWidth: 72, + frameHeight: 56, + }, + fish4: { + url: fish4, + swim: { start: 0, end: 3 }, + capture: { start: 4, end: 8 }, + size: [75, 36], + offsets: [3, -2], + frameWidth: 77, + frameHeight: 59, + }, + fish5: { + url: fish5, + swim: { start: 0, end: 3 }, + capture: { start: 4, end: 8 }, + size: [85, 70], + offsets: [15, 18], + frameWidth: 107, + frameHeight: 122, + }, + fish6: { + url: fish6, + swim: { start: 0, end: 8 }, + capture: { start: 8, end: 12 }, + size: [90, 60], + offsets: [15, 0], + frameWidth: 105, + frameHeight: 79, + }, + fish7: { + url: fish7, + swim: { start: 0, end: 6 }, + capture: { start: 6, end: 10 }, + size: [70, 75], + offsets: [15, 2], + frameWidth: 92, + frameHeight: 151, + }, + fish8: { + url: fish8, + swim: { start: 0, end: 7 }, + capture: { start: 7, end: 12 }, + size: [80, 85], + offsets: [40, 3], + frameWidth: 174, + frameHeight: 126, + }, + fish9: { + url: fish9, + swim: { start: 0, end: 7 }, + capture: { start: 7, end: 12 }, + size: [100, 120], + offsets: [60, 15], + frameWidth: 166, + frameHeight: 183, + }, + fish10: { + url: fish10, + swim: { start: 0, end: 5 }, + capture: { start: 5, end: 10 }, + size: [140, 100], + offsets: [20, 22], + frameWidth: 178, + frameHeight: 187, + }, + shark1: { + url: shark1, + swim: { start: 0, end: 7 }, + capture: { start: 7, end: 12 }, + size: [450, 150], + offsets: [60, 50], + frameWidth: 509, + frameHeight: 270, + }, + shark2: { + url: shark2, + swim: { start: 0, end: 7 }, + capture: { start: 7, end: 12 }, + size: [450, 150], + offsets: [60, 60], + frameWidth: 516, + frameHeight: 273, + }, +}; +export const cannonsFrames = { + cannon1: { + url: cannon1, + anims: { start: 0, end: 5 }, + size: [37, 60], + offsets: [37 / 2, 0], + frameWidth: 74, + frameHeight: 74, + }, +}; diff --git a/games/fishMaster/images/bg.png b/games/fishMaster/images/bg.png new file mode 100644 index 0000000..ac2be61 Binary files /dev/null and b/games/fishMaster/images/bg.png differ diff --git a/games/fishMaster/images/bottom.json b/games/fishMaster/images/bottom.json new file mode 100644 index 0000000..1d9e3f7 --- /dev/null +++ b/games/fishMaster/images/bottom.json @@ -0,0 +1,59 @@ +{"frames": { + +"bottom-bar.png": +{ + "frame": {"x":0,"y":0,"w":765,"h":72}, + "rotated": false, + "trimmed": false, + "spriteSourceSize": {"x":0,"y":0,"w":765,"h":72}, + "sourceSize": {"w":765,"h":72} +}, +"cannon_minus.png": +{ + "frame": {"x":132,"y":72,"w":44,"h":31}, + "rotated": false, + "trimmed": false, + "spriteSourceSize": {"x":0,"y":0,"w":44,"h":31}, + "sourceSize": {"w":44,"h":31} +}, +"cannon_minus_down.png": +{ + "frame": {"x":88,"y":72,"w":44,"h":31}, + "rotated": false, + "trimmed": false, + "spriteSourceSize": {"x":0,"y":0,"w":44,"h":31}, + "sourceSize": {"w":44,"h":31} +}, +"cannon_plus.png": +{ + "frame": {"x":44,"y":72,"w":44,"h":31}, + "rotated": false, + "trimmed": false, + "spriteSourceSize": {"x":0,"y":0,"w":44,"h":31}, + "sourceSize": {"w":44,"h":31} +}, +"cannon_plus_down.png": +{ + "frame": {"x":0,"y":72,"w":44,"h":31}, + "rotated": false, + "trimmed": false, + "spriteSourceSize": {"x":0,"y":0,"w":44,"h":31}, + "sourceSize": {"w":44,"h":31} +}, +"energy-bar.png": +{ + "frame": {"x":0,"y":103,"w":213,"h":19}, + "rotated": false, + "trimmed": false, + "spriteSourceSize": {"x":0,"y":0,"w":213,"h":19}, + "sourceSize": {"w":213,"h":19} +} +}, +"meta": { + "app": "http://www.texturepacker.com", + "version": "1.0", + "image": "bottom.png", + "format": "RGBA8888", + "size": {"w":765,"h":122} +} +} diff --git a/games/fishMaster/images/bottom.png b/games/fishMaster/images/bottom.png new file mode 100644 index 0000000..2df00a6 Binary files /dev/null and b/games/fishMaster/images/bottom.png differ diff --git a/games/fishMaster/images/cannon1.png b/games/fishMaster/images/cannon1.png new file mode 100644 index 0000000..fdade85 Binary files /dev/null and b/games/fishMaster/images/cannon1.png differ diff --git a/games/fishMaster/images/cannon2.png b/games/fishMaster/images/cannon2.png new file mode 100644 index 0000000..0122fad Binary files /dev/null and b/games/fishMaster/images/cannon2.png differ diff --git a/games/fishMaster/images/cannon3.png b/games/fishMaster/images/cannon3.png new file mode 100644 index 0000000..3ae954a Binary files /dev/null and b/games/fishMaster/images/cannon3.png differ diff --git a/games/fishMaster/images/cannon4.png b/games/fishMaster/images/cannon4.png new file mode 100644 index 0000000..73e81f6 Binary files /dev/null and b/games/fishMaster/images/cannon4.png differ diff --git a/games/fishMaster/images/cannon5.png b/games/fishMaster/images/cannon5.png new file mode 100644 index 0000000..e5a3ba8 Binary files /dev/null and b/games/fishMaster/images/cannon5.png differ diff --git a/games/fishMaster/images/cannon6.png b/games/fishMaster/images/cannon6.png new file mode 100644 index 0000000..890cd99 Binary files /dev/null and b/games/fishMaster/images/cannon6.png differ diff --git a/games/fishMaster/images/cannon7.png b/games/fishMaster/images/cannon7.png new file mode 100644 index 0000000..ff48fc8 Binary files /dev/null and b/games/fishMaster/images/cannon7.png differ diff --git a/games/fishMaster/images/fish1.png b/games/fishMaster/images/fish1.png new file mode 100644 index 0000000..bf00b05 Binary files /dev/null and b/games/fishMaster/images/fish1.png differ diff --git a/games/fishMaster/images/fish10.png b/games/fishMaster/images/fish10.png new file mode 100644 index 0000000..86116d6 Binary files /dev/null and b/games/fishMaster/images/fish10.png differ diff --git a/games/fishMaster/images/fish2.png b/games/fishMaster/images/fish2.png new file mode 100644 index 0000000..cb80965 Binary files /dev/null and b/games/fishMaster/images/fish2.png differ diff --git a/games/fishMaster/images/fish3.png b/games/fishMaster/images/fish3.png new file mode 100644 index 0000000..3a86274 Binary files /dev/null and b/games/fishMaster/images/fish3.png differ diff --git a/games/fishMaster/images/fish4.png b/games/fishMaster/images/fish4.png new file mode 100644 index 0000000..e4c4724 Binary files /dev/null and b/games/fishMaster/images/fish4.png differ diff --git a/games/fishMaster/images/fish5.png b/games/fishMaster/images/fish5.png new file mode 100644 index 0000000..c0957a9 Binary files /dev/null and b/games/fishMaster/images/fish5.png differ diff --git a/games/fishMaster/images/fish6.png b/games/fishMaster/images/fish6.png new file mode 100644 index 0000000..9b5ff06 Binary files /dev/null and b/games/fishMaster/images/fish6.png differ diff --git a/games/fishMaster/images/fish7.png b/games/fishMaster/images/fish7.png new file mode 100644 index 0000000..e1798ca Binary files /dev/null and b/games/fishMaster/images/fish7.png differ diff --git a/games/fishMaster/images/fish8.png b/games/fishMaster/images/fish8.png new file mode 100644 index 0000000..d60ff6e Binary files /dev/null and b/games/fishMaster/images/fish8.png differ diff --git a/games/fishMaster/images/fish9.png b/games/fishMaster/images/fish9.png new file mode 100644 index 0000000..14fe148 Binary files /dev/null and b/games/fishMaster/images/fish9.png differ diff --git a/games/fishMaster/images/shark1.png b/games/fishMaster/images/shark1.png new file mode 100644 index 0000000..667e7fd Binary files /dev/null and b/games/fishMaster/images/shark1.png differ diff --git a/games/fishMaster/images/shark2.png b/games/fishMaster/images/shark2.png new file mode 100644 index 0000000..6da2b10 Binary files /dev/null and b/games/fishMaster/images/shark2.png differ diff --git a/games/fishMaster/index.js b/games/fishMaster/index.js new file mode 100644 index 0000000..d044980 --- /dev/null +++ b/games/fishMaster/index.js @@ -0,0 +1,35 @@ +import Phaser from "phaser"; +import Scene from "./scene"; +const launch = ({ containerId, onLose }) => { + const container = document.getElementById(containerId); + const width = container.clientWidth; + const height = container.clientHeight; + const game = new Phaser.Game({ + type: Phaser.CANVAS, + width, + height, + parent: containerId, + physics: { + default: "arcade", + arcade: { + debug: true, + }, + }, + scale: { + mode: Phaser.Scale.FIT, + autoCenter: Phaser.Scale.CENTER_BOTH, + parent: containerId, + width: 1080, + height: 1080, + }, + scene: Scene, + }); + Object.assign(game, { + onLose, + restart() { + this.scene.scenes[0].scene.start("scene"); + }, + }); + return game; +}; +export default launch; diff --git a/games/fishMaster/scene.js b/games/fishMaster/scene.js new file mode 100644 index 0000000..afd657f --- /dev/null +++ b/games/fishMaster/scene.js @@ -0,0 +1,179 @@ +import Phaser from "phaser"; +import bg from "./images/bg.png"; +import bottom from "./images/bottom.png"; +import bottomMap from "./images/bottom.json"; +import { fishFrames, cannonsFrames } from "./assets"; + +export default class Scene extends Phaser.Scene { + constructor() { + super({ + key: "scene", + }); + } + + preload() { + this.load.image("bg", bg); + this.load.atlas("bottom", bottom, bottomMap); + Object.entries(fishFrames).forEach( + ([k, { url, frameWidth, frameHeight }]) => { + this.load.spritesheet(k, url, { frameWidth, frameHeight }); + } + ); + Object.entries(cannonsFrames).forEach( + ([k, { url, frameWidth, frameHeight }]) => { + this.load.spritesheet(k, url, { frameWidth, frameHeight }); + } + ); + } + get cannon() { + return this.cannons[this.cannonIndex]; + } + create() { + this.layout(); + this.addListeners(); + this.animateFishes(); + this.animateCannons(); + this.addCannon(); + this.addFish(); + } + animateCannons() { + Object.entries(cannonsFrames).forEach(([k, { anims }]) => { + this.anims.create({ + key: `${k}_fire`, + frames: this.anims.generateFrameNumbers(k, anims), + frameRate: 10, + repeat: 0, + }); + }); + } + animateFishes() { + Object.entries(fishFrames).forEach(([k, { swim, capture }]) => { + this.anims.create({ + key: `${k}_swim`, + frames: this.anims.generateFrameNumbers(k, swim), + frameRate: 10, + repeat: -1, + }); + this.anims.create({ + key: `${k}_capture`, + frames: this.anims.generateFrameNumbers(k, capture), + frameRate: 10, + repeat: -1, + }); + }); + } + layout() { + this.addBg(); + this.addBottomBar(); + } + addListeners() { + this.input.on( + "gameobjectdown", + (_, obj) => { + switch (obj.name) { + case "minus": + obj.setFrame("cannon_minus_down.png"); + break; + case "plus": + obj.setFrame("cannon_plus_down.png"); + break; + default: + break; + } + }, + this + ); + this.input.on( + "gameobjectup", + (pointer, obj) => { + switch (obj.name) { + case "minus": + obj.setFrame("cannon_minus.png"); + break; + case "plus": + obj.setFrame("cannon_plus.png"); + break; + case "bg": + const theta = Math.atan2( + this.game.config.height - pointer.y, + this.game.config.width / 2 - pointer.x + ); + this.cannon.setRotation(theta - Math.PI / 2); + this.cannon.anims.play(`${this.cannon.name}_fire`, true); + default: + break; + } + }, + this + ); + } + addBg() { + const bg = this.add.image(0, 0, "bg"); + bg.name = "bg"; + bg.setOrigin(0); + bg.displayWidth = this.game.config.width; + bg.displayHeight = this.game.config.height; + bg.setInteractive(); + } + addBottomBar() { + const bottomBar = this.add.image( + this.game.config.width / 2, + this.game.config.height - 45, + "bottom", + "bottom-bar.png" + ); + bottomBar.displayWidth = 958; + bottomBar.displayHeight = 90; + const minus = this.add.image( + this.game.config.width / 2 - 40, + this.game.config.height - 50, + "bottom", + "cannon_minus.png" + ); + minus.name = "minus"; + minus.setOrigin(0); + minus.displayWidth = 55; + minus.displayHeight = 38; + minus.setInteractive(); + const plus = this.add.image( + this.game.config.width / 2 + 95, + this.game.config.height - 50, + "bottom", + "cannon_plus.png" + ); + plus.name = "plus"; + plus.setOrigin(0); + plus.displayWidth = 55; + plus.displayHeight = 38; + plus.setInteractive(); + } + addFish() { + Object.entries(fishFrames).forEach(([k, { size, offsets }]) => { + const fish = this.physics.add.sprite( + (Math.random() * this.game.config.width) / 2 + + this.game.config.width / 4, + (Math.random() * this.game.config.width) / 2 + + this.game.config.width / 4, + "fish1" + ); + fish.body.setSize(...size); + fish.body.setOffset(...offsets); + fish.anims.play(`${k}_swim`, true); + }); + } + addCannon() { + this.cannonIndex = 0; + const [k, { size, offsets }] = Object.entries(cannonsFrames)[ + this.cannonIndex + ]; + const cannon = this.physics.add.sprite( + this.game.config.width / 2 + 55, + this.game.config.height - 50, + k + ); + cannon.body.setSize(...size); + cannon.body.setOffset(...offsets); + cannon.name = k; + this.cannon = cannon; + } +} diff --git a/games/game-ballmove/scenes/PlayScene.js b/games/game-ballmove/scenes/PlayScene.js index 732c27f..db230ce 100644 --- a/games/game-ballmove/scenes/PlayScene.js +++ b/games/game-ballmove/scenes/PlayScene.js @@ -27,7 +27,13 @@ class PlayScene extends Phaser.Scene { }); } newBlock(x, y, tex) { - return this.platformGroup.create(x, y, tex); + const block = this.platformGroup.create(x, y, tex); + block.setBounce(0, 1); + block.body.checkCollision.down = false; + block.body.checkCollision.up = true; + block.body.checkCollision.left = false; + block.body.checkCollision.right = false; + return block; } attachSidekick(platform, num) { const { @@ -99,7 +105,7 @@ class PlayScene extends Phaser.Scene { "ball" ); this.ball.body.gravity.y = gameOptions.ballGravity; - this.ball.setBounce(1); + this.ball.setBounce(0, 1); this.ball.body.checkCollision.down = true; this.ball.body.checkCollision.up = false; this.ball.body.checkCollision.left = false; @@ -110,7 +116,7 @@ class PlayScene extends Phaser.Scene { // this.ball.setScale(0.5); let platformX = this.ball.x; - for (let i = 0; i < 10; i++) { + for (let i = 0; i < 4; i++) { this.newPlatForm(platformX); platformX += Phaser.Math.Between( gameOptions.platformDistanceRange[0], @@ -146,7 +152,14 @@ class PlayScene extends Phaser.Scene { return rightmostPlatform; } update() { - this.physics.world.collide(this.platformGroup, this.ball); + const result = this.physics.world.collide(this.platformGroup, this.ball); + if ( + result && + this.ball.body.velocity.y > 0 && + this.ball.y + 60 < this.game.config.height + ) { + this.ball.body.velocity.y = -this.ball.body.velocity.y; + } const children = this.platformGroup.getChildren(); children.forEach((platform) => { if (platform.getBounds().right < 0) { @@ -173,6 +186,7 @@ class PlayScene extends Phaser.Scene { }, this); if (this.ball.y > this.game.config.height) { this.game.onLose && this.game.onLose(); + this.scene.pause(); } } } diff --git a/games/game-flipbird/scenes/flipbird/flipbird.js b/games/game-flipbird/scenes/flipbird/flipbird.js index e988872..8566473 100644 --- a/games/game-flipbird/scenes/flipbird/flipbird.js +++ b/games/game-flipbird/scenes/flipbird/flipbird.js @@ -64,7 +64,6 @@ export default class PlayScene extends Phaser.Scene { for (let i = 0; i < 4; i++) { const pipeA = getRandomPipe(); const p1 = this.pipeGroup.create(0, 0, pipeA); - p1.body.setBoundsRectangle(new Phaser.Geom.Rectangle(148, 0, 140, 2098)); p1.body.setSize(100); p1.setScale(0.5); const pipeB = getRandomPipe(); diff --git a/games/game-rect/scenes/Rect.js b/games/game-rect/scenes/Rect.js index dbbc5de..290344e 100644 --- a/games/game-rect/scenes/Rect.js +++ b/games/game-rect/scenes/Rect.js @@ -98,7 +98,7 @@ export default class Rect extends Phaser.Scene { "tiles", values[j] ); - tile.setMask(mask); + // tile.setMask(mask); // call adjustTile method to adjust tile origin and display size this.adjustTile(tile); } @@ -118,7 +118,7 @@ export default class Rect extends Phaser.Scene { "tiles", Phaser.Utils.Array.GetRandom(values) ); - this.player.setMask(mask); + // this.player.setMask(mask); // adjust player origin and display size this.adjustTile(this.player); @@ -132,7 +132,7 @@ export default class Rect extends Phaser.Scene { color: "#ffffff", }); - this.scoreText.setMask(mask); + // this.scoreText.setMask(mask); // method to adjust score position this.adjustScorePosition(); diff --git a/phaser.js b/phaser.js index cbf2068..d617c9c 100644 --- a/phaser.js +++ b/phaser.js @@ -3,6 +3,7 @@ import flappyBird from "./games/game-flipbird/game"; import game2048 from "./games/game2048/game"; import rect from "./games/game-rect/game"; import floodFill from "./games/game-flood-fill/game"; +import fishMaster from "./games/fishMaster/index"; const attachMethods = (fn) => (...p) => Object.assign(fn(...p), { pause() { @@ -30,6 +31,7 @@ const games = Object.entries({ game2048, rect, floodFill, + fishMaster, }) .map(([name, fn]) => ({ [name]: attachMethods(fn) })) .reduce((acc, nxt) => Object.assign(acc, nxt), {});