├── assets ├── bomb.png ├── dude.png ├── sky.png ├── star.png ├── favicon.png └── platform.png ├── README.md ├── index.html ├── steps ├── part1.html ├── part2.html ├── part3.html ├── part4.html ├── part5.html ├── part6.html ├── part7.html ├── part8.html ├── part9.html └── part10.html ├── style.css └── script.js /assets/bomb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pacifiquem/phaser-star-game/HEAD/assets/bomb.png -------------------------------------------------------------------------------- /assets/dude.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pacifiquem/phaser-star-game/HEAD/assets/dude.png -------------------------------------------------------------------------------- /assets/sky.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pacifiquem/phaser-star-game/HEAD/assets/sky.png -------------------------------------------------------------------------------- /assets/star.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pacifiquem/phaser-star-game/HEAD/assets/star.png -------------------------------------------------------------------------------- /assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pacifiquem/phaser-star-game/HEAD/assets/favicon.png -------------------------------------------------------------------------------- /assets/platform.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pacifiquem/phaser-star-game/HEAD/assets/platform.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | > [!Important] 2 | > Please follow me and star this repo before forking. 3 | 4 | 5 | # Phaser Star Game . 6 | 7 | - This is phaser star game. 8 | - Use ./steps to see step by step how it was built. 9 | - Every .html file in ./steps show stage (part1.html) is start and (part10.html) is the end . 10 | - Live Demo 11 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Phaser Star Game 7 | 8 | 9 | 10 | 11 | 12 | 13 |

14 |

15 |

16 |

17 |

Game Over

18 |

Score:

19 | 20 |

21 |

22 |

23 |

