Bullet Dodging Game

dodge/1.md

@@ -0,0 +1,15 @@
+# Dodge
+
+| What you'll build       |
+| ----------------------- |
+| ![](img/final_demo.gif) |
+
+Links to a live demo and the final code below. This workshop should take around
+1 hour and 15 minutes.
+
+[**Live Demo**](https://dodge--prophetorpheus.repl.co)
+
+[**Final Code**](https://repl.it/@prophetorpheus/dodge)
+
+------
+

dodge/10.md

@@ -0,0 +1,63 @@
+### Moving the Enemy
+
+* Vertical movements = use the y position
+
+```js
+if (keyDown(LEFT_ARROW) && player.position.x > 25) {
+  player.position.x = player.position.x - 1
+}
+
+enemy.position.y = enemy.position.y + 1
+
+drawSprites()
+```
+
+
+
+Now our code looks like this:
+
+```js
+function draw() {
+  background(0, 0, 100)
+
+  if (keyDown(RIGHT_ARROW) && player.position.x < width - 25) {
+    player.position.x = player.position.x + 1
+  }
+
+  if (keyDown(LEFT_ARROW) && player.position.x > 25) {
+    player.position.x = player.position.x - 1
+  }
+
+  enemy.position.y = enemy.position.y + 3
+
+  drawSprites()
+}
+```
+
+* Respawning the enemy at the bottom
+
+```js
+enemy.position.y = enemy.position.y + 3
+
+if (enemy.position.y > height) {
+  enemy.position.y = 0
+}
+
+drawSprites()
+```
+
+* Randomizing the respawn
+  * Uses p5.js
+
+```js
+enemy.position.y = enemy.position.y + 3
+
+if (enemy.position.y > height) {
+  enemy.position.y = 0
+  enemy.position.x = random(5, width - 5)
+}
+
+drawSprites()
+```
+
+Bam!

dodge/11.md

@@ -0,0 +1,17 @@
+### Collision
+
+* Enemy passes through..
+
+* Use `overlap()`
+
+```js
+function draw() {
+  if (enemy.overlap(player)) {
+    gameOver()
+  }
+
+  background(0, 0, 100)
+
+  // ...the rest of the draw function
+}
+```

dodge/12.md

@@ -0,0 +1,48 @@
+### Game Over
+
+* Create a function first
+
+```js
+function draw() {
+  // ...the draw function
+}
+
+function gameOver() {}
+```
+
+And let's display a game over screen.
+
+```js
+function gameOver() {
+  background(0)
+  textAlign(CENTER)
+  fill('white')
+  text('Game Over!', width / 2, height / 2)
+}
+```
+
+* draw() keeps running...
+
+* Add an if statement with a flag!
+  * Deletes game if game is over, otherwise keep looping draw()
+
+```js
+var isGameOver
+// ...other variables
+
+function setup() {
+  isGameOver = false
+  // ...the rest of the setup function
+}
+
+function draw() {
+  if (isGameOver) {
+    gameOver()
+  } else {
+    if (enemy.overlap(player)) {
+      isGameOver = true
+    }
+    // ...the rest of the draw function
+  }
+}
+```

dodge/13.md

@@ -0,0 +1,52 @@
+### Restart Game
+
+* Communication to the user
+  * text()
+
+```js
+function gameOver() {
+  background(0)
+  textAlign(CENTER)
+  fill('white')
+  text('Game Over!', width / 2, height / 2)
+  text('Click anywhere to try again', width / 2, (3 * height) / 4)
+}
+```
+
+* Detect user's click
+  * p5.js function
+    [`mouseClicked`](http://p5js.org/reference/#p5/mouseClicked)
+
+```js
+function gameOver() {
+  background(0)
+  textAlign(CENTER)
+  fill('white')
+  text('Game Over!', width / 2, height / 2)
+  text('Click anywhere to try again', width / 2, (3 * height) / 4)
+}
+
+function mouseClicked() {}
+```
+
+* Set the flag to `false`
+
+```js
+function mouseClicked() {
+  isGameOver = false
+}
+```
+
+* Reset the positions
+
+```js
+function mouseClicked() {
+  isGameOver = false
+  player.position.x = width / 2
+  player.position.y = height - 25
+  enemy.position.x = width / 2
+  enemy.position.y = 0
+}
+```
+
+Done!

dodge/14.md

@@ -0,0 +1,19 @@
+### Covering Our Bases
+
+* Accidental clicks
+
+```js
+function mouseClicked() {
+  if (isGameOver) {
+    isGameOver = false
+    player.position.x = width / 2
+    player.position.y = height - 25
+    enemy.position.x = width / 2
+    enemy.position.y = 0
+  }
+}
+```
+
+* Mouse clicks will only reset the game if the game has
+  ended, i.e., only on the game over screen.
+

dodge/15.md

@@ -0,0 +1,12 @@
+### Spicing it Up
+
+Let's make Dodge beautiful. We're going to bring the game from looking like
+this:
+
+![Before spicing it up]()
+
+To looking like this:
+
+![After we add images]()
+
+#### 

dodge/16.md

@@ -0,0 +1,52 @@
+#### Adding Images
+
+To start, let's customize the game with images.
+
+We're providing the following images and have already uploaded them to an image
+host, giving us a URL to load the images from in our code.
+
+<br/>
+
+> | **Player**                        |
+> | --------------------------------- |
+> | ![](img/prophet_orpheus.png)      |
+> | `https://i.imgur.com/N5uCbDu.png` |
+
+<br/>
+
+> | **Enemy**                         |
+> | --------------------------------- |
+> | ![](img/asteroid.png)             |
+> | `https://i.imgur.com/OdL0XPt.png` |
+
+<br/>
+
+> | **Background**                    |
+> | --------------------------------- |
+> | ![](img/background.png)           |
+> | `https://i.imgur.com/aKQOg3G.png` |
+
+<br/>
+
+Function from p5.js we need:
+
+* [`loadImage()`](http://p5js.org/reference/#p5/loadImage) that takes URL of an
+  image as an argument and gives us a loaded image ready to be used. p5.play
+  sprites have the method
+* [`addImage()`](http://p5play.molleindustria.org/docs/classes/Sprite.html#method-addImage)
+  that we can give a loaded image to assign it to the sprite.
+  `preload()`, which is run right when the page loads before `setup()`.
+  * load images and other resources (like sounds)
+    into the game
+
+```js
+// ...the rest of the variables
+var enemy
+
+function preload() {}
+
+function setup() {
+  // ...the rest of the setup function
+}
+```
+

dodge/17.md

@@ -0,0 +1,85 @@
+#### Customizing the Player and the Enemy
+
+* More global variables
+
+```js
+var player
+var playerImage
+var enemy
+var enemyImage
+```
+
+Now let's load an image into `playerImage` in `preload()`.
+
+```js
+function preload() {
+  playerImage = loadImage('https://i.imgur.com/N5uCbDu.png')
+}
+```
+
+...and do the same with `enemyImage`.
+
+```js
+function preload() {
+  playerImage = loadImage('https://i.imgur.com/N5uCbDu.png')
+  enemyImage = loadImage('https://i.imgur.com/OdL0XPt.png')
+}
+```
+
+Add the loaded images to the `player` and `enemy`, right under where we create
+the sprites in `setup()`.
+
+```js
+// in the setup function...
+player = createSprite(width / 2, height - 25, 50, 50)
+player.addImage(playerImage)
+enemy = createSprite(width / 2, 0, 10, 30)
+enemy.addImage(enemyImage)
+```
+
+* Zero out the created sprites
+
+```diff
+// in the setup function...
+-player = createSprite(width/2, height-25, 50, 50);
++player = createSprite(width/2, height-25, 0, 0);
+```
+
+* Zero out the enemy too
+
+```diff
+// in the setup function...
+-enemy = createSprite(width/2, 0, 10, 30);
++enemy = createSprite(width/2, 0, 0, 0);
+```
+
+* Position the height
+
+```diff
+// in the setup function...
+-player = createSprite(width/2, height-25, 0, 0);
++player = createSprite(width/2, height-(playerImage.height/2), 0, 0);
+```
+
+* mouseClicked()
+
+```diff
+// in the mouseClicked function
+-player.position.y = height-25;
++player.position.y = height-(playerImage.height/2);
+```
+
+* Fix bounds
+
+```js
+// in the draw function...
+if (keyDown(RIGHT_ARROW) && player.position.x < width - playerImage.width / 2) {
+  player.position.x += 2
+}
+
+if (keyDown(LEFT_ARROW) && player.position.x > playerImage.width / 2) {
+  player.position.x -= 2
+}
+```
+
+Always code defensively!