diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-oop-by-building-a-platformer-game/649a6b393a10a4357087b3f7.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-oop-by-building-a-platformer-game/649a6b393a10a4357087b3f7.md index 86c7f479c0e..16b6b4aa989 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-oop-by-building-a-platformer-game/649a6b393a10a4357087b3f7.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-oop-by-building-a-platformer-game/649a6b393a10a4357087b3f7.md @@ -9,7 +9,7 @@ dashedName: step-19 Now, you need to set the color for your player. -Inside the `draw()` method, assign the string `#99c9ff` to `ctx.fillStyle`. +Inside the `draw()` method, assign the string `"#99c9ff"` to `ctx.fillStyle`. # --hints-- @@ -20,7 +20,7 @@ const player = new Player(); assert.match(player.draw.toString(), /ctx\.fillStyle\s*/); ``` -You should assign the string `#99c9ff` to `ctx.fillStyle`. +You should assign the string `"#99c9ff"` to `ctx.fillStyle`. ```js const player = new Player(); diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-oop-by-building-a-platformer-game/649a75a844f2ea3a0060d807.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-oop-by-building-a-platformer-game/649a75a844f2ea3a0060d807.md index fe3eecfa95e..b1e1d191e55 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-oop-by-building-a-platformer-game/649a75a844f2ea3a0060d807.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-oop-by-building-a-platformer-game/649a75a844f2ea3a0060d807.md @@ -7,13 +7,13 @@ dashedName: step-20 # --description-- -Below your `ctx.fillStyle`, you need to create the player's shape by using the `fillRect()` method. +Below your `ctx.fillStyle`, you need to create the player's shape by calling the `fillRect()` method on the ctx object which you instantiated earlier. ```js fillRect(x, y, width, height) ``` -Inside the `fillRect()` method add the `this.position.x`, `this.position.y`, `this.width` and `this.height` values. +Inside the `fillRect()` method add the `this.position.x`, `this.position.y`, `this.width` and `this.height` values. # --hints-- diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-oop-by-building-a-platformer-game/64aaf83d46b16a7b20a27051.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-oop-by-building-a-platformer-game/64aaf83d46b16a7b20a27051.md index cbec2346277..4db2e32b171 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-oop-by-building-a-platformer-game/64aaf83d46b16a7b20a27051.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-oop-by-building-a-platformer-game/64aaf83d46b16a7b20a27051.md @@ -9,9 +9,9 @@ dashedName: step-37 Inside your `startGame` function, you will need to display the `canvas` element and hide the `startScreen` container. -Use `canvas.style.display` to change the display value to `block`. +Use `canvas.style.display` to change the display value to `"block"`. -Below that, use `startScreen.style.display` to change the display value to `none`. +Below that, use `startScreen.style.display` to change the display value to `"none"`. # --hints-- @@ -27,7 +27,7 @@ You should use dot notation to access the `display` property of the `style` prop assert.match(startGame.toString(), /canvas\.style\.display/); ``` -You should set the `canvas` `display` property to `block`. +You should set the `canvas` `display` property to `"block"`. ```js assert.match(startGame.toString(), /canvas\.style\.display\s*=\s*('|")block\1/); @@ -45,7 +45,7 @@ You should use dot notation to access the `display` property of the `style` prop assert.match(startGame.toString(), /startScreen\.style\.display/); ``` -You should set the `startScreen` `display` property to `none`. +You should set the `startScreen` `display` property to `"none"`. ```js assert.match(startGame.toString(), /startScreen\.style\.display\s*=\s*('|")none\1/); diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-oop-by-building-a-platformer-game/64ab06a9cc033b7d4a8bad2a.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-oop-by-building-a-platformer-game/64ab06a9cc033b7d4a8bad2a.md index b7ac9a673bc..fbf935e3d8c 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-oop-by-building-a-platformer-game/64ab06a9cc033b7d4a8bad2a.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-oop-by-building-a-platformer-game/64ab06a9cc033b7d4a8bad2a.md @@ -27,10 +27,10 @@ You should pass `click` as the first argument to the `.addEventListener()` metho assert.match(code, /startBtn\.addEventListener\(\s*('|")click\1\s*/); ``` -You should pass `startGame` as the second argument to the `.addEventListener()` method. +You should pass a reference to `startGame` as the second argument to the `.addEventListener()` method. ```js -assert.match(code, /startBtn\.addEventListener\(\s*('|")click\1\s*,\s*startGame\s*/); +assert.match(code, /startBtn\.addEventListener\(\s*('|")click\1\s*,\s*startGame(?!\s*\()\s*/); ``` # --seed-- diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-oop-by-building-a-platformer-game/64c70f78dbf5667a307a7d90.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-oop-by-building-a-platformer-game/64c70f78dbf5667a307a7d90.md index 11b88255e24..5f33f48cd61 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-oop-by-building-a-platformer-game/64c70f78dbf5667a307a7d90.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-oop-by-building-a-platformer-game/64c70f78dbf5667a307a7d90.md @@ -7,7 +7,7 @@ dashedName: step-51 # --description-- -In the game, the player will interact with different checkpoints. If the `isCheckpointCollisionDetectionActive` is false, then you will need to stop the player's movements on the `x` and `y` axis. +In the game, the player will interact with different checkpoints. If the `isCheckpointCollisionDetectionActive` is false, then you will need to stop the player's movements on the `x` and `y` axes. Start by creating an `if` statement where the condition checks if the `isCheckpointCollisionDetectionActive` is false. diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-oop-by-building-a-platformer-game/64c714ec1b844f7bc0723deb.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-oop-by-building-a-platformer-game/64c714ec1b844f7bc0723deb.md index 90eb314cffa..1b7c4690679 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-oop-by-building-a-platformer-game/64c714ec1b844f7bc0723deb.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-oop-by-building-a-platformer-game/64c714ec1b844f7bc0723deb.md @@ -9,11 +9,11 @@ dashedName: step-54 The first case you will want to add is when the left arrow key is pressed. -Inside the `switch` statement, add a new case called "ArrowLeft". +Inside the `switch` statement, add a new case called `"ArrowLeft"`. # --hints-- -Your switch statement should have a case called "ArrowLeft". +Your switch statement should have a case called `"ArrowLeft"`. ```js assert.match(code, /switch\s*\(\s*key\s*\)\s*{\s*case\s*('|")ArrowLeft\1\s*:\s*/); diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-oop-by-building-a-platformer-game/64c7173772c2497ce99b474c.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-oop-by-building-a-platformer-game/64c7173772c2497ce99b474c.md index 0adb7ca0688..cef18af0fab 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-oop-by-building-a-platformer-game/64c7173772c2497ce99b474c.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-oop-by-building-a-platformer-game/64c7173772c2497ce99b474c.md @@ -9,27 +9,27 @@ dashedName: step-57 The player can jump up by using the up arrow key or the spacebar. -Add three new cases for "ArrowUp", " ", and "Spacebar". Remember that you can group cases together when they share the same operation. +Add three new cases for `"ArrowUp"`, `" "`, and `"Spacebar"`. Remember that you can group cases together when they share the same operation. -Inside those cases, use the subtraction assignment operator to subtract 8 from `player.velocity.y`. +Inside those cases, use the subtraction assignment operator to subtract `8` from `player.velocity.y`. To close out these cases, make sure to add a `break` statement. # --hints-- -You should add a new `case` clause for "ArrowUp" inside your `switch` statement. +You should add a new `case` clause for `"ArrowUp"` inside your `switch` statement. ```js assert.match(code, /\s*case\s*('|"|`)\s*ArrowUp\s*\1\s*:\s*/) ``` -You should add a new `case` clause for " " inside your `switch` statement. +You should add a new `case` clause for `" "` inside your `switch` statement. ```js assert.match(code, /\s*case\s*('|"|`)\s\1\s*:\s*/); ``` -You should add a new `case` clause for "Spacebar" inside your `switch` statement. +You should add a new `case` clause for `"Spacebar"` inside your `switch` statement. ```js assert.match(code, /\s*case\s*('|"|`)\s*Spacebar\s*\1\s*:\s*/) diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-oop-by-building-a-platformer-game/64c73367cce78a7fd65dd3be.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-oop-by-building-a-platformer-game/64c73367cce78a7fd65dd3be.md index 2efb2aea8e6..0f231f5977c 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-oop-by-building-a-platformer-game/64c73367cce78a7fd65dd3be.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-oop-by-building-a-platformer-game/64c73367cce78a7fd65dd3be.md @@ -7,7 +7,7 @@ dashedName: step-60 # --description-- -Inside the arrow function, call the `movePlayer` function and pass in `key`, 8, and `true` as arguments. +Inside the arrow function, call the `movePlayer` function and pass in `key`, `8`, and `true` as arguments. # --hints-- @@ -17,7 +17,7 @@ You should call the `movePlayer` function. assert.match(code, /movePlayer\s*\(.*\)/); ``` -You should pass in `key`, 8, and `true` as arguments to the `movePlayer` function. +You should pass in `key`, `8`, and `true` as arguments to the `movePlayer` function. ```js assert.match(code, /movePlayer\s*\(\s*key\s*,\s*8\s*,\s*true\s*\)/); diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-oop-by-building-a-platformer-game/64c7527100b19b09037ce5db.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-oop-by-building-a-platformer-game/64c7527100b19b09037ce5db.md index 58ee33aefca..2ecc5d231d2 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-oop-by-building-a-platformer-game/64c7527100b19b09037ce5db.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-oop-by-building-a-platformer-game/64c7527100b19b09037ce5db.md @@ -7,13 +7,13 @@ dashedName: step-70 # --description-- -Inside the `draw` method, assign `#acd157` to the `ctx.fillStyle`. +Inside the `draw` method, assign `"#acd157"` to the `ctx.fillStyle`. Below that, call the `ctx.fillRect` method and pass in the `x` and `y` coordinates, along with the `width` and `height` properties. Remember to include `this` before each property. # --hints-- -You should assign `#acd157` to the `ctx.fillStyle`. +You should assign `"#acd157"` to the `ctx.fillStyle`. ```js assert.match(code, /ctx\.fillStyle\s*=\s*('|")#acd157\1\s*;?/); diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-oop-by-building-a-platformer-game/64cb2e5bdfb23a67272a07c7.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-oop-by-building-a-platformer-game/64cb2e5bdfb23a67272a07c7.md index 321f2aeefb3..702b83cc24e 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-oop-by-building-a-platformer-game/64cb2e5bdfb23a67272a07c7.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-oop-by-building-a-platformer-game/64cb2e5bdfb23a67272a07c7.md @@ -9,7 +9,7 @@ dashedName: step-98 Now you need to create a `draw` method for the `CheckPoint` class. -Inside the `draw` method, add a `fillStyle` property to the `ctx` object and set it to `#f1be32`. +Inside the `draw` method, add a `fillStyle` property to the `ctx` object and set it to `"#f1be32"`. Below the `fillStyle` property, use the `fillRect` method on the `ctx` object and pass in the `x`, `y`, `width`, and `height` properties as arguments. @@ -22,14 +22,28 @@ const splitter = code.split("ctx.fillRect(this.position.x, this.position.y, this assert.match(splitter[2], /draw\(\s*\)\s*\{/); ``` -Your `draw` method should have a `fillStyle` property. +Your `draw` method should have a `fillStyle` property added to the `ctx` object. + +```js +const splitter = code.split("ctx.fillRect(this.position.x, this.position.y, this.width, this.height)") +assert.match(splitter[2], /draw\(\s*\)\s*\{\s*ctx\.fillStyle/); +``` + +You should assign `"#f1be32"` to the `ctx.fillStyle` property. ```js const splitter = code.split("ctx.fillRect(this.position.x, this.position.y, this.width, this.height)") assert.match(splitter[2], /draw\(\s*\)\s*\{\s*ctx\.fillStyle\s*=\s*('|")#f1be32\1\s*;?/); ``` -Your `draw` method should have a `fillRect` method. +Your `draw` method should invoke the `fillRect` method on the `ctx` object. + +```js +const splitter = code.split('#f1be32') +assert.match(splitter[1], /ctx\.fillRect\(/); +``` + +When invoking `ctx.fillRect` you should pass in the `x`, `y`, `width`, and `height` properties as arguments. Don't forget the `this` keyword. ```js const splitter = code.split('#f1be32') diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-oop-by-building-a-platformer-game/64cb4978631a4f6e3e1b964d.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-oop-by-building-a-platformer-game/64cb4978631a4f6e3e1b964d.md index ba0e31e0248..0018a562055 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-oop-by-building-a-platformer-game/64cb4978631a4f6e3e1b964d.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-oop-by-building-a-platformer-game/64cb4978631a4f6e3e1b964d.md @@ -7,11 +7,11 @@ dashedName: step-106 # --description-- -Inside the `showCheckpointScreen` function, set the `checkpointScreen` `display` property to block. +Inside the `showCheckpointScreen` function, set the `checkpointScreen` `style.display` property to `"block"`. # --hints-- -You should set the `checkpointScreen` `display` style property to block. +You should set the `checkpointScreen` `style.display` property to `"block"`. ```js assert.match(code, /\s*checkpointScreen\s*\.\s*style\s*\.\s*display\s*=\s*('|")block\1\s*;?/); diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-oop-by-building-a-platformer-game/64cb4ebdc75b3a73a43da5ec.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-oop-by-building-a-platformer-game/64cb4ebdc75b3a73a43da5ec.md index 71006ed6e31..c234fab590a 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-oop-by-building-a-platformer-game/64cb4ebdc75b3a73a43da5ec.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-oop-by-building-a-platformer-game/64cb4ebdc75b3a73a43da5ec.md @@ -11,7 +11,7 @@ Create an `if` statement that checks if `isCheckpointCollisionDetectionActive` i Inside the `if` statement, add a `setTimeout()` that takes in a callback function and a delay of 2000 milliseconds. -For the callback function, it should set the `checkpointScreen` `display` property to `none`. +For the callback function, it should set the `checkpointScreen` `style.display` property to `"none"`. # --hints-- @@ -39,7 +39,7 @@ Your `setTimeout()` function should have a delay of 2000 milliseconds as the sec assert.match(code, /\s*setTimeout\s*\(\s*\(\s*\)\s*=>[^,]*,\s*2000\s*\)/s); ``` -Your callback function should set the `checkpointScreen` `display` property to `none`. +Your callback function should set the `checkpointScreen` `style.display` property to `"none"`. ```js assert.match(code, /\s*if\s*\(\s*isCheckpointCollisionDetectionActive\s*\)\s*{\s*setTimeout\s*\(\s*\(\s*\)\s*=>\s*(\(\s*checkpointScreen\.style\.display\s*=\s*("|')none\2\s*\)|\{\s*checkpointScreen\.style\.display\s*=\s*("|')none\3\s*;?\s*\}|\s*checkpointScreen\.style\.display\s*=\s*("|')none\4\s*)\s*,\s*2000\s*\)\s*;?\s*}/s); diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-oop-by-building-a-platformer-game/65afec8f02423144ef136a94.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-oop-by-building-a-platformer-game/65afec8f02423144ef136a94.md index 2478050d527..0be70531cff 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-oop-by-building-a-platformer-game/65afec8f02423144ef136a94.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-oop-by-building-a-platformer-game/65afec8f02423144ef136a94.md @@ -7,7 +7,7 @@ dashedName: step-11 # --description-- -The `width` and the `height` of the main player, platforms and checkpoints will be proportional sized relative to the `innerHeight` of the the browser screen. The goal is to make the game responsive and visually consistent across different screen sizes. +The `width` and the `height` of the main player, platforms and checkpoints will be proportional sized relative to the `innerHeight` of the browser screen. The goal is to make the game responsive and visually consistent across different screen sizes. Inside your `proportionalSize` function, you will need to return a ternary that checks if `innerHeight` is less than `500`. If so, return `Math.ceil((size / 500) * innerHeight)`, otherwise return `size`. diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-oop-by-building-a-platformer-game/65b2bb4c279af3cd585ba777.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-oop-by-building-a-platformer-game/65b2bb4c279af3cd585ba777.md index 53020ff1c78..d4c7501bbfe 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-oop-by-building-a-platformer-game/65b2bb4c279af3cd585ba777.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-oop-by-building-a-platformer-game/65b2bb4c279af3cd585ba777.md @@ -368,7 +368,7 @@ const animate = () => { player.position.y >= checkpoint.position.y, player.position.y + player.height <= checkpoint.position.y + checkpoint.height, - isCheckpointCollisionDetectionActive + isCheckpointCollisionDetectionActive, --fcc-editable-region-- --fcc-editable-region--