24 | 25 | -------------------------------------------------------------------------------- /steps/part1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Making your first Phaser 3 Game - Part 1 6 | 7 | 12 | 13 | 14 | 15 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /steps/part2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Making your first Phaser 3 Game - Part 2 6 | 7 | 12 | 13 | 14 | 15 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /steps/part3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Making your first Phaser 3 Game - Part 3 6 | 7 | 12 | 13 | 14 | 15 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | display: flex; 4 | justify-content: center; 5 | overflow: scroll; 6 | background-color: rgba(0, 0, 0, 0.767); 7 | } 8 | 9 | body canvas { 10 | margin-top: 10vh; 11 | } 12 | 13 | #gameover-max-div { 14 | position: absolute; 15 | display: none; 16 | width: 100vw; 17 | height: 100vh; 18 | background-color: rgba(0, 0, 0, 0.703); 19 | z-index: 1; 20 | } 21 | 22 | .gameover-min-div { 23 | height: 100%; 24 | width: 100%; 25 | display: flex; 26 | align-items: center; 27 | justify-content: center; 28 | } 29 | 30 | .score-board { 31 | width: 45%; 32 | height: 60%; 33 | border: 1px solid rgba(243, 242, 242, 0.968); 34 | border-radius: 3px; 35 | background-color: rgba(243, 242, 242, 0.968); 36 | display: flex; 37 | justify-content: center; 38 | align-items: center; 39 | } 40 | 41 | .score { 42 | width: 60%; 43 | height: 60%; 44 | padding-top: 9vh; 45 | box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px; 46 | } 47 | 48 | .score h1 { 49 | font-weight: 700; 50 | } 51 | 52 | .score h1, p{ 53 | text-align: center; 54 | font-size: 1.7rem; 55 | font-family: 'Courier New', Courier, monospace; 56 | } 57 | 58 | .score button { 59 | font-size: 1.4rem; 60 | font-weight: 600; 61 | width: 45%; 62 | height: 20%; 63 | display: block; 64 | color: white; 65 | margin: 0 auto; 66 | font-family: 'Courier New', Courier, monospace; 67 | background-color: black; 68 | border-radius: 2px; 69 | } 70 | 71 | .score button:active { 72 | scale: 0.99; 73 | } 74 | 75 | .score button:hover { 76 | cursor: pointer; 77 | } -------------------------------------------------------------------------------- /steps/part4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Making your first Phaser 3 Game - Part 4 6 | 7 | 12 | 13 | 14 | 15 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /steps/part5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Making your first Phaser 3 Game - Part 5 6 | 7 | 12 | 13 | 14 | 15 | 92 | 93 | 94 | -------------------------------------------------------------------------------- /steps/part6.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Making your first Phaser 3 Game - Part 6 6 | 7 | 12 | 13 | 14 | 15 | 94 | 95 | 96 | -------------------------------------------------------------------------------- /steps/part7.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Making your first Phaser 3 Game - Part 7 6 | 7 | 12 | 13 | 14 | 15 | 120 | 121 | 122 | -------------------------------------------------------------------------------- /steps/part8.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Making your first Phaser 3 Game - Part 8 6 | 7 | 12 | 13 | 14 | 15 | 141 | 142 | 143 | -------------------------------------------------------------------------------- /steps/part9.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Making your first Phaser 3 Game - Part 9 6 | 7 | 12 | 13 | 14 | 15 | 148 | 149 | 150 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | 2 | const replay = () => { 3 | window.location.reload(); 4 | } 5 | 6 | var config = { 7 | type: Phaser.AUTO, 8 | width: 800, 9 | height: 600, 10 | physics: { 11 | default: 'arcade', 12 | arcade: { 13 | gravity: { y: 300 }, 14 | debug: false 15 | } 16 | }, 17 | scene: { 18 | preload: preload, 19 | create: create, 20 | update: update 21 | } 22 | }; 23 | 24 | var player; 25 | var stars; 26 | var bombs; 27 | var platforms; 28 | var cursors; 29 | var score = 0; 30 | var gameOver = false; 31 | var scoreText; 32 | 33 | var game = new Phaser.Game(config); 34 | 35 | function preload () 36 | { 37 | this.load.image('sky', 'assets/sky.png'); 38 | this.load.image('ground', 'assets/platform.png'); 39 | this.load.image('star', 'assets/star.png'); 40 | this.load.image('bomb', 'assets/bomb.png'); 41 | this.load.spritesheet('dude', 'assets/dude.png', { frameWidth: 32, frameHeight: 48 }); 42 | } 43 | 44 | function create () 45 | { 46 | // A simple background for our game 47 | this.add.image(400, 300, 'sky'); 48 | 49 | // The platforms group contains the ground and the 2 ledges we can jump on 50 | platforms = this.physics.add.staticGroup(); 51 | 52 | // Here we create the ground. 53 | // Scale it to fit the width of the game (the original sprite is 400x32 in size) 54 | platforms.create(400, 568, 'ground').setScale(2).refreshBody(); 55 | 56 | // Now let's create some ledges 57 | platforms.create(600, 400, 'ground'); 58 | platforms.create(50, 250, 'ground'); 59 | platforms.create(750, 220, 'ground'); 60 | 61 | // The player and its settings 62 | player = this.physics.add.sprite(100, 450, 'dude'); 63 | 64 | // Player physics properties. Give the little guy a slight bounce. 65 | player.setBounce(0.2); 66 | player.setCollideWorldBounds(true); 67 | 68 | // Our player animations, turning, walking left and walking right. 69 | this.anims.create({ 70 | key: 'left', 71 | frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }), 72 | frameRate: 10, 73 | repeat: -1 74 | }); 75 | 76 | this.anims.create({ 77 | key: 'turn', 78 | frames: [ { key: 'dude', frame: 4 } ], 79 | frameRate: 20 80 | }); 81 | 82 | this.anims.create({ 83 | key: 'right', 84 | frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 8 }), 85 | frameRate: 10, 86 | repeat: -1 87 | }); 88 | 89 | // Input Events 90 | cursors = this.input.keyboard.createCursorKeys(); 91 | 92 | // Some stars to collect, 12 in total, evenly spaced 70 pixels apart along the x axis 93 | stars = this.physics.add.group({ 94 | key: 'star', 95 | repeat: 11, 96 | setXY: { x: 12, y: 0, stepX: 70 } 97 | }); 98 | 99 | stars.children.iterate(function (child) { 100 | 101 | // Give each star a slightly different bounce 102 | child.setBounceY(Phaser.Math.FloatBetween(0.4, 0.8)); 103 | 104 | }); 105 | 106 | bombs = this.physics.add.group(); 107 | 108 | // The score 109 | scoreText = this.add.text(16, 16, 'score: 0', { fontSize: '32px', fill: '#000' }); 110 | 111 | // Collide the player and the stars with the platforms 112 | this.physics.add.collider(player, platforms); 113 | this.physics.add.collider(stars, platforms); 114 | this.physics.add.collider(bombs, platforms); 115 | 116 | // Checks to see if the player overlaps with any of the stars, if he does call the collectStar function 117 | this.physics.add.overlap(player, stars, collectStar, null, this); 118 | 119 | this.physics.add.collider(player, bombs, hitBomb, null, this); 120 | } 121 | 122 | function update () 123 | { 124 | if (gameOver) 125 | { 126 | 127 | setTimeout(() => { 128 | 129 | let scoreDiv = document.getElementById('gameover-max-div'); 130 | let scoreSpan = document.getElementById('score'); 131 | 132 | scoreSpan.textContent = score; 133 | scoreDiv.style.display = 'block'; 134 | 135 | }, 1500); 136 | 137 | return; 138 | } 139 | 140 | if (cursors.left.isDown) 141 | { 142 | player.setVelocityX(-160); 143 | 144 | player.anims.play('left', true); 145 | } 146 | else if (cursors.right.isDown) 147 | { 148 | player.setVelocityX(160); 149 | 150 | player.anims.play('right', true); 151 | } 152 | else 153 | { 154 | player.setVelocityX(0); 155 | 156 | player.anims.play('turn'); 157 | } 158 | 159 | if (cursors.up.isDown && player.body.touching.down) 160 | { 161 | player.setVelocityY(-330); 162 | } 163 | } 164 | 165 | function collectStar (player, star) 166 | { 167 | star.disableBody(true, true); 168 | 169 | // Add and update the score 170 | score += 10; 171 | scoreText.setText('Score: ' + score); 172 | 173 | if (stars.countActive(true) === 0) 174 | { 175 | // A new batch of stars to collect 176 | stars.children.iterate(function (child) { 177 | 178 | child.enableBody(true, child.x, 0, true, true); 179 | 180 | }); 181 | 182 | var x = (player.x < 400) ? Phaser.Math.Between(400, 800) : Phaser.Math.Between(0, 400); 183 | 184 | var bomb = bombs.create(x, 16, 'bomb'); 185 | bomb.setBounce(1); 186 | bomb.setCollideWorldBounds(true); 187 | bomb.setVelocity(Phaser.Math.Between(-200, 200), 20); 188 | bomb.allowGravity = false; 189 | 190 | } 191 | } 192 | 193 | function hitBomb (player, bomb, score) 194 | { 195 | this.physics.pause(); 196 | 197 | player.setTint(0xff0000); 198 | 199 | player.anims.play('turn'); 200 | 201 | gameOver = true; 202 | 203 | } -------------------------------------------------------------------------------- /steps/part10.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Making your first Phaser 3 Game - Part 10 6 | 7 | 12 | 13 | 14 | 15 | 205 | 206 | 207 | --------------------------------------------------------------------------------