├── .github ├── changes │ ├── engine.js │ ├── game-fixed.js │ └── game-with-bug.js ├── dependabot.yml ├── pull_request_template.md ├── script │ ├── create-hotfix-pr.sh │ └── initialize-repository.sh ├── steps │ ├── -step.txt │ ├── 0-welcome.md │ ├── 1-create-beta-release.md │ ├── 2-feature-added-to-release.md │ ├── 3-release-pr-opened.md │ ├── 4-release-notes-and-merge.md │ ├── 5-finalize-release.md │ ├── 6-commit-hotfix.md │ ├── 7-create-hotfix-release.md │ └── X-finish.md └── workflows │ ├── 0-welcome.yml │ ├── 1-create-beta-release.yml │ ├── 2-feature-added-to-release.yml │ ├── 3-release-pr-opened.yml │ ├── 4-release-notes-and-merge.yml │ ├── 5-finalize-release.yml │ ├── 6-commit-hotfix.yml │ └── 7-create-hotfix-release.yml ├── .gitignore ├── LICENSE ├── README.md ├── base.css ├── engine.js ├── game.js ├── game.manifest ├── images └── sprites.png └── index.html /.github/changes/engine.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | var lastTime = 0; 3 | var vendors = ["ms", "moz", "webkit", "o"]; 4 | for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { 5 | window.requestAnimationFrame = window[vendors[x] + "RequestAnimationFrame"]; 6 | window.cancelAnimationFrame = 7 | window[vendors[x] + "CancelAnimationFrame"] || 8 | window[vendors[x] + "CancelRequestAnimationFrame"]; 9 | } 10 | 11 | if (!window.requestAnimationFrame) 12 | window.requestAnimationFrame = function (callback, element) { 13 | var currTime = new Date().getTime(); 14 | var timeToCall = Math.max(0, 16 - (currTime - lastTime)); 15 | var id = window.setTimeout(function () { 16 | callback(currTime + timeToCall); 17 | }, timeToCall); 18 | lastTime = currTime + timeToCall; 19 | return id; 20 | }; 21 | 22 | if (!window.cancelAnimationFrame) 23 | window.cancelAnimationFrame = function (id) { 24 | clearTimeout(id); 25 | }; 26 | })(); 27 | 28 | var Game = new (function () { 29 | var boards = []; 30 | 31 | // Game Initialization 32 | this.initialize = function (canvasElementId, sprite_data, callback) { 33 | this.canvas = document.getElementById(canvasElementId); 34 | 35 | this.playerOffset = 10; 36 | this.canvasMultiplier = 1; 37 | this.setupMobile(); 38 | 39 | this.width = this.canvas.width; 40 | this.height = this.canvas.height; 41 | 42 | this.ctx = this.canvas.getContext && this.canvas.getContext("2d"); 43 | if (!this.ctx) { 44 | return alert("Please upgrade your browser to play"); 45 | } 46 | 47 | this.setupInput(); 48 | 49 | this.loop(); 50 | 51 | if (this.mobile) { 52 | this.setBoard(4, new TouchControls()); 53 | } 54 | 55 | SpriteSheet.load(sprite_data, callback); 56 | }; 57 | 58 | // Handle Input 59 | var KEY_CODES = { 37: "left", 39: "right", 32: "fire" }; 60 | this.keys = {}; 61 | 62 | this.setupInput = function () { 63 | window.addEventListener( 64 | "keydown", 65 | function (e) { 66 | if (KEY_CODES[e.keyCode]) { 67 | Game.keys[KEY_CODES[e.keyCode]] = true; 68 | e.preventDefault(); 69 | } 70 | }, 71 | false 72 | ); 73 | 74 | window.addEventListener( 75 | "keyup", 76 | function (e) { 77 | if (KEY_CODES[e.keyCode]) { 78 | Game.keys[KEY_CODES[e.keyCode]] = false; 79 | e.preventDefault(); 80 | } 81 | }, 82 | false 83 | ); 84 | }; 85 | 86 | var lastTime = new Date().getTime(); 87 | var maxTime = 1 / 30; 88 | // Game Loop 89 | this.loop = function () { 90 | var curTime = new Date().getTime(); 91 | requestAnimationFrame(Game.loop); 92 | var dt = (curTime - lastTime) / 1000; 93 | if (dt > maxTime) { 94 | dt = maxTime; 95 | } 96 | 97 | for (var i = 0, len = boards.length; i < len; i++) { 98 | if (boards[i]) { 99 | boards[i].step(dt); 100 | boards[i].draw(Game.ctx); 101 | } 102 | } 103 | lastTime = curTime; 104 | }; 105 | 106 | // Change an active game board 107 | this.setBoard = function (num, board) { 108 | boards[num] = board; 109 | }; 110 | 111 | this.setupMobile = function () { 112 | var container = document.getElementById("container"), 113 | hasTouch = !!("ontouchstart" in window), 114 | w = window.innerWidth, 115 | h = window.innerHeight; 116 | 117 | if (hasTouch) { 118 | this.mobile = true; 119 | } 120 | 121 | if (screen.width >= 1280 || !hasTouch) { 122 | return false; 123 | } 124 | 125 | if (w > h) { 126 | alert("Please rotate the device and then click OK"); 127 | w = window.innerWidth; 128 | h = window.innerHeight; 129 | } 130 | 131 | container.style.height = h * 2 + "px"; 132 | window.scrollTo(0, 1); 133 | 134 | h = window.innerHeight + 2; 135 | container.style.height = h + "px"; 136 | container.style.width = w + "px"; 137 | container.style.padding = 0; 138 | 139 | if (h >= this.canvas.height * 1.75 || w >= this.canvas.height * 1.75) { 140 | this.canvasMultiplier = 2; 141 | this.canvas.width = w / 2; 142 | this.canvas.height = h / 2; 143 | this.canvas.style.width = w + "px"; 144 | this.canvas.style.height = h + "px"; 145 | } else { 146 | this.canvas.width = w; 147 | this.canvas.height = h; 148 | } 149 | 150 | this.canvas.style.position = "absolute"; 151 | this.canvas.style.left = "0px"; 152 | this.canvas.style.top = "0px"; 153 | }; 154 | })(); 155 | 156 | var SpriteSheet = new (function () { 157 | this.map = {}; 158 | 159 | this.load = function (spriteData, callback) { 160 | this.map = spriteData; 161 | this.image = new Image(); 162 | this.image.onload = callback; 163 | this.image.src = "images/sprites.png"; 164 | }; 165 | 166 | this.draw = function (ctx, sprite, x, y, frame) { 167 | var s = this.map[sprite]; 168 | if (!frame) frame = 0; 169 | ctx.drawImage( 170 | this.image, 171 | s.sx + frame * s.w, 172 | s.sy, 173 | s.w, 174 | s.h, 175 | Math.floor(x), 176 | Math.floor(y), 177 | s.w, 178 | s.h 179 | ); 180 | }; 181 | 182 | return this; 183 | })(); 184 | 185 | var TitleScreen = function TitleScreen(title, subtitle, callback) { 186 | var up = false; 187 | this.step = function (dt) { 188 | if (!Game.keys["fire"]) up = true; 189 | if (up && Game.keys["fire"] && callback) callback(); 190 | }; 191 | 192 | this.draw = function (ctx) { 193 | ctx.fillStyle = "#00FF00"; 194 | 195 | ctx.font = "bold 40px bangers"; 196 | var measure = ctx.measureText(title); 197 | ctx.fillText(title, Game.width / 2 - measure.width / 2, Game.height / 2); 198 | 199 | ctx.font = "bold 20px bangers"; 200 | var measure2 = ctx.measureText(subtitle); 201 | ctx.fillText( 202 | subtitle, 203 | Game.width / 2 - measure2.width / 2, 204 | Game.height / 2 + 40 205 | ); 206 | }; 207 | }; 208 | 209 | var GameBoard = function () { 210 | var board = this; 211 | 212 | // The current list of objects 213 | this.objects = []; 214 | this.cnt = {}; 215 | 216 | // Add a new object to the object list 217 | this.add = function (obj) { 218 | obj.board = this; 219 | this.objects.push(obj); 220 | this.cnt[obj.type] = (this.cnt[obj.type] || 0) + 1; 221 | return obj; 222 | }; 223 | 224 | // Mark an object for removal 225 | this.remove = function (obj) { 226 | var idx = this.removed.indexOf(obj); 227 | if (idx == -1) { 228 | this.removed.push(obj); 229 | return true; 230 | } else { 231 | return false; 232 | } 233 | }; 234 | 235 | // Reset the list of removed objects 236 | this.resetRemoved = function () { 237 | this.removed = []; 238 | }; 239 | 240 | // Removed an objects marked for removal from the list 241 | this.finalizeRemoved = function () { 242 | for (var i = 0, len = this.removed.length; i < len; i++) { 243 | var idx = this.objects.indexOf(this.removed[i]); 244 | if (idx != -1) { 245 | this.cnt[this.removed[i].type]--; 246 | this.objects.splice(idx, 1); 247 | } 248 | } 249 | }; 250 | 251 | // Call the same method on all current objects 252 | this.iterate = function (funcName) { 253 | var args = Array.prototype.slice.call(arguments, 1); 254 | for (var i = 0, len = this.objects.length; i < len; i++) { 255 | var obj = this.objects[i]; 256 | obj[funcName].apply(obj, args); 257 | } 258 | }; 259 | 260 | // Find the first object for which func is true 261 | this.detect = function (func) { 262 | for (var i = 0, val = null, len = this.objects.length; i < len; i++) { 263 | if (func.call(this.objects[i])) return this.objects[i]; 264 | } 265 | return false; 266 | }; 267 | 268 | // Call step on all objects and them delete 269 | // any object that have been marked for removal 270 | this.step = function (dt) { 271 | this.resetRemoved(); 272 | this.iterate("step", dt); 273 | this.finalizeRemoved(); 274 | }; 275 | 276 | // Draw all the objects 277 | this.draw = function (ctx) { 278 | this.iterate("draw", ctx); 279 | }; 280 | 281 | // Check for a collision between the 282 | // bounding rects of two objects 283 | this.overlap = function (o1, o2) { 284 | return !( 285 | o1.y + o1.h - 1 < o2.y || 286 | o1.y > o2.y + o2.h - 1 || 287 | o1.x + o1.w - 1 < o2.x || 288 | o1.x > o2.x + o2.w - 1 289 | ); 290 | }; 291 | 292 | // Find the first object that collides with obj 293 | // match against an optional type 294 | this.collide = function (obj, type) { 295 | return this.detect(function () { 296 | if (obj != this) { 297 | var col = (!type || this.type & type) && board.overlap(obj, this); 298 | return col ? this : false; 299 | } 300 | }); 301 | }; 302 | }; 303 | 304 | var Sprite = function () {}; 305 | 306 | Sprite.prototype.setup = function (sprite, props) { 307 | this.sprite = sprite; 308 | this.merge(props); 309 | this.frame = this.frame || 0; 310 | this.w = SpriteSheet.map[sprite].w; 311 | this.h = SpriteSheet.map[sprite].h; 312 | }; 313 | 314 | Sprite.prototype.merge = function (props) { 315 | if (props) { 316 | for (var prop in props) { 317 | this[prop] = props[prop]; 318 | } 319 | } 320 | }; 321 | 322 | Sprite.prototype.draw = function (ctx) { 323 | SpriteSheet.draw(ctx, this.sprite, this.x, this.y, this.frame); 324 | }; 325 | 326 | Sprite.prototype.hit = function (damage) { 327 | this.board.remove(this); 328 | }; 329 | 330 | var Level = function (levelData, callback) { 331 | this.levelData = []; 332 | for (var i = 0; i < levelData.length; i++) { 333 | this.levelData.push(Object.create(levelData[i])); 334 | } 335 | this.t = 0; 336 | this.callback = callback; 337 | }; 338 | 339 | Level.prototype.step = function (dt) { 340 | var idx = 0, 341 | remove = [], 342 | curShip = null; 343 | 344 | // Update the current time offset 345 | this.t += dt * 1000; 346 | 347 | // Start, End, Gap, Type, Override 348 | // [ 0, 4000, 500, 'step', { x: 100 } ] 349 | while ((curShip = this.levelData[idx]) && curShip[0] < this.t + 2000) { 350 | // Check if we've passed the end time 351 | if (this.t > curShip[1]) { 352 | remove.push(curShip); 353 | } else if (curShip[0] < this.t) { 354 | // Get the enemy definition blueprint 355 | var enemy = enemies[curShip[3]], 356 | override = curShip[4]; 357 | 358 | // Add a new enemy with the blueprint and override 359 | this.board.add(new Enemy(enemy, override)); 360 | 361 | // Increment the start time by the gap 362 | curShip[0] += curShip[2]; 363 | } 364 | idx++; 365 | } 366 | 367 | // Remove any objects from the levelData that have passed 368 | for (var i = 0, len = remove.length; i < len; i++) { 369 | var remIdx = this.levelData.indexOf(remove[i]); 370 | if (remIdx != -1) this.levelData.splice(remIdx, 1); 371 | } 372 | 373 | // If there are no more enemies on the board or in 374 | // levelData, this level is done 375 | if (this.levelData.length === 0 && this.board.cnt[OBJECT_ENEMY] === 0) { 376 | if (this.callback) this.callback(); 377 | } 378 | }; 379 | 380 | Level.prototype.draw = function (ctx) {}; 381 | 382 | var TouchControls = function () { 383 | var gutterWidth = 10; 384 | var unitWidth = Game.width / 5; 385 | var blockWidth = unitWidth - gutterWidth; 386 | 387 | this.drawSquare = function (ctx, x, y, txt, on) { 388 | ctx.globalAlpha = on ? 0.9 : 0.6; 389 | ctx.fillStyle = "#CCC"; 390 | ctx.fillRect(x, y, blockWidth, blockWidth); 391 | 392 | ctx.fillStyle = "#FFF"; 393 | ctx.globalAlpha = 1.0; 394 | ctx.font = "bold " + (3 * unitWidth) / 4 + "px arial"; 395 | 396 | var txtSize = ctx.measureText(txt); 397 | 398 | ctx.fillText( 399 | txt, 400 | x + blockWidth / 2 - txtSize.width / 2, 401 | y + (3 * blockWidth) / 4 + 5 402 | ); 403 | }; 404 | 405 | this.draw = function (ctx) { 406 | ctx.save(); 407 | 408 | var yLoc = Game.height - unitWidth; 409 | this.drawSquare(ctx, gutterWidth, yLoc, "\u25C0", Game.keys["left"]); 410 | this.drawSquare( 411 | ctx, 412 | unitWidth + gutterWidth, 413 | yLoc, 414 | "\u25B6", 415 | Game.keys["right"] 416 | ); 417 | this.drawSquare(ctx, 4 * unitWidth, yLoc, "A", Game.keys["fire"]); 418 | 419 | ctx.restore(); 420 | }; 421 | 422 | this.step = function (dt) {}; 423 | 424 | this.trackTouch = function (e) { 425 | var touch, x; 426 | 427 | e.preventDefault(); 428 | Game.keys["left"] = false; 429 | Game.keys["right"] = false; 430 | for (var i = 0; i < e.targetTouches.length; i++) { 431 | touch = e.targetTouches[i]; 432 | x = touch.pageX / Game.canvasMultiplier - Game.canvas.offsetLeft; 433 | if (x < unitWidth) { 434 | Game.keys["left"] = true; 435 | } 436 | if (x > unitWidth && x < 2 * unitWidth) { 437 | Game.keys["right"] = true; 438 | } 439 | } 440 | 441 | if (e.type == "touchstart" || e.type == "touchend") { 442 | for (i = 0; i < e.changedTouches.length; i++) { 443 | touch = e.changedTouches[i]; 444 | x = touch.pageX / Game.canvasMultiplier - Game.canvas.offsetLeft; 445 | if (x > 4 * unitWidth) { 446 | Game.keys["fire"] = e.type == "touchstart"; 447 | } 448 | } 449 | } 450 | }; 451 | 452 | Game.canvas.addEventListener("touchstart", this.trackTouch, true); 453 | Game.canvas.addEventListener("touchmove", this.trackTouch, true); 454 | Game.canvas.addEventListener("touchend", this.trackTouch, true); 455 | 456 | // For Android 457 | Game.canvas.addEventListener( 458 | "dblclick", 459 | function (e) { 460 | e.preventDefault(); 461 | }, 462 | true 463 | ); 464 | Game.canvas.addEventListener( 465 | "click", 466 | function (e) { 467 | e.preventDefault(); 468 | }, 469 | true 470 | ); 471 | 472 | Game.playerOffset = unitWidth + 20; 473 | }; 474 | 475 | var GamePoints = function () { 476 | Game.points = 0; 477 | 478 | var pointsLength = 8; 479 | 480 | this.draw = function (ctx) { 481 | ctx.save(); 482 | ctx.font = "bold 18px arial"; 483 | ctx.fillStyle = "#00FF00"; 484 | 485 | var txt = "" + Game.points; 486 | var i = pointsLength - txt.length, 487 | zeros = ""; 488 | while (i-- > 0) { 489 | zeros += "0"; 490 | } 491 | 492 | ctx.fillText(zeros + txt, 10, 20); 493 | ctx.restore(); 494 | }; 495 | 496 | this.step = function (dt) {}; 497 | }; 498 | -------------------------------------------------------------------------------- /.github/changes/game-fixed.js: -------------------------------------------------------------------------------- 1 | var sprites = { 2 | ship: { sx: 0, sy: 0, w: 37, h: 42, frames: 1 }, 3 | missile: { sx: 0, sy: 30, w: 2, h: 10, frames: 1 }, 4 | enemy_purple: { sx: 37, sy: 0, w: 42, h: 43, frames: 1 }, 5 | enemy_bee: { sx: 79, sy: 0, w: 37, h: 43, frames: 1 }, 6 | enemy_ship: { sx: 116, sy: 0, w: 42, h: 43, frames: 1 }, 7 | enemy_circle: { sx: 158, sy: 0, w: 32, h: 33, frames: 1 }, 8 | explosion: { sx: 0, sy: 64, w: 64, h: 64, frames: 12 }, 9 | enemy_missile: { sx: 9, sy: 42, w: 3, h: 20, frame: 1 }, 10 | }; 11 | 12 | var enemies = { 13 | straight: { x: 0, y: -50, sprite: "enemy_ship", health: 10, E: 100 }, 14 | ltr: { 15 | x: 0, 16 | y: -100, 17 | sprite: "enemy_purple", 18 | health: 10, 19 | B: 75, 20 | C: 1, 21 | E: 100, 22 | missiles: 2, 23 | }, 24 | circle: { 25 | x: 250, 26 | y: -50, 27 | sprite: "enemy_circle", 28 | health: 10, 29 | A: 0, 30 | B: -100, 31 | C: 1, 32 | E: 20, 33 | F: 100, 34 | G: 1, 35 | H: Math.PI / 2, 36 | }, 37 | wiggle: { 38 | x: 100, 39 | y: -50, 40 | sprite: "enemy_bee", 41 | health: 20, 42 | B: 50, 43 | C: 4, 44 | E: 100, 45 | firePercentage: 0.001, 46 | missiles: 2, 47 | }, 48 | step: { 49 | x: 0, 50 | y: -50, 51 | sprite: "enemy_circle", 52 | health: 10, 53 | B: 150, 54 | C: 1.2, 55 | E: 75, 56 | }, 57 | }; 58 | 59 | var OBJECT_PLAYER = 1, 60 | OBJECT_PLAYER_PROJECTILE = 2, 61 | OBJECT_ENEMY = 4, 62 | OBJECT_ENEMY_PROJECTILE = 8, 63 | OBJECT_POWERUP = 16; 64 | 65 | var startGame = function () { 66 | var ua = navigator.userAgent.toLowerCase(); 67 | 68 | // Only 1 row of stars 69 | if (ua.match(/android/)) { 70 | Game.setBoard(0, new Starfield(50, 0.6, 100, true)); 71 | } else { 72 | Game.setBoard(0, new Starfield(20, 0.4, 100, true)); 73 | Game.setBoard(1, new Starfield(50, 0.6, 100)); 74 | Game.setBoard(2, new Starfield(100, 1.0, 50)); 75 | } 76 | Game.setBoard( 77 | 3, 78 | new TitleScreen("Alien Invasion", "Press fire to start playing", playGame) 79 | ); 80 | }; 81 | 82 | var level1 = [ 83 | // Start, End, Gap, Type, Override 84 | [0, 4000, 500, "step"], 85 | [6000, 13000, 800, "ltr"], 86 | [10000, 16000, 400, "circle"], 87 | [17800, 20000, 500, "straight", { x: 50 }], 88 | [18200, 20000, 500, "straight", { x: 90 }], 89 | [18200, 20000, 500, "straight", { x: 10 }], 90 | [22000, 25000, 400, "wiggle", { x: 150 }], 91 | [22000, 25000, 400, "wiggle", { x: 100 }], 92 | ]; 93 | 94 | var playGame = function () { 95 | var board = new GameBoard(); 96 | board.add(new PlayerShip()); 97 | board.add(new Level(level1, winGame)); 98 | Game.setBoard(3, board); 99 | Game.setBoard(5, new GamePoints(0)); 100 | }; 101 | 102 | var winGame = function () { 103 | Game.setBoard( 104 | 3, 105 | new TitleScreen("You win!", "Press fire to play again", playGame) 106 | ); 107 | }; 108 | 109 | var loseGame = function () { 110 | Game.setBoard( 111 | 3, 112 | new TitleScreen("You lose!", "Press fire to play again", playGame) 113 | ); 114 | }; 115 | 116 | var Starfield = function (speed, opacity, numStars, clear) { 117 | // Set up the offscreen canvas 118 | var stars = document.createElement("canvas"); 119 | stars.width = Game.width; 120 | stars.height = Game.height; 121 | var starCtx = stars.getContext("2d"); 122 | 123 | var offset = 0; 124 | 125 | // If the clear option is set, 126 | // make the background black instead of transparent 127 | if (clear) { 128 | starCtx.fillStyle = "#000"; 129 | starCtx.fillRect(0, 0, stars.width, stars.height); 130 | } 131 | 132 | // Now draw a bunch of random 2 pixel 133 | // rectangles onto the offscreen canvas 134 | starCtx.fillStyle = "#FFF"; 135 | starCtx.globalAlpha = opacity; 136 | for (var i = 0; i < numStars; i++) { 137 | starCtx.fillRect( 138 | Math.floor(Math.random() * stars.width), 139 | Math.floor(Math.random() * stars.height), 140 | 2, 141 | 2 142 | ); 143 | } 144 | 145 | // This method is called every frame 146 | // to draw the starfield onto the canvas 147 | this.draw = function (ctx) { 148 | var intOffset = Math.floor(offset); 149 | var remaining = stars.height - intOffset; 150 | 151 | // Draw the top half of the starfield 152 | if (intOffset > 0) { 153 | ctx.drawImage( 154 | stars, 155 | 0, 156 | remaining, 157 | stars.width, 158 | intOffset, 159 | 0, 160 | 0, 161 | stars.width, 162 | intOffset 163 | ); 164 | } 165 | 166 | // Draw the bottom half of the starfield 167 | if (remaining > 0) { 168 | ctx.drawImage( 169 | stars, 170 | 0, 171 | 0, 172 | stars.width, 173 | remaining, 174 | 0, 175 | intOffset, 176 | stars.width, 177 | remaining 178 | ); 179 | } 180 | }; 181 | 182 | // This method is called to update 183 | // the starfield 184 | this.step = function (dt) { 185 | offset += dt * speed; 186 | offset = offset % stars.height; 187 | }; 188 | }; 189 | 190 | var PlayerShip = function () { 191 | this.setup("ship", { vx: 0, reloadTime: 0.25, maxVel: 200 }); 192 | 193 | this.reload = this.reloadTime; 194 | this.x = Game.width / 2 - this.w / 2; 195 | this.y = Game.height - Game.playerOffset - this.h; 196 | 197 | this.step = function (dt) { 198 | if (Game.keys["left"]) { 199 | this.vx = -this.maxVel; 200 | } else if (Game.keys["right"]) { 201 | this.vx = this.maxVel; 202 | } else { 203 | this.vx = 0; 204 | } 205 | 206 | this.x += this.vx * dt; 207 | 208 | if (this.x < 0) { 209 | this.x = 0; 210 | } else if (this.x > Game.width - this.w) { 211 | this.x = Game.width - this.w; 212 | } 213 | 214 | this.reload -= dt; 215 | if (Game.keys["fire"] && this.reload < 0) { 216 | Game.keys["fire"] = false; 217 | this.reload = this.reloadTime; 218 | 219 | this.board.add(new PlayerMissile(this.x, this.y + this.h / 2)); 220 | this.board.add(new PlayerMissile(this.x + this.w, this.y + this.h / 2)); 221 | } 222 | }; 223 | }; 224 | 225 | PlayerShip.prototype = new Sprite(); 226 | PlayerShip.prototype.type = OBJECT_PLAYER; 227 | 228 | PlayerShip.prototype.hit = function (damage) { 229 | if (this.board.remove(this)) { 230 | loseGame(); 231 | } 232 | }; 233 | 234 | var PlayerMissile = function (x, y) { 235 | this.setup("missile", { vy: -700, damage: 10 }); 236 | this.x = x - this.w / 2; 237 | this.y = y - this.h; 238 | }; 239 | 240 | PlayerMissile.prototype = new Sprite(); 241 | PlayerMissile.prototype.type = OBJECT_PLAYER_PROJECTILE; 242 | 243 | PlayerMissile.prototype.step = function (dt) { 244 | this.y += this.vy * dt; 245 | var collision = this.board.collide(this, OBJECT_ENEMY); 246 | if (collision) { 247 | collision.hit(this.damage); 248 | this.board.remove(this); 249 | } else if (this.y < -this.h) { 250 | this.board.remove(this); 251 | } 252 | }; 253 | 254 | var Enemy = function (blueprint, override) { 255 | this.merge(this.baseParameters); 256 | this.setup(blueprint.sprite, blueprint); 257 | this.merge(override); 258 | }; 259 | 260 | Enemy.prototype = new Sprite(); 261 | Enemy.prototype.type = OBJECT_ENEMY; 262 | 263 | Enemy.prototype.baseParameters = { 264 | A: 0, 265 | B: 0, 266 | C: 0, 267 | D: 0, 268 | E: 0, 269 | F: 0, 270 | G: 0, 271 | H: 0, 272 | t: 0, 273 | reloadTime: 0.75, 274 | reload: 0, 275 | }; 276 | 277 | Enemy.prototype.step = function (dt) { 278 | this.t += dt; 279 | 280 | this.vx = this.A + this.B * Math.sin(this.C * this.t + this.D); 281 | this.vy = this.E + this.F * Math.sin(this.G * this.t + this.H); 282 | 283 | this.x += this.vx * dt; 284 | this.y += this.vy * dt; 285 | 286 | var collision = this.board.collide(this, OBJECT_PLAYER); 287 | if (collision) { 288 | collision.hit(this.damage); 289 | this.board.remove(this); 290 | } 291 | 292 | if (Math.random() < 0.01 && this.reload <= 0) { 293 | this.reload = this.reloadTime; 294 | if (this.missiles == 2) { 295 | this.board.add(new EnemyMissile(this.x + this.w - 2, this.y + this.h)); 296 | this.board.add(new EnemyMissile(this.x + 2, this.y + this.h)); 297 | } else { 298 | this.board.add(new EnemyMissile(this.x + this.w / 2, this.y + this.h)); 299 | } 300 | } 301 | this.reload -= dt; 302 | 303 | if (this.y > Game.height || this.x < -this.w || this.x > Game.width) { 304 | this.board.remove(this); 305 | } 306 | }; 307 | 308 | Enemy.prototype.hit = function (damage) { 309 | this.health -= damage; 310 | if (this.health <= 0) { 311 | if (this.board.remove(this)) { 312 | Game.points += this.points || 100; 313 | this.board.add(new Explosion(this.x + this.w / 2, this.y + this.h / 2)); 314 | } 315 | } 316 | }; 317 | 318 | var EnemyMissile = function (x, y) { 319 | this.setup("enemy_missile", { vy: 200, damage: 10 }); 320 | this.x = x - this.w / 2; 321 | this.y = y; 322 | }; 323 | 324 | EnemyMissile.prototype = new Sprite(); 325 | EnemyMissile.prototype.type = OBJECT_ENEMY_PROJECTILE; 326 | 327 | EnemyMissile.prototype.step = function (dt) { 328 | this.y += this.vy * dt; 329 | var collision = this.board.collide(this, OBJECT_PLAYER); 330 | if (collision) { 331 | collision.hit(this.damage); 332 | this.board.remove(this); 333 | } else if (this.y > Game.height) { 334 | this.board.remove(this); 335 | } 336 | }; 337 | 338 | var Explosion = function (centerX, centerY) { 339 | this.setup("explosion", { frame: 0 }); 340 | this.x = centerX - this.w / 2; 341 | this.y = centerY - this.h / 2; 342 | }; 343 | 344 | Explosion.prototype = new Sprite(); 345 | 346 | Explosion.prototype.step = function (dt) { 347 | this.frame++; 348 | if (this.frame >= 12) { 349 | this.board.remove(this); 350 | } 351 | }; 352 | 353 | window.addEventListener("load", function () { 354 | Game.initialize("game", sprites, startGame); 355 | }); 356 | -------------------------------------------------------------------------------- /.github/changes/game-with-bug.js: -------------------------------------------------------------------------------- 1 | var sprites = { 2 | ship: { sx: 0, sy: 0, w: 37, h: 42, frames: 1 }, 3 | missile: { sx: 0, sy: 30, w: 2, h: 10, frames: 1 }, 4 | enemy_purple: { sx: 37, sy: 0, w: 42, h: 43, frames: 1 }, 5 | enemy_bee: { sx: 79, sy: 0, w: 37, h: 43, frames: 1 }, 6 | enemy_ship: { sx: 116, sy: 0, w: 42, h: 43, frames: 1 }, 7 | enemy_circle: { sx: 158, sy: 0, w: 32, h: 33, frames: 1 }, 8 | explosion: { sx: 0, sy: 64, w: 64, h: 64, frames: 12 }, 9 | enemy_missile: { sx: 9, sy: 42, w: 3, h: 20, frame: 1 }, 10 | }; 11 | 12 | var enemies = { 13 | straight: { x: 0, y: -50, sprite: "enemy_ship", health: 10, E: 100 }, 14 | ltr: { 15 | x: 0, 16 | y: -100, 17 | sprite: "enemy_purple", 18 | health: 10, 19 | B: 75, 20 | C: 1, 21 | E: 100, 22 | missiles: 2, 23 | }, 24 | circle: { 25 | x: 250, 26 | y: -50, 27 | sprite: "enemy_circle", 28 | health: 10, 29 | A: 0, 30 | B: -100, 31 | C: 1, 32 | E: 20, 33 | F: 100, 34 | G: 1, 35 | H: Math.PI / 2, 36 | }, 37 | wiggle: { 38 | x: 100, 39 | y: -50, 40 | sprite: "enemy_bee", 41 | health: 20, 42 | B: 50, 43 | C: 4, 44 | E: 100, 45 | firePercentage: 0.001, 46 | missiles: 2, 47 | }, 48 | step: { 49 | x: 0, 50 | y: -50, 51 | sprite: "enemy_circle", 52 | health: 10, 53 | B: 150, 54 | C: 1.2, 55 | E: 75, 56 | }, 57 | }; 58 | 59 | var OBJECT_PLAYER = 1, 60 | OBJECT_PLAYER_PROJECTILE = 2, 61 | OBJECT_ENEMY = 4, 62 | OBJECT_ENEMY_PROJECTILE = 8, 63 | OBJECT_POWERUP = 16; 64 | 65 | var startGame = function () { 66 | var ua = navigator.userAgent.toLowerCase(); 67 | 68 | // Only 1 row of stars 69 | if (ua.match(/android/)) { 70 | Game.setBoard(0, new Starfield(50, 0.6, 100, true)); 71 | } else { 72 | Game.setBoard(0, new Starfield(20, 0.4, 100, true)); 73 | Game.setBoard(1, new Starfield(50, 0.6, 100)); 74 | Game.setBoard(2, new Starfield(100, 1.0, 50)); 75 | } 76 | Game.setBoard( 77 | 3, 78 | new TitleScreen("Alien Invasion", "Press fire to start playing", playGame) 79 | ); 80 | }; 81 | 82 | var level1 = [ 83 | // Start, End, Gap, Type, Override 84 | [0, 4000, 500, "step"], 85 | [6000, 13000, 800, "ltr"], 86 | [10000, 16000, 400, "circle"], 87 | [17800, 20000, 500, "straight", { x: 50 }], 88 | [18200, 20000, 500, "straight", { x: 90 }], 89 | [18200, 20000, 500, "straight", { x: 10 }], 90 | [22000, 25000, 400, "wiggle", { x: 150 }], 91 | [22000, 25000, 400, "wiggle", { x: 100 }], 92 | ]; 93 | 94 | var playGame = function () { 95 | var board = new GameBoard(); 96 | board.add(new PlayerShip()); 97 | board.add(new Level(level1, winGame)); 98 | Game.setBoard(3, board); 99 | Game.setBoard(5, new GamePoints(0)); 100 | }; 101 | 102 | var winGame = function () { 103 | Game.setBoard( 104 | 3, 105 | new TitleScreen("You win!", "Press fire to play again", playGame) 106 | ); 107 | }; 108 | 109 | var loseGame = function () { 110 | Game.setBoard( 111 | 3, 112 | new TitleScreen("You lose!", "Press fire to play again", playGame) 113 | ); 114 | }; 115 | 116 | var Starfield = function (speed, opacity, numStars, clear) { 117 | // Set up the offscreen canvas 118 | var stars = document.createElement("canvas"); 119 | stars.width = Game.width; 120 | stars.height = Game.height; 121 | var starCtx = stars.getContext("2d"); 122 | 123 | var offset = 0; 124 | 125 | // If the clear option is set, 126 | // make the background black instead of transparent 127 | if (clear) { 128 | starCtx.fillStyle = "#0F0"; 129 | starCtx.fillRect(0, 0, stars.width, stars.height); 130 | } 131 | 132 | // Now draw a bunch of random 2 pixel 133 | // rectangles onto the offscreen canvas 134 | starCtx.fillStyle = "#FFF"; 135 | starCtx.globalAlpha = opacity; 136 | for (var i = 0; i < numStars; i++) { 137 | starCtx.fillRect( 138 | Math.floor(Math.random() * stars.width), 139 | Math.floor(Math.random() * stars.height), 140 | 2, 141 | 2 142 | ); 143 | } 144 | 145 | // This method is called every frame 146 | // to draw the starfield onto the canvas 147 | this.draw = function (ctx) { 148 | var intOffset = Math.floor(offset); 149 | var remaining = stars.height - intOffset; 150 | 151 | // Draw the top half of the starfield 152 | if (intOffset > 0) { 153 | ctx.drawImage( 154 | stars, 155 | 0, 156 | remaining, 157 | stars.width, 158 | intOffset, 159 | 0, 160 | 0, 161 | stars.width, 162 | intOffset 163 | ); 164 | } 165 | 166 | // Draw the bottom half of the starfield 167 | if (remaining > 0) { 168 | ctx.drawImage( 169 | stars, 170 | 0, 171 | 0, 172 | stars.width, 173 | remaining, 174 | 0, 175 | intOffset, 176 | stars.width, 177 | remaining 178 | ); 179 | } 180 | }; 181 | 182 | // This method is called to update 183 | // the starfield 184 | this.step = function (dt) { 185 | offset += dt * speed; 186 | offset = offset % stars.height; 187 | }; 188 | }; 189 | 190 | var PlayerShip = function () { 191 | this.setup("ship", { vx: 0, reloadTime: 0.25, maxVel: 200 }); 192 | 193 | this.reload = this.reloadTime; 194 | this.x = Game.width / 2 - this.w / 2; 195 | this.y = Game.height - Game.playerOffset - this.h; 196 | 197 | this.step = function (dt) { 198 | if (Game.keys["left"]) { 199 | this.vx = -this.maxVel; 200 | } else if (Game.keys["right"]) { 201 | this.vx = this.maxVel; 202 | } else { 203 | this.vx = 0; 204 | } 205 | 206 | this.x += this.vx * dt; 207 | 208 | if (this.x < 0) { 209 | this.x = 0; 210 | } else if (this.x > Game.width - this.w) { 211 | this.x = Game.width - this.w; 212 | } 213 | 214 | this.reload -= dt; 215 | if (Game.keys["fire"] && this.reload < 0) { 216 | Game.keys["fire"] = false; 217 | this.reload = this.reloadTime; 218 | 219 | this.board.add(new PlayerMissile(this.x, this.y + this.h / 2)); 220 | this.board.add(new PlayerMissile(this.x + this.w, this.y + this.h / 2)); 221 | } 222 | }; 223 | }; 224 | 225 | PlayerShip.prototype = new Sprite(); 226 | PlayerShip.prototype.type = OBJECT_PLAYER; 227 | 228 | PlayerShip.prototype.hit = function (damage) { 229 | if (this.board.remove(this)) { 230 | loseGame(); 231 | } 232 | }; 233 | 234 | var PlayerMissile = function (x, y) { 235 | this.setup("missile", { vy: -700, damage: 10 }); 236 | this.x = x - this.w / 2; 237 | this.y = y - this.h; 238 | }; 239 | 240 | PlayerMissile.prototype = new Sprite(); 241 | PlayerMissile.prototype.type = OBJECT_PLAYER_PROJECTILE; 242 | 243 | PlayerMissile.prototype.step = function (dt) { 244 | this.y += this.vy * dt; 245 | var collision = this.board.collide(this, OBJECT_ENEMY); 246 | if (collision) { 247 | collision.hit(this.damage); 248 | this.board.remove(this); 249 | } else if (this.y < -this.h) { 250 | this.board.remove(this); 251 | } 252 | }; 253 | 254 | var Enemy = function (blueprint, override) { 255 | this.merge(this.baseParameters); 256 | this.setup(blueprint.sprite, blueprint); 257 | this.merge(override); 258 | }; 259 | 260 | Enemy.prototype = new Sprite(); 261 | Enemy.prototype.type = OBJECT_ENEMY; 262 | 263 | Enemy.prototype.baseParameters = { 264 | A: 0, 265 | B: 0, 266 | C: 0, 267 | D: 0, 268 | E: 0, 269 | F: 0, 270 | G: 0, 271 | H: 0, 272 | t: 0, 273 | reloadTime: 0.75, 274 | reload: 0, 275 | }; 276 | 277 | Enemy.prototype.step = function (dt) { 278 | this.t += dt; 279 | 280 | this.vx = this.A + this.B * Math.sin(this.C * this.t + this.D); 281 | this.vy = this.E + this.F * Math.sin(this.G * this.t + this.H); 282 | 283 | this.x += this.vx * dt; 284 | this.y += this.vy * dt; 285 | 286 | var collision = this.board.collide(this, OBJECT_PLAYER); 287 | if (collision) { 288 | collision.hit(this.damage); 289 | this.board.remove(this); 290 | } 291 | 292 | if (Math.random() < 0.01 && this.reload <= 0) { 293 | this.reload = this.reloadTime; 294 | if (this.missiles == 2) { 295 | this.board.add(new EnemyMissile(this.x + this.w - 2, this.y + this.h)); 296 | this.board.add(new EnemyMissile(this.x + 2, this.y + this.h)); 297 | } else { 298 | this.board.add(new EnemyMissile(this.x + this.w / 2, this.y + this.h)); 299 | } 300 | } 301 | this.reload -= dt; 302 | 303 | if (this.y > Game.height || this.x < -this.w || this.x > Game.width) { 304 | this.board.remove(this); 305 | } 306 | }; 307 | 308 | Enemy.prototype.hit = function (damage) { 309 | this.health -= damage; 310 | if (this.health <= 0) { 311 | if (this.board.remove(this)) { 312 | Game.points += this.points || 100; 313 | this.board.add(new Explosion(this.x + this.w / 2, this.y + this.h / 2)); 314 | } 315 | } 316 | }; 317 | 318 | var EnemyMissile = function (x, y) { 319 | this.setup("enemy_missile", { vy: 200, damage: 10 }); 320 | this.x = x - this.w / 2; 321 | this.y = y; 322 | }; 323 | 324 | EnemyMissile.prototype = new Sprite(); 325 | EnemyMissile.prototype.type = OBJECT_ENEMY_PROJECTILE; 326 | 327 | EnemyMissile.prototype.step = function (dt) { 328 | this.y += this.vy * dt; 329 | var collision = this.board.collide(this, OBJECT_PLAYER); 330 | if (collision) { 331 | collision.hit(this.damage); 332 | this.board.remove(this); 333 | } else if (this.y > Game.height) { 334 | this.board.remove(this); 335 | } 336 | }; 337 | 338 | var Explosion = function (centerX, centerY) { 339 | this.setup("explosion", { frame: 0 }); 340 | this.x = centerX - this.w / 2; 341 | this.y = centerY - this.h / 2; 342 | }; 343 | 344 | Explosion.prototype = new Sprite(); 345 | 346 | Explosion.prototype.step = function (dt) { 347 | this.frame++; 348 | if (this.frame >= 12) { 349 | this.board.remove(this); 350 | } 351 | }; 352 | 353 | window.addEventListener("load", function () { 354 | Game.initialize("game", sprites, startGame); 355 | }); 356 | -------------------------------------------------------------------------------- /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | updates: 3 | - package-ecosystem: "github-actions" 4 | directory: "/" 5 | schedule: 6 | interval: "monthly" 7 | -------------------------------------------------------------------------------- /.github/pull_request_template.md: -------------------------------------------------------------------------------- 1 | ## Description: 2 | 3 | _Description of changes made and why._ 4 | -------------------------------------------------------------------------------- /.github/script/create-hotfix-pr.sh: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | # Make sure this file is executable 3 | # chmod a+x .github/script/create-hotfix-pr.sh 4 | 5 | echo "Set committer details" 6 | git config user.name github-actions[bot] 7 | git config user.email github-actions[bot]@users.noreply.github.com 8 | 9 | echo "Create hotfix branch" 10 | RELEASE_BRANCH=hotfix-v1.0.1 11 | git checkout main 12 | git pull origin main 13 | git checkout -b $RELEASE_BRANCH 14 | 15 | echo "Push release branch" 16 | git commit --allow-empty --message="Empty commit to initialize branch" 17 | git push --set-upstream origin $RELEASE_BRANCH 18 | 19 | echo "Create feature branch" 20 | git checkout main 21 | FEATURE_BRANCH=fix-game-background 22 | git checkout -b $FEATURE_BRANCH 23 | 24 | echo "Make changes to files" 25 | cp .github/changes/game-fixed.js game.js 26 | 27 | echo "Commit file changes" 28 | git add game.js 29 | git commit -m "Set game background back to black" 30 | 31 | echo "Push feature branch" 32 | git push --set-upstream origin $FEATURE_BRANCH 33 | 34 | echo "Restore main" 35 | git checkout main -------------------------------------------------------------------------------- /.github/script/initialize-repository.sh: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | # Make sure this file is executable 3 | # chmod a+x .github/script/initialize-repository.sh 4 | 5 | echo "Set committer details" 6 | git config user.name github-actions[bot] 7 | git config user.email github-actions[bot]@users.noreply.github.com 8 | 9 | echo "Create release branch" 10 | RELEASE_BRANCH=release-v1.0 11 | git checkout main 12 | git checkout -b $RELEASE_BRANCH 13 | 14 | echo "Push release branch" 15 | git commit --allow-empty --message="Empty commit to initialize branch" 16 | git push --set-upstream origin $RELEASE_BRANCH 17 | 18 | echo "Create feature branch" 19 | git checkout main 20 | FEATURE_BRANCH=update-text-colors 21 | git checkout -b $FEATURE_BRANCH 22 | 23 | echo "Make changes to files" 24 | cp .github/changes/engine.js engine.js 25 | cp .github/changes/game-with-bug.js game.js 26 | 27 | echo "Commit file changes" 28 | git add engine.js game.js 29 | git commit -m "Changed game text colors to green" 30 | 31 | echo "Push feature branch" 32 | git push --set-upstream origin $FEATURE_BRANCH 33 | 34 | echo "Restore main" 35 | git checkout main -------------------------------------------------------------------------------- /.github/steps/-step.txt: -------------------------------------------------------------------------------- 1 | 0 2 | -------------------------------------------------------------------------------- /.github/steps/0-welcome.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /.github/steps/1-create-beta-release.md: -------------------------------------------------------------------------------- 1 | 8 | 9 | ## Step 1: Create a beta release 10 | 11 | _Welcome to "Release-based workflow" :sparkle:_ 12 | 13 | ### The GitHub flow 14 | 15 | The [GitHub flow](https://guides.github.com/introduction/flow/) is a lightweight, branch-based workflow for projects with regular deployments. 16 | 17 | ![github-flow](https://user-images.githubusercontent.com/6351798/48032310-63842400-e114-11e8-8db0-06dc0504dcb5.png) 18 | 19 | Some projects may deploy more often, with continuous deployment. There might be a "release" every time there's a new commit on main. 20 | 21 | But, some projects rely on a different structure for versions and releases. 22 | 23 | ### Versions 24 | 25 | Versions are different iterations of updated software like operating systems, apps, or dependencies. Common examples are "Windows 8.1" to "Windows 10", or "macOS High Sierra" to "macOS Mojave". 26 | 27 | Developers update code and then run tests on the project for bugs. During that time, the developers might set up certain securities to protect from new code or bugs. Then, the tested code is ready for production. Teams version the code and release it for installation by end users. 28 | 29 | ### :keyboard: Activity: Create a release for the current codebase 30 | 31 | In this step, you will create a release for this repository on GitHub. 32 | 33 | GitHub Releases point to a specific commit. Releases can include release notes in Markdown files, and attached binaries. 34 | 35 | Before using a release based workflow for a larger release, let's create a tag and a release. 36 | 37 | 1. Open a new browser tab, and work on the steps in your second tab while you read the instructions in this tab. 38 | 1. Go to the **Releases** page for this repository. 39 | - _Tip: To reach this page, click the **Code** tab at the top of your repository. Then, find the navigation bar below the repository description, and click the **Releases** heading link._ 40 | 1. Click **Create a new release**. 41 | 1. In the field for _Tag version_, specify a number. In this case, use **v0.9**. Keep the _Target_ as **main**. 42 | 1. Give the release a title, like "First beta release". If you'd like, you could also give the release a short description. 43 | 1. Select the checkbox next to **Set as a pre-release**, since it is representing a beta version. 44 | 1. Click **Publish release**. 45 | 46 | ### :keyboard: Activity: Introduce a bug to be fixed later 47 | 48 | To set the stage for later, let's also add a bug that we'll fix as part of the release workflow in later steps. We've already created a `update-text-colors` branch for you so let's create and merge a pull request with this branch. 49 | 50 | 1. Open a **new pull request** with `base: release-v1.0` and `compare: update-text-colors`. 51 | 1. Set the pull request title to "Updated game text style". You can include a detailed pull request body, an example is below: 52 | ``` 53 | ## Description: 54 | - Updated game text color to green 55 | ``` 56 | 1. Click **Create pull request**. 57 | 1. We'll merge this pull request now. Click **Merge pull request** and delete your branch. 58 | 1. Wait about 20 seconds then refresh this page (the one you're following instructions from). [GitHub Actions](https://docs.github.com/en/actions) will automatically update to the next step. 59 | -------------------------------------------------------------------------------- /.github/steps/2-feature-added-to-release.md: -------------------------------------------------------------------------------- 1 | 6 | 7 | ## Step 2: Add a new feature to the release branch 8 | 9 | _Great job creating a beta release :heart:_ 10 | 11 | ### Release management 12 | 13 | As you prepare for a future release, you'll need to organize more than the tasks and features. It's important to create a clear workflow for your team, and to make sure that the work remains organized. 14 | 15 | There are several strategies for managing releases. Some teams might use long-lived branches, like `production`, `dev`, and `main`. Some teams use simple feature branches, releasing from the main branch. 16 | 17 | No one strategy is better than another. We always recommend being intentional about branches and reducing long-lived branches whenever possible. 18 | 19 | In this exercise, you'll use the `release-v1.0` branch to be your one long-lived branch per release version. 20 | 21 | ### Protected branches 22 | 23 | Like the `main` branch, you can protect release branches. This means you can protect branches from force pushes or accidental deletion. This is already configured in this repository. 24 | 25 | ### Add a feature 26 | 27 | Releases are usually made of many smaller changes. Let's pretend we don't know about the bug we added earlier and we'll focus on a few features to update our game before the version update. 28 | 29 | - You should update the page background color to black. 30 | - I'll help you change the text colors to green. 31 | 32 | ### :keyboard: Activity: Update `base.css` 33 | 34 | 1. Create a new branch off of the `main` branch and change the `body` CSS declaration in `base.css` to match what is below. This will set the page background to black. 35 | 36 | ``` 37 | body { 38 | background-color: black; 39 | } 40 | ``` 41 | 42 | 1. Open a pull request with `release-v1.0` as the `base` branch, and your new branch as the `compare` branch. 43 | 1. Fill in the pull request template to describe your changes. 44 | 1. Click **Create pull request**. 45 | 46 | ### Merge the new feature to the release branch 47 | 48 | Even with releases, the GitHub flow is still an important strategy for working with your team. It's a good idea to use short-lived branches for quick feature additions and bug fixes. 49 | 50 | Merge this feature pull request so that you can open the release pull request as early as possible. 51 | 52 | ### :keyboard: Activity: Merge the pull request 53 | 54 | 1. Click **Merge pull request**, and delete your branch. 55 | 1. Wait about 20 seconds then refresh this page (the one you're following instructions from). [GitHub Actions](https://docs.github.com/en/actions) will automatically update to the next step. 56 | -------------------------------------------------------------------------------- /.github/steps/3-release-pr-opened.md: -------------------------------------------------------------------------------- 1 | 6 | 7 | ## Step 3: Open a release pull request 8 | 9 | _Nice work adding a new feature :smile:_ 10 | 11 | ### Release branches and `main` 12 | 13 | You should open a pull request between your release branch and main as early as possible. It might be open for a long time, and that's okay. 14 | 15 | In general, the pull request description can include: 16 | 17 | - A [reference to an issue](https://docs.github.com/en/articles/basic-writing-and-formatting-syntax/#mentioning-people-and-teams) that the pull request addresses. 18 | - A description of the changes proposed in the pull request. 19 | - [@mentions](https://docs.github.com/en/articles/basic-writing-and-formatting-syntax/#mentioning-people-and-teams) of the person or team responsible for reviewing proposed changes. 20 | 21 | To expedite the creation of this pull request, I've added a pull request template to the repository. When you create a pull request, default text will automatically be displayed. This should help you identify and fill out all the necessary information. If you don't want to use the template content, just remove the text from the pull request and replace it with your pull request message. 22 | 23 | ### :keyboard: Activity: Open a release pull request 24 | 25 | Let's make a new pull request comparing the `release-v1.0` branch to the `main` branch. 26 | 27 | 1. Open a **new pull request** with `base: main` and `compare: release-v1.0`. 28 | 1. Ensure the title of your pull request is "Release v1.0". 29 | 1. Include a detailed pull request body, an example is below: 30 | ``` 31 | ## Description: 32 | - Changed page background color to black. 33 | - Changed game text color to green. 34 | ``` 35 | 1. Click **Create pull request**. 36 | 1. Wait about 20 seconds then refresh this page (the one you're following instructions from). [GitHub Actions](https://docs.github.com/en/actions) will automatically update to the next step. 37 | -------------------------------------------------------------------------------- /.github/steps/4-release-notes-and-merge.md: -------------------------------------------------------------------------------- 1 | 6 | 7 | ## Step 4: Generate release notes and merge 8 | 9 | _Thanks for opening that pull request :dancer:_ 10 | 11 | ### Automatically generated release notes 12 | 13 | [Automatically generated release notes](https://docs.github.com/en/repositories/releasing-projects-on-github/automatically-generated-release-notes) provide an automated alternative to manually writing release notes for your GitHub releases. With automatically generated release notes, you can quickly generate an overview of the contents of a release. Automatically generated release notes include a list of merged pull requests, a list of contributors to the release, and a link to a full changelog. You can also customize your release notes once they are generated. 14 | 15 | ### :keyboard: Activity: Generate release notes 16 | 17 | 1. In a separate tab, go to the **Releases** page for this repository. 18 | - _Tip: To reach this page, click the **Code** tab at the top of your repository. Then, find the navigation bar below the repository description, and click the **Releases** heading link._ 19 | 1. Click the **Draft a new release** button. 20 | 1. In the field for _Tag version_, specify `v1.0.0`. 21 | 1. To the right of the tag dropdown, click the _Target_ dropddown and select the `release-v1.0` branch. 22 | - _Tip: This is temporary in order to generate release notes based on the changes in this branch._ 23 | 1. To the top right of the description text box, click **Generate release notes**. 24 | 1. Review the release notes in the text box and customize the content if desired. 25 | 1. Set the _Target_ branch back to the `main`, as this is the branch you want to create your tag on once the release branch is merged. 26 | 1. Click **Save draft**, as you will publish this release in the next step. 27 | 28 | You can now [merge](https://docs.github.com/en/get-started/quickstart/github-glossary#merge) your pull request! 29 | 30 | ### :keyboard: Activity: Merge into main 31 | 32 | 1. In a separate tab, go to the **Pull requests** page for this repository. 33 | 1. Open your **Release v1.0** pull request. 34 | 1. Click **Merge pull request**. 35 | 1. Wait about 20 seconds then refresh this page (the one you're following instructions from). [GitHub Actions](https://docs.github.com/en/actions) will automatically update to the next step. 36 | -------------------------------------------------------------------------------- /.github/steps/5-finalize-release.md: -------------------------------------------------------------------------------- 1 | 6 | 7 | ## Step 5: Finalize the release 8 | 9 | _Awesome work on the release notes :+1:_ 10 | 11 | ### Finalizing releases 12 | 13 | It's important to be aware of the information what will be visible in that release. In the pre-release, the version and commit messages are visible. 14 | 15 | ![image](https://user-images.githubusercontent.com/13326548/47883578-bdba7780-ddea-11e8-84b8-563e12f02ca6.png) 16 | 17 | ### Semantic versioning 18 | 19 | Semantic versioning is a formal convention for specifying compatibility. It uses a three-part version number: **major version**; **minor version**; and **patch**. Version numbers convey meaning about the underlying code and what has been modified. For example, versioning could be handled as follows: 20 | 21 | | Code status | Stage | Rule | Example version | 22 | | ------------------------------- | ------------- | ---------------------------------------------------------------------- | --------------- | 23 | | First release | New product | Start with 1.0.0 | 1.0.0 | 24 | | Backward compatible fix | Patch release | Increment the third digit | 1.0.1 | 25 | | Backward compatible new feature | Minor release | Increment the middle digit and reset the last digit to zero | 1.1.0 | 26 | | Breaking updates | Major release | Increment the first digit and reset the middle and last digits to zero | 2.0.0 | 27 | 28 | Check out this article on [Semantic versioning](https://semver.org/) to learn more. 29 | 30 | ### Finalize the release 31 | 32 | Now let's change our recently automated release from _draft_ to _latest release_. 33 | 34 | ### :keyboard: Activity: Finalize release 35 | 36 | 1. In a separate tab, go to the **Releases** page for this repository. 37 | - _Tip: To reach this page, click the **Code** tab at the top of your repository. Then, find the navigation bar below the repository description, and click the **Releases** heading link._ 38 | 1. Click the **Edit** button next to your draft release. 39 | 1. Ensure the _Target_ branch is set to `main`. 40 | 1. Click **Publish release**. 41 | 1. Wait about 20 seconds then refresh this page (the one you're following instructions from). [GitHub Actions](https://docs.github.com/en/actions) will automatically update to the next step. 42 | -------------------------------------------------------------------------------- /.github/steps/6-commit-hotfix.md: -------------------------------------------------------------------------------- 1 | 6 | 7 | ## Step 6: Commit a hotfix to the release 8 | 9 | _Almost there :heart:_ 10 | 11 | Notice that I didn't delete the branch? That's intentional. 12 | 13 | Sometimes mistakes can happen with releases, and we'll want to be able to correct them on the same branch. 14 | 15 | Now that your release is finalized, we have a confession to make. Somewhere in our recent update, I made a mistake and introduced a bug. Instead of changing the text colors to green, we changed the whole game background. 16 | 17 | _Tip: Sometimes GitHub Pages takes a few minutes to update. Your page might not immediately show the recent updates you've made._ 18 | 19 | ![image](https://user-images.githubusercontent.com/13326548/48045461-487dd800-e145-11e8-843c-b91a82213eb8.png) 20 | 21 | "Hotfixes", or a quick fix to address a bug in software, are a normal part of development. Oftentimes you'll see application updates whose only description is "bug fixes". 22 | 23 | When bugs come up after you release a version, you'll need to address them. We've already created a `hotfix-v1.0.1` and `fix-game-background` branches for you to start. 24 | 25 | We'll submit a hotfix by creating and merging the pull request. 26 | 27 | ### :keyboard: Activity: Create and merge the hotfix pull request 28 | 29 | 1. Open a pull request with `hotfix-v1.0.1` as the `base` branch, and `fix-game-background` as the `compare` branch. 30 | 1. Fill in the pull request template to describe your changes. You can set the pull request title to "Hotfix for broken game style". You can include a detailed pull request body, an example is below: 31 | ``` 32 | ## Description: 33 | - Fixed bug, set game background back to black 34 | ``` 35 | 1. Review the changes and click **Create pull request**. 36 | 1. We want to merge this into our hotfix branch now so click **Merge pull request**. 37 | 38 | Now we want these changes merged into `main` as well so let's create and merge a pull request with our hotfix to `main`. 39 | 40 | ### :keyboard: Activity: Create the release pull request 41 | 42 | 1. Open a pull request with `main` as the `base` branch, and `hotfix-v1.0.1` as the `compare` branch. 43 | 1. Ensure the title of your pull request is "Hotfix v1.0.1". 44 | 1. Include a detailed pull request body, an example is below: 45 | ``` 46 | ## Description: 47 | - Fixed bug introduced in last production release - set game background back to black 48 | ``` 49 | 1. Review the changes and click **Create pull request**. 50 | 1. Click **Merge pull request**. 51 | 1. Wait about 20 seconds then refresh this page (the one you're following instructions from). [GitHub Actions](https://docs.github.com/en/actions) will automatically update to the next step. 52 | -------------------------------------------------------------------------------- /.github/steps/7-create-hotfix-release.md: -------------------------------------------------------------------------------- 1 | 6 | 7 | ## Step 7: Create release v1.0.1 8 | 9 | _One last step to go!_ 10 | 11 | ### A final release 12 | 13 | You updated the source code, but users can't readily access your most recent changes. Prepare a new release, and distribute that release to the necessary channels. 14 | 15 | ### Create release v1.0.1 16 | 17 | With descriptive pull requests and auto generated release notes, you don't have to spend a lot of time working on your release draft. Follow the steps below to create your new release, generate the release notes, and publish. 18 | 19 | ### :keyboard: Activity: Complete release 20 | 21 | 1. In a separate tab, go to to the **Releases** page for this repository. 22 | - _Tip: To reach this page, click the **Code** tab at the top of your repository. Then, find the navigation bar below the repository description, and click the **Releases** heading link._ 23 | 1. Click the **Draft a new release** button. 24 | 1. Set the _Target_ branch to `main`. 25 | - _Tip: Practice your semantic version syntax. What should the tag and title for this release be?_ 26 | 1. To the top right of the description text box, click **Generate release notes**. 27 | 1. Review the release notes in the text box and customize the content if desired. 28 | 1. Click **Publish release**. 29 | 1. Wait about 20 seconds then refresh this page (the one you're following instructions from). [GitHub Actions](https://docs.github.com/en/actions) will automatically update to the next step. 30 | -------------------------------------------------------------------------------- /.github/steps/X-finish.md: -------------------------------------------------------------------------------- 1 | 5 | 6 | ## Finish 7 | 8 | celebrate 9 | 10 | ### Congratulations friend, you've completed this course! 11 | 12 | Here's a recap of all the tasks you've accomplished in your repository: 13 | 14 | - Create a beta release. 15 | - Add a new feature to the release branch. 16 | - Open a release pull request 17 | - Automate release notes. 18 | - Merge and finalize the release branch. 19 | - Commit a hotfix to the release. 20 | - Create release v1.0.1. 21 | 22 | ### What's next? 23 | 24 | - [We'd love to hear what you thought of this course](https://github.com/orgs/skills/discussions/categories/release-based-workflow). 25 | - [Take another GitHub Skills course](https://github.com/skills). 26 | - [Read the GitHub Getting Started docs](https://docs.github.com/en/get-started). 27 | - To find projects to contribute to, check out [GitHub Explore](https://github.com/explore). 28 | -------------------------------------------------------------------------------- /.github/workflows/0-welcome.yml: -------------------------------------------------------------------------------- 1 | name: Step 0, Welcome 2 | 3 | # This step triggers after the learner creates a new repository from the template. 4 | # This workflow updates from step 0 to step 1. 5 | 6 | # This will run every time we create push a commit to `main`. 7 | # Reference: https://docs.github.com/en/actions/learn-github-actions/events-that-trigger-workflows 8 | on: 9 | workflow_dispatch: 10 | push: 11 | branches: 12 | - main 13 | 14 | # Reference: https://docs.github.com/en/actions/security-guides/automatic-token-authentication 15 | permissions: 16 | contents: write 17 | pull-requests: write 18 | 19 | jobs: 20 | # Get the current step to only run the main job when the learner is on the same step. 21 | get_current_step: 22 | name: Check current step number 23 | runs-on: ubuntu-latest 24 | steps: 25 | - name: Checkout 26 | uses: actions/checkout@v4 27 | - id: get_step 28 | run: | 29 | echo "current_step=$(cat ./.github/steps/-step.txt)" >> $GITHUB_OUTPUT 30 | outputs: 31 | current_step: ${{ steps.get_step.outputs.current_step }} 32 | 33 | on_start: 34 | name: On start 35 | needs: get_current_step 36 | 37 | # We will only run this action when: 38 | # 1. This repository isn't the template repository. 39 | # 2. The step is currently 0. 40 | # Reference: https://docs.github.com/en/actions/learn-github-actions/contexts 41 | # Reference: https://docs.github.com/en/actions/learn-github-actions/expressions 42 | if: >- 43 | ${{ !github.event.repository.is_template 44 | && needs.get_current_step.outputs.current_step == 0 }} 45 | 46 | # We'll run Ubuntu for performance instead of Mac or Windows. 47 | runs-on: ubuntu-latest 48 | 49 | steps: 50 | # We'll need to check out the repository so that we can edit the README. 51 | - name: Checkout 52 | uses: actions/checkout@v4 53 | with: 54 | fetch-depth: 0 55 | 56 | # Create a release-v1.0 branch. 57 | - name: Initialize repository 58 | run: ./.github/script/initialize-repository.sh 59 | env: 60 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 61 | 62 | # Update README from step 0 to step 1. 63 | - name: Update to step 1 64 | uses: skills/action-update-step@v2 65 | with: 66 | token: ${{ secrets.GITHUB_TOKEN }} 67 | from_step: 0 68 | to_step: 1 69 | -------------------------------------------------------------------------------- /.github/workflows/1-create-beta-release.yml: -------------------------------------------------------------------------------- 1 | name: Step 1, Create a beta release 2 | 3 | # This step triggers after 0-start.yml. 4 | # This workflow updates from step 1 to step 2. 5 | 6 | # This will run when a release is published. 7 | # Reference: https://docs.github.com/en/actions/learn-github-actions/events-that-trigger-workflows 8 | on: 9 | workflow_dispatch: 10 | release: 11 | types: [published] 12 | 13 | # Reference: https://docs.github.com/en/actions/security-guides/automatic-token-authentication 14 | permissions: 15 | contents: write 16 | 17 | jobs: 18 | # Get the current step to only run the main job when the learner is on the same step. 19 | get_current_step: 20 | name: Check current step number 21 | runs-on: ubuntu-latest 22 | steps: 23 | - name: Checkout 24 | uses: actions/checkout@v4 25 | - id: get_step 26 | run: | 27 | echo "current_step=$(cat ./.github/steps/-step.txt)" >> $GITHUB_OUTPUT 28 | outputs: 29 | current_step: ${{ steps.get_step.outputs.current_step }} 30 | 31 | on_beta_release_created: 32 | name: On beta release created 33 | needs: get_current_step 34 | 35 | # We will only run this action when: 36 | # 1. This repository isn't the template repository. 37 | # 2. The step is currently 1. 38 | # 3. The tag for the published release is v0.9. 39 | # Reference: https://docs.github.com/en/actions/learn-github-actions/contexts 40 | # Reference: https://docs.github.com/en/actions/learn-github-actions/expressions 41 | if: >- 42 | ${{ !github.event.repository.is_template 43 | && needs.get_current_step.outputs.current_step == 1 44 | && github.ref_name == 'v0.9' }} 45 | 46 | # We'll run Ubuntu for performance instead of Mac or Windows. 47 | runs-on: ubuntu-latest 48 | 49 | steps: 50 | # We'll need to check out the repository so that we can edit the README. 51 | - name: Checkout 52 | uses: actions/checkout@v4 53 | with: 54 | fetch-depth: 0 55 | 56 | # Update README to from step 1 to step 2. 57 | - name: Update to step 2 58 | uses: skills/action-update-step@v2 59 | with: 60 | token: ${{ secrets.GITHUB_TOKEN }} 61 | from_step: 1 62 | to_step: 2 63 | -------------------------------------------------------------------------------- /.github/workflows/2-feature-added-to-release.yml: -------------------------------------------------------------------------------- 1 | name: Step 2, Add feature to release branch 2 | 3 | # This step triggers after 1-create-beta-release.yml. 4 | # This workflow updates from step 2 to step 3. 5 | 6 | # This will run when a change to base.css is pushed to the main branch. 7 | # Reference: https://docs.github.com/en/actions/learn-github-actions/events-that-trigger-workflows 8 | on: 9 | workflow_dispatch: 10 | push: 11 | branches: 12 | - release-v1.0 13 | paths: 14 | - "base.css" 15 | 16 | permissions: 17 | contents: write 18 | 19 | jobs: 20 | # Get the current step to only run the main job when the learner is on the same step. 21 | get_current_step: 22 | name: Check current step number 23 | runs-on: ubuntu-latest 24 | steps: 25 | - name: Checkout 26 | uses: actions/checkout@v4 27 | - id: get_step 28 | run: | 29 | echo "current_step=$(cat ./.github/steps/-step.txt)" >> $GITHUB_OUTPUT 30 | outputs: 31 | current_step: ${{ steps.get_step.outputs.current_step }} 32 | 33 | on_feature_added: 34 | name: On feature added 35 | needs: get_current_step 36 | 37 | # We will only run this action when: 38 | # 1. This repository isn't the template repository. 39 | # 2. The step is currently 2. 40 | # Reference: https://docs.github.com/en/actions/learn-github-actions/contexts 41 | # Reference: https://docs.github.com/en/actions/learn-github-actions/expressions 42 | if: >- 43 | ${{ !github.event.repository.is_template 44 | && needs.get_current_step.outputs.current_step == 2 }} 45 | 46 | # We'll run Ubuntu for performance instead of Mac or Windows. 47 | runs-on: ubuntu-latest 48 | 49 | steps: 50 | # We'll need to check out the repository so that we can edit the README. 51 | - name: Checkout 52 | uses: actions/checkout@v4 53 | with: 54 | fetch-depth: 0 55 | 56 | # Update README from step 2 to step 3. 57 | - name: Update to step 3 58 | uses: skills/action-update-step@v2 59 | with: 60 | token: ${{ secrets.GITHUB_TOKEN }} 61 | from_step: 2 62 | to_step: 3 63 | -------------------------------------------------------------------------------- /.github/workflows/3-release-pr-opened.yml: -------------------------------------------------------------------------------- 1 | name: Step 3, Release pull request opened 2 | 3 | # This step triggers after 2-feature-added-to-release.yml. 4 | # This workflow updates from step 3 to step 4. 5 | 6 | # This will run every time a pull request is opened to main. 7 | # Reference: https://docs.github.com/en/actions/learn-github-actions/events-that-trigger-workflows 8 | on: 9 | workflow_dispatch: 10 | pull_request: 11 | types: [opened] 12 | branches: [main] 13 | 14 | permissions: 15 | contents: write 16 | 17 | jobs: 18 | # Get the current step to only run the main job when the learner is on the same step. 19 | get_current_step: 20 | name: Check current step number 21 | runs-on: ubuntu-latest 22 | steps: 23 | - name: Checkout 24 | uses: actions/checkout@v4 25 | - id: get_step 26 | run: | 27 | echo "current_step=$(cat ./.github/steps/-step.txt)" >> $GITHUB_OUTPUT 28 | outputs: 29 | current_step: ${{ steps.get_step.outputs.current_step }} 30 | 31 | on_release_pr_opened: 32 | name: On release pull request opened 33 | needs: get_current_step 34 | 35 | # We will only run this action when: 36 | # 1. This repository isn't the template repository. 37 | # 2. The step is currently 3. 38 | # 3. The pull request head branch is 'release-v1.0' 39 | # Reference: https://docs.github.com/en/actions/learn-github-actions/contexts 40 | # Reference: https://docs.github.com/en/actions/learn-github-actions/expressions 41 | if: >- 42 | ${{ !github.event.repository.is_template 43 | && needs.get_current_step.outputs.current_step == 3 44 | && github.head_ref == 'release-v1.0' }} 45 | 46 | # We'll run Ubuntu for performance instead of Mac or Windows. 47 | runs-on: ubuntu-latest 48 | 49 | steps: 50 | # We'll need to check out the repository so that we can edit the README. 51 | - name: Checkout 52 | uses: actions/checkout@v4 53 | with: 54 | fetch-depth: 0 55 | 56 | # Update README from step 3 to step 4. 57 | - name: Update to step 4 58 | uses: skills/action-update-step@v2 59 | with: 60 | token: ${{ secrets.GITHUB_TOKEN }} 61 | from_step: 3 62 | to_step: 4 63 | -------------------------------------------------------------------------------- /.github/workflows/4-release-notes-and-merge.yml: -------------------------------------------------------------------------------- 1 | name: Step 4, Generate release notes and merge 2 | 3 | # This step triggers after 3-release-pr-opened.yml. 4 | # This workflow updates from step 4 to step 5. 5 | 6 | # This will run when a pull request to main is closed (merged). 7 | # Reference: https://docs.github.com/en/actions/learn-github-actions/events-that-trigger-workflows 8 | on: 9 | workflow_dispatch: 10 | pull_request: 11 | types: 12 | - closed 13 | branches: 14 | - main 15 | 16 | # Reference: https://docs.github.com/en/actions/security-guides/automatic-token-authentication 17 | permissions: 18 | contents: write 19 | 20 | jobs: 21 | # Get the current step to only run the main job when the learner is on the same step. 22 | get_current_step: 23 | name: Check current step number 24 | runs-on: ubuntu-latest 25 | steps: 26 | - name: Checkout 27 | uses: actions/checkout@v4 28 | - id: get_step 29 | run: | 30 | echo "current_step=$(cat ./.github/steps/-step.txt)" >> $GITHUB_OUTPUT 31 | outputs: 32 | current_step: ${{ steps.get_step.outputs.current_step }} 33 | 34 | on_release_merged: 35 | name: On release-v1.0 merged 36 | needs: get_current_step 37 | 38 | # We will only run this action when: 39 | # 1. This repository isn't the template repository. 40 | # 2. The step is currently 4. 41 | # 3. The pull request was closed through a merge. 42 | # 4. The pull request head branch is release-v1.0. 43 | # Reference: https://docs.github.com/en/actions/learn-github-actions/contexts 44 | # Reference: https://docs.github.com/en/actions/learn-github-actions/expressions 45 | if: >- 46 | ${{ !github.event.repository.is_template 47 | && needs.get_current_step.outputs.current_step == 4 48 | && github.event.pull_request.merged == true 49 | && github.head_ref == 'release-v1.0' }} 50 | 51 | # We'll run Ubuntu for performance instead of Mac or Windows. 52 | runs-on: ubuntu-latest 53 | 54 | steps: 55 | # We'll need to check out the repository so that we can edit the README. 56 | - name: Checkout 57 | uses: actions/checkout@v4 58 | with: 59 | fetch-depth: 0 60 | 61 | # Update README from step 4 to step 5. 62 | - name: Update to step 5 63 | uses: skills/action-update-step@v2 64 | with: 65 | token: ${{ secrets.GITHUB_TOKEN }} 66 | from_step: 4 67 | to_step: 5 68 | -------------------------------------------------------------------------------- /.github/workflows/5-finalize-release.yml: -------------------------------------------------------------------------------- 1 | name: Step 5, Commit hotfix 2 | 3 | # This step triggers after 4-release-notes-and-merge.yml. 4 | # This workflow updates from step 1 to step 2. 5 | 6 | # This will run when a release is published. 7 | # Reference: https://docs.github.com/en/actions/learn-github-actions/events-that-trigger-workflows 8 | on: 9 | workflow_dispatch: 10 | release: 11 | types: [published] 12 | 13 | # Reference: https://docs.github.com/en/actions/security-guides/automatic-token-authentication 14 | permissions: 15 | contents: write 16 | pull-requests: write 17 | 18 | jobs: 19 | # Get the current step to only run the main job when the learner is on the same step. 20 | get_current_step: 21 | name: Check current step number 22 | runs-on: ubuntu-latest 23 | steps: 24 | - name: Checkout 25 | uses: actions/checkout@v4 26 | - id: get_step 27 | run: | 28 | echo "current_step=$(cat ./.github/steps/-step.txt)" >> $GITHUB_OUTPUT 29 | outputs: 30 | current_step: ${{ steps.get_step.outputs.current_step }} 31 | 32 | on_release_published: 33 | name: On release v1.0 published 34 | needs: get_current_step 35 | 36 | # We will only run this action when: 37 | # 1. This repository isn't the template repository. 38 | # 2. The step is currently 5. 39 | # 3. The tag for the published release is v1.0.0. 40 | # Reference: https://docs.github.com/en/actions/learn-github-actions/contexts 41 | # Reference: https://docs.github.com/en/actions/learn-github-actions/expressions 42 | if: >- 43 | ${{ !github.event.repository.is_template 44 | && needs.get_current_step.outputs.current_step == 5 45 | && github.ref_name == 'v1.0.0' }} 46 | 47 | # We'll run Ubuntu for performance instead of Mac or Windows. 48 | runs-on: ubuntu-latest 49 | 50 | steps: 51 | # We'll need to check out the repository so that we can edit the README. 52 | - name: Checkout 53 | uses: actions/checkout@v4 54 | with: 55 | fetch-depth: 0 56 | 57 | # Create a release-v1.0.1 hotfix branch. 58 | - name: Create hotfix branch 59 | run: ./.github/script/create-hotfix-pr.sh 60 | env: 61 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 62 | 63 | # Update README from step 5 to step 6. 64 | - name: Update to step 6 65 | uses: skills/action-update-step@v2 66 | with: 67 | token: ${{ secrets.GITHUB_TOKEN }} 68 | from_step: 5 69 | to_step: 6 70 | -------------------------------------------------------------------------------- /.github/workflows/6-commit-hotfix.yml: -------------------------------------------------------------------------------- 1 | name: Step 6, Commit hotfix 2 | 3 | # This step triggers after 5-finalize-release.yml. 4 | # This workflow updates from step 6 to step 7. 5 | 6 | # This will run when a pull request to main is closed (merged). 7 | # Reference: https://docs.github.com/en/actions/learn-github-actions/events-that-trigger-workflows 8 | on: 9 | workflow_dispatch: 10 | pull_request: 11 | types: 12 | - closed 13 | branches: 14 | - main 15 | 16 | # Reference: https://docs.github.com/en/actions/security-guides/automatic-token-authentication 17 | permissions: 18 | contents: write 19 | 20 | jobs: 21 | # Get the current step to only run the main job when the learner is on the same step. 22 | get_current_step: 23 | name: Check current step number 24 | runs-on: ubuntu-latest 25 | steps: 26 | - name: Checkout 27 | uses: actions/checkout@v4 28 | - id: get_step 29 | run: | 30 | echo "current_step=$(cat ./.github/steps/-step.txt)" >> $GITHUB_OUTPUT 31 | outputs: 32 | current_step: ${{ steps.get_step.outputs.current_step }} 33 | 34 | on_hotfix_merged: 35 | name: On hotfix-v1.0.1 merged 36 | needs: get_current_step 37 | 38 | # We will only run this action when: 39 | # 1. This repository isn't the template repository. 40 | # 2. The step is currently 6. 41 | # 3. The pull request was closed through a merge. 42 | # 4. The pull request head branch is hotfix-v1.0.1. 43 | # Reference: https://docs.github.com/en/actions/learn-github-actions/contexts 44 | # Reference: https://docs.github.com/en/actions/learn-github-actions/expressions 45 | if: >- 46 | ${{ !github.event.repository.is_template 47 | && needs.get_current_step.outputs.current_step == 6 48 | && github.event.pull_request.merged == true 49 | && github.head_ref == 'hotfix-v1.0.1' }} 50 | 51 | # We'll run Ubuntu for performance instead of Mac or Windows. 52 | runs-on: ubuntu-latest 53 | 54 | steps: 55 | # We'll need to check out the repository so that we can edit the README. 56 | - name: Checkout 57 | uses: actions/checkout@v4 58 | with: 59 | fetch-depth: 0 60 | 61 | # Update README from step 6 to step 7. 62 | - name: Update to step 7 63 | uses: skills/action-update-step@v2 64 | with: 65 | token: ${{ secrets.GITHUB_TOKEN }} 66 | from_step: 6 67 | to_step: 7 68 | -------------------------------------------------------------------------------- /.github/workflows/7-create-hotfix-release.yml: -------------------------------------------------------------------------------- 1 | name: Step 7, Create release v1.0.1 2 | 3 | # This step triggers after 6-commit-hotfix.yml. 4 | # This workflow updates from step 7 to step X. 5 | 6 | # This will run when a release is published. 7 | # Reference: https://docs.github.com/en/actions/learn-github-actions/events-that-trigger-workflows 8 | on: 9 | workflow_dispatch: 10 | release: 11 | types: [published] 12 | 13 | # Reference: https://docs.github.com/en/actions/security-guides/automatic-token-authentication 14 | permissions: 15 | contents: write 16 | 17 | jobs: 18 | # Get the current step to only run the main job when the learner is on the same step. 19 | get_current_step: 20 | name: Check current step number 21 | runs-on: ubuntu-latest 22 | steps: 23 | - name: Checkout 24 | uses: actions/checkout@v4 25 | - id: get_step 26 | run: | 27 | echo "current_step=$(cat ./.github/steps/-step.txt)" >> $GITHUB_OUTPUT 28 | outputs: 29 | current_step: ${{ steps.get_step.outputs.current_step }} 30 | 31 | on_hotfix_release_published: 32 | name: On hotfix release v1.0.1 published 33 | needs: get_current_step 34 | 35 | # We will only run this action when: 36 | # 1. This repository isn't the template repository. 37 | # 2. The step is currently 7. 38 | # 3. The tag for the published release is v1.0.1 39 | # Reference: https://docs.github.com/en/actions/learn-github-actions/contexts 40 | # Reference: https://docs.github.com/en/actions/learn-github-actions/expressions 41 | if: >- 42 | ${{ !github.event.repository.is_template 43 | && needs.get_current_step.outputs.current_step == 7 44 | && github.ref_name == 'v1.0.1' }} 45 | 46 | # We'll run Ubuntu for performance instead of Mac or Windows. 47 | runs-on: ubuntu-latest 48 | 49 | steps: 50 | # We'll need to check out the repository so that we can edit the README. 51 | - name: Checkout 52 | uses: actions/checkout@v4 53 | with: 54 | fetch-depth: 0 55 | 56 | # Update README from step 7 to step X. 57 | - name: Update to finish 58 | uses: skills/action-update-step@v2 59 | with: 60 | token: ${{ secrets.GITHUB_TOKEN }} 61 | from_step: 7 62 | to_step: X 63 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Compiled source # 2 | ################### 3 | *.com 4 | *.class 5 | *.dll 6 | *.exe 7 | *.o 8 | *.so 9 | 10 | # Packages # 11 | ############ 12 | # it's better to unpack these files and commit the raw source 13 | # git has its own built in compression methods 14 | *.7z 15 | *.dmg 16 | *.gz 17 | *.iso 18 | *.jar 19 | *.rar 20 | *.tar 21 | *.zip 22 | 23 | # Logs and databases # 24 | ###################### 25 | *.log 26 | *.sql 27 | *.sqlite 28 | 29 | # OS generated files # 30 | ###################### 31 | .DS_Store 32 | .DS_Store? 33 | ._* 34 | .Spotlight-V100 35 | .Trashes 36 | ehthumbs.db 37 | Thumbs.db 38 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) GitHub, Inc. 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 4 | 5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 6 | 7 | THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 8 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |
2 | 3 | 11 | 12 | # Create a release based workflow 13 | 14 | _Create a release based workflow that is built on the foundations of the GitHub flow._ 15 | 16 |
17 | 18 | 23 | 24 | ## Welcome 25 | 26 | Create a release based workflow that is built on the foundations of the [GitHub flow](https://guides.github.com/introduction/flow/). When your team uses a release-based workflow, GitHub makes it easy to collaborate with deployable iterations of your project that you can package and make available for a wider audience to download and use. 27 | 28 | GitHub releases allow your team to package and provide software to your users based on a specific point in the history of your project. 29 | 30 | - **Who is this for**: Developers, DevOps Engineers, IT Operations, managers, and teams. 31 | - **What you'll learn**: How to follow a release-based workflow. 32 | - **What you'll build**: You will create tags, releases, and release notes. 33 | - **Prerequisites**: If you need to learn about branches, commits, and pull requests, take [Introduction to GitHub](https://github.com/skills/introduction-to-github) first. 34 | - **How long**: This course takes less than 1 hour to complete. 35 | 36 | In this course, you will: 37 | 38 | 1. Create a beta release 39 | 2. Add a feature to a release 40 | 3. Open a release pull request 41 | 4. Add release notes and merge 42 | 5. Finalize a release 43 | 6. Commit a hotfix 44 | 7. Create a hotfix release 45 | 46 | ### How to start this course 47 | 48 | 58 | 59 | [![start-course](https://user-images.githubusercontent.com/1221423/235727646-4a590299-ffe5-480d-8cd5-8194ea184546.svg)](https://github.com/new?template_owner=skills&template_name=release-based-workflow&owner=%40me&name=skills-release-based-workflow&description=My+clone+repository&visibility=public) 60 | 61 | 1. Right-click **Start course** and open the link in a new tab. 62 | 2. In the new tab, most of the prompts will automatically fill in for you. 63 | - For owner, choose your personal account or an organization to host the repository. 64 | - We recommend creating a public repository, as private repositories will [use Actions minutes](https://docs.github.com/en/billing/managing-billing-for-github-actions/about-billing-for-github-actions). 65 | - Scroll down and click the **Create repository** button at the bottom of the form. 66 | 3. After your new repository is created, wait about 20 seconds, then refresh the page. Follow the step-by-step instructions in the new repository's README. 67 | 68 | 82 | -------------------------------------------------------------------------------- /base.css: -------------------------------------------------------------------------------- 1 | /* http://meyerweb.com/eric/tools/css/reset/ 2 | v2.0 | 20110126 3 | License: none (public domain) 4 | */ 5 | 6 | html, 7 | body, 8 | div, 9 | span, 10 | applet, 11 | object, 12 | iframe, 13 | h1, 14 | h2, 15 | h3, 16 | h4, 17 | h5, 18 | h6, 19 | p, 20 | blockquote, 21 | pre, 22 | a, 23 | abbr, 24 | acronym, 25 | address, 26 | big, 27 | cite, 28 | code, 29 | del, 30 | dfn, 31 | em, 32 | img, 33 | ins, 34 | kbd, 35 | q, 36 | s, 37 | samp, 38 | small, 39 | strike, 40 | strong, 41 | sub, 42 | sup, 43 | tt, 44 | var, 45 | b, 46 | u, 47 | i, 48 | center, 49 | dl, 50 | dt, 51 | dd, 52 | ol, 53 | ul, 54 | li, 55 | fieldset, 56 | form, 57 | label, 58 | legend, 59 | table, 60 | caption, 61 | tbody, 62 | tfoot, 63 | thead, 64 | tr, 65 | th, 66 | td, 67 | article, 68 | aside, 69 | canvas, 70 | details, 71 | embed, 72 | figure, 73 | figcaption, 74 | footer, 75 | header, 76 | hgroup, 77 | menu, 78 | nav, 79 | output, 80 | ruby, 81 | section, 82 | summary, 83 | time, 84 | mark, 85 | audio, 86 | video { 87 | margin: 0; 88 | padding: 0; 89 | border: 0; 90 | font-size: 100%; 91 | font: inherit; 92 | vertical-align: baseline; 93 | } 94 | /* HTML5 display-role reset for older browsers */ 95 | article, 96 | aside, 97 | details, 98 | figcaption, 99 | figure, 100 | footer, 101 | header, 102 | hgroup, 103 | menu, 104 | nav, 105 | section { 106 | display: block; 107 | } 108 | body { 109 | /* Add background-color declaration here */ 110 | } 111 | ol, 112 | ul { 113 | list-style: none; 114 | } 115 | blockquote, 116 | q { 117 | quotes: none; 118 | } 119 | blockquote:before, 120 | blockquote:after, 121 | q:before, 122 | q:after { 123 | content: ""; 124 | content: none; 125 | } 126 | table { 127 | border-collapse: collapse; 128 | border-spacing: 0; 129 | } 130 | 131 | /* Center the container */ 132 | #container { 133 | padding-top: 50px; 134 | margin: 0 auto; 135 | width: 480px; 136 | } 137 | 138 | /* Give canvas a background */ 139 | canvas { 140 | background-color: black; 141 | } 142 | -------------------------------------------------------------------------------- /engine.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | var lastTime = 0; 3 | var vendors = ["ms", "moz", "webkit", "o"]; 4 | for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { 5 | window.requestAnimationFrame = window[vendors[x] + "RequestAnimationFrame"]; 6 | window.cancelAnimationFrame = 7 | window[vendors[x] + "CancelAnimationFrame"] || 8 | window[vendors[x] + "CancelRequestAnimationFrame"]; 9 | } 10 | 11 | if (!window.requestAnimationFrame) 12 | window.requestAnimationFrame = function (callback, element) { 13 | var currTime = new Date().getTime(); 14 | var timeToCall = Math.max(0, 16 - (currTime - lastTime)); 15 | var id = window.setTimeout(function () { 16 | callback(currTime + timeToCall); 17 | }, timeToCall); 18 | lastTime = currTime + timeToCall; 19 | return id; 20 | }; 21 | 22 | if (!window.cancelAnimationFrame) 23 | window.cancelAnimationFrame = function (id) { 24 | clearTimeout(id); 25 | }; 26 | })(); 27 | 28 | var Game = new (function () { 29 | var boards = []; 30 | 31 | // Game Initialization 32 | this.initialize = function (canvasElementId, sprite_data, callback) { 33 | this.canvas = document.getElementById(canvasElementId); 34 | 35 | this.playerOffset = 10; 36 | this.canvasMultiplier = 1; 37 | this.setupMobile(); 38 | 39 | this.width = this.canvas.width; 40 | this.height = this.canvas.height; 41 | 42 | this.ctx = this.canvas.getContext && this.canvas.getContext("2d"); 43 | if (!this.ctx) { 44 | return alert("Please upgrade your browser to play"); 45 | } 46 | 47 | this.setupInput(); 48 | 49 | this.loop(); 50 | 51 | if (this.mobile) { 52 | this.setBoard(4, new TouchControls()); 53 | } 54 | 55 | SpriteSheet.load(sprite_data, callback); 56 | }; 57 | 58 | // Handle Input 59 | var KEY_CODES = { 37: "left", 39: "right", 32: "fire" }; 60 | this.keys = {}; 61 | 62 | this.setupInput = function () { 63 | window.addEventListener( 64 | "keydown", 65 | function (e) { 66 | if (KEY_CODES[e.keyCode]) { 67 | Game.keys[KEY_CODES[e.keyCode]] = true; 68 | e.preventDefault(); 69 | } 70 | }, 71 | false 72 | ); 73 | 74 | window.addEventListener( 75 | "keyup", 76 | function (e) { 77 | if (KEY_CODES[e.keyCode]) { 78 | Game.keys[KEY_CODES[e.keyCode]] = false; 79 | e.preventDefault(); 80 | } 81 | }, 82 | false 83 | ); 84 | }; 85 | 86 | var lastTime = new Date().getTime(); 87 | var maxTime = 1 / 30; 88 | // Game Loop 89 | this.loop = function () { 90 | var curTime = new Date().getTime(); 91 | requestAnimationFrame(Game.loop); 92 | var dt = (curTime - lastTime) / 1000; 93 | if (dt > maxTime) { 94 | dt = maxTime; 95 | } 96 | 97 | for (var i = 0, len = boards.length; i < len; i++) { 98 | if (boards[i]) { 99 | boards[i].step(dt); 100 | boards[i].draw(Game.ctx); 101 | } 102 | } 103 | lastTime = curTime; 104 | }; 105 | 106 | // Change an active game board 107 | this.setBoard = function (num, board) { 108 | boards[num] = board; 109 | }; 110 | 111 | this.setupMobile = function () { 112 | var container = document.getElementById("container"), 113 | hasTouch = !!("ontouchstart" in window), 114 | w = window.innerWidth, 115 | h = window.innerHeight; 116 | 117 | if (hasTouch) { 118 | this.mobile = true; 119 | } 120 | 121 | if (screen.width >= 1280 || !hasTouch) { 122 | return false; 123 | } 124 | 125 | if (w > h) { 126 | alert("Please rotate the device and then click OK"); 127 | w = window.innerWidth; 128 | h = window.innerHeight; 129 | } 130 | 131 | container.style.height = h * 2 + "px"; 132 | window.scrollTo(0, 1); 133 | 134 | h = window.innerHeight + 2; 135 | container.style.height = h + "px"; 136 | container.style.width = w + "px"; 137 | container.style.padding = 0; 138 | 139 | if (h >= this.canvas.height * 1.75 || w >= this.canvas.height * 1.75) { 140 | this.canvasMultiplier = 2; 141 | this.canvas.width = w / 2; 142 | this.canvas.height = h / 2; 143 | this.canvas.style.width = w + "px"; 144 | this.canvas.style.height = h + "px"; 145 | } else { 146 | this.canvas.width = w; 147 | this.canvas.height = h; 148 | } 149 | 150 | this.canvas.style.position = "absolute"; 151 | this.canvas.style.left = "0px"; 152 | this.canvas.style.top = "0px"; 153 | }; 154 | })(); 155 | 156 | var SpriteSheet = new (function () { 157 | this.map = {}; 158 | 159 | this.load = function (spriteData, callback) { 160 | this.map = spriteData; 161 | this.image = new Image(); 162 | this.image.onload = callback; 163 | this.image.src = "images/sprites.png"; 164 | }; 165 | 166 | this.draw = function (ctx, sprite, x, y, frame) { 167 | var s = this.map[sprite]; 168 | if (!frame) frame = 0; 169 | ctx.drawImage( 170 | this.image, 171 | s.sx + frame * s.w, 172 | s.sy, 173 | s.w, 174 | s.h, 175 | Math.floor(x), 176 | Math.floor(y), 177 | s.w, 178 | s.h 179 | ); 180 | }; 181 | 182 | return this; 183 | })(); 184 | 185 | var TitleScreen = function TitleScreen(title, subtitle, callback) { 186 | var up = false; 187 | this.step = function (dt) { 188 | if (!Game.keys["fire"]) up = true; 189 | if (up && Game.keys["fire"] && callback) callback(); 190 | }; 191 | 192 | this.draw = function (ctx) { 193 | ctx.fillStyle = "#FFFFFF"; 194 | 195 | ctx.font = "bold 40px bangers"; 196 | var measure = ctx.measureText(title); 197 | ctx.fillText(title, Game.width / 2 - measure.width / 2, Game.height / 2); 198 | 199 | ctx.font = "bold 20px bangers"; 200 | var measure2 = ctx.measureText(subtitle); 201 | ctx.fillText( 202 | subtitle, 203 | Game.width / 2 - measure2.width / 2, 204 | Game.height / 2 + 40 205 | ); 206 | }; 207 | }; 208 | 209 | var GameBoard = function () { 210 | var board = this; 211 | 212 | // The current list of objects 213 | this.objects = []; 214 | this.cnt = {}; 215 | 216 | // Add a new object to the object list 217 | this.add = function (obj) { 218 | obj.board = this; 219 | this.objects.push(obj); 220 | this.cnt[obj.type] = (this.cnt[obj.type] || 0) + 1; 221 | return obj; 222 | }; 223 | 224 | // Mark an object for removal 225 | this.remove = function (obj) { 226 | var idx = this.removed.indexOf(obj); 227 | if (idx == -1) { 228 | this.removed.push(obj); 229 | return true; 230 | } else { 231 | return false; 232 | } 233 | }; 234 | 235 | // Reset the list of removed objects 236 | this.resetRemoved = function () { 237 | this.removed = []; 238 | }; 239 | 240 | // Removed an objects marked for removal from the list 241 | this.finalizeRemoved = function () { 242 | for (var i = 0, len = this.removed.length; i < len; i++) { 243 | var idx = this.objects.indexOf(this.removed[i]); 244 | if (idx != -1) { 245 | this.cnt[this.removed[i].type]--; 246 | this.objects.splice(idx, 1); 247 | } 248 | } 249 | }; 250 | 251 | // Call the same method on all current objects 252 | this.iterate = function (funcName) { 253 | var args = Array.prototype.slice.call(arguments, 1); 254 | for (var i = 0, len = this.objects.length; i < len; i++) { 255 | var obj = this.objects[i]; 256 | obj[funcName].apply(obj, args); 257 | } 258 | }; 259 | 260 | // Find the first object for which func is true 261 | this.detect = function (func) { 262 | for (var i = 0, val = null, len = this.objects.length; i < len; i++) { 263 | if (func.call(this.objects[i])) return this.objects[i]; 264 | } 265 | return false; 266 | }; 267 | 268 | // Call step on all objects and them delete 269 | // any object that have been marked for removal 270 | this.step = function (dt) { 271 | this.resetRemoved(); 272 | this.iterate("step", dt); 273 | this.finalizeRemoved(); 274 | }; 275 | 276 | // Draw all the objects 277 | this.draw = function (ctx) { 278 | this.iterate("draw", ctx); 279 | }; 280 | 281 | // Check for a collision between the 282 | // bounding rects of two objects 283 | this.overlap = function (o1, o2) { 284 | return !( 285 | o1.y + o1.h - 1 < o2.y || 286 | o1.y > o2.y + o2.h - 1 || 287 | o1.x + o1.w - 1 < o2.x || 288 | o1.x > o2.x + o2.w - 1 289 | ); 290 | }; 291 | 292 | // Find the first object that collides with obj 293 | // match against an optional type 294 | this.collide = function (obj, type) { 295 | return this.detect(function () { 296 | if (obj != this) { 297 | var col = (!type || this.type & type) && board.overlap(obj, this); 298 | return col ? this : false; 299 | } 300 | }); 301 | }; 302 | }; 303 | 304 | var Sprite = function () {}; 305 | 306 | Sprite.prototype.setup = function (sprite, props) { 307 | this.sprite = sprite; 308 | this.merge(props); 309 | this.frame = this.frame || 0; 310 | this.w = SpriteSheet.map[sprite].w; 311 | this.h = SpriteSheet.map[sprite].h; 312 | }; 313 | 314 | Sprite.prototype.merge = function (props) { 315 | if (props) { 316 | for (var prop in props) { 317 | this[prop] = props[prop]; 318 | } 319 | } 320 | }; 321 | 322 | Sprite.prototype.draw = function (ctx) { 323 | SpriteSheet.draw(ctx, this.sprite, this.x, this.y, this.frame); 324 | }; 325 | 326 | Sprite.prototype.hit = function (damage) { 327 | this.board.remove(this); 328 | }; 329 | 330 | var Level = function (levelData, callback) { 331 | this.levelData = []; 332 | for (var i = 0; i < levelData.length; i++) { 333 | this.levelData.push(Object.create(levelData[i])); 334 | } 335 | this.t = 0; 336 | this.callback = callback; 337 | }; 338 | 339 | Level.prototype.step = function (dt) { 340 | var idx = 0, 341 | remove = [], 342 | curShip = null; 343 | 344 | // Update the current time offset 345 | this.t += dt * 1000; 346 | 347 | // Start, End, Gap, Type, Override 348 | // [ 0, 4000, 500, 'step', { x: 100 } ] 349 | while ((curShip = this.levelData[idx]) && curShip[0] < this.t + 2000) { 350 | // Check if we've passed the end time 351 | if (this.t > curShip[1]) { 352 | remove.push(curShip); 353 | } else if (curShip[0] < this.t) { 354 | // Get the enemy definition blueprint 355 | var enemy = enemies[curShip[3]], 356 | override = curShip[4]; 357 | 358 | // Add a new enemy with the blueprint and override 359 | this.board.add(new Enemy(enemy, override)); 360 | 361 | // Increment the start time by the gap 362 | curShip[0] += curShip[2]; 363 | } 364 | idx++; 365 | } 366 | 367 | // Remove any objects from the levelData that have passed 368 | for (var i = 0, len = remove.length; i < len; i++) { 369 | var remIdx = this.levelData.indexOf(remove[i]); 370 | if (remIdx != -1) this.levelData.splice(remIdx, 1); 371 | } 372 | 373 | // If there are no more enemies on the board or in 374 | // levelData, this level is done 375 | if (this.levelData.length === 0 && this.board.cnt[OBJECT_ENEMY] === 0) { 376 | if (this.callback) this.callback(); 377 | } 378 | }; 379 | 380 | Level.prototype.draw = function (ctx) {}; 381 | 382 | var TouchControls = function () { 383 | var gutterWidth = 10; 384 | var unitWidth = Game.width / 5; 385 | var blockWidth = unitWidth - gutterWidth; 386 | 387 | this.drawSquare = function (ctx, x, y, txt, on) { 388 | ctx.globalAlpha = on ? 0.9 : 0.6; 389 | ctx.fillStyle = "#CCC"; 390 | ctx.fillRect(x, y, blockWidth, blockWidth); 391 | 392 | ctx.fillStyle = "#FFF"; 393 | ctx.globalAlpha = 1.0; 394 | ctx.font = "bold " + (3 * unitWidth) / 4 + "px arial"; 395 | 396 | var txtSize = ctx.measureText(txt); 397 | 398 | ctx.fillText( 399 | txt, 400 | x + blockWidth / 2 - txtSize.width / 2, 401 | y + (3 * blockWidth) / 4 + 5 402 | ); 403 | }; 404 | 405 | this.draw = function (ctx) { 406 | ctx.save(); 407 | 408 | var yLoc = Game.height - unitWidth; 409 | this.drawSquare(ctx, gutterWidth, yLoc, "\u25C0", Game.keys["left"]); 410 | this.drawSquare( 411 | ctx, 412 | unitWidth + gutterWidth, 413 | yLoc, 414 | "\u25B6", 415 | Game.keys["right"] 416 | ); 417 | this.drawSquare(ctx, 4 * unitWidth, yLoc, "A", Game.keys["fire"]); 418 | 419 | ctx.restore(); 420 | }; 421 | 422 | this.step = function (dt) {}; 423 | 424 | this.trackTouch = function (e) { 425 | var touch, x; 426 | 427 | e.preventDefault(); 428 | Game.keys["left"] = false; 429 | Game.keys["right"] = false; 430 | for (var i = 0; i < e.targetTouches.length; i++) { 431 | touch = e.targetTouches[i]; 432 | x = touch.pageX / Game.canvasMultiplier - Game.canvas.offsetLeft; 433 | if (x < unitWidth) { 434 | Game.keys["left"] = true; 435 | } 436 | if (x > unitWidth && x < 2 * unitWidth) { 437 | Game.keys["right"] = true; 438 | } 439 | } 440 | 441 | if (e.type == "touchstart" || e.type == "touchend") { 442 | for (i = 0; i < e.changedTouches.length; i++) { 443 | touch = e.changedTouches[i]; 444 | x = touch.pageX / Game.canvasMultiplier - Game.canvas.offsetLeft; 445 | if (x > 4 * unitWidth) { 446 | Game.keys["fire"] = e.type == "touchstart"; 447 | } 448 | } 449 | } 450 | }; 451 | 452 | Game.canvas.addEventListener("touchstart", this.trackTouch, true); 453 | Game.canvas.addEventListener("touchmove", this.trackTouch, true); 454 | Game.canvas.addEventListener("touchend", this.trackTouch, true); 455 | 456 | // For Android 457 | Game.canvas.addEventListener( 458 | "dblclick", 459 | function (e) { 460 | e.preventDefault(); 461 | }, 462 | true 463 | ); 464 | Game.canvas.addEventListener( 465 | "click", 466 | function (e) { 467 | e.preventDefault(); 468 | }, 469 | true 470 | ); 471 | 472 | Game.playerOffset = unitWidth + 20; 473 | }; 474 | 475 | var GamePoints = function () { 476 | Game.points = 0; 477 | 478 | var pointsLength = 8; 479 | 480 | this.draw = function (ctx) { 481 | ctx.save(); 482 | ctx.font = "bold 18px arial"; 483 | ctx.fillStyle = "#FFFFFF"; 484 | 485 | var txt = "" + Game.points; 486 | var i = pointsLength - txt.length, 487 | zeros = ""; 488 | while (i-- > 0) { 489 | zeros += "0"; 490 | } 491 | 492 | ctx.fillText(zeros + txt, 10, 20); 493 | ctx.restore(); 494 | }; 495 | 496 | this.step = function (dt) {}; 497 | }; 498 | -------------------------------------------------------------------------------- /game.js: -------------------------------------------------------------------------------- 1 | var sprites = { 2 | ship: { sx: 0, sy: 0, w: 37, h: 42, frames: 1 }, 3 | missile: { sx: 0, sy: 30, w: 2, h: 10, frames: 1 }, 4 | enemy_purple: { sx: 37, sy: 0, w: 42, h: 43, frames: 1 }, 5 | enemy_bee: { sx: 79, sy: 0, w: 37, h: 43, frames: 1 }, 6 | enemy_ship: { sx: 116, sy: 0, w: 42, h: 43, frames: 1 }, 7 | enemy_circle: { sx: 158, sy: 0, w: 32, h: 33, frames: 1 }, 8 | explosion: { sx: 0, sy: 64, w: 64, h: 64, frames: 12 }, 9 | enemy_missile: { sx: 9, sy: 42, w: 3, h: 20, frame: 1 }, 10 | }; 11 | 12 | var enemies = { 13 | straight: { x: 0, y: -50, sprite: "enemy_ship", health: 10, E: 100 }, 14 | ltr: { 15 | x: 0, 16 | y: -100, 17 | sprite: "enemy_purple", 18 | health: 10, 19 | B: 75, 20 | C: 1, 21 | E: 100, 22 | missiles: 2, 23 | }, 24 | circle: { 25 | x: 250, 26 | y: -50, 27 | sprite: "enemy_circle", 28 | health: 10, 29 | A: 0, 30 | B: -100, 31 | C: 1, 32 | E: 20, 33 | F: 100, 34 | G: 1, 35 | H: Math.PI / 2, 36 | }, 37 | wiggle: { 38 | x: 100, 39 | y: -50, 40 | sprite: "enemy_bee", 41 | health: 20, 42 | B: 50, 43 | C: 4, 44 | E: 100, 45 | firePercentage: 0.001, 46 | missiles: 2, 47 | }, 48 | step: { 49 | x: 0, 50 | y: -50, 51 | sprite: "enemy_circle", 52 | health: 10, 53 | B: 150, 54 | C: 1.2, 55 | E: 75, 56 | }, 57 | }; 58 | 59 | var OBJECT_PLAYER = 1, 60 | OBJECT_PLAYER_PROJECTILE = 2, 61 | OBJECT_ENEMY = 4, 62 | OBJECT_ENEMY_PROJECTILE = 8, 63 | OBJECT_POWERUP = 16; 64 | 65 | var startGame = function () { 66 | var ua = navigator.userAgent.toLowerCase(); 67 | 68 | // Only 1 row of stars 69 | if (ua.match(/android/)) { 70 | Game.setBoard(0, new Starfield(50, 0.6, 100, true)); 71 | } else { 72 | Game.setBoard(0, new Starfield(20, 0.4, 100, true)); 73 | Game.setBoard(1, new Starfield(50, 0.6, 100)); 74 | Game.setBoard(2, new Starfield(100, 1.0, 50)); 75 | } 76 | Game.setBoard( 77 | 3, 78 | new TitleScreen("Alien Invasion", "Press fire to start playing", playGame) 79 | ); 80 | }; 81 | 82 | var level1 = [ 83 | // Start, End, Gap, Type, Override 84 | [0, 4000, 500, "step"], 85 | [6000, 13000, 800, "ltr"], 86 | [10000, 16000, 400, "circle"], 87 | [17800, 20000, 500, "straight", { x: 50 }], 88 | [18200, 20000, 500, "straight", { x: 90 }], 89 | [18200, 20000, 500, "straight", { x: 10 }], 90 | [22000, 25000, 400, "wiggle", { x: 150 }], 91 | [22000, 25000, 400, "wiggle", { x: 100 }], 92 | ]; 93 | 94 | var playGame = function () { 95 | var board = new GameBoard(); 96 | board.add(new PlayerShip()); 97 | board.add(new Level(level1, winGame)); 98 | Game.setBoard(3, board); 99 | Game.setBoard(5, new GamePoints(0)); 100 | }; 101 | 102 | var winGame = function () { 103 | Game.setBoard( 104 | 3, 105 | new TitleScreen("You win!", "Press fire to play again", playGame) 106 | ); 107 | }; 108 | 109 | var loseGame = function () { 110 | Game.setBoard( 111 | 3, 112 | new TitleScreen("You lose!", "Press fire to play again", playGame) 113 | ); 114 | }; 115 | 116 | var Starfield = function (speed, opacity, numStars, clear) { 117 | // Set up the offscreen canvas 118 | var stars = document.createElement("canvas"); 119 | stars.width = Game.width; 120 | stars.height = Game.height; 121 | var starCtx = stars.getContext("2d"); 122 | 123 | var offset = 0; 124 | 125 | // If the clear option is set, 126 | // make the background black instead of transparent 127 | if (clear) { 128 | starCtx.fillStyle = "#000"; 129 | starCtx.fillRect(0, 0, stars.width, stars.height); 130 | } 131 | 132 | // Now draw a bunch of random 2 pixel 133 | // rectangles onto the offscreen canvas 134 | starCtx.fillStyle = "#FFF"; 135 | starCtx.globalAlpha = opacity; 136 | for (var i = 0; i < numStars; i++) { 137 | starCtx.fillRect( 138 | Math.floor(Math.random() * stars.width), 139 | Math.floor(Math.random() * stars.height), 140 | 2, 141 | 2 142 | ); 143 | } 144 | 145 | // This method is called every frame 146 | // to draw the starfield onto the canvas 147 | this.draw = function (ctx) { 148 | var intOffset = Math.floor(offset); 149 | var remaining = stars.height - intOffset; 150 | 151 | // Draw the top half of the starfield 152 | if (intOffset > 0) { 153 | ctx.drawImage( 154 | stars, 155 | 0, 156 | remaining, 157 | stars.width, 158 | intOffset, 159 | 0, 160 | 0, 161 | stars.width, 162 | intOffset 163 | ); 164 | } 165 | 166 | // Draw the bottom half of the starfield 167 | if (remaining > 0) { 168 | ctx.drawImage( 169 | stars, 170 | 0, 171 | 0, 172 | stars.width, 173 | remaining, 174 | 0, 175 | intOffset, 176 | stars.width, 177 | remaining 178 | ); 179 | } 180 | }; 181 | 182 | // This method is called to update 183 | // the starfield 184 | this.step = function (dt) { 185 | offset += dt * speed; 186 | offset = offset % stars.height; 187 | }; 188 | }; 189 | 190 | var PlayerShip = function () { 191 | this.setup("ship", { vx: 0, reloadTime: 0.25, maxVel: 200 }); 192 | 193 | this.reload = this.reloadTime; 194 | this.x = Game.width / 2 - this.w / 2; 195 | this.y = Game.height - Game.playerOffset - this.h; 196 | 197 | this.step = function (dt) { 198 | if (Game.keys["left"]) { 199 | this.vx = -this.maxVel; 200 | } else if (Game.keys["right"]) { 201 | this.vx = this.maxVel; 202 | } else { 203 | this.vx = 0; 204 | } 205 | 206 | this.x += this.vx * dt; 207 | 208 | if (this.x < 0) { 209 | this.x = 0; 210 | } else if (this.x > Game.width - this.w) { 211 | this.x = Game.width - this.w; 212 | } 213 | 214 | this.reload -= dt; 215 | if (Game.keys["fire"] && this.reload < 0) { 216 | Game.keys["fire"] = false; 217 | this.reload = this.reloadTime; 218 | 219 | this.board.add(new PlayerMissile(this.x, this.y + this.h / 2)); 220 | this.board.add(new PlayerMissile(this.x + this.w, this.y + this.h / 2)); 221 | } 222 | }; 223 | }; 224 | 225 | PlayerShip.prototype = new Sprite(); 226 | PlayerShip.prototype.type = OBJECT_PLAYER; 227 | 228 | PlayerShip.prototype.hit = function (damage) { 229 | if (this.board.remove(this)) { 230 | loseGame(); 231 | } 232 | }; 233 | 234 | var PlayerMissile = function (x, y) { 235 | this.setup("missile", { vy: -700, damage: 10 }); 236 | this.x = x - this.w / 2; 237 | this.y = y - this.h; 238 | }; 239 | 240 | PlayerMissile.prototype = new Sprite(); 241 | PlayerMissile.prototype.type = OBJECT_PLAYER_PROJECTILE; 242 | 243 | PlayerMissile.prototype.step = function (dt) { 244 | this.y += this.vy * dt; 245 | var collision = this.board.collide(this, OBJECT_ENEMY); 246 | if (collision) { 247 | collision.hit(this.damage); 248 | this.board.remove(this); 249 | } else if (this.y < -this.h) { 250 | this.board.remove(this); 251 | } 252 | }; 253 | 254 | var Enemy = function (blueprint, override) { 255 | this.merge(this.baseParameters); 256 | this.setup(blueprint.sprite, blueprint); 257 | this.merge(override); 258 | }; 259 | 260 | Enemy.prototype = new Sprite(); 261 | Enemy.prototype.type = OBJECT_ENEMY; 262 | 263 | Enemy.prototype.baseParameters = { 264 | A: 0, 265 | B: 0, 266 | C: 0, 267 | D: 0, 268 | E: 0, 269 | F: 0, 270 | G: 0, 271 | H: 0, 272 | t: 0, 273 | reloadTime: 0.75, 274 | reload: 0, 275 | }; 276 | 277 | Enemy.prototype.step = function (dt) { 278 | this.t += dt; 279 | 280 | this.vx = this.A + this.B * Math.sin(this.C * this.t + this.D); 281 | this.vy = this.E + this.F * Math.sin(this.G * this.t + this.H); 282 | 283 | this.x += this.vx * dt; 284 | this.y += this.vy * dt; 285 | 286 | var collision = this.board.collide(this, OBJECT_PLAYER); 287 | if (collision) { 288 | collision.hit(this.damage); 289 | this.board.remove(this); 290 | } 291 | 292 | if (Math.random() < 0.01 && this.reload <= 0) { 293 | this.reload = this.reloadTime; 294 | if (this.missiles == 2) { 295 | this.board.add(new EnemyMissile(this.x + this.w - 2, this.y + this.h)); 296 | this.board.add(new EnemyMissile(this.x + 2, this.y + this.h)); 297 | } else { 298 | this.board.add(new EnemyMissile(this.x + this.w / 2, this.y + this.h)); 299 | } 300 | } 301 | this.reload -= dt; 302 | 303 | if (this.y > Game.height || this.x < -this.w || this.x > Game.width) { 304 | this.board.remove(this); 305 | } 306 | }; 307 | 308 | Enemy.prototype.hit = function (damage) { 309 | this.health -= damage; 310 | if (this.health <= 0) { 311 | if (this.board.remove(this)) { 312 | Game.points += this.points || 100; 313 | this.board.add(new Explosion(this.x + this.w / 2, this.y + this.h / 2)); 314 | } 315 | } 316 | }; 317 | 318 | var EnemyMissile = function (x, y) { 319 | this.setup("enemy_missile", { vy: 200, damage: 10 }); 320 | this.x = x - this.w / 2; 321 | this.y = y; 322 | }; 323 | 324 | EnemyMissile.prototype = new Sprite(); 325 | EnemyMissile.prototype.type = OBJECT_ENEMY_PROJECTILE; 326 | 327 | EnemyMissile.prototype.step = function (dt) { 328 | this.y += this.vy * dt; 329 | var collision = this.board.collide(this, OBJECT_PLAYER); 330 | if (collision) { 331 | collision.hit(this.damage); 332 | this.board.remove(this); 333 | } else if (this.y > Game.height) { 334 | this.board.remove(this); 335 | } 336 | }; 337 | 338 | var Explosion = function (centerX, centerY) { 339 | this.setup("explosion", { frame: 0 }); 340 | this.x = centerX - this.w / 2; 341 | this.y = centerY - this.h / 2; 342 | }; 343 | 344 | Explosion.prototype = new Sprite(); 345 | 346 | Explosion.prototype.step = function (dt) { 347 | this.frame++; 348 | if (this.frame >= 12) { 349 | this.board.remove(this); 350 | } 351 | }; 352 | 353 | window.addEventListener("load", function () { 354 | Game.initialize("game", sprites, startGame); 355 | }); 356 | -------------------------------------------------------------------------------- /game.manifest: -------------------------------------------------------------------------------- 1 | CACHE MANIFEST 2 | 3 | # v1.02 4 | CACHE: 5 | index.html 6 | engine.js 7 | game.js 8 | images/sprites.png 9 | base.css 10 | 11 | NETWORK: 12 | http://fonts.googleapis.com/ 13 | http://www.google-analytics.com/ 14 | http://themes.googleusercontent.com/ 15 | -------------------------------------------------------------------------------- /images/sprites.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skills/release-based-workflow/effeb87892c7a41fe1b8704d00a0f22fc1d866f2/images/sprites.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Alien Invasion 6 | 7 | 12 | 16 | 17 | 21 | 22 | 23 |
24 | 25 |
26 | 27 | 28 | 29 | 30 | --------------------------------------------------------------------------------