mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2025-12-30 03:03:06 -05:00
chore(i18n,learn): processed translations (#52063)
This commit is contained in:
camperbot
@@ -0,0 +1,190 @@
|
||||
---
|
||||
id: 6461815bc48998eb15d55349
|
||||
title: Step 1
|
||||
challengeType: 0
|
||||
dashedName: step-1
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
In this project, you are going to learn intermediate Object Oriented Programming principles by building a platformer game. All of the HTML and CSS have been provided for you.
|
||||
|
||||
Start by using `document.getElementById()` to get the `#start-btn` and `#canvas` elements.
|
||||
|
||||
Store them in `const` variables named `startBtn` and `canvas` respectively.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use `document.getElementById()`.
|
||||
|
||||
```js
|
||||
assert.match(code, /document\.getElementById\(/);
|
||||
```
|
||||
|
||||
You should get the element with the `id` of `start-btn`.
|
||||
|
||||
```js
|
||||
assert.match(code, /document\.getElementById\(\s*('|"|`)start-btn\1\s*\)/);
|
||||
```
|
||||
|
||||
You should use `const` to declare the variable called `startBtn` and assign it the `#start-btn` element.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+startBtn\s*=\s*document\.getElementById\(\s*('|"|`)start-btn\1\s*\)/);
|
||||
```
|
||||
|
||||
You should use the `document.getElementById()` method to get the `#canvas` element.
|
||||
|
||||
```js
|
||||
assert.match(code, /document\.getElementById\(\s*('|"|`)canvas\1\s*\)/);
|
||||
```
|
||||
|
||||
You should use `const` to declare the variable called `canvas` and assign it the `#canvas` element.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+canvas\s*=\s*document\.getElementById\(\s*('|"|`)canvas\1\s*\)/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,191 @@
|
||||
---
|
||||
id: 6461a1b2d5f508f374d72d30
|
||||
title: Step 2
|
||||
challengeType: 0
|
||||
dashedName: step-2
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Next, you will need to use `document.querySelector` to get the `.start-screen` and `.checkpoint-screen` elements.
|
||||
|
||||
Store them in `const` variables called `startScreen` and `checkpointScreen` respectively.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use `document.querySelector()`.
|
||||
|
||||
```js
|
||||
assert.match(code, /document\.querySelector\(/);
|
||||
```
|
||||
|
||||
You should get the element with the `class` of `start-screen`. Don't forget to include the `.` inside the `document.querySelector` method.
|
||||
|
||||
```js
|
||||
assert.match(code, /document\.querySelector\(\s*('|"|`)\.start-screen\1\s*\)/);
|
||||
```
|
||||
|
||||
You should use `const` to declare the variable called `startScreen` and assign it the `.start-screen` element.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+startScreen\s*=\s*document\.querySelector\(\s*('|"|`)\.start-screen\1\s*\)/);
|
||||
```
|
||||
|
||||
You should use the `document.querySelector()` method to get the `.checkpoint-screen` element.
|
||||
|
||||
```js
|
||||
assert.match(code, /document\.querySelector\(\s*('|"|`)\.checkpoint-screen\1\s*\)/);
|
||||
```
|
||||
|
||||
You should use `const` to declare the variable called `checkpointScreen` and assign it the `.checkpoint-screen` element.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+checkpointScreen\s*=\s*document\.querySelector\(\s*('|"|`)\.checkpoint-screen\1\s*\)/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,177 @@
|
||||
---
|
||||
id: 6461abe3ad3609f436f3a087
|
||||
title: Step 3
|
||||
challengeType: 0
|
||||
dashedName: step-3
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The next step is to target the paragraph element inside the `.checkpoint-screen` element.
|
||||
|
||||
Use `document.querySelector` and the child combinator `>` to target the paragraph element.
|
||||
|
||||
Assign that value to a `const` variable called `checkpointMessage`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the child combinator `>` to access the paragraph element inside the `.checkpoint-screen` element.
|
||||
|
||||
```js
|
||||
assert.match(code, /document\.querySelector\(\s*('|"|`)\.checkpoint-screen\s+>\s+p\1\s*\)/);
|
||||
```
|
||||
|
||||
You should use `const` to declare the variable called `checkpointMessage` and assign it the `p` element inside the `.checkpoint-screen` element.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+checkpointMessage\s*=\s*document\.querySelector\(\s*('|"|`)\.checkpoint-screen\s+>\s+p\1\s*\)/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,184 @@
|
||||
---
|
||||
id: 6461b0b3dc4034f4f70a4929
|
||||
title: Step 4
|
||||
challengeType: 0
|
||||
dashedName: step-4
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Before you can begin building out the functionality for the game, you will need to set up the ability to add 2D graphics.
|
||||
|
||||
The <dfn>Canvas API</dfn> can be used to create graphics in games using JavaScript and the HTML `canvas` element.
|
||||
|
||||
You will need to use the `getContext` method which will provide the context for where the graphics will be rendered.
|
||||
|
||||
```js
|
||||
canvas.getContext("2d");
|
||||
```
|
||||
|
||||
Assign that `getContext` method to a `const` variable called `ctx`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `canvas.getContext("2d")` method.
|
||||
|
||||
```js
|
||||
assert.match(code, /canvas\.getContext\(\s*('|"|`)2d\1\s*\)/);
|
||||
```
|
||||
|
||||
You should use `const` to declare the variable called `ctx` and assign it `canvas.getContext("2d")`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+ctx\s*=\s*canvas\.getContext\(\s*('|"|`)2d\1\s*\)/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,176 @@
|
||||
---
|
||||
id: 6461baf1e276bdfe3b8ff92a
|
||||
title: Step 5
|
||||
challengeType: 0
|
||||
dashedName: step-5
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The `canvas` element has a `width` property which is a positive number that represents the width of the canvas.
|
||||
|
||||
```js
|
||||
canvas.width
|
||||
```
|
||||
|
||||
Below your `const` declarations, append the `width` property to the `canvas` variable.
|
||||
|
||||
|
||||
# --hints--
|
||||
|
||||
You should append the `width` property to the `canvas` variable.
|
||||
|
||||
```js
|
||||
assert.match(code, /canvas\.width/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,173 @@
|
||||
---
|
||||
id: 64800ffcc075d9af2f52f034
|
||||
title: Step 6
|
||||
challengeType: 0
|
||||
dashedName: step-6
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The `innerWidth` property is a number that represents the interior width of the browser window.
|
||||
|
||||
Assign `innerWidth` to `canvas.width`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should assign the `innerWidth` property to `canvas.width`.
|
||||
|
||||
```js
|
||||
assert.match(code, /canvas\.width\s*=\s*innerWidth/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
canvas.width
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,178 @@
|
||||
---
|
||||
id: 648160c026b3bebc63177ab9
|
||||
title: Step 7
|
||||
challengeType: 0
|
||||
dashedName: step-7
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The `innerHeight` property is a number that represents the interior height of the browser window.
|
||||
|
||||
Below your `canvas.width`, append the `height` property to the `canvas` variable and assign it `innerHeight`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should append the `height` property to the `canvas` variable.
|
||||
|
||||
```js
|
||||
assert.match(code, /canvas\.height/);
|
||||
```
|
||||
|
||||
You should assign the `innerHeight` property to `canvas.height`.
|
||||
|
||||
```js
|
||||
assert.match(code, /canvas\.height\s*=\s*innerHeight/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,173 @@
|
||||
---
|
||||
id: 648166a88629ccc03452bf04
|
||||
title: Step 8
|
||||
challengeType: 0
|
||||
dashedName: step-8
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
In your platformer game, the main player will need to jump between the different platforms. When the player jumps, you will need to apply gravity to bring them back down.
|
||||
|
||||
Create a new `const` variable called `gravity` and assign it the number `0.5`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a `const` variable called `gravity` and assign it `0.5`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+gravity\s*=\s*0?\.5/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,181 @@
|
||||
---
|
||||
id: 6482b07e8a3dcacbbbfa43f6
|
||||
title: Step 9
|
||||
challengeType: 0
|
||||
dashedName: step-9
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
In the game, the player will have the opportunity to cross different checkpoints. You will need to keep track of the status for the checkpoint collision detection.
|
||||
|
||||
Use `let` to create a new variable called `isCheckpointCollisionDetectionActive` and assign it the value of `true`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `let` keyword to declare your `isCheckpointCollisionDetectionActive` variable.
|
||||
|
||||
```js
|
||||
assert.match(code, /let isCheckpointCollisionDetectionActive/);
|
||||
```
|
||||
|
||||
|
||||
You should assign the value of `true` to `isCheckpointCollisionDetectionActive`
|
||||
|
||||
```js
|
||||
assert.match(code, /let\s+isCheckpointCollisionDetectionActive\s*=\s*true/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,189 @@
|
||||
---
|
||||
id: 6482b4fef5fd6bcdfddad730
|
||||
title: Step 10
|
||||
challengeType: 0
|
||||
dashedName: step-10
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The next step is to define some characteristics for the main player of the game.
|
||||
|
||||
Start by creating a new `class` called `Player`.
|
||||
|
||||
# --hints--
|
||||
|
||||
`Player` should be a class.
|
||||
|
||||
```js
|
||||
assert(
|
||||
typeof Player === 'function'
|
||||
);
|
||||
```
|
||||
|
||||
The `class` keyword should be used.
|
||||
|
||||
```js
|
||||
assert(code.match(/class/g));
|
||||
```
|
||||
|
||||
You should create a new class called `Player`
|
||||
|
||||
```js
|
||||
assert.match(code, /class\s+Player\s*{\s*}\s*/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,187 @@
|
||||
---
|
||||
id: 6482bc5d699f0acfc52bdc41
|
||||
title: Step 11
|
||||
challengeType: 0
|
||||
dashedName: step-11
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Inside your `Player` class, you will need to define the player's position, velocity, width, and height values. All of these values will be defined inside the constructor method.
|
||||
|
||||
|
||||
Create an empty constructor inside your `Player` class.
|
||||
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add a `constructor` method to the `Player` class.
|
||||
|
||||
```js
|
||||
assert.match(code, /class\s+Player\s*\{\s*constructor\(\s*\)\s*/)
|
||||
```
|
||||
|
||||
Your `constructor` method should be empty.
|
||||
|
||||
```js
|
||||
assert.match(code, /class\s+Player\s*\{\s*constructor\(\s*\)\s*\{\s*\}\s*\}/)
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
class Player {
|
||||
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,182 @@
|
||||
---
|
||||
id: 64861a8856e1eaf9e349570e
|
||||
title: Step 12
|
||||
challengeType: 0
|
||||
dashedName: step-12
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Inside your constructor, use the `this` keyword to set the `position` property to an empty object.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `this` keyword to set the `position` property of your class to an empty object.
|
||||
|
||||
```js
|
||||
assert.match(code, /this\.position/);
|
||||
const player = new Player();
|
||||
assert.isObject(player.position);
|
||||
assert.isEmpty(player.position);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,221 @@
|
||||
---
|
||||
id: 64861c02ff1ef4fa62a9e132
|
||||
title: Step 13
|
||||
challengeType: 0
|
||||
dashedName: step-13
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Inside your `position` object, add a new key called `x` with a value of `10`. After that, add another key called `y` with a value of `400`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add a new key called `x` with a value of 10.
|
||||
|
||||
```js
|
||||
assert.match(code, /this\.position/);
|
||||
const player = new Player();
|
||||
|
||||
assert(
|
||||
(function (obj) {
|
||||
if (
|
||||
obj.hasOwnProperty('x') &&
|
||||
obj.x !== undefined &&
|
||||
typeof obj.x === 'number' &&
|
||||
obj.x === 10
|
||||
) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
})(player.position)
|
||||
);
|
||||
```
|
||||
|
||||
|
||||
You should add a key called `y` with a value of 400.
|
||||
|
||||
|
||||
```js
|
||||
assert.match(code, /this\.position/);
|
||||
const player = new Player();
|
||||
|
||||
assert(
|
||||
(function (obj) {
|
||||
if (
|
||||
obj.hasOwnProperty('y') &&
|
||||
obj.y !== undefined &&
|
||||
typeof obj.y === 'number' &&
|
||||
obj.y === 400
|
||||
) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
})(player.position)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,233 @@
|
||||
---
|
||||
id: 6486212f80701cfb18052eae
|
||||
title: Step 14
|
||||
challengeType: 0
|
||||
dashedName: step-14
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Below your `position` object, use the `this` keyword to set the `velocity` property to an object.
|
||||
|
||||
Inside that new `velocity` object, create a key called `x` with a value of `0` and a new key called `y` with a value of `0`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `this` keyword to set the `velocity` property of your class to an object.
|
||||
|
||||
```js
|
||||
assert.match(code, /this\.velocity/);
|
||||
const player = new Player();
|
||||
assert.isObject(player.velocity);
|
||||
```
|
||||
|
||||
You should add a new key called `x` with a value of 0 inside your `velocity` object.
|
||||
|
||||
```js
|
||||
assert.match(code, /this\.velocity/);
|
||||
const player = new Player();
|
||||
|
||||
assert(
|
||||
(function (obj) {
|
||||
if (
|
||||
obj.hasOwnProperty('x') &&
|
||||
obj.x !== undefined &&
|
||||
typeof obj.x === 'number' &&
|
||||
obj.x === 0
|
||||
) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
})(player.velocity)
|
||||
);
|
||||
```
|
||||
|
||||
|
||||
You should add a key called `y` with a value of 0 inside your `velocity` object.
|
||||
|
||||
|
||||
```js
|
||||
assert.match(code, /this\.velocity/);
|
||||
const player = new Player();
|
||||
|
||||
assert(
|
||||
(function (obj) {
|
||||
if (
|
||||
obj.hasOwnProperty('y') &&
|
||||
obj.y !== undefined &&
|
||||
typeof obj.y === 'number' &&
|
||||
obj.y === 0
|
||||
) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
})(player.velocity)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,199 @@
|
||||
---
|
||||
id: 64862530b093dbfbea58f43d
|
||||
title: Step 15
|
||||
challengeType: 0
|
||||
dashedName: step-15
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Below your `velocity` object, use the `this` keyword to set the `width` property to the number `40`.
|
||||
|
||||
Below your `width` property, use the `this` keyword to set the `height` property to the number `40`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `this` keyword to set the `width` property of your class to `40`.
|
||||
|
||||
```js
|
||||
assert.match(code, /this\.width/);
|
||||
const player = new Player();
|
||||
assert.equal(player.width, 40);
|
||||
```
|
||||
|
||||
You should use the `this` keyword to set the `height` property of your class to `40`.
|
||||
|
||||
```js
|
||||
assert.match(code, /this\.height/);
|
||||
const player = new Player();
|
||||
assert.equal(player.height, 40);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,199 @@
|
||||
---
|
||||
id: 6486282ca3a469fca6ebed27
|
||||
title: Step 16
|
||||
challengeType: 0
|
||||
dashedName: step-16
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The next step is to create a `draw()` method, which will be responsible for creating the player's `width`, `height`, `position`, and fill color.
|
||||
|
||||
Below your constructor, create an empty `draw()` method.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `Player` class should have a `draw` method.
|
||||
|
||||
```js
|
||||
const player = new Player();
|
||||
assert.isFunction(player.draw);
|
||||
```
|
||||
|
||||
Your `draw` method should be empty.
|
||||
|
||||
```js
|
||||
const player = new Player();
|
||||
assert.match(player.draw.toString(), /\(\s*\)\s*\{\s*\}/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,202 @@
|
||||
---
|
||||
id: 649a6b393a10a4357087b3f7
|
||||
title: Step 17
|
||||
challengeType: 0
|
||||
dashedName: step-17
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now, you need to set the color for your player.
|
||||
|
||||
Inside the `draw()` method, assign the string `#99c9ff` to `ctx.fillStyle`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `draw()` method should have a `ctx.fillStyle`.
|
||||
|
||||
```js
|
||||
const player = new Player();
|
||||
assert.match(player.draw.toString(), /ctx\.fillStyle\s*/);
|
||||
```
|
||||
|
||||
You should assign the string `#99c9ff` to `ctx.fillStyle`.
|
||||
|
||||
```js
|
||||
const player = new Player();
|
||||
assert.match(player.draw.toString(), /ctx\.fillStyle\s*=\s*('|"|`)#99c9ff\1\s*/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
draw() {
|
||||
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,208 @@
|
||||
---
|
||||
id: 649a75a844f2ea3a0060d807
|
||||
title: Step 18
|
||||
challengeType: 0
|
||||
dashedName: step-18
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Below your `ctx.fillStyle`, you need to create the player's shape by using the `fillRect()` method.
|
||||
|
||||
```js
|
||||
fillRect(x, y, width, height)
|
||||
```
|
||||
|
||||
Inside the `fillRect()` method add the `this.position.x`, `this.position.y`, `this.width` and `this.height` values.
|
||||
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `draw()` method should have a `ctx.fillRect`.
|
||||
|
||||
```js
|
||||
const player = new Player();
|
||||
assert.match(player.draw.toString(), /ctx\.fillRect\s*(\s*)\s*/);
|
||||
```
|
||||
|
||||
You should add the `this.position.x`, `this.position.y`, `this.width` and `this.height` values to the `fillRect()` method.
|
||||
|
||||
```js
|
||||
const player = new Player();
|
||||
assert.match(player.draw.toString(), /ctx\.fillRect\s*\(\s*this\.position\.x\s*,\s*this\.position\.y\s*,\s*this\.width\s*,\s*this\.height\s*\)\s*/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
draw() {
|
||||
ctx.fillStyle = "#99c9ff";
|
||||
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,203 @@
|
||||
---
|
||||
id: 649a80aa4405823b3f81a47f
|
||||
title: Step 19
|
||||
challengeType: 0
|
||||
dashedName: step-19
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The next step is to create an `update()` method which will be responsible for updating the player's position and velocity as it moves throughout the game.
|
||||
|
||||
Below your `draw()` method, create an empty `update()` method.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `Player` class should have an `update` method.
|
||||
|
||||
```js
|
||||
const player = new Player();
|
||||
assert.isFunction(player.update);
|
||||
```
|
||||
|
||||
Your `update` method should be empty.
|
||||
|
||||
```js
|
||||
const player = new Player();
|
||||
assert.match(player.update.toString(), /\(\s*\)\s*\{\s*\}/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#99c9ff";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,199 @@
|
||||
---
|
||||
id: 649a845dccffd93c0d41ad4b
|
||||
title: Step 20
|
||||
challengeType: 0
|
||||
dashedName: step-20
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Inside the `update()` method, call the `draw()` method to ensure that the player is continually drawn on the screen as the game updates.
|
||||
|
||||
Don't forget to include the `this` keyword.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `this` keyword and call the `draw()` method.
|
||||
|
||||
```js
|
||||
const player = new Player();
|
||||
assert.match(player.update.toString(), /this\.draw\s*(\s*)\s*/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#99c9ff";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
update() {
|
||||
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,209 @@
|
||||
---
|
||||
id: 649a88458b4e343fbdffbbc0
|
||||
title: Step 21
|
||||
challengeType: 0
|
||||
dashedName: step-21
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
When the player moves to the right, you will need to adjust its velocity.
|
||||
|
||||
Use the addition assignment operator to add the velocity's `x` coordinate to the player's `x` position.
|
||||
|
||||
Don't forget to include the `this` keyword for the velocity and position.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `update()` method should have the player's `x` position.
|
||||
|
||||
```js
|
||||
const player = new Player();
|
||||
assert.match(player.update.toString(), /this\.position\.x\s*/);
|
||||
```
|
||||
|
||||
You should use the addition assignment operator `+=` to add the velocity's `x` coordinate to the player's `x` position.
|
||||
|
||||
```js
|
||||
const player = new Player();
|
||||
assert.match(player.update.toString(), /this\.position\.x\s*\+=\s*this\.velocity\.x\s*/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#99c9ff";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
update() {
|
||||
this.draw();
|
||||
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,210 @@
|
||||
---
|
||||
id: 64a1d39230e33585f3dd0dae
|
||||
title: Step 22
|
||||
challengeType: 0
|
||||
dashedName: step-22
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
When the player jumps up, you will need to add the logic for adjusting its velocity.
|
||||
|
||||
Use the addition assignment operator to add the velocity's `y` coordinate to the player's `y` position.
|
||||
|
||||
Don't forget to include the `this` keyword for the velocity and position.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `update()` method should have player's `y` position.
|
||||
|
||||
```js
|
||||
const player = new Player();
|
||||
assert.match(player.update.toString(), /this\.position\.y\s*/);
|
||||
```
|
||||
|
||||
You should use the addition assignment operator `+=` to add the velocity's `y` coordinate to the player's `y` position.
|
||||
|
||||
```js
|
||||
const player = new Player();
|
||||
assert.match(player.update.toString(), /this\.position\.y\s*\+=\s*this\.velocity\.y\s*/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#99c9ff";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
update() {
|
||||
this.draw();
|
||||
this.position.x += this.velocity.x;
|
||||
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,211 @@
|
||||
---
|
||||
id: 64a1d86b1294b2869cef1c18
|
||||
title: Step 23
|
||||
challengeType: 0
|
||||
dashedName: step-23
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Right now, when the player jumps up, it is possible for it to move past the height of the canvas.
|
||||
|
||||
To fix that, you will need to add a condition to stop the player from falling past the height of the canvas.
|
||||
|
||||
Create an empty `if` statement that checks if the sum of the player's `y` position, height, and `y` velocity is less than or equal to the height of the canvas.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `update()` method should have an `if` statement.
|
||||
|
||||
```js
|
||||
const player = new Player();
|
||||
assert.match(player.update.toString(), /if\s*\(/);
|
||||
```
|
||||
|
||||
Your condition for the `if` statement should check if the sum of the player's `y` position, height and `y` velocity is less than or equal to the height of the canvas.
|
||||
|
||||
```js
|
||||
const player = new Player();
|
||||
assert.match(player.update.toString(), /if\s*\(\s*this\.position\.y\s*\+\s*this\.height\s*\+\s*this\.velocity\.y\s*<=\s*canvas\.height\s*\)\s*{\s*}/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#99c9ff";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
update() {
|
||||
this.draw();
|
||||
this.position.x += this.velocity.x;
|
||||
this.position.y += this.velocity.y;
|
||||
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,204 @@
|
||||
---
|
||||
id: 64a1e1b74d2e4e019acb70b8
|
||||
title: Step 24
|
||||
challengeType: 0
|
||||
dashedName: step-24
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
In the `if` statement, add another `if` statement to check if the player's `y` position is less than 0.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your condition for the `if` statement should check if the player's `y` position is less than 0.
|
||||
|
||||
```js
|
||||
const player = new Player();
|
||||
assert.match(player.update.toString(), /this\.position\.y\s*<\s*0/)
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#99c9ff";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
|
||||
update() {
|
||||
this.draw();
|
||||
this.position.x += this.velocity.x;
|
||||
this.position.y += this.velocity.y;
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
if (this.position.y + this.height + this.velocity.y <= canvas.height) {
|
||||
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,208 @@
|
||||
---
|
||||
id: 64a1e54abad976028a8938f1
|
||||
title: Step 25
|
||||
challengeType: 0
|
||||
dashedName: step-25
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Inside the inner `if` statement, assign 0 to the player's `y` position.
|
||||
|
||||
|
||||
# --hints--
|
||||
|
||||
You should assign `0` to the player's `y` position.
|
||||
|
||||
|
||||
```js
|
||||
const player = new Player();
|
||||
assert.match(player.update.toString(), /this\.position\.y\s*=\s*0/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#99c9ff";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
|
||||
update() {
|
||||
this.draw();
|
||||
this.position.x += this.velocity.x;
|
||||
this.position.y += this.velocity.y;
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
if (this.position.y + this.height + this.velocity.y <= canvas.height) {
|
||||
if (this.position.y < 0) {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,205 @@
|
||||
---
|
||||
id: 64a1fdbf48e08b06e8b05870
|
||||
title: Step 26
|
||||
challengeType: 0
|
||||
dashedName: step-26
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Below the `this.position.y = 0`, assign `gravity` to the velocity's `y` position.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should assign `gravity` to the velocity's `y` position.
|
||||
|
||||
```js
|
||||
const player = new Player();
|
||||
assert.match(player.update.toString(), /this\.velocity\.y\s*=\s*gravity/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#99c9ff";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
|
||||
update() {
|
||||
this.draw();
|
||||
this.position.x += this.velocity.x;
|
||||
this.position.y += this.velocity.y;
|
||||
|
||||
if (this.position.y + this.height + this.velocity.y <= canvas.height) {
|
||||
--fcc-editable-region--
|
||||
|
||||
if (this.position.y < 0) {
|
||||
this.position.y = 0;
|
||||
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,209 @@
|
||||
---
|
||||
id: 64a2cadabc8538152c49a7eb
|
||||
title: Step 27
|
||||
challengeType: 0
|
||||
dashedName: step-27
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Below your inner `if` statement, use the addition assignment operator to add `gravity` to the `y` velocity.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the addition assignment operator to add `gravity` to `this.velocity.y`.
|
||||
|
||||
```js
|
||||
const player = new Player();
|
||||
assert.match(player.update.toString(), /this\.velocity\.y\s*\+=\s*gravity/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#99c9ff";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
|
||||
update() {
|
||||
this.draw();
|
||||
this.position.x += this.velocity.x;
|
||||
this.position.y += this.velocity.y;
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
if (this.position.y + this.height + this.velocity.y <= canvas.height) {
|
||||
if (this.position.y < 0) {
|
||||
this.position.y = 0;
|
||||
this.velocity.y = gravity;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,223 @@
|
||||
---
|
||||
id: 64a2ceb58fe10e15e0dc223f
|
||||
title: Step 28
|
||||
challengeType: 0
|
||||
dashedName: step-28
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Add an `else` clause that assigns `0` to `this.velocity.y`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add an `else` statement to your `update` function.
|
||||
|
||||
```js
|
||||
const player = new Player();
|
||||
assert.match(player.update.toString(), /else/);
|
||||
```
|
||||
|
||||
Your `else` statement should come after your `if` statement.
|
||||
|
||||
```js
|
||||
const player = new Player();
|
||||
const split = player.update.toString().split(/\s|\n/);
|
||||
assert.isAbove(split.indexOf('else'), split.indexOf('if'));
|
||||
```
|
||||
|
||||
You should add an `else` clause that assigns 0 to `this.velocity.y`.
|
||||
|
||||
```js
|
||||
const player = new Player();
|
||||
assert.match(player.update.toString(), /this\.velocity\.y\s*=\s*0;?/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#99c9ff";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
|
||||
update() {
|
||||
this.draw();
|
||||
this.position.x += this.velocity.x;
|
||||
this.position.y += this.velocity.y;
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
if (this.position.y + this.height + this.velocity.y <= canvas.height) {
|
||||
if (this.position.y < 0) {
|
||||
this.position.y = 0;
|
||||
this.velocity.y = gravity;
|
||||
}
|
||||
this.velocity.y += gravity;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,214 @@
|
||||
---
|
||||
id: 64a2d19c5029ba166cb912e5
|
||||
title: Step 29
|
||||
challengeType: 0
|
||||
dashedName: step-29
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The final condition you need to add inside the `Player` class is to ensure that the player stays within the boundaries of the canvas screen and doesn't move too far off to the left.
|
||||
|
||||
Create an `if` statement, to check if the player's `x` position is less than the width.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your condition should check if the player's `x` position is less than the width
|
||||
|
||||
```js
|
||||
const player = new Player();
|
||||
assert.match(player.update.toString(), /if\s*\(\s*this\.position\.x\s*<\s*this\.width\s*\)\s*{\s*}/);
|
||||
```
|
||||
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#99c9ff";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
|
||||
update() {
|
||||
this.draw();
|
||||
this.position.x += this.velocity.x;
|
||||
this.position.y += this.velocity.y;
|
||||
|
||||
if (this.position.y + this.height + this.velocity.y <= canvas.height) {
|
||||
if (this.position.y < 0) {
|
||||
this.position.y = 0;
|
||||
this.velocity.y = gravity;
|
||||
}
|
||||
this.velocity.y += gravity;
|
||||
} else {
|
||||
this.velocity.y = 0;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,214 @@
|
||||
---
|
||||
id: 64a2d5f23518e71727cac0db
|
||||
title: Step 30
|
||||
challengeType: 0
|
||||
dashedName: step-30
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Inside the `if` statement, assign the width to the player's `x` position.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
Your `if` statement should contain an assignment of the width to the player's `x` position.
|
||||
|
||||
```js
|
||||
const player = new Player();
|
||||
assert.match(player.update.toString(), /this\.position\.x\s*=\s*this\.width;?/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#99c9ff";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
|
||||
update() {
|
||||
this.draw();
|
||||
this.position.x += this.velocity.x;
|
||||
this.position.y += this.velocity.y;
|
||||
|
||||
if (this.position.y + this.height + this.velocity.y <= canvas.height) {
|
||||
if (this.position.y < 0) {
|
||||
this.position.y = 0;
|
||||
this.velocity.y = gravity;
|
||||
}
|
||||
this.velocity.y += gravity;
|
||||
} else {
|
||||
this.velocity.y = 0;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
if (this.position.x < this.width) {
|
||||
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,225 @@
|
||||
---
|
||||
id: 64a2d86799a58517c29f79a5
|
||||
title: Step 31
|
||||
challengeType: 0
|
||||
dashedName: step-31
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The next step is to use the `new` keyword to create a new instance of the `Player` object and assign it to a new `const` variable called `player`.
|
||||
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use `const` to declare a `player` variable.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+player\s*=/);
|
||||
```
|
||||
|
||||
You should use the `new` keyword to instantiate a new `Player` object.
|
||||
|
||||
```js
|
||||
assert.match(code, /new\s+Player\s*\(\s*\)/);
|
||||
```
|
||||
|
||||
You should assign your new `Player` object to the `player` variable.
|
||||
|
||||
```js
|
||||
assert.isTrue(player instanceof Player);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#99c9ff";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
|
||||
update() {
|
||||
this.draw();
|
||||
this.position.x += this.velocity.x;
|
||||
this.position.y += this.velocity.y;
|
||||
|
||||
if (this.position.y + this.height + this.velocity.y <= canvas.height) {
|
||||
if (this.position.y < 0) {
|
||||
this.position.y = 0;
|
||||
this.velocity.y = gravity;
|
||||
}
|
||||
this.velocity.y += gravity;
|
||||
} else {
|
||||
this.velocity.y = 0;
|
||||
}
|
||||
|
||||
if (this.position.x < this.width) {
|
||||
this.position.x = this.width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,226 @@
|
||||
---
|
||||
id: 64aaf2aff7f1fc7a550f40cb
|
||||
title: Step 32
|
||||
challengeType: 0
|
||||
dashedName: step-32
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now it is time to see your new player drawn on the screen.
|
||||
|
||||
Start by creating an empty arrow function called `startGame`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
`startGame` should be a function
|
||||
|
||||
```js
|
||||
assert.isFunction(startGame);
|
||||
```
|
||||
|
||||
`startGame` should be an arrow function
|
||||
|
||||
|
||||
```js
|
||||
|
||||
assert.match(code, /\s*const\s+startGame\s*=\s*\(\s*\)\s*=>\s*{\s*}\s*;?/);
|
||||
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#99c9ff";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
|
||||
update() {
|
||||
this.draw();
|
||||
this.position.x += this.velocity.x;
|
||||
this.position.y += this.velocity.y;
|
||||
|
||||
if (this.position.y + this.height + this.velocity.y <= canvas.height) {
|
||||
if (this.position.y < 0) {
|
||||
this.position.y = 0;
|
||||
this.velocity.y = gravity;
|
||||
}
|
||||
this.velocity.y += gravity;
|
||||
} else {
|
||||
this.velocity.y = 0;
|
||||
}
|
||||
|
||||
if (this.position.x < this.width) {
|
||||
this.position.x = this.width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const player = new Player();
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,252 @@
|
||||
---
|
||||
id: 64aaf83d46b16a7b20a27051
|
||||
title: Step 33
|
||||
challengeType: 0
|
||||
dashedName: step-33
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
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`.
|
||||
|
||||
Below that, use `startScreen.style.display` to change the display value to `none`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use dot notation to access the `style` property of `canvas`.
|
||||
|
||||
```js
|
||||
assert.match(startGame.toString(), /canvas\.style/);
|
||||
```
|
||||
|
||||
You should use dot notation to access the `display` property of the `style` property.
|
||||
|
||||
```js
|
||||
assert.match(startGame.toString(), /canvas\.style\.display/);
|
||||
```
|
||||
|
||||
You should set the `canvas` `display` property to `block`.
|
||||
|
||||
```js
|
||||
assert.match(startGame.toString(), /canvas\.style\.display\s*=\s*('|")block\1/);
|
||||
```
|
||||
|
||||
You should use dot notation to access the `style` property of `startScreen`.
|
||||
|
||||
```js
|
||||
assert.match(startGame.toString(), /startScreen\.style/);
|
||||
```
|
||||
|
||||
You should use dot notation to access the `display` property of the `style` property.
|
||||
|
||||
```js
|
||||
assert.match(startGame.toString(), /startScreen\.style\.display/);
|
||||
```
|
||||
|
||||
You should set the `startScreen` `display` property to `none`.
|
||||
|
||||
```js
|
||||
assert.match(startGame.toString(), /startScreen\.style\.display\s*=\s*('|")none\1/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#99c9ff";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
|
||||
update() {
|
||||
this.draw();
|
||||
this.position.x += this.velocity.x;
|
||||
this.position.y += this.velocity.y;
|
||||
|
||||
if (this.position.y + this.height + this.velocity.y <= canvas.height) {
|
||||
if (this.position.y < 0) {
|
||||
this.position.y = 0;
|
||||
this.velocity.y = gravity;
|
||||
}
|
||||
this.velocity.y += gravity;
|
||||
} else {
|
||||
this.velocity.y = 0;
|
||||
}
|
||||
|
||||
if (this.position.x < this.width) {
|
||||
this.position.x = this.width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const player = new Player();
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
const startGame = () => {
|
||||
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,223 @@
|
||||
---
|
||||
id: 64ab0134716d0a7c8889f167
|
||||
title: Step 34
|
||||
challengeType: 0
|
||||
dashedName: step-34
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
To visualize the player on the screen, you need to draw it on the canvas.
|
||||
|
||||
Inside the `startGame` function, call the `.draw()` method of your `player` object.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should call the `.draw()` method of your `player` object.
|
||||
|
||||
|
||||
```js
|
||||
assert.match(code, /\s*player\s*\.\s*draw\s*\(\s*\)\s*;?/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#99c9ff";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
|
||||
update() {
|
||||
this.draw();
|
||||
this.position.x += this.velocity.x;
|
||||
this.position.y += this.velocity.y;
|
||||
|
||||
if (this.position.y + this.height + this.velocity.y <= canvas.height) {
|
||||
if (this.position.y < 0) {
|
||||
this.position.y = 0;
|
||||
this.velocity.y = gravity;
|
||||
}
|
||||
this.velocity.y += gravity;
|
||||
} else {
|
||||
this.velocity.y = 0;
|
||||
}
|
||||
|
||||
if (this.position.x < this.width) {
|
||||
this.position.x = this.width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const player = new Player();
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
const startGame = () => {
|
||||
canvas.style.display = "block";
|
||||
startScreen.style.display = "none";
|
||||
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,237 @@
|
||||
---
|
||||
id: 64ab06a9cc033b7d4a8bad2a
|
||||
title: Step 35
|
||||
challengeType: 0
|
||||
dashedName: step-35
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now it's time to add the functionality for the start game button.
|
||||
|
||||
Add an `addEventListener` to the `startBtn` and pass in a `click` event and a reference to the `startGame` function.
|
||||
|
||||
Click on the start game button, and you should see a light blue square on the screen which represents the main player.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should call the `.addEventListener()` method of the `startBtn`.
|
||||
|
||||
```js
|
||||
assert.match(code, /startBtn\.addEventListener\(/);
|
||||
```
|
||||
|
||||
You should pass `click` as the first argument to the `.addEventListener()` method.
|
||||
|
||||
```js
|
||||
assert.match(code, /startBtn\.addEventListener\(\s*('|")click\1\s*/);
|
||||
```
|
||||
|
||||
You should pass `startGame` as the second argument to the `.addEventListener()` method.
|
||||
|
||||
```js
|
||||
assert.match(code, /startBtn\.addEventListener\(\s*('|")click\1\s*,\s*startGame\s*/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#99c9ff";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
|
||||
update() {
|
||||
this.draw();
|
||||
this.position.x += this.velocity.x;
|
||||
this.position.y += this.velocity.y;
|
||||
|
||||
if (this.position.y + this.height + this.velocity.y <= canvas.height) {
|
||||
if (this.position.y < 0) {
|
||||
this.position.y = 0;
|
||||
this.velocity.y = gravity;
|
||||
}
|
||||
this.velocity.y += gravity;
|
||||
} else {
|
||||
this.velocity.y = 0;
|
||||
}
|
||||
|
||||
if (this.position.x < this.width) {
|
||||
this.position.x = this.width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const player = new Player();
|
||||
|
||||
const startGame = () => {
|
||||
canvas.style.display = "block";
|
||||
startScreen.style.display = "none";
|
||||
player.draw();
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,229 @@
|
||||
---
|
||||
id: 64ab143edad72b7e25b23f8a
|
||||
title: Step 36
|
||||
challengeType: 0
|
||||
dashedName: step-36
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now that you can see the player on the screen, it is time to start adding the functionality for moving the player across the screen.
|
||||
|
||||
Create a new empty arrow function called `animate`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add a new arrow function called `animate`.
|
||||
|
||||
```js
|
||||
|
||||
assert.match(code, /\s*const\s+animate\s*=\s*\(\s*\)\s*=>\s*{\s*}\s*;?/);
|
||||
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#99c9ff";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
|
||||
update() {
|
||||
this.draw();
|
||||
this.position.x += this.velocity.x;
|
||||
this.position.y += this.velocity.y;
|
||||
|
||||
if (this.position.y + this.height + this.velocity.y <= canvas.height) {
|
||||
if (this.position.y < 0) {
|
||||
this.position.y = 0;
|
||||
this.velocity.y = gravity;
|
||||
}
|
||||
this.velocity.y += gravity;
|
||||
} else {
|
||||
this.velocity.y = 0;
|
||||
}
|
||||
|
||||
if (this.position.x < this.width) {
|
||||
this.position.x = this.width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const player = new Player();
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
const startGame = () => {
|
||||
canvas.style.display = "block";
|
||||
startScreen.style.display = "none";
|
||||
player.draw();
|
||||
}
|
||||
|
||||
startBtn.addEventListener("click", startGame);
|
||||
|
||||
```
|
||||
|
||||
|
||||
@@ -0,0 +1,228 @@
|
||||
---
|
||||
id: 64ab178206f3237eafcc0ef4
|
||||
title: Step 37
|
||||
challengeType: 0
|
||||
dashedName: step-37
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The <dfn>requestAnimationFrame()</dfn> web API, takes in a callback and is used to update the animation on the screen. The `animate` function will be responsible for updating the player's position and continually drawing it on the canvas.
|
||||
|
||||
Inside the `animate` function, call the `requestAnimationFrame()` API and pass `animate` as the argument.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should call the `requestAnimationFrame()` API and pass in `animate` for the argument.
|
||||
|
||||
```js
|
||||
assert.match(code, /\s*requestAnimationFrame\s*\(\s*animate\s*\)\s*;?/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#99c9ff";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
|
||||
update() {
|
||||
this.draw();
|
||||
this.position.x += this.velocity.x;
|
||||
this.position.y += this.velocity.y;
|
||||
|
||||
if (this.position.y + this.height + this.velocity.y <= canvas.height) {
|
||||
if (this.position.y < 0) {
|
||||
this.position.y = 0;
|
||||
this.velocity.y = gravity;
|
||||
}
|
||||
this.velocity.y += gravity;
|
||||
} else {
|
||||
this.velocity.y = 0;
|
||||
}
|
||||
|
||||
if (this.position.x < this.width) {
|
||||
this.position.x = this.width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const player = new Player();
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
const animate = () => {
|
||||
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
const startGame = () => {
|
||||
canvas.style.display = "block";
|
||||
startScreen.style.display = "none";
|
||||
player.draw();
|
||||
}
|
||||
|
||||
startBtn.addEventListener("click", startGame);
|
||||
|
||||
```
|
||||
@@ -0,0 +1,237 @@
|
||||
---
|
||||
id: 64acebecb7484c8c6a760534
|
||||
title: Step 38
|
||||
challengeType: 0
|
||||
dashedName: step-38
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
As the player moves through the game, you will need to clear the canvas before rendering the next frame of the animation.
|
||||
|
||||
You can use the <dfn>clearRect()</dfn> Web API to accomplish this. It takes in an `x`, `y`, `width`, and `height` arguments.
|
||||
|
||||
Below your `requestAnimationFrame`, call the `clearRect()` method on the `ctx` variable and pass in `0, 0, canvas.width, canvas.height` as the arguments.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should call the `clearRect()` method on the `ctx` variable.
|
||||
|
||||
```js
|
||||
assert.match(code, /\s*ctx\s*\.\s*clearRect\s*\([^)]*\)\s*;?/);
|
||||
```
|
||||
|
||||
You should pass in `0, 0, canvas.width, canvas.height` for the arguments of the `clearRect()` method.
|
||||
|
||||
```js
|
||||
assert.match(code, /\s*ctx\s*\.\s*clearRect\s*\(\s*0\s*,\s*0\s*,\s*canvas\s*\.\s*width\s*,\s*canvas\s*\.\s*height\s*\)\s*;?/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#99c9ff";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
|
||||
update() {
|
||||
this.draw();
|
||||
this.position.x += this.velocity.x;
|
||||
this.position.y += this.velocity.y;
|
||||
|
||||
if (this.position.y + this.height + this.velocity.y <= canvas.height) {
|
||||
if (this.position.y < 0) {
|
||||
this.position.y = 0;
|
||||
this.velocity.y = gravity;
|
||||
}
|
||||
this.velocity.y += gravity;
|
||||
} else {
|
||||
this.velocity.y = 0;
|
||||
}
|
||||
|
||||
if (this.position.x < this.width) {
|
||||
this.position.x = this.width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const player = new Player();
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
const animate = () => {
|
||||
requestAnimationFrame(animate);
|
||||
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
const startGame = () => {
|
||||
canvas.style.display = "block";
|
||||
startScreen.style.display = "none";
|
||||
player.draw();
|
||||
}
|
||||
|
||||
startBtn.addEventListener("click", startGame);
|
||||
|
||||
```
|
||||
@@ -0,0 +1,230 @@
|
||||
---
|
||||
id: 64aced3e88b0a38cec824dea
|
||||
title: Step 39
|
||||
challengeType: 0
|
||||
dashedName: step-39
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The next step is to update the player's position as it moves throughout the game.
|
||||
|
||||
Below your `ctx.clearRect()`, call the `update()` method on the player.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should call the `update()` method on the player.
|
||||
|
||||
```js
|
||||
assert.match(code, /\s*player\s*\.\s*update\s*\(\s*\)\s*;?/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#99c9ff";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
|
||||
update() {
|
||||
this.draw();
|
||||
this.position.x += this.velocity.x;
|
||||
this.position.y += this.velocity.y;
|
||||
|
||||
if (this.position.y + this.height + this.velocity.y <= canvas.height) {
|
||||
if (this.position.y < 0) {
|
||||
this.position.y = 0;
|
||||
this.velocity.y = gravity;
|
||||
}
|
||||
this.velocity.y += gravity;
|
||||
} else {
|
||||
this.velocity.y = 0;
|
||||
}
|
||||
|
||||
if (this.position.x < this.width) {
|
||||
this.position.x = this.width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const player = new Player();
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
const animate = () => {
|
||||
requestAnimationFrame(animate);
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
const startGame = () => {
|
||||
canvas.style.display = "block";
|
||||
startScreen.style.display = "none";
|
||||
player.draw();
|
||||
}
|
||||
|
||||
startBtn.addEventListener("click", startGame);
|
||||
|
||||
```
|
||||
@@ -0,0 +1,238 @@
|
||||
---
|
||||
id: 64acedb5f59c0c8d43e96aa4
|
||||
title: Step 40
|
||||
challengeType: 0
|
||||
dashedName: step-40
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
To manage the player's movement in the game, you will need to monitor when the left and right arrow keys are pressed.
|
||||
|
||||
Create a new `const` variable called `keys` and assign it an empty object.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a new `const` variable called `keys`.
|
||||
|
||||
```js
|
||||
assert.match(code, /\s*const\s+keys/);
|
||||
```
|
||||
|
||||
You should assign an empty object to the `keys` variable.
|
||||
|
||||
```js
|
||||
assert.match(code, /\s*const\s+keys\s*=\s*{\s*}\s*;?/);
|
||||
```
|
||||
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#99c9ff";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
|
||||
update() {
|
||||
this.draw();
|
||||
this.position.x += this.velocity.x;
|
||||
this.position.y += this.velocity.y;
|
||||
|
||||
if (this.position.y + this.height + this.velocity.y <= canvas.height) {
|
||||
if (this.position.y < 0) {
|
||||
this.position.y = 0;
|
||||
this.velocity.y = gravity;
|
||||
}
|
||||
this.velocity.y += gravity;
|
||||
} else {
|
||||
this.velocity.y = 0;
|
||||
}
|
||||
|
||||
if (this.position.x < this.width) {
|
||||
this.position.x = this.width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const player = new Player();
|
||||
|
||||
const animate = () => {
|
||||
requestAnimationFrame(animate);
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
player.update();
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
const startGame = () => {
|
||||
canvas.style.display = "block";
|
||||
startScreen.style.display = "none";
|
||||
player.draw();
|
||||
}
|
||||
|
||||
startBtn.addEventListener("click", startGame);
|
||||
|
||||
```
|
||||
@@ -0,0 +1,270 @@
|
||||
---
|
||||
id: 64acf1af380a708ded8761f0
|
||||
title: Step 41
|
||||
challengeType: 0
|
||||
dashedName: step-41
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Inside the `keys` object, add a new key called `rightKey` and assign it an object with the key-value pair of `pressed: false`.
|
||||
|
||||
Below the `rightKey` object, create a `leftKey` object and assign it an object with the key-value pair of `pressed: false`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `keys` object should have a `rightKey` property.
|
||||
|
||||
```js
|
||||
assert.property(keys, 'rightKey');
|
||||
```
|
||||
|
||||
Your `rightKey` value should be an object.
|
||||
|
||||
```js
|
||||
assert.isObject(keys.rightKey)
|
||||
```
|
||||
|
||||
Your `rightKey` object should have a `pressed` key.
|
||||
|
||||
```js
|
||||
assert.property(keys.rightKey, 'pressed');
|
||||
```
|
||||
|
||||
You should set `false` to the `pressed` key of the `rightKey` object.
|
||||
|
||||
```js
|
||||
assert.equal(keys.rightKey.pressed, false);
|
||||
```
|
||||
|
||||
Your `leftKey` value should be an object.
|
||||
|
||||
```js
|
||||
assert.isObject(keys.leftKey)
|
||||
```
|
||||
|
||||
Your `leftKey` object should have a `pressed` key.
|
||||
|
||||
```js
|
||||
assert.property(keys.leftKey, 'pressed');
|
||||
```
|
||||
|
||||
You should set `false` to the `pressed` key of the `leftKey` object.
|
||||
|
||||
```js
|
||||
assert.equal(keys.leftKey.pressed, false);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#99c9ff";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
|
||||
update() {
|
||||
this.draw();
|
||||
this.position.x += this.velocity.x;
|
||||
this.position.y += this.velocity.y;
|
||||
|
||||
if (this.position.y + this.height + this.velocity.y <= canvas.height) {
|
||||
if (this.position.y < 0) {
|
||||
this.position.y = 0;
|
||||
this.velocity.y = gravity;
|
||||
}
|
||||
this.velocity.y += gravity;
|
||||
} else {
|
||||
this.velocity.y = 0;
|
||||
}
|
||||
|
||||
if (this.position.x < this.width) {
|
||||
this.position.x = this.width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const player = new Player();
|
||||
|
||||
const animate = () => {
|
||||
requestAnimationFrame(animate);
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
player.update();
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
const keys = {
|
||||
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
const startGame = () => {
|
||||
canvas.style.display = "block";
|
||||
startScreen.style.display = "none";
|
||||
player.draw();
|
||||
}
|
||||
|
||||
startBtn.addEventListener("click", startGame);
|
||||
|
||||
```
|
||||
@@ -0,0 +1,240 @@
|
||||
---
|
||||
id: 64acf287857bb38e6dd7ca69
|
||||
title: Step 42
|
||||
challengeType: 0
|
||||
dashedName: step-42
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The next step is to add the logic for increasing or decreasing a player's velocity based on if they move to the left or right of the screen.
|
||||
|
||||
Inside the `animate` function, create an `if` statement where the condition checks if the right key was pressed and the player's `x` position is less than 400.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have an `if` statement that checks if the right key was pressed and the player's `x` position is less than 400.
|
||||
|
||||
```js
|
||||
assert.match(animate.toString(), /keys\.rightKey\.pressed\s*&&\s*player\.position\.x\s*<\s*400/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#99c9ff";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
|
||||
update() {
|
||||
this.draw();
|
||||
this.position.x += this.velocity.x;
|
||||
this.position.y += this.velocity.y;
|
||||
|
||||
if (this.position.y + this.height + this.velocity.y <= canvas.height) {
|
||||
if (this.position.y < 0) {
|
||||
this.position.y = 0;
|
||||
this.velocity.y = gravity;
|
||||
}
|
||||
this.velocity.y += gravity;
|
||||
} else {
|
||||
this.velocity.y = 0;
|
||||
}
|
||||
|
||||
if (this.position.x < this.width) {
|
||||
this.position.x = this.width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const player = new Player();
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
const animate = () => {
|
||||
requestAnimationFrame(animate);
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
player.update();
|
||||
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
const keys = {
|
||||
rightKey: {
|
||||
pressed: false
|
||||
},
|
||||
leftKey: {
|
||||
pressed: false
|
||||
}
|
||||
};
|
||||
|
||||
const startGame = () => {
|
||||
canvas.style.display = "block";
|
||||
startScreen.style.display = "none";
|
||||
player.draw();
|
||||
}
|
||||
|
||||
startBtn.addEventListener("click", startGame);
|
||||
|
||||
```
|
||||
@@ -0,0 +1,243 @@
|
||||
---
|
||||
id: 64c703f58330b3767399e486
|
||||
title: Step 43
|
||||
challengeType: 0
|
||||
dashedName: step-43
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Inside the `if` statement, assign the number `5` to the player's `x` velocity.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should assign the number 5 to the player's `x` velocity.
|
||||
|
||||
```js
|
||||
assert.match(animate.toString(), /player\.velocity\.x\s*=\s*5\s*;?/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#99c9ff";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
|
||||
update() {
|
||||
this.draw();
|
||||
this.position.x += this.velocity.x;
|
||||
this.position.y += this.velocity.y;
|
||||
|
||||
if (this.position.y + this.height + this.velocity.y <= canvas.height) {
|
||||
if (this.position.y < 0) {
|
||||
this.position.y = 0;
|
||||
this.velocity.y = gravity;
|
||||
}
|
||||
this.velocity.y += gravity;
|
||||
} else {
|
||||
this.velocity.y = 0;
|
||||
}
|
||||
|
||||
if (this.position.x < this.width) {
|
||||
this.position.x = this.width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const player = new Player();
|
||||
|
||||
|
||||
const animate = () => {
|
||||
requestAnimationFrame(animate);
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
player.update();
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
if (keys.rightKey.pressed && player.position.x < 400) {
|
||||
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
|
||||
const keys = {
|
||||
rightKey: {
|
||||
pressed: false
|
||||
},
|
||||
leftKey: {
|
||||
pressed: false
|
||||
}
|
||||
};
|
||||
|
||||
const startGame = () => {
|
||||
canvas.style.display = "block";
|
||||
startScreen.style.display = "none";
|
||||
player.draw();
|
||||
}
|
||||
|
||||
startBtn.addEventListener("click", startGame);
|
||||
|
||||
```
|
||||
@@ -0,0 +1,257 @@
|
||||
---
|
||||
id: 64c705fd8969d677066792b8
|
||||
title: Step 44
|
||||
challengeType: 0
|
||||
dashedName: step-44
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Add an `else if` statement where the condition checks if the left key was pressed and the player's `x` position is greater than 100.
|
||||
|
||||
Inside the `else if` statement, assign the number -5 to the player's x velocity.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add an `else if` statement to your `animate` function.
|
||||
|
||||
```js
|
||||
assert.match(animate.toString(), /else if/);
|
||||
```
|
||||
|
||||
You should check if the left key was pressed and if the player's `x` position is greater than 100.
|
||||
|
||||
```js
|
||||
assert.match(animate.toString(), /keys\.leftKey\.pressed\s*&&\s*player\.position\.x\s*>\s*100/);
|
||||
```
|
||||
|
||||
You should assign the number -5 to the player's `x` velocity inside the `else if`.
|
||||
|
||||
```js
|
||||
assert.match(animate.toString(), /player\.velocity\.x\s*=\s*-5\s*;?/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#99c9ff";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
|
||||
update() {
|
||||
this.draw();
|
||||
this.position.x += this.velocity.x;
|
||||
this.position.y += this.velocity.y;
|
||||
|
||||
if (this.position.y + this.height + this.velocity.y <= canvas.height) {
|
||||
if (this.position.y < 0) {
|
||||
this.position.y = 0;
|
||||
this.velocity.y = gravity;
|
||||
}
|
||||
this.velocity.y += gravity;
|
||||
} else {
|
||||
this.velocity.y = 0;
|
||||
}
|
||||
|
||||
if (this.position.x < this.width) {
|
||||
this.position.x = this.width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const player = new Player();
|
||||
|
||||
|
||||
const animate = () => {
|
||||
requestAnimationFrame(animate);
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
player.update();
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
if (keys.rightKey.pressed && player.position.x < 400) {
|
||||
player.velocity.x = 5;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
|
||||
const keys = {
|
||||
rightKey: {
|
||||
pressed: false
|
||||
},
|
||||
leftKey: {
|
||||
pressed: false
|
||||
}
|
||||
};
|
||||
|
||||
const startGame = () => {
|
||||
canvas.style.display = "block";
|
||||
startScreen.style.display = "none";
|
||||
player.draw();
|
||||
}
|
||||
|
||||
startBtn.addEventListener("click", startGame);
|
||||
|
||||
```
|
||||
@@ -0,0 +1,259 @@
|
||||
---
|
||||
id: 64c708fe06b0c3776f90faaf
|
||||
title: Step 45
|
||||
challengeType: 0
|
||||
dashedName: step-45
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Add an `else` clause that assigns the number `0` to the player's `x` velocity.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add an `else` statement to your `animate` function.
|
||||
|
||||
```js
|
||||
assert.match(animate.toString(), /else/);
|
||||
```
|
||||
|
||||
Your `else` statement should come after your `if` statement.
|
||||
|
||||
```js
|
||||
const player = new Player();
|
||||
const split = animate.toString().split(/\s|\n/);
|
||||
assert.isAbove(split.indexOf('else'), split.indexOf('if'));
|
||||
```
|
||||
|
||||
You should include an `else` clause that assigns the number 0 to the player's `x` velocity.
|
||||
|
||||
```js
|
||||
assert.match(animate.toString(), /player\.velocity\.x\s*=\s*0;?/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#99c9ff";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
|
||||
update() {
|
||||
this.draw();
|
||||
this.position.x += this.velocity.x;
|
||||
this.position.y += this.velocity.y;
|
||||
|
||||
if (this.position.y + this.height + this.velocity.y <= canvas.height) {
|
||||
if (this.position.y < 0) {
|
||||
this.position.y = 0;
|
||||
this.velocity.y = gravity;
|
||||
}
|
||||
this.velocity.y += gravity;
|
||||
} else {
|
||||
this.velocity.y = 0;
|
||||
}
|
||||
|
||||
if (this.position.x < this.width) {
|
||||
this.position.x = this.width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const player = new Player();
|
||||
|
||||
|
||||
const animate = () => {
|
||||
requestAnimationFrame(animate);
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
player.update();
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
if (keys.rightKey.pressed && player.position.x < 400) {
|
||||
player.velocity.x = 5;
|
||||
} else if (keys.leftKey.pressed && player.position.x > 100) {
|
||||
player.velocity.x = -5;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
|
||||
const keys = {
|
||||
rightKey: {
|
||||
pressed: false
|
||||
},
|
||||
leftKey: {
|
||||
pressed: false
|
||||
}
|
||||
};
|
||||
|
||||
const startGame = () => {
|
||||
canvas.style.display = "block";
|
||||
startScreen.style.display = "none";
|
||||
player.draw();
|
||||
}
|
||||
|
||||
startBtn.addEventListener("click", startGame);
|
||||
|
||||
```
|
||||
@@ -0,0 +1,263 @@
|
||||
---
|
||||
id: 64c70d3bf7504978368da6ad
|
||||
title: Step 46
|
||||
challengeType: 0
|
||||
dashedName: step-46
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The next step is to add the functionality that will be responsible for moving the player across the screen.
|
||||
|
||||
Create a new arrow function called `movePlayer` that has three parameters called `key`, `xVelocity`, `isPressed`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should declare a `movePlayer` function.
|
||||
|
||||
```js
|
||||
assert.isFunction(movePlayer);
|
||||
```
|
||||
|
||||
Your `movePlayer` function should take the parameters of `key`, `xVelocity`, and `isPressed`.
|
||||
|
||||
```js
|
||||
assert.match(movePlayer.toString(), /\(\s*key\s*,\s*xVelocity\s*,\s*isPressed\s*\)/);
|
||||
```
|
||||
|
||||
Your `movePlayer` function should be empty.
|
||||
|
||||
```js
|
||||
assert.match(movePlayer.toString(), /\(\s*key\s*,\s*xVelocity\s*,\s*isPressed\s*\)\s*\{\s*\}/);
|
||||
```
|
||||
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#99c9ff";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
|
||||
update() {
|
||||
this.draw();
|
||||
this.position.x += this.velocity.x;
|
||||
this.position.y += this.velocity.y;
|
||||
|
||||
if (this.position.y + this.height + this.velocity.y <= canvas.height) {
|
||||
if (this.position.y < 0) {
|
||||
this.position.y = 0;
|
||||
this.velocity.y = gravity;
|
||||
}
|
||||
this.velocity.y += gravity;
|
||||
} else {
|
||||
this.velocity.y = 0;
|
||||
}
|
||||
|
||||
if (this.position.x < this.width) {
|
||||
this.position.x = this.width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const player = new Player();
|
||||
|
||||
|
||||
const animate = () => {
|
||||
requestAnimationFrame(animate);
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
player.update();
|
||||
|
||||
if (keys.rightKey.pressed && player.position.x < 400) {
|
||||
player.velocity.x = 5;
|
||||
} else if (keys.leftKey.pressed && player.position.x > 100) {
|
||||
player.velocity.x = -5;
|
||||
} else {
|
||||
player.velocity.x = 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const keys = {
|
||||
rightKey: {
|
||||
pressed: false
|
||||
},
|
||||
leftKey: {
|
||||
pressed: false
|
||||
}
|
||||
};
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
const startGame = () => {
|
||||
canvas.style.display = "block";
|
||||
startScreen.style.display = "none";
|
||||
player.draw();
|
||||
}
|
||||
|
||||
startBtn.addEventListener("click", startGame);
|
||||
|
||||
```
|
||||
@@ -0,0 +1,266 @@
|
||||
---
|
||||
id: 64c70f78dbf5667a307a7d90
|
||||
title: Step 47
|
||||
challengeType: 0
|
||||
dashedName: step-47
|
||||
---
|
||||
|
||||
# --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.
|
||||
|
||||
Start by creating an `if` statement where the condition checks if the `isCheckpointCollisionDetectionActive` is false.
|
||||
|
||||
Remember that you can use the `!` operator to check if the variable is false.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add an `if` statement to your `movePlayer` function.
|
||||
|
||||
```js
|
||||
assert.match(movePlayer.toString(), /if\s*\(/);
|
||||
```
|
||||
|
||||
You should check if the `isCheckpointCollisionDetectionActive` variable is false.
|
||||
|
||||
```js
|
||||
assert.match(
|
||||
movePlayer.toString(),
|
||||
/if\s*\(\s*(?:!isCheckpointCollisionDetectionActive|isCheckpointCollisionDetectionActive\s*(?:===|==)\s*false)\s*\)\s*\{/
|
||||
);
|
||||
|
||||
```
|
||||
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#99c9ff";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
|
||||
update() {
|
||||
this.draw();
|
||||
this.position.x += this.velocity.x;
|
||||
this.position.y += this.velocity.y;
|
||||
|
||||
if (this.position.y + this.height + this.velocity.y <= canvas.height) {
|
||||
if (this.position.y < 0) {
|
||||
this.position.y = 0;
|
||||
this.velocity.y = gravity;
|
||||
}
|
||||
this.velocity.y += gravity;
|
||||
} else {
|
||||
this.velocity.y = 0;
|
||||
}
|
||||
|
||||
if (this.position.x < this.width) {
|
||||
this.position.x = this.width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const player = new Player();
|
||||
|
||||
|
||||
const animate = () => {
|
||||
requestAnimationFrame(animate);
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
player.update();
|
||||
|
||||
if (keys.rightKey.pressed && player.position.x < 400) {
|
||||
player.velocity.x = 5;
|
||||
} else if (keys.leftKey.pressed && player.position.x > 100) {
|
||||
player.velocity.x = -5;
|
||||
} else {
|
||||
player.velocity.x = 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const keys = {
|
||||
rightKey: {
|
||||
pressed: false
|
||||
},
|
||||
leftKey: {
|
||||
pressed: false
|
||||
}
|
||||
};
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
const movePlayer = (key, xVelocity, isPressed) => {
|
||||
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
const startGame = () => {
|
||||
canvas.style.display = "block";
|
||||
startScreen.style.display = "none";
|
||||
player.draw();
|
||||
}
|
||||
|
||||
startBtn.addEventListener("click", startGame);
|
||||
|
||||
```
|
||||
@@ -0,0 +1,267 @@
|
||||
---
|
||||
id: 64c71235eba6c67adaa9a458
|
||||
title: Step 48
|
||||
challengeType: 0
|
||||
dashedName: step-48
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Inside the `if` statement, set the player's `x` velocity to 0 and the player's `y` velocity to 0.
|
||||
|
||||
Below that, add a `return` statement.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the player's `x` velocity to 0.
|
||||
|
||||
```js
|
||||
assert.match(movePlayer.toString(), /player\.velocity\.x\s*=\s*0\s*;?/);
|
||||
```
|
||||
|
||||
You should set the player's `y` velocity to 0.
|
||||
|
||||
```js
|
||||
assert.match(movePlayer.toString(), /player\.velocity\.y\s*=\s*0\s*;?/);
|
||||
```
|
||||
|
||||
You should have a `return` statement inside the `if` statement.
|
||||
|
||||
```js
|
||||
assert.match(movePlayer.toString(), /return\s*;?/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#99c9ff";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
|
||||
update() {
|
||||
this.draw();
|
||||
this.position.x += this.velocity.x;
|
||||
this.position.y += this.velocity.y;
|
||||
|
||||
if (this.position.y + this.height + this.velocity.y <= canvas.height) {
|
||||
if (this.position.y < 0) {
|
||||
this.position.y = 0;
|
||||
this.velocity.y = gravity;
|
||||
}
|
||||
this.velocity.y += gravity;
|
||||
} else {
|
||||
this.velocity.y = 0;
|
||||
}
|
||||
|
||||
if (this.position.x < this.width) {
|
||||
this.position.x = this.width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const player = new Player();
|
||||
|
||||
|
||||
const animate = () => {
|
||||
requestAnimationFrame(animate);
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
player.update();
|
||||
|
||||
if (keys.rightKey.pressed && player.position.x < 400) {
|
||||
player.velocity.x = 5;
|
||||
} else if (keys.leftKey.pressed && player.position.x > 100) {
|
||||
player.velocity.x = -5;
|
||||
} else {
|
||||
player.velocity.x = 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const keys = {
|
||||
rightKey: {
|
||||
pressed: false
|
||||
},
|
||||
leftKey: {
|
||||
pressed: false
|
||||
}
|
||||
};
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
const movePlayer = (key, xVelocity, isPressed) => {
|
||||
if (!isCheckpointCollisionDetectionActive) {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
const startGame = () => {
|
||||
canvas.style.display = "block";
|
||||
startScreen.style.display = "none";
|
||||
player.draw();
|
||||
}
|
||||
|
||||
startBtn.addEventListener("click", startGame);
|
||||
|
||||
```
|
||||
@@ -0,0 +1,269 @@
|
||||
---
|
||||
id: 64c7135a9d35797b4bfb01b3
|
||||
title: Step 49
|
||||
challengeType: 0
|
||||
dashedName: step-49
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Below the `if` statement, create a `switch` statement with a value of `key`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use a `switch` statement.
|
||||
|
||||
```js
|
||||
assert.match(code, /switch/);
|
||||
```
|
||||
|
||||
Your `switch` statement should have a value of `key`.
|
||||
|
||||
```js
|
||||
assert.match(code, /switch\s*\(\s*key\s*\)/);
|
||||
```
|
||||
|
||||
Your `switch` statement should be empty.
|
||||
|
||||
```js
|
||||
assert.match(code, /\s*switch\s*\(\s*key\s*\)\s*{\s*}/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#99c9ff";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
|
||||
update() {
|
||||
this.draw();
|
||||
this.position.x += this.velocity.x;
|
||||
this.position.y += this.velocity.y;
|
||||
|
||||
if (this.position.y + this.height + this.velocity.y <= canvas.height) {
|
||||
if (this.position.y < 0) {
|
||||
this.position.y = 0;
|
||||
this.velocity.y = gravity;
|
||||
}
|
||||
this.velocity.y += gravity;
|
||||
} else {
|
||||
this.velocity.y = 0;
|
||||
}
|
||||
|
||||
if (this.position.x < this.width) {
|
||||
this.position.x = this.width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const player = new Player();
|
||||
|
||||
|
||||
const animate = () => {
|
||||
requestAnimationFrame(animate);
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
player.update();
|
||||
|
||||
if (keys.rightKey.pressed && player.position.x < 400) {
|
||||
player.velocity.x = 5;
|
||||
} else if (keys.leftKey.pressed && player.position.x > 100) {
|
||||
player.velocity.x = -5;
|
||||
} else {
|
||||
player.velocity.x = 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const keys = {
|
||||
rightKey: {
|
||||
pressed: false
|
||||
},
|
||||
leftKey: {
|
||||
pressed: false
|
||||
}
|
||||
};
|
||||
|
||||
const movePlayer = (key, xVelocity, isPressed) => {
|
||||
if (!isCheckpointCollisionDetectionActive) {
|
||||
player.velocity.x = 0;
|
||||
player.velocity.y = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
|
||||
const startGame = () => {
|
||||
canvas.style.display = "block";
|
||||
startScreen.style.display = "none";
|
||||
player.draw();
|
||||
}
|
||||
|
||||
startBtn.addEventListener("click", startGame);
|
||||
|
||||
```
|
||||
@@ -0,0 +1,262 @@
|
||||
---
|
||||
id: 64c714ec1b844f7bc0723deb
|
||||
title: Step 50
|
||||
challengeType: 0
|
||||
dashedName: step-50
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
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".
|
||||
|
||||
# --hints--
|
||||
|
||||
Your switch statement should have a case called "ArrowLeft".
|
||||
|
||||
```js
|
||||
assert.match(code, /switch\s*\(\s*key\s*\)\s*{\s*case\s*['"]ArrowLeft['"]\s*:\s*/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#99c9ff";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
|
||||
update() {
|
||||
this.draw();
|
||||
this.position.x += this.velocity.x;
|
||||
this.position.y += this.velocity.y;
|
||||
|
||||
if (this.position.y + this.height + this.velocity.y <= canvas.height) {
|
||||
if (this.position.y < 0) {
|
||||
this.position.y = 0;
|
||||
this.velocity.y = gravity;
|
||||
}
|
||||
this.velocity.y += gravity;
|
||||
} else {
|
||||
this.velocity.y = 0;
|
||||
}
|
||||
|
||||
if (this.position.x < this.width) {
|
||||
this.position.x = this.width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const player = new Player();
|
||||
|
||||
|
||||
const animate = () => {
|
||||
requestAnimationFrame(animate);
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
player.update();
|
||||
|
||||
if (keys.rightKey.pressed && player.position.x < 400) {
|
||||
player.velocity.x = 5;
|
||||
} else if (keys.leftKey.pressed && player.position.x > 100) {
|
||||
player.velocity.x = -5;
|
||||
} else {
|
||||
player.velocity.x = 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const keys = {
|
||||
rightKey: {
|
||||
pressed: false
|
||||
},
|
||||
leftKey: {
|
||||
pressed: false
|
||||
}
|
||||
};
|
||||
|
||||
const movePlayer = (key, xVelocity, isPressed) => {
|
||||
if (!isCheckpointCollisionDetectionActive) {
|
||||
player.velocity.x = 0;
|
||||
player.velocity.y = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
switch (key) {
|
||||
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
|
||||
const startGame = () => {
|
||||
canvas.style.display = "block";
|
||||
startScreen.style.display = "none";
|
||||
player.draw();
|
||||
}
|
||||
|
||||
startBtn.addEventListener("click", startGame);
|
||||
|
||||
```
|
||||
@@ -0,0 +1,275 @@
|
||||
---
|
||||
id: 64c715769bab5f7c14f6cd7b
|
||||
title: Step 51
|
||||
challengeType: 0
|
||||
dashedName: step-51
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Inside the `case` clause, assign `isPressed` to `keys.leftKey.pressed`.
|
||||
|
||||
Below that, add an `if` statement that checks if `xVelocity` is equal to 0. If so, assign the `xVelocity` to `player.velocity.x`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should assign `isPressed` to `keys.leftKey.pressed`.
|
||||
|
||||
```js
|
||||
assert.match(code, /s*keys\.leftKey\.pressed\s*=\s*isPressed\s*;?/);
|
||||
```
|
||||
|
||||
You should have an `if` statement that checks if `xVelocity` is equal to 0.
|
||||
|
||||
```js
|
||||
assert.match(code, /if\s*\(\s*xVelocity\s*===\s*0\s*\)\s*{\s*/);
|
||||
```
|
||||
|
||||
Your `if` statement should assign `player.velocity.x` to `xVelocity`.
|
||||
|
||||
```js
|
||||
assert.match(code, /player\.velocity\.x\s*=\s*xVelocity\s*;?/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#99c9ff";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
|
||||
update() {
|
||||
this.draw();
|
||||
this.position.x += this.velocity.x;
|
||||
this.position.y += this.velocity.y;
|
||||
|
||||
if (this.position.y + this.height + this.velocity.y <= canvas.height) {
|
||||
if (this.position.y < 0) {
|
||||
this.position.y = 0;
|
||||
this.velocity.y = gravity;
|
||||
}
|
||||
this.velocity.y += gravity;
|
||||
} else {
|
||||
this.velocity.y = 0;
|
||||
}
|
||||
|
||||
if (this.position.x < this.width) {
|
||||
this.position.x = this.width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const player = new Player();
|
||||
|
||||
|
||||
const animate = () => {
|
||||
requestAnimationFrame(animate);
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
player.update();
|
||||
|
||||
if (keys.rightKey.pressed && player.position.x < 400) {
|
||||
player.velocity.x = 5;
|
||||
} else if (keys.leftKey.pressed && player.position.x > 100) {
|
||||
player.velocity.x = -5;
|
||||
} else {
|
||||
player.velocity.x = 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const keys = {
|
||||
rightKey: {
|
||||
pressed: false
|
||||
},
|
||||
leftKey: {
|
||||
pressed: false
|
||||
}
|
||||
};
|
||||
|
||||
const movePlayer = (key, xVelocity, isPressed) => {
|
||||
if (!isCheckpointCollisionDetectionActive) {
|
||||
player.velocity.x = 0;
|
||||
player.velocity.y = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
switch (key) {
|
||||
case "ArrowLeft":
|
||||
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
|
||||
const startGame = () => {
|
||||
canvas.style.display = "block";
|
||||
startScreen.style.display = "none";
|
||||
player.draw();
|
||||
}
|
||||
|
||||
startBtn.addEventListener("click", startGame);
|
||||
|
||||
```
|
||||
@@ -0,0 +1,273 @@
|
||||
---
|
||||
id: 64c7168cba4a4f7c90c26277
|
||||
title: Step 52
|
||||
challengeType: 0
|
||||
dashedName: step-52
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Below your `if` statement, use the subtraction assignment operator to subtract the `xVelocity` from `player.velocity.x`.
|
||||
|
||||
To close out this case, make sure to add a `break` statement.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the subtraction assignment operator to subtract the `xVelocity` from `player.velocity.x`.
|
||||
|
||||
```js
|
||||
assert.match(code, /player\.velocity\.x\s*-=\s*xVelocity\s*;?/);
|
||||
```
|
||||
|
||||
Your case should have a `break` statement.
|
||||
|
||||
```js
|
||||
assert.match(code, /break\s*;?/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#99c9ff";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
|
||||
update() {
|
||||
this.draw();
|
||||
this.position.x += this.velocity.x;
|
||||
this.position.y += this.velocity.y;
|
||||
|
||||
if (this.position.y + this.height + this.velocity.y <= canvas.height) {
|
||||
if (this.position.y < 0) {
|
||||
this.position.y = 0;
|
||||
this.velocity.y = gravity;
|
||||
}
|
||||
this.velocity.y += gravity;
|
||||
} else {
|
||||
this.velocity.y = 0;
|
||||
}
|
||||
|
||||
if (this.position.x < this.width) {
|
||||
this.position.x = this.width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const player = new Player();
|
||||
|
||||
|
||||
const animate = () => {
|
||||
requestAnimationFrame(animate);
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
player.update();
|
||||
|
||||
if (keys.rightKey.pressed && player.position.x < 400) {
|
||||
player.velocity.x = 5;
|
||||
} else if (keys.leftKey.pressed && player.position.x > 100) {
|
||||
player.velocity.x = -5;
|
||||
} else {
|
||||
player.velocity.x = 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const keys = {
|
||||
rightKey: {
|
||||
pressed: false
|
||||
},
|
||||
leftKey: {
|
||||
pressed: false
|
||||
}
|
||||
};
|
||||
|
||||
const movePlayer = (key, xVelocity, isPressed) => {
|
||||
if (!isCheckpointCollisionDetectionActive) {
|
||||
player.velocity.x = 0;
|
||||
player.velocity.y = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
switch (key) {
|
||||
case "ArrowLeft":
|
||||
keys.leftKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
|
||||
const startGame = () => {
|
||||
canvas.style.display = "block";
|
||||
startScreen.style.display = "none";
|
||||
player.draw();
|
||||
}
|
||||
|
||||
startBtn.addEventListener("click", startGame);
|
||||
|
||||
```
|
||||
@@ -0,0 +1,291 @@
|
||||
---
|
||||
id: 64c7173772c2497ce99b474c
|
||||
title: Step 53
|
||||
challengeType: 0
|
||||
dashedName: step-53
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
```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.
|
||||
|
||||
```js
|
||||
assert.match(code, /\s*case\s*('|"|`)\s\1\s*:\s*/);
|
||||
```
|
||||
|
||||
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*/)
|
||||
```
|
||||
|
||||
You should use the subtraction assignment operator to subtract 8 from `player.velocity.y`.
|
||||
|
||||
```js
|
||||
assert.match(code, /player\.velocity\.y\s*-=\s*8\s*;?/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#99c9ff";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
|
||||
update() {
|
||||
this.draw();
|
||||
this.position.x += this.velocity.x;
|
||||
this.position.y += this.velocity.y;
|
||||
|
||||
if (this.position.y + this.height + this.velocity.y <= canvas.height) {
|
||||
if (this.position.y < 0) {
|
||||
this.position.y = 0;
|
||||
this.velocity.y = gravity;
|
||||
}
|
||||
this.velocity.y += gravity;
|
||||
} else {
|
||||
this.velocity.y = 0;
|
||||
}
|
||||
|
||||
if (this.position.x < this.width) {
|
||||
this.position.x = this.width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const player = new Player();
|
||||
|
||||
|
||||
const animate = () => {
|
||||
requestAnimationFrame(animate);
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
player.update();
|
||||
|
||||
if (keys.rightKey.pressed && player.position.x < 400) {
|
||||
player.velocity.x = 5;
|
||||
} else if (keys.leftKey.pressed && player.position.x > 100) {
|
||||
player.velocity.x = -5;
|
||||
} else {
|
||||
player.velocity.x = 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const keys = {
|
||||
rightKey: {
|
||||
pressed: false
|
||||
},
|
||||
leftKey: {
|
||||
pressed: false
|
||||
}
|
||||
};
|
||||
|
||||
const movePlayer = (key, xVelocity, isPressed) => {
|
||||
if (!isCheckpointCollisionDetectionActive) {
|
||||
player.velocity.x = 0;
|
||||
player.velocity.y = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
switch (key) {
|
||||
case "ArrowLeft":
|
||||
keys.leftKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x -= xVelocity;
|
||||
break;
|
||||
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
|
||||
const startGame = () => {
|
||||
canvas.style.display = "block";
|
||||
startScreen.style.display = "none";
|
||||
player.draw();
|
||||
}
|
||||
|
||||
startBtn.addEventListener("click", startGame);
|
||||
|
||||
```
|
||||
@@ -0,0 +1,302 @@
|
||||
---
|
||||
id: 64c7202620a5e17d8a3c777d
|
||||
title: Step 54
|
||||
challengeType: 0
|
||||
dashedName: step-54
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The last case you will need to add will be for "ArrowRight".
|
||||
|
||||
Inside that case, assign `isPressed` to `keys.rightKey.pressed`.
|
||||
|
||||
Add an if statement that checks if `xVelocity` is equal to 0. If so, assign the `xVelocity` to `player.velocity.x`.
|
||||
|
||||
Below that `if` statement, use the addition assignment operator to assign the `xVelocity` to `player.velocity.x`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `case` for "ArrowRight".
|
||||
|
||||
```js
|
||||
assert.match(code, /case\s*['"]ArrowRight['"]\s*:\s*/);
|
||||
```
|
||||
|
||||
You need to assign `isPressed` to `keys.rightKey.pressed`.
|
||||
|
||||
```js
|
||||
assert.match(code, /\s*keys\.rightKey\.pressed\s*=\s*isPressed\s*;?/);
|
||||
```
|
||||
|
||||
You need to add an `if` statement that checks if `xVelocity` is equal to 0.
|
||||
|
||||
```js
|
||||
assert.match(code, /if\s*\(\s*xVelocity\s*===\s*0\s*\)\s*{\s*/);
|
||||
```
|
||||
|
||||
You need to assign the `xVelocity` to `player.velocity.x`.
|
||||
|
||||
```js
|
||||
assert.match(code, /\s*player\.velocity\.x\s*=\s*xVelocity\s*;?/);
|
||||
```
|
||||
|
||||
You need to use the addition assignment operator to assign the `xVelocity` to `player.velocity.x`.
|
||||
|
||||
```js
|
||||
assert.match(code, /\s*player\.velocity\.x\s*\+=\s*xVelocity\s*;?/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#99c9ff";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
|
||||
update() {
|
||||
this.draw();
|
||||
this.position.x += this.velocity.x;
|
||||
this.position.y += this.velocity.y;
|
||||
|
||||
if (this.position.y + this.height + this.velocity.y <= canvas.height) {
|
||||
if (this.position.y < 0) {
|
||||
this.position.y = 0;
|
||||
this.velocity.y = gravity;
|
||||
}
|
||||
this.velocity.y += gravity;
|
||||
} else {
|
||||
this.velocity.y = 0;
|
||||
}
|
||||
|
||||
if (this.position.x < this.width) {
|
||||
this.position.x = this.width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const player = new Player();
|
||||
|
||||
|
||||
const animate = () => {
|
||||
requestAnimationFrame(animate);
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
player.update();
|
||||
|
||||
if (keys.rightKey.pressed && player.position.x < 400) {
|
||||
player.velocity.x = 5;
|
||||
} else if (keys.leftKey.pressed && player.position.x > 100) {
|
||||
player.velocity.x = -5;
|
||||
} else {
|
||||
player.velocity.x = 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const keys = {
|
||||
rightKey: {
|
||||
pressed: false
|
||||
},
|
||||
leftKey: {
|
||||
pressed: false
|
||||
}
|
||||
};
|
||||
|
||||
const movePlayer = (key, xVelocity, isPressed) => {
|
||||
if (!isCheckpointCollisionDetectionActive) {
|
||||
player.velocity.x = 0;
|
||||
player.velocity.y = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
switch (key) {
|
||||
case "ArrowLeft":
|
||||
keys.leftKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x -= xVelocity;
|
||||
break;
|
||||
case "ArrowUp":
|
||||
case " ":
|
||||
case "Spacebar":
|
||||
player.velocity.y -= 8;
|
||||
break;
|
||||
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
|
||||
const startGame = () => {
|
||||
canvas.style.display = "block";
|
||||
startScreen.style.display = "none";
|
||||
player.draw();
|
||||
}
|
||||
|
||||
startBtn.addEventListener("click", startGame);
|
||||
|
||||
```
|
||||
@@ -0,0 +1,294 @@
|
||||
---
|
||||
id: 64c72e52133d687e8e6a60f6
|
||||
title: Step 55
|
||||
challengeType: 0
|
||||
dashedName: step-55
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now it is time to add the event listeners that will be responsible for calling the `movePlayer` function.
|
||||
|
||||
Start by adding an `addEventListener` to the global `window` object.
|
||||
|
||||
For the arguments, pass in the "keydown" event and an arrow function that uses the destructuring assignment to get the `key` property from the `event` object.
|
||||
|
||||
# --hints--
|
||||
|
||||
You need to add an `addEventListener` to the global `window` object.
|
||||
|
||||
```js
|
||||
assert.match(code, /window\.addEventListener\s*\(\s*.*\s*\)/);
|
||||
```
|
||||
|
||||
Your event listener should listen for the "keydown" event.
|
||||
|
||||
```js
|
||||
assert.match(code, /window\.addEventListener\s*\(\s*['"]keydown['"]\s*,\s*.*\s*\)/);
|
||||
|
||||
```
|
||||
|
||||
You should use the destructuring assignment to get the `key` property from the `event` object.
|
||||
|
||||
```js
|
||||
assert.match(code, /window\.addEventListener\s*\(\s*['"]keydown['"]\s*,\s*\(\s*{\s*key\s*}\s*\)\s*=>\s*{\s*}\s*\)/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#99c9ff";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
|
||||
update() {
|
||||
this.draw();
|
||||
this.position.x += this.velocity.x;
|
||||
this.position.y += this.velocity.y;
|
||||
|
||||
if (this.position.y + this.height + this.velocity.y <= canvas.height) {
|
||||
if (this.position.y < 0) {
|
||||
this.position.y = 0;
|
||||
this.velocity.y = gravity;
|
||||
}
|
||||
this.velocity.y += gravity;
|
||||
} else {
|
||||
this.velocity.y = 0;
|
||||
}
|
||||
|
||||
if (this.position.x < this.width) {
|
||||
this.position.x = this.width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const player = new Player();
|
||||
|
||||
|
||||
const animate = () => {
|
||||
requestAnimationFrame(animate);
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
player.update();
|
||||
|
||||
if (keys.rightKey.pressed && player.position.x < 400) {
|
||||
player.velocity.x = 5;
|
||||
} else if (keys.leftKey.pressed && player.position.x > 100) {
|
||||
player.velocity.x = -5;
|
||||
} else {
|
||||
player.velocity.x = 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const keys = {
|
||||
rightKey: {
|
||||
pressed: false
|
||||
},
|
||||
leftKey: {
|
||||
pressed: false
|
||||
}
|
||||
};
|
||||
|
||||
const movePlayer = (key, xVelocity, isPressed) => {
|
||||
if (!isCheckpointCollisionDetectionActive) {
|
||||
player.velocity.x = 0;
|
||||
player.velocity.y = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
switch (key) {
|
||||
case "ArrowLeft":
|
||||
keys.leftKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x -= xVelocity;
|
||||
break;
|
||||
case "ArrowUp":
|
||||
case " ":
|
||||
case "Spacebar":
|
||||
player.velocity.y -= 8;
|
||||
break;
|
||||
case "ArrowRight":
|
||||
keys.rightKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x += xVelocity;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const startGame = () => {
|
||||
canvas.style.display = "block";
|
||||
startScreen.style.display = "none";
|
||||
player.draw();
|
||||
}
|
||||
|
||||
startBtn.addEventListener("click", startGame);
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,287 @@
|
||||
---
|
||||
id: 64c73367cce78a7fd65dd3be
|
||||
title: Step 56
|
||||
challengeType: 0
|
||||
dashedName: step-56
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Inside the arrow function, call the `movePlayer` function and pass in `key`, 8, and `true` as arguments.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should call the `movePlayer` function.
|
||||
|
||||
```js
|
||||
assert.match(code, /movePlayer\s*\(.*\)/);
|
||||
```
|
||||
|
||||
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*\)/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#99c9ff";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
|
||||
update() {
|
||||
this.draw();
|
||||
this.position.x += this.velocity.x;
|
||||
this.position.y += this.velocity.y;
|
||||
|
||||
if (this.position.y + this.height + this.velocity.y <= canvas.height) {
|
||||
if (this.position.y < 0) {
|
||||
this.position.y = 0;
|
||||
this.velocity.y = gravity;
|
||||
}
|
||||
this.velocity.y += gravity;
|
||||
} else {
|
||||
this.velocity.y = 0;
|
||||
}
|
||||
|
||||
if (this.position.x < this.width) {
|
||||
this.position.x = this.width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const player = new Player();
|
||||
|
||||
|
||||
const animate = () => {
|
||||
requestAnimationFrame(animate);
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
player.update();
|
||||
|
||||
if (keys.rightKey.pressed && player.position.x < 400) {
|
||||
player.velocity.x = 5;
|
||||
} else if (keys.leftKey.pressed && player.position.x > 100) {
|
||||
player.velocity.x = -5;
|
||||
} else {
|
||||
player.velocity.x = 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const keys = {
|
||||
rightKey: {
|
||||
pressed: false
|
||||
},
|
||||
leftKey: {
|
||||
pressed: false
|
||||
}
|
||||
};
|
||||
|
||||
const movePlayer = (key, xVelocity, isPressed) => {
|
||||
if (!isCheckpointCollisionDetectionActive) {
|
||||
player.velocity.x = 0;
|
||||
player.velocity.y = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
switch (key) {
|
||||
case "ArrowLeft":
|
||||
keys.leftKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x -= xVelocity;
|
||||
break;
|
||||
case "ArrowUp":
|
||||
case " ":
|
||||
case "Spacebar":
|
||||
player.velocity.y -= 8;
|
||||
break;
|
||||
case "ArrowRight":
|
||||
keys.rightKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x += xVelocity;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const startGame = () => {
|
||||
canvas.style.display = "block";
|
||||
startScreen.style.display = "none";
|
||||
player.draw();
|
||||
}
|
||||
|
||||
startBtn.addEventListener("click", startGame);
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
window.addEventListener("keydown", ({ key }) => {
|
||||
|
||||
});
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,287 @@
|
||||
---
|
||||
id: 64c734293def73808e609778
|
||||
title: Step 57
|
||||
challengeType: 0
|
||||
dashedName: step-57
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Add another `addEventListener` to the global `window` object and pass in the "keyup" event and `key` as arguments.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have an `addEventListener` that listens for the "keyup" event.
|
||||
|
||||
```js
|
||||
assert.match(code, /window\.addEventListener\s*\(\s*['"]keyup['"]\s*,\s*.*\s*\)/);
|
||||
```
|
||||
|
||||
You should use the destructuring assignment to get the `key` property from the `event` object.
|
||||
|
||||
```js
|
||||
assert.match(code, /window\.addEventListener\s*\(\s*['"]keyup['"]\s*,\s*\(\s*{\s*key\s*}\s*\)\s*=>\s*{\s*}\s*\)/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#99c9ff";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
|
||||
update() {
|
||||
this.draw();
|
||||
this.position.x += this.velocity.x;
|
||||
this.position.y += this.velocity.y;
|
||||
|
||||
if (this.position.y + this.height + this.velocity.y <= canvas.height) {
|
||||
if (this.position.y < 0) {
|
||||
this.position.y = 0;
|
||||
this.velocity.y = gravity;
|
||||
}
|
||||
this.velocity.y += gravity;
|
||||
} else {
|
||||
this.velocity.y = 0;
|
||||
}
|
||||
|
||||
if (this.position.x < this.width) {
|
||||
this.position.x = this.width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const player = new Player();
|
||||
|
||||
|
||||
const animate = () => {
|
||||
requestAnimationFrame(animate);
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
player.update();
|
||||
|
||||
if (keys.rightKey.pressed && player.position.x < 400) {
|
||||
player.velocity.x = 5;
|
||||
} else if (keys.leftKey.pressed && player.position.x > 100) {
|
||||
player.velocity.x = -5;
|
||||
} else {
|
||||
player.velocity.x = 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const keys = {
|
||||
rightKey: {
|
||||
pressed: false
|
||||
},
|
||||
leftKey: {
|
||||
pressed: false
|
||||
}
|
||||
};
|
||||
|
||||
const movePlayer = (key, xVelocity, isPressed) => {
|
||||
if (!isCheckpointCollisionDetectionActive) {
|
||||
player.velocity.x = 0;
|
||||
player.velocity.y = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
switch (key) {
|
||||
case "ArrowLeft":
|
||||
keys.leftKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x -= xVelocity;
|
||||
break;
|
||||
case "ArrowUp":
|
||||
case " ":
|
||||
case "Spacebar":
|
||||
player.velocity.y -= 8;
|
||||
break;
|
||||
case "ArrowRight":
|
||||
keys.rightKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x += xVelocity;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const startGame = () => {
|
||||
canvas.style.display = "block";
|
||||
startScreen.style.display = "none";
|
||||
player.draw();
|
||||
}
|
||||
|
||||
startBtn.addEventListener("click", startGame);
|
||||
|
||||
window.addEventListener("keydown", ({ key }) => {
|
||||
movePlayer(key, 8, true);
|
||||
});
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,292 @@
|
||||
---
|
||||
id: 64c736a531835181349c27d2
|
||||
title: Step 58
|
||||
challengeType: 0
|
||||
dashedName: step-58
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Inside the callback function, call the `movePlayer` function and pass in `key`, `0`, and `false` as arguments.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should call the `movePlayer` function.
|
||||
|
||||
```js
|
||||
assert.match(code, /(?<=movePlayer\s*\(.*\)).+movePlayer\s*\(.*\)/s);
|
||||
```
|
||||
|
||||
You should pass in `key`, 0 and `false` as arguments.
|
||||
|
||||
```js
|
||||
assert.match(code, /movePlayer\s*\(\s*key\s*,\s*0\s*,\s*false\s*\)/);
|
||||
```
|
||||
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#99c9ff";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
|
||||
update() {
|
||||
this.draw();
|
||||
this.position.x += this.velocity.x;
|
||||
this.position.y += this.velocity.y;
|
||||
|
||||
if (this.position.y + this.height + this.velocity.y <= canvas.height) {
|
||||
if (this.position.y < 0) {
|
||||
this.position.y = 0;
|
||||
this.velocity.y = gravity;
|
||||
}
|
||||
this.velocity.y += gravity;
|
||||
} else {
|
||||
this.velocity.y = 0;
|
||||
}
|
||||
|
||||
if (this.position.x < this.width) {
|
||||
this.position.x = this.width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const player = new Player();
|
||||
|
||||
|
||||
const animate = () => {
|
||||
requestAnimationFrame(animate);
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
player.update();
|
||||
|
||||
if (keys.rightKey.pressed && player.position.x < 400) {
|
||||
player.velocity.x = 5;
|
||||
} else if (keys.leftKey.pressed && player.position.x > 100) {
|
||||
player.velocity.x = -5;
|
||||
} else {
|
||||
player.velocity.x = 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const keys = {
|
||||
rightKey: {
|
||||
pressed: false
|
||||
},
|
||||
leftKey: {
|
||||
pressed: false
|
||||
}
|
||||
};
|
||||
|
||||
const movePlayer = (key, xVelocity, isPressed) => {
|
||||
if (!isCheckpointCollisionDetectionActive) {
|
||||
player.velocity.x = 0;
|
||||
player.velocity.y = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
switch (key) {
|
||||
case "ArrowLeft":
|
||||
keys.leftKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x -= xVelocity;
|
||||
break;
|
||||
case "ArrowUp":
|
||||
case " ":
|
||||
case "Spacebar":
|
||||
player.velocity.y -= 8;
|
||||
break;
|
||||
case "ArrowRight":
|
||||
keys.rightKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x += xVelocity;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const startGame = () => {
|
||||
canvas.style.display = "block";
|
||||
startScreen.style.display = "none";
|
||||
player.draw();
|
||||
}
|
||||
|
||||
startBtn.addEventListener("click", startGame);
|
||||
|
||||
window.addEventListener("keydown", ({ key }) => {
|
||||
movePlayer(key, 8, true);
|
||||
});
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
window.addEventListener("keyup", ({ key }) => {
|
||||
|
||||
});
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,300 @@
|
||||
---
|
||||
id: 64c73981de025581bddb89eb
|
||||
title: Step 59
|
||||
challengeType: 0
|
||||
dashedName: step-59
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Before you can start moving your player across the screen, you will need to use the `animate` function.
|
||||
|
||||
Inside the `startGame` function, delete `player.draw()` and call the `animate` function.
|
||||
|
||||
Click the Start Game button and use the left and right arrow keys to move the player across the screen. You can also use the spacebar or the up arrow key to jump up.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should delete the `player.draw()` method call.
|
||||
|
||||
```js
|
||||
const code = startGame.toString();
|
||||
assert.notMatch(code, /player\.draw\s*\(\s*\)\s*;?/);
|
||||
```
|
||||
|
||||
You should call the `animate` function.
|
||||
|
||||
```js
|
||||
const code = startGame.toString();
|
||||
assert.match(code, /animate\s*\(\s*\)\s*;?/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#99c9ff";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
|
||||
update() {
|
||||
this.draw();
|
||||
this.position.x += this.velocity.x;
|
||||
this.position.y += this.velocity.y;
|
||||
|
||||
if (this.position.y + this.height + this.velocity.y <= canvas.height) {
|
||||
if (this.position.y < 0) {
|
||||
this.position.y = 0;
|
||||
this.velocity.y = gravity;
|
||||
}
|
||||
this.velocity.y += gravity;
|
||||
} else {
|
||||
this.velocity.y = 0;
|
||||
}
|
||||
|
||||
if (this.position.x < this.width) {
|
||||
this.position.x = this.width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const player = new Player();
|
||||
|
||||
|
||||
const animate = () => {
|
||||
requestAnimationFrame(animate);
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
player.update();
|
||||
|
||||
if (keys.rightKey.pressed && player.position.x < 400) {
|
||||
player.velocity.x = 5;
|
||||
} else if (keys.leftKey.pressed && player.position.x > 100) {
|
||||
player.velocity.x = -5;
|
||||
} else {
|
||||
player.velocity.x = 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const keys = {
|
||||
rightKey: {
|
||||
pressed: false
|
||||
},
|
||||
leftKey: {
|
||||
pressed: false
|
||||
}
|
||||
};
|
||||
|
||||
const movePlayer = (key, xVelocity, isPressed) => {
|
||||
if (!isCheckpointCollisionDetectionActive) {
|
||||
player.velocity.x = 0;
|
||||
player.velocity.y = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
switch (key) {
|
||||
case "ArrowLeft":
|
||||
keys.leftKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x -= xVelocity;
|
||||
break;
|
||||
case "ArrowUp":
|
||||
case " ":
|
||||
case "Spacebar":
|
||||
player.velocity.y -= 8;
|
||||
break;
|
||||
case "ArrowRight":
|
||||
keys.rightKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x += xVelocity;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const startGame = () => {
|
||||
canvas.style.display = "block";
|
||||
startScreen.style.display = "none";
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
player.draw();
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
|
||||
startBtn.addEventListener("click", startGame);
|
||||
|
||||
window.addEventListener("keydown", ({ key }) => {
|
||||
movePlayer(key, 8, true);
|
||||
});
|
||||
|
||||
window.addEventListener("keyup", ({ key }) => {
|
||||
movePlayer(key, 0, false);
|
||||
});
|
||||
|
||||
|
||||
```
|
||||
@@ -0,0 +1,285 @@
|
||||
---
|
||||
id: 64c73df1424422832333a9fa
|
||||
title: Step 60
|
||||
challengeType: 0
|
||||
dashedName: step-60
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The next step is to create the platforms and platform logic.
|
||||
|
||||
Start by creating a new `Platform` class.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a new `Platform` class.
|
||||
|
||||
```js
|
||||
assert.match(code, /class\s+Platform\s+{/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#99c9ff";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
|
||||
update() {
|
||||
this.draw();
|
||||
this.position.x += this.velocity.x;
|
||||
this.position.y += this.velocity.y;
|
||||
|
||||
if (this.position.y + this.height + this.velocity.y <= canvas.height) {
|
||||
if (this.position.y < 0) {
|
||||
this.position.y = 0;
|
||||
this.velocity.y = gravity;
|
||||
}
|
||||
this.velocity.y += gravity;
|
||||
} else {
|
||||
this.velocity.y = 0;
|
||||
}
|
||||
|
||||
if (this.position.x < this.width) {
|
||||
this.position.x = this.width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
const player = new Player();
|
||||
|
||||
const animate = () => {
|
||||
requestAnimationFrame(animate);
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
player.update();
|
||||
|
||||
if (keys.rightKey.pressed && player.position.x < 400) {
|
||||
player.velocity.x = 5;
|
||||
} else if (keys.leftKey.pressed && player.position.x > 100) {
|
||||
player.velocity.x = -5;
|
||||
} else {
|
||||
player.velocity.x = 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const keys = {
|
||||
rightKey: {
|
||||
pressed: false
|
||||
},
|
||||
leftKey: {
|
||||
pressed: false
|
||||
}
|
||||
};
|
||||
|
||||
const movePlayer = (key, xVelocity, isPressed) => {
|
||||
if (!isCheckpointCollisionDetectionActive) {
|
||||
player.velocity.x = 0;
|
||||
player.velocity.y = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
switch (key) {
|
||||
case "ArrowLeft":
|
||||
keys.leftKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x -= xVelocity;
|
||||
break;
|
||||
case "ArrowUp":
|
||||
case " ":
|
||||
case "Spacebar":
|
||||
player.velocity.y -= 8;
|
||||
break;
|
||||
case "ArrowRight":
|
||||
keys.rightKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x += xVelocity;
|
||||
}
|
||||
}
|
||||
|
||||
const startGame = () => {
|
||||
canvas.style.display = "block";
|
||||
startScreen.style.display = "none";
|
||||
animate();
|
||||
}
|
||||
|
||||
startBtn.addEventListener("click", startGame);
|
||||
|
||||
window.addEventListener("keydown", ({ key }) => {
|
||||
movePlayer(key, 8, true);
|
||||
});
|
||||
|
||||
window.addEventListener("keyup", ({ key }) => {
|
||||
movePlayer(key, 0, false);
|
||||
});
|
||||
|
||||
```
|
||||
@@ -0,0 +1,287 @@
|
||||
---
|
||||
id: 64c74a226587f502c0525927
|
||||
title: Step 61
|
||||
challengeType: 0
|
||||
dashedName: step-61
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Inside the `Platform` class, create a constructor that takes in the `x` and `y` coordinates.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a constructor that takes in the `x` and `y` coordinates.
|
||||
|
||||
```js
|
||||
assert.match(code, /constructor\s*\(\s*x\s*,\s*y\s*\)\s*{\s*}/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#99c9ff";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
|
||||
update() {
|
||||
this.draw();
|
||||
this.position.x += this.velocity.x;
|
||||
this.position.y += this.velocity.y;
|
||||
|
||||
if (this.position.y + this.height + this.velocity.y <= canvas.height) {
|
||||
if (this.position.y < 0) {
|
||||
this.position.y = 0;
|
||||
this.velocity.y = gravity;
|
||||
}
|
||||
this.velocity.y += gravity;
|
||||
} else {
|
||||
this.velocity.y = 0;
|
||||
}
|
||||
|
||||
if (this.position.x < this.width) {
|
||||
this.position.x = this.width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
class Platform {
|
||||
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
const player = new Player();
|
||||
|
||||
const animate = () => {
|
||||
requestAnimationFrame(animate);
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
player.update();
|
||||
|
||||
if (keys.rightKey.pressed && player.position.x < 400) {
|
||||
player.velocity.x = 5;
|
||||
} else if (keys.leftKey.pressed && player.position.x > 100) {
|
||||
player.velocity.x = -5;
|
||||
} else {
|
||||
player.velocity.x = 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const keys = {
|
||||
rightKey: {
|
||||
pressed: false
|
||||
},
|
||||
leftKey: {
|
||||
pressed: false
|
||||
}
|
||||
};
|
||||
|
||||
const movePlayer = (key, xVelocity, isPressed) => {
|
||||
if (!isCheckpointCollisionDetectionActive) {
|
||||
player.velocity.x = 0;
|
||||
player.velocity.y = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
switch (key) {
|
||||
case "ArrowLeft":
|
||||
keys.leftKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x -= xVelocity;
|
||||
break;
|
||||
case "ArrowUp":
|
||||
case " ":
|
||||
case "Spacebar":
|
||||
player.velocity.y -= 8;
|
||||
break;
|
||||
case "ArrowRight":
|
||||
keys.rightKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x += xVelocity;
|
||||
}
|
||||
}
|
||||
|
||||
const startGame = () => {
|
||||
canvas.style.display = "block";
|
||||
startScreen.style.display = "none";
|
||||
animate();
|
||||
}
|
||||
|
||||
startBtn.addEventListener("click", startGame);
|
||||
|
||||
window.addEventListener("keydown", ({ key }) => {
|
||||
movePlayer(key, 8, true);
|
||||
});
|
||||
|
||||
window.addEventListener("keyup", ({ key }) => {
|
||||
movePlayer(key, 0, false);
|
||||
});
|
||||
|
||||
```
|
||||
@@ -0,0 +1,295 @@
|
||||
---
|
||||
id: 64c74a8a4138c6032241d498
|
||||
title: Step 62
|
||||
challengeType: 0
|
||||
dashedName: step-62
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Inside the constructor, add `this.position` and assign it an object with the `x` and `y` coordinates.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `this.position` property.
|
||||
|
||||
```js
|
||||
assert.match(code, /this\.position\s*;?/);
|
||||
```
|
||||
|
||||
The `this.position` property should be an object with the `x` and `y` coordinates.
|
||||
|
||||
```js
|
||||
assert.match(code, /this\.position\s*=\s*{\s*x\s*,\s*y\s*,?\s*}\s*;?/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#99c9ff";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
|
||||
update() {
|
||||
this.draw();
|
||||
this.position.x += this.velocity.x;
|
||||
this.position.y += this.velocity.y;
|
||||
|
||||
if (this.position.y + this.height + this.velocity.y <= canvas.height) {
|
||||
if (this.position.y < 0) {
|
||||
this.position.y = 0;
|
||||
this.velocity.y = gravity;
|
||||
}
|
||||
this.velocity.y += gravity;
|
||||
} else {
|
||||
this.velocity.y = 0;
|
||||
}
|
||||
|
||||
if (this.position.x < this.width) {
|
||||
this.position.x = this.width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
class Platform {
|
||||
constructor(x, y) {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
const player = new Player();
|
||||
|
||||
const animate = () => {
|
||||
requestAnimationFrame(animate);
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
player.update();
|
||||
|
||||
if (keys.rightKey.pressed && player.position.x < 400) {
|
||||
player.velocity.x = 5;
|
||||
} else if (keys.leftKey.pressed && player.position.x > 100) {
|
||||
player.velocity.x = -5;
|
||||
} else {
|
||||
player.velocity.x = 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const keys = {
|
||||
rightKey: {
|
||||
pressed: false
|
||||
},
|
||||
leftKey: {
|
||||
pressed: false
|
||||
}
|
||||
};
|
||||
|
||||
const movePlayer = (key, xVelocity, isPressed) => {
|
||||
if (!isCheckpointCollisionDetectionActive) {
|
||||
player.velocity.x = 0;
|
||||
player.velocity.y = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
switch (key) {
|
||||
case "ArrowLeft":
|
||||
keys.leftKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x -= xVelocity;
|
||||
break;
|
||||
case "ArrowUp":
|
||||
case " ":
|
||||
case "Spacebar":
|
||||
player.velocity.y -= 8;
|
||||
break;
|
||||
case "ArrowRight":
|
||||
keys.rightKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x += xVelocity;
|
||||
}
|
||||
}
|
||||
|
||||
const startGame = () => {
|
||||
canvas.style.display = "block";
|
||||
startScreen.style.display = "none";
|
||||
animate();
|
||||
}
|
||||
|
||||
startBtn.addEventListener("click", startGame);
|
||||
|
||||
window.addEventListener("keydown", ({ key }) => {
|
||||
movePlayer(key, 8, true);
|
||||
});
|
||||
|
||||
window.addEventListener("keyup", ({ key }) => {
|
||||
movePlayer(key, 0, false);
|
||||
});
|
||||
|
||||
```
|
||||
@@ -0,0 +1,295 @@
|
||||
---
|
||||
id: 64c74c293dd7cf03cbd58194
|
||||
title: Step 63
|
||||
challengeType: 0
|
||||
dashedName: step-63
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Next, add a `width` property to the constructor and assign it the number 200.
|
||||
|
||||
Don't forget to use the `this` keyword to access the properties.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `width` property and assign it the number 200.
|
||||
|
||||
```js
|
||||
assert.match(code, /this\.width\s*=\s*200\s*;?/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#99c9ff";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
|
||||
update() {
|
||||
this.draw();
|
||||
this.position.x += this.velocity.x;
|
||||
this.position.y += this.velocity.y;
|
||||
|
||||
if (this.position.y + this.height + this.velocity.y <= canvas.height) {
|
||||
if (this.position.y < 0) {
|
||||
this.position.y = 0;
|
||||
this.velocity.y = gravity;
|
||||
}
|
||||
this.velocity.y += gravity;
|
||||
} else {
|
||||
this.velocity.y = 0;
|
||||
}
|
||||
|
||||
if (this.position.x < this.width) {
|
||||
this.position.x = this.width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
class Platform {
|
||||
constructor(x, y) {
|
||||
this.position = {
|
||||
x,
|
||||
y,
|
||||
};
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
const player = new Player();
|
||||
|
||||
const animate = () => {
|
||||
requestAnimationFrame(animate);
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
player.update();
|
||||
|
||||
if (keys.rightKey.pressed && player.position.x < 400) {
|
||||
player.velocity.x = 5;
|
||||
} else if (keys.leftKey.pressed && player.position.x > 100) {
|
||||
player.velocity.x = -5;
|
||||
} else {
|
||||
player.velocity.x = 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const keys = {
|
||||
rightKey: {
|
||||
pressed: false
|
||||
},
|
||||
leftKey: {
|
||||
pressed: false
|
||||
}
|
||||
};
|
||||
|
||||
const movePlayer = (key, xVelocity, isPressed) => {
|
||||
if (!isCheckpointCollisionDetectionActive) {
|
||||
player.velocity.x = 0;
|
||||
player.velocity.y = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
switch (key) {
|
||||
case "ArrowLeft":
|
||||
keys.leftKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x -= xVelocity;
|
||||
break;
|
||||
case "ArrowUp":
|
||||
case " ":
|
||||
case "Spacebar":
|
||||
player.velocity.y -= 8;
|
||||
break;
|
||||
case "ArrowRight":
|
||||
keys.rightKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x += xVelocity;
|
||||
}
|
||||
}
|
||||
|
||||
const startGame = () => {
|
||||
canvas.style.display = "block";
|
||||
startScreen.style.display = "none";
|
||||
animate();
|
||||
}
|
||||
|
||||
startBtn.addEventListener("click", startGame);
|
||||
|
||||
window.addEventListener("keydown", ({ key }) => {
|
||||
movePlayer(key, 8, true);
|
||||
});
|
||||
|
||||
window.addEventListener("keyup", ({ key }) => {
|
||||
movePlayer(key, 0, false);
|
||||
});
|
||||
|
||||
```
|
||||
@@ -0,0 +1,297 @@
|
||||
---
|
||||
id: 64c74e0064a9080443af0796
|
||||
title: Step 64
|
||||
challengeType: 0
|
||||
dashedName: step-64
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Below that, add a `height` property and assign it the number `40`.
|
||||
|
||||
Remember to use the `this` keyword to access the properties.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `height` property.
|
||||
|
||||
```js
|
||||
const splitter = code.split("if (this.position.x < this.width) {")
|
||||
assert.match(splitter[1], /this\.height\s*=\s*40\s*;?/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#99c9ff";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
|
||||
update() {
|
||||
this.draw();
|
||||
this.position.x += this.velocity.x;
|
||||
this.position.y += this.velocity.y;
|
||||
|
||||
if (this.position.y + this.height + this.velocity.y <= canvas.height) {
|
||||
if (this.position.y < 0) {
|
||||
this.position.y = 0;
|
||||
this.velocity.y = gravity;
|
||||
}
|
||||
this.velocity.y += gravity;
|
||||
} else {
|
||||
this.velocity.y = 0;
|
||||
}
|
||||
|
||||
if (this.position.x < this.width) {
|
||||
this.position.x = this.width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
class Platform {
|
||||
constructor(x, y) {
|
||||
this.position = {
|
||||
x,
|
||||
y,
|
||||
};
|
||||
this.width = 200;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
const player = new Player();
|
||||
|
||||
const animate = () => {
|
||||
requestAnimationFrame(animate);
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
player.update();
|
||||
|
||||
if (keys.rightKey.pressed && player.position.x < 400) {
|
||||
player.velocity.x = 5;
|
||||
} else if (keys.leftKey.pressed && player.position.x > 100) {
|
||||
player.velocity.x = -5;
|
||||
} else {
|
||||
player.velocity.x = 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const keys = {
|
||||
rightKey: {
|
||||
pressed: false
|
||||
},
|
||||
leftKey: {
|
||||
pressed: false
|
||||
}
|
||||
};
|
||||
|
||||
const movePlayer = (key, xVelocity, isPressed) => {
|
||||
if (!isCheckpointCollisionDetectionActive) {
|
||||
player.velocity.x = 0;
|
||||
player.velocity.y = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
switch (key) {
|
||||
case "ArrowLeft":
|
||||
keys.leftKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x -= xVelocity;
|
||||
break;
|
||||
case "ArrowUp":
|
||||
case " ":
|
||||
case "Spacebar":
|
||||
player.velocity.y -= 8;
|
||||
break;
|
||||
case "ArrowRight":
|
||||
keys.rightKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x += xVelocity;
|
||||
}
|
||||
}
|
||||
|
||||
const startGame = () => {
|
||||
canvas.style.display = "block";
|
||||
startScreen.style.display = "none";
|
||||
animate();
|
||||
}
|
||||
|
||||
startBtn.addEventListener("click", startGame);
|
||||
|
||||
window.addEventListener("keydown", ({ key }) => {
|
||||
movePlayer(key, 8, true);
|
||||
});
|
||||
|
||||
window.addEventListener("keyup", ({ key }) => {
|
||||
movePlayer(key, 0, false);
|
||||
});
|
||||
|
||||
```
|
||||
@@ -0,0 +1,303 @@
|
||||
---
|
||||
id: 64c750c328e06f0878a9272e
|
||||
title: Step 65
|
||||
challengeType: 0
|
||||
dashedName: step-65
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Next, add a `draw` method to the `Platform` class.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `Platform` class should have a `draw` method.
|
||||
|
||||
```js
|
||||
const platform = new Platform();
|
||||
assert.isFunction(platform.draw);
|
||||
```
|
||||
|
||||
Your `draw` method should be empty.
|
||||
|
||||
```js
|
||||
const platform = new Platform();
|
||||
assert.match(platform.draw.toString(), /\(\s*\)\s*\{\s*\}/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#99c9ff";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
|
||||
update() {
|
||||
this.draw();
|
||||
this.position.x += this.velocity.x;
|
||||
this.position.y += this.velocity.y;
|
||||
|
||||
if (this.position.y + this.height + this.velocity.y <= canvas.height) {
|
||||
if (this.position.y < 0) {
|
||||
this.position.y = 0;
|
||||
this.velocity.y = gravity;
|
||||
}
|
||||
this.velocity.y += gravity;
|
||||
} else {
|
||||
this.velocity.y = 0;
|
||||
}
|
||||
|
||||
if (this.position.x < this.width) {
|
||||
this.position.x = this.width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
class Platform {
|
||||
constructor(x, y) {
|
||||
this.position = {
|
||||
x,
|
||||
y,
|
||||
};
|
||||
this.width = 200;
|
||||
this.height = 40;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
const player = new Player();
|
||||
|
||||
const animate = () => {
|
||||
requestAnimationFrame(animate);
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
player.update();
|
||||
|
||||
if (keys.rightKey.pressed && player.position.x < 400) {
|
||||
player.velocity.x = 5;
|
||||
} else if (keys.leftKey.pressed && player.position.x > 100) {
|
||||
player.velocity.x = -5;
|
||||
} else {
|
||||
player.velocity.x = 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const keys = {
|
||||
rightKey: {
|
||||
pressed: false
|
||||
},
|
||||
leftKey: {
|
||||
pressed: false
|
||||
}
|
||||
};
|
||||
|
||||
const movePlayer = (key, xVelocity, isPressed) => {
|
||||
if (!isCheckpointCollisionDetectionActive) {
|
||||
player.velocity.x = 0;
|
||||
player.velocity.y = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
switch (key) {
|
||||
case "ArrowLeft":
|
||||
keys.leftKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x -= xVelocity;
|
||||
break;
|
||||
case "ArrowUp":
|
||||
case " ":
|
||||
case "Spacebar":
|
||||
player.velocity.y -= 8;
|
||||
break;
|
||||
case "ArrowRight":
|
||||
keys.rightKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x += xVelocity;
|
||||
}
|
||||
}
|
||||
|
||||
const startGame = () => {
|
||||
canvas.style.display = "block";
|
||||
startScreen.style.display = "none";
|
||||
animate();
|
||||
}
|
||||
|
||||
startBtn.addEventListener("click", startGame);
|
||||
|
||||
window.addEventListener("keydown", ({ key }) => {
|
||||
movePlayer(key, 8, true);
|
||||
});
|
||||
|
||||
window.addEventListener("keyup", ({ key }) => {
|
||||
movePlayer(key, 0, false);
|
||||
});
|
||||
|
||||
```
|
||||
@@ -0,0 +1,306 @@
|
||||
---
|
||||
id: 64c7527100b19b09037ce5db
|
||||
title: Step 66
|
||||
challengeType: 0
|
||||
dashedName: step-66
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
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`.
|
||||
|
||||
```js
|
||||
assert.match(code, /ctx\.fillStyle\s*=\s*['"]#acd157['"]\s*;?/);
|
||||
```
|
||||
|
||||
You should call the `ctx.fillRect` method passing in the correct arguments.
|
||||
|
||||
```js
|
||||
const splitter = code.split("class Platform {")
|
||||
assert.match(splitter[1], /ctx\.fillRect\s*\(\s*this\.position\.x\s*,\s*this\.position\.y\s*,\s*this\.width\s*,\s*this\.height\s*\)\s*;?/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#99c9ff";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
|
||||
update() {
|
||||
this.draw();
|
||||
this.position.x += this.velocity.x;
|
||||
this.position.y += this.velocity.y;
|
||||
|
||||
if (this.position.y + this.height + this.velocity.y <= canvas.height) {
|
||||
if (this.position.y < 0) {
|
||||
this.position.y = 0;
|
||||
this.velocity.y = gravity;
|
||||
}
|
||||
this.velocity.y += gravity;
|
||||
} else {
|
||||
this.velocity.y = 0;
|
||||
}
|
||||
|
||||
if (this.position.x < this.width) {
|
||||
this.position.x = this.width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
class Platform {
|
||||
constructor(x, y) {
|
||||
this.position = {
|
||||
x,
|
||||
y,
|
||||
};
|
||||
this.width = 200;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
const player = new Player();
|
||||
|
||||
const animate = () => {
|
||||
requestAnimationFrame(animate);
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
player.update();
|
||||
|
||||
if (keys.rightKey.pressed && player.position.x < 400) {
|
||||
player.velocity.x = 5;
|
||||
} else if (keys.leftKey.pressed && player.position.x > 100) {
|
||||
player.velocity.x = -5;
|
||||
} else {
|
||||
player.velocity.x = 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const keys = {
|
||||
rightKey: {
|
||||
pressed: false
|
||||
},
|
||||
leftKey: {
|
||||
pressed: false
|
||||
}
|
||||
};
|
||||
|
||||
const movePlayer = (key, xVelocity, isPressed) => {
|
||||
if (!isCheckpointCollisionDetectionActive) {
|
||||
player.velocity.x = 0;
|
||||
player.velocity.y = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
switch (key) {
|
||||
case "ArrowLeft":
|
||||
keys.leftKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x -= xVelocity;
|
||||
break;
|
||||
case "ArrowUp":
|
||||
case " ":
|
||||
case "Spacebar":
|
||||
player.velocity.y -= 8;
|
||||
break;
|
||||
case "ArrowRight":
|
||||
keys.rightKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x += xVelocity;
|
||||
}
|
||||
}
|
||||
|
||||
const startGame = () => {
|
||||
canvas.style.display = "block";
|
||||
startScreen.style.display = "none";
|
||||
animate();
|
||||
}
|
||||
|
||||
startBtn.addEventListener("click", startGame);
|
||||
|
||||
window.addEventListener("keydown", ({ key }) => {
|
||||
movePlayer(key, 8, true);
|
||||
});
|
||||
|
||||
window.addEventListener("keyup", ({ key }) => {
|
||||
movePlayer(key, 0, false);
|
||||
});
|
||||
|
||||
```
|
||||
@@ -0,0 +1,300 @@
|
||||
---
|
||||
id: 64c7538db3e33d09704ab148
|
||||
title: Step 67
|
||||
challengeType: 0
|
||||
dashedName: step-67
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The next step will be to create a list of positions for the platforms.
|
||||
|
||||
Start by creating a new `const` variable called `platformPositions` and assign it an empty array.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `const` variable called `platformPositions` and assign it an empty array.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+platformPositions\s*=\s*\[\s*\]\s*;?/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#99c9ff";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
|
||||
update() {
|
||||
this.draw();
|
||||
this.position.x += this.velocity.x;
|
||||
this.position.y += this.velocity.y;
|
||||
|
||||
if (this.position.y + this.height + this.velocity.y <= canvas.height) {
|
||||
if (this.position.y < 0) {
|
||||
this.position.y = 0;
|
||||
this.velocity.y = gravity;
|
||||
}
|
||||
this.velocity.y += gravity;
|
||||
} else {
|
||||
this.velocity.y = 0;
|
||||
}
|
||||
|
||||
if (this.position.x < this.width) {
|
||||
this.position.x = this.width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class Platform {
|
||||
constructor(x, y) {
|
||||
this.position = {
|
||||
x,
|
||||
y,
|
||||
};
|
||||
this.width = 200;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#acd157";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
}
|
||||
|
||||
const player = new Player();
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
const animate = () => {
|
||||
requestAnimationFrame(animate);
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
player.update();
|
||||
|
||||
if (keys.rightKey.pressed && player.position.x < 400) {
|
||||
player.velocity.x = 5;
|
||||
} else if (keys.leftKey.pressed && player.position.x > 100) {
|
||||
player.velocity.x = -5;
|
||||
} else {
|
||||
player.velocity.x = 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const keys = {
|
||||
rightKey: {
|
||||
pressed: false
|
||||
},
|
||||
leftKey: {
|
||||
pressed: false
|
||||
}
|
||||
};
|
||||
|
||||
const movePlayer = (key, xVelocity, isPressed) => {
|
||||
if (!isCheckpointCollisionDetectionActive) {
|
||||
player.velocity.x = 0;
|
||||
player.velocity.y = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
switch (key) {
|
||||
case "ArrowLeft":
|
||||
keys.leftKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x -= xVelocity;
|
||||
break;
|
||||
case "ArrowUp":
|
||||
case " ":
|
||||
case "Spacebar":
|
||||
player.velocity.y -= 8;
|
||||
break;
|
||||
case "ArrowRight":
|
||||
keys.rightKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x += xVelocity;
|
||||
}
|
||||
}
|
||||
|
||||
const startGame = () => {
|
||||
canvas.style.display = "block";
|
||||
startScreen.style.display = "none";
|
||||
animate();
|
||||
}
|
||||
|
||||
startBtn.addEventListener("click", startGame);
|
||||
|
||||
window.addEventListener("keydown", ({ key }) => {
|
||||
movePlayer(key, 8, true);
|
||||
});
|
||||
|
||||
window.addEventListener("keyup", ({ key }) => {
|
||||
movePlayer(key, 0, false);
|
||||
});
|
||||
|
||||
```
|
||||
@@ -0,0 +1,304 @@
|
||||
---
|
||||
id: 64c754f598ca5409d0a08884
|
||||
title: Step 68
|
||||
challengeType: 0
|
||||
dashedName: step-68
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Inside the `platformPositions`, you will need to add the list of positions for the platforms.
|
||||
|
||||
Add a new object that has an `x` property with a value of `500` and a `y` property with a value of `450`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have an object with an `x` property with a value of 500 and a `y` property with a value of 450.
|
||||
|
||||
```js
|
||||
assert.match(code, /{\s*x\s*:\s*500\s*,\s*y\s*:\s*450\s*}/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#99c9ff";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
|
||||
update() {
|
||||
this.draw();
|
||||
this.position.x += this.velocity.x;
|
||||
this.position.y += this.velocity.y;
|
||||
|
||||
if (this.position.y + this.height + this.velocity.y <= canvas.height) {
|
||||
if (this.position.y < 0) {
|
||||
this.position.y = 0;
|
||||
this.velocity.y = gravity;
|
||||
}
|
||||
this.velocity.y += gravity;
|
||||
} else {
|
||||
this.velocity.y = 0;
|
||||
}
|
||||
|
||||
if (this.position.x < this.width) {
|
||||
this.position.x = this.width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class Platform {
|
||||
constructor(x, y) {
|
||||
this.position = {
|
||||
x,
|
||||
y,
|
||||
};
|
||||
this.width = 200;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#acd157";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
}
|
||||
|
||||
const player = new Player();
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
const platformPositions = [
|
||||
|
||||
];
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
const animate = () => {
|
||||
requestAnimationFrame(animate);
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
player.update();
|
||||
|
||||
if (keys.rightKey.pressed && player.position.x < 400) {
|
||||
player.velocity.x = 5;
|
||||
} else if (keys.leftKey.pressed && player.position.x > 100) {
|
||||
player.velocity.x = -5;
|
||||
} else {
|
||||
player.velocity.x = 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const keys = {
|
||||
rightKey: {
|
||||
pressed: false
|
||||
},
|
||||
leftKey: {
|
||||
pressed: false
|
||||
}
|
||||
};
|
||||
|
||||
const movePlayer = (key, xVelocity, isPressed) => {
|
||||
if (!isCheckpointCollisionDetectionActive) {
|
||||
player.velocity.x = 0;
|
||||
player.velocity.y = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
switch (key) {
|
||||
case "ArrowLeft":
|
||||
keys.leftKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x -= xVelocity;
|
||||
break;
|
||||
case "ArrowUp":
|
||||
case " ":
|
||||
case "Spacebar":
|
||||
player.velocity.y -= 8;
|
||||
break;
|
||||
case "ArrowRight":
|
||||
keys.rightKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x += xVelocity;
|
||||
}
|
||||
}
|
||||
|
||||
const startGame = () => {
|
||||
canvas.style.display = "block";
|
||||
startScreen.style.display = "none";
|
||||
animate();
|
||||
}
|
||||
|
||||
startBtn.addEventListener("click", startGame);
|
||||
|
||||
window.addEventListener("keydown", ({ key }) => {
|
||||
movePlayer(key, 8, true);
|
||||
});
|
||||
|
||||
window.addEventListener("keyup", ({ key }) => {
|
||||
movePlayer(key, 0, false);
|
||||
});
|
||||
|
||||
```
|
||||
@@ -0,0 +1,304 @@
|
||||
---
|
||||
id: 64c755bf0034b20a428a4a1b
|
||||
title: Step 69
|
||||
challengeType: 0
|
||||
dashedName: step-69
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Below that, add another object with an `x` property with a value of `700` and a `y` property with a value of `400`.
|
||||
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have an object with an `x` property with a value of 700 and a `y` property with a value of 400.
|
||||
|
||||
```js
|
||||
assert.match(code, /{.*x\s*:\s*700.*y\s*:\s*400.*}/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#99c9ff";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
|
||||
update() {
|
||||
this.draw();
|
||||
this.position.x += this.velocity.x;
|
||||
this.position.y += this.velocity.y;
|
||||
|
||||
if (this.position.y + this.height + this.velocity.y <= canvas.height) {
|
||||
if (this.position.y < 0) {
|
||||
this.position.y = 0;
|
||||
this.velocity.y = gravity;
|
||||
}
|
||||
this.velocity.y += gravity;
|
||||
} else {
|
||||
this.velocity.y = 0;
|
||||
}
|
||||
|
||||
if (this.position.x < this.width) {
|
||||
this.position.x = this.width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class Platform {
|
||||
constructor(x, y) {
|
||||
this.position = {
|
||||
x,
|
||||
y,
|
||||
};
|
||||
this.width = 200;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#acd157";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
}
|
||||
|
||||
const player = new Player();
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
const platformPositions = [
|
||||
{ x: 500, y: 450 },
|
||||
|
||||
];
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
const animate = () => {
|
||||
requestAnimationFrame(animate);
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
player.update();
|
||||
|
||||
if (keys.rightKey.pressed && player.position.x < 400) {
|
||||
player.velocity.x = 5;
|
||||
} else if (keys.leftKey.pressed && player.position.x > 100) {
|
||||
player.velocity.x = -5;
|
||||
} else {
|
||||
player.velocity.x = 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const keys = {
|
||||
rightKey: {
|
||||
pressed: false
|
||||
},
|
||||
leftKey: {
|
||||
pressed: false
|
||||
}
|
||||
};
|
||||
|
||||
const movePlayer = (key, xVelocity, isPressed) => {
|
||||
if (!isCheckpointCollisionDetectionActive) {
|
||||
player.velocity.x = 0;
|
||||
player.velocity.y = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
switch (key) {
|
||||
case "ArrowLeft":
|
||||
keys.leftKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x -= xVelocity;
|
||||
break;
|
||||
case "ArrowUp":
|
||||
case " ":
|
||||
case "Spacebar":
|
||||
player.velocity.y -= 8;
|
||||
break;
|
||||
case "ArrowRight":
|
||||
keys.rightKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x += xVelocity;
|
||||
}
|
||||
}
|
||||
|
||||
const startGame = () => {
|
||||
canvas.style.display = "block";
|
||||
startScreen.style.display = "none";
|
||||
animate();
|
||||
}
|
||||
|
||||
startBtn.addEventListener("click", startGame);
|
||||
|
||||
window.addEventListener("keydown", ({ key }) => {
|
||||
movePlayer(key, 8, true);
|
||||
});
|
||||
|
||||
window.addEventListener("keyup", ({ key }) => {
|
||||
movePlayer(key, 0, false);
|
||||
});
|
||||
|
||||
```
|
||||
@@ -0,0 +1,334 @@
|
||||
---
|
||||
id: 64c7561d44e2300a90a38ab6
|
||||
title: Step 70
|
||||
challengeType: 0
|
||||
dashedName: step-70
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
|
||||
Add the rest of the platform positions to the `platformPositions` array with the following values:
|
||||
|
||||
```js
|
||||
x=850 y=350
|
||||
x=900 y=350
|
||||
x=1050 y=150
|
||||
x=2500 y=450
|
||||
x=2900 y=400
|
||||
x=3150 y=350
|
||||
x=3900 y=450
|
||||
x=4200 y=400
|
||||
x=4400 y=200
|
||||
x=4700 y=150
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
You should include the rest of the values in the `platformPositions` array.
|
||||
|
||||
```js
|
||||
const platformPositions = [
|
||||
{ x: 500, y: 450 },
|
||||
{ x: 700, y: 400 },
|
||||
{ x: 850, y: 350 },
|
||||
{ x: 900, y: 350 },
|
||||
{ x: 1050, y: 150 },
|
||||
{ x: 2500, y: 450 },
|
||||
{ x: 2900, y: 400 },
|
||||
{ x: 3150, y: 350 },
|
||||
{ x: 3900, y: 450 },
|
||||
{ x: 4200, y: 400 },
|
||||
{ x: 4400, y: 200 },
|
||||
{ x: 4700, y: 150 },
|
||||
];
|
||||
|
||||
assert.isArray(platformPositions);
|
||||
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#99c9ff";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
|
||||
update() {
|
||||
this.draw();
|
||||
this.position.x += this.velocity.x;
|
||||
this.position.y += this.velocity.y;
|
||||
|
||||
if (this.position.y + this.height + this.velocity.y <= canvas.height) {
|
||||
if (this.position.y < 0) {
|
||||
this.position.y = 0;
|
||||
this.velocity.y = gravity;
|
||||
}
|
||||
this.velocity.y += gravity;
|
||||
} else {
|
||||
this.velocity.y = 0;
|
||||
}
|
||||
|
||||
if (this.position.x < this.width) {
|
||||
this.position.x = this.width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class Platform {
|
||||
constructor(x, y) {
|
||||
this.position = {
|
||||
x,
|
||||
y,
|
||||
};
|
||||
this.width = 200;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#acd157";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
}
|
||||
|
||||
const player = new Player();
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
const platformPositions = [
|
||||
{ x: 500, y: 450 },
|
||||
{ x: 700, y: 400 },
|
||||
|
||||
];
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
const animate = () => {
|
||||
requestAnimationFrame(animate);
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
player.update();
|
||||
|
||||
if (keys.rightKey.pressed && player.position.x < 400) {
|
||||
player.velocity.x = 5;
|
||||
} else if (keys.leftKey.pressed && player.position.x > 100) {
|
||||
player.velocity.x = -5;
|
||||
} else {
|
||||
player.velocity.x = 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const keys = {
|
||||
rightKey: {
|
||||
pressed: false
|
||||
},
|
||||
leftKey: {
|
||||
pressed: false
|
||||
}
|
||||
};
|
||||
|
||||
const movePlayer = (key, xVelocity, isPressed) => {
|
||||
if (!isCheckpointCollisionDetectionActive) {
|
||||
player.velocity.x = 0;
|
||||
player.velocity.y = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
switch (key) {
|
||||
case "ArrowLeft":
|
||||
keys.leftKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x -= xVelocity;
|
||||
break;
|
||||
case "ArrowUp":
|
||||
case " ":
|
||||
case "Spacebar":
|
||||
player.velocity.y -= 8;
|
||||
break;
|
||||
case "ArrowRight":
|
||||
keys.rightKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x += xVelocity;
|
||||
}
|
||||
}
|
||||
|
||||
const startGame = () => {
|
||||
canvas.style.display = "block";
|
||||
startScreen.style.display = "none";
|
||||
animate();
|
||||
}
|
||||
|
||||
startBtn.addEventListener("click", startGame);
|
||||
|
||||
window.addEventListener("keydown", ({ key }) => {
|
||||
movePlayer(key, 8, true);
|
||||
});
|
||||
|
||||
window.addEventListener("keyup", ({ key }) => {
|
||||
movePlayer(key, 0, false);
|
||||
});
|
||||
|
||||
```
|
||||
@@ -0,0 +1,321 @@
|
||||
---
|
||||
id: 64c7573fd2265f0b1c77e2ec
|
||||
title: Step 71
|
||||
challengeType: 0
|
||||
dashedName: step-71
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The next step is to create a list of new platform instances using the `Platform` class. You will later reference this list to draw the platforms on the canvas.
|
||||
|
||||
Start by creating a new `const` variable called `platforms` and assign it `platformPositions.map()`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `const` variable called `platforms`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+platforms\s*=\s*/);
|
||||
```
|
||||
|
||||
You should assign `platformPositions.map()` to the `platforms` variable.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+platforms\s*=\s*platformPositions\.map\s*\(\s*/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#99c9ff";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
|
||||
update() {
|
||||
this.draw();
|
||||
this.position.x += this.velocity.x;
|
||||
this.position.y += this.velocity.y;
|
||||
|
||||
if (this.position.y + this.height + this.velocity.y <= canvas.height) {
|
||||
if (this.position.y < 0) {
|
||||
this.position.y = 0;
|
||||
this.velocity.y = gravity;
|
||||
}
|
||||
this.velocity.y += gravity;
|
||||
} else {
|
||||
this.velocity.y = 0;
|
||||
}
|
||||
|
||||
if (this.position.x < this.width) {
|
||||
this.position.x = this.width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class Platform {
|
||||
constructor(x, y) {
|
||||
this.position = {
|
||||
x,
|
||||
y,
|
||||
};
|
||||
this.width = 200;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#acd157";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
}
|
||||
|
||||
const player = new Player();
|
||||
|
||||
const platformPositions = [
|
||||
{ x: 500, y: 450 },
|
||||
{ x: 700, y: 400 },
|
||||
{ x: 850, y: 350 },
|
||||
{ x: 900, y: 350 },
|
||||
{ x: 1050, y: 150 },
|
||||
{ x: 2500, y: 450 },
|
||||
{ x: 2900, y: 400 },
|
||||
{ x: 3150, y: 350 },
|
||||
{ x: 3900, y: 450 },
|
||||
{ x: 4200, y: 400 },
|
||||
{ x: 4400, y: 200 },
|
||||
{ x: 4700, y: 150 }
|
||||
];
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
const animate = () => {
|
||||
requestAnimationFrame(animate);
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
player.update();
|
||||
|
||||
if (keys.rightKey.pressed && player.position.x < 400) {
|
||||
player.velocity.x = 5;
|
||||
} else if (keys.leftKey.pressed && player.position.x > 100) {
|
||||
player.velocity.x = -5;
|
||||
} else {
|
||||
player.velocity.x = 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const keys = {
|
||||
rightKey: {
|
||||
pressed: false
|
||||
},
|
||||
leftKey: {
|
||||
pressed: false
|
||||
}
|
||||
};
|
||||
|
||||
const movePlayer = (key, xVelocity, isPressed) => {
|
||||
if (!isCheckpointCollisionDetectionActive) {
|
||||
player.velocity.x = 0;
|
||||
player.velocity.y = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
switch (key) {
|
||||
case "ArrowLeft":
|
||||
keys.leftKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x -= xVelocity;
|
||||
break;
|
||||
case "ArrowUp":
|
||||
case " ":
|
||||
case "Spacebar":
|
||||
player.velocity.y -= 8;
|
||||
break;
|
||||
case "ArrowRight":
|
||||
keys.rightKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x += xVelocity;
|
||||
}
|
||||
}
|
||||
|
||||
const startGame = () => {
|
||||
canvas.style.display = "block";
|
||||
startScreen.style.display = "none";
|
||||
animate();
|
||||
}
|
||||
|
||||
startBtn.addEventListener("click", startGame);
|
||||
|
||||
window.addEventListener("keydown", ({ key }) => {
|
||||
movePlayer(key, 8, true);
|
||||
});
|
||||
|
||||
window.addEventListener("keyup", ({ key }) => {
|
||||
movePlayer(key, 0, false);
|
||||
});
|
||||
|
||||
```
|
||||
@@ -0,0 +1,318 @@
|
||||
---
|
||||
id: 64c758ab7352130b775df8c4
|
||||
title: Step 72
|
||||
challengeType: 0
|
||||
dashedName: step-72
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
In the map callback function, pass in `platform` for the parameter and implicitly return the creation of a new `Platform` instance with the `platform.x` and `platform.y` values passed in as arguments.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your map callback should implicitly return the creation of a new `Platform` instance with the `platform.x` and `platform.y` values passed in as arguments.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+platforms\s*=\s*platformPositions\.map\(\s*\(\s*platform\s*\)\s*=>\s*new\s+Platform\s*\(\s*platform\.x,\s*platform\.y\s*\)\s*\);\s*/
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#99c9ff";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
|
||||
update() {
|
||||
this.draw();
|
||||
this.position.x += this.velocity.x;
|
||||
this.position.y += this.velocity.y;
|
||||
|
||||
if (this.position.y + this.height + this.velocity.y <= canvas.height) {
|
||||
if (this.position.y < 0) {
|
||||
this.position.y = 0;
|
||||
this.velocity.y = gravity;
|
||||
}
|
||||
this.velocity.y += gravity;
|
||||
} else {
|
||||
this.velocity.y = 0;
|
||||
}
|
||||
|
||||
if (this.position.x < this.width) {
|
||||
this.position.x = this.width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class Platform {
|
||||
constructor(x, y) {
|
||||
this.position = {
|
||||
x,
|
||||
y,
|
||||
};
|
||||
this.width = 200;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#acd157";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
}
|
||||
|
||||
const player = new Player();
|
||||
|
||||
const platformPositions = [
|
||||
{ x: 500, y: 450 },
|
||||
{ x: 700, y: 400 },
|
||||
{ x: 850, y: 350 },
|
||||
{ x: 900, y: 350 },
|
||||
{ x: 1050, y: 150 },
|
||||
{ x: 2500, y: 450 },
|
||||
{ x: 2900, y: 400 },
|
||||
{ x: 3150, y: 350 },
|
||||
{ x: 3900, y: 450 },
|
||||
{ x: 4200, y: 400 },
|
||||
{ x: 4400, y: 200 },
|
||||
{ x: 4700, y: 150 }
|
||||
];
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
const platforms = platformPositions.map(
|
||||
|
||||
);
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
const animate = () => {
|
||||
requestAnimationFrame(animate);
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
player.update();
|
||||
|
||||
if (keys.rightKey.pressed && player.position.x < 400) {
|
||||
player.velocity.x = 5;
|
||||
} else if (keys.leftKey.pressed && player.position.x > 100) {
|
||||
player.velocity.x = -5;
|
||||
} else {
|
||||
player.velocity.x = 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const keys = {
|
||||
rightKey: {
|
||||
pressed: false
|
||||
},
|
||||
leftKey: {
|
||||
pressed: false
|
||||
}
|
||||
};
|
||||
|
||||
const movePlayer = (key, xVelocity, isPressed) => {
|
||||
if (!isCheckpointCollisionDetectionActive) {
|
||||
player.velocity.x = 0;
|
||||
player.velocity.y = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
switch (key) {
|
||||
case "ArrowLeft":
|
||||
keys.leftKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x -= xVelocity;
|
||||
break;
|
||||
case "ArrowUp":
|
||||
case " ":
|
||||
case "Spacebar":
|
||||
player.velocity.y -= 8;
|
||||
break;
|
||||
case "ArrowRight":
|
||||
keys.rightKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x += xVelocity;
|
||||
}
|
||||
}
|
||||
|
||||
const startGame = () => {
|
||||
canvas.style.display = "block";
|
||||
startScreen.style.display = "none";
|
||||
animate();
|
||||
}
|
||||
|
||||
startBtn.addEventListener("click", startGame);
|
||||
|
||||
window.addEventListener("keydown", ({ key }) => {
|
||||
movePlayer(key, 8, true);
|
||||
});
|
||||
|
||||
window.addEventListener("keyup", ({ key }) => {
|
||||
movePlayer(key, 0, false);
|
||||
});
|
||||
|
||||
```
|
||||
@@ -0,0 +1,334 @@
|
||||
---
|
||||
id: 64c764dd9071050d0a2c1473
|
||||
title: Step 73
|
||||
challengeType: 0
|
||||
dashedName: step-73
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Inside the `animate` function, you will need to draw each of the platforms onto the canvas.
|
||||
|
||||
Add a `forEach` loop that iterates through the `platforms` array.
|
||||
|
||||
Inside the callback function, add a `platform` parameter and for the body of the function call the `draw` method on each `platform`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `forEach` loop that iterates through the `platforms` array.
|
||||
|
||||
```js
|
||||
assert.match(code, /platforms\.forEach\(\s*(.*?)\s*=>\s*{\s*(.*?)\s*}\s*\);?/);
|
||||
```
|
||||
|
||||
You should add a `platform` parameter to the callback function.
|
||||
|
||||
```js
|
||||
assert.match(code, /platforms\.forEach\(\s*\(platform\)\s*=>\s*{\s*(.*?)\s*}\s*\);?/);
|
||||
```
|
||||
|
||||
You should call the `draw` method on each `platform`.
|
||||
|
||||
```js
|
||||
assert.match(code, /platforms\.forEach\(\s*\(platform\)\s*=>\s*{\s*platform\.draw\(\)\s*;?\s*}\s*\);?/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#99c9ff";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
|
||||
update() {
|
||||
this.draw();
|
||||
this.position.x += this.velocity.x;
|
||||
this.position.y += this.velocity.y;
|
||||
|
||||
if (this.position.y + this.height + this.velocity.y <= canvas.height) {
|
||||
if (this.position.y < 0) {
|
||||
this.position.y = 0;
|
||||
this.velocity.y = gravity;
|
||||
}
|
||||
this.velocity.y += gravity;
|
||||
} else {
|
||||
this.velocity.y = 0;
|
||||
}
|
||||
|
||||
if (this.position.x < this.width) {
|
||||
this.position.x = this.width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class Platform {
|
||||
constructor(x, y) {
|
||||
this.position = {
|
||||
x,
|
||||
y,
|
||||
};
|
||||
this.width = 200;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#acd157";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
}
|
||||
|
||||
const player = new Player();
|
||||
|
||||
const platformPositions = [
|
||||
{ x: 500, y: 450 },
|
||||
{ x: 700, y: 400 },
|
||||
{ x: 850, y: 350 },
|
||||
{ x: 900, y: 350 },
|
||||
{ x: 1050, y: 150 },
|
||||
{ x: 2500, y: 450 },
|
||||
{ x: 2900, y: 400 },
|
||||
{ x: 3150, y: 350 },
|
||||
{ x: 3900, y: 450 },
|
||||
{ x: 4200, y: 400 },
|
||||
{ x: 4400, y: 200 },
|
||||
{ x: 4700, y: 150 }
|
||||
];
|
||||
|
||||
const platforms = platformPositions.map(
|
||||
(platform) => new Platform(platform.x, platform.y)
|
||||
);
|
||||
|
||||
const animate = () => {
|
||||
requestAnimationFrame(animate);
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
player.update();
|
||||
|
||||
if (keys.rightKey.pressed && player.position.x < 400) {
|
||||
player.velocity.x = 5;
|
||||
} else if (keys.leftKey.pressed && player.position.x > 100) {
|
||||
player.velocity.x = -5;
|
||||
} else {
|
||||
player.velocity.x = 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const keys = {
|
||||
rightKey: {
|
||||
pressed: false
|
||||
},
|
||||
leftKey: {
|
||||
pressed: false
|
||||
}
|
||||
};
|
||||
|
||||
const movePlayer = (key, xVelocity, isPressed) => {
|
||||
if (!isCheckpointCollisionDetectionActive) {
|
||||
player.velocity.x = 0;
|
||||
player.velocity.y = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
switch (key) {
|
||||
case "ArrowLeft":
|
||||
keys.leftKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x -= xVelocity;
|
||||
break;
|
||||
case "ArrowUp":
|
||||
case " ":
|
||||
case "Spacebar":
|
||||
player.velocity.y -= 8;
|
||||
break;
|
||||
case "ArrowRight":
|
||||
keys.rightKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x += xVelocity;
|
||||
}
|
||||
}
|
||||
|
||||
const startGame = () => {
|
||||
canvas.style.display = "block";
|
||||
startScreen.style.display = "none";
|
||||
animate();
|
||||
}
|
||||
|
||||
startBtn.addEventListener("click", startGame);
|
||||
|
||||
window.addEventListener("keydown", ({ key }) => {
|
||||
movePlayer(key, 8, true);
|
||||
});
|
||||
|
||||
window.addEventListener("keyup", ({ key }) => {
|
||||
movePlayer(key, 0, false);
|
||||
});
|
||||
|
||||
```
|
||||
@@ -0,0 +1,326 @@
|
||||
---
|
||||
id: 64c9bab6998128282da063f9
|
||||
title: Step 74
|
||||
challengeType: 0
|
||||
dashedName: step-74
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
If you try to start the game, you will notice that the platforms are rendered on the screen. But as the player moves to the right, the platform does not move with it.
|
||||
|
||||
To fix this issue, you will need to update the platform's `x` position as the player moves across the screen.
|
||||
|
||||
Inside the `animate` function, add a condition to check if the right key was pressed and if the `isCheckpointCollisionDetectionActive` is true.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have an `if` statement that checks if the right key was pressed and if the `isCheckpointCollisionDetectionActive` is true.
|
||||
|
||||
```js
|
||||
assert.match(code, /if\s*\(\s*keys\.rightKey\.pressed\s*&&\s*isCheckpointCollisionDetectionActive\s*\)\s*{\s*(.*?)\s*}/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#99c9ff";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
|
||||
update() {
|
||||
this.draw();
|
||||
this.position.x += this.velocity.x;
|
||||
this.position.y += this.velocity.y;
|
||||
|
||||
if (this.position.y + this.height + this.velocity.y <= canvas.height) {
|
||||
if (this.position.y < 0) {
|
||||
this.position.y = 0;
|
||||
this.velocity.y = gravity;
|
||||
}
|
||||
this.velocity.y += gravity;
|
||||
} else {
|
||||
this.velocity.y = 0;
|
||||
}
|
||||
|
||||
if (this.position.x < this.width) {
|
||||
this.position.x = this.width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class Platform {
|
||||
constructor(x, y) {
|
||||
this.position = {
|
||||
x,
|
||||
y,
|
||||
};
|
||||
this.width = 200;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#acd157";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
}
|
||||
|
||||
const player = new Player();
|
||||
|
||||
const platformPositions = [
|
||||
{ x: 500, y: 450 },
|
||||
{ x: 700, y: 400 },
|
||||
{ x: 850, y: 350 },
|
||||
{ x: 900, y: 350 },
|
||||
{ x: 1050, y: 150 },
|
||||
{ x: 2500, y: 450 },
|
||||
{ x: 2900, y: 400 },
|
||||
{ x: 3150, y: 350 },
|
||||
{ x: 3900, y: 450 },
|
||||
{ x: 4200, y: 400 },
|
||||
{ x: 4400, y: 200 },
|
||||
{ x: 4700, y: 150 }
|
||||
];
|
||||
|
||||
const platforms = platformPositions.map(
|
||||
(platform) => new Platform(platform.x, platform.y)
|
||||
);
|
||||
|
||||
const animate = () => {
|
||||
requestAnimationFrame(animate);
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
platforms.forEach((platform) => {
|
||||
platform.draw();
|
||||
});
|
||||
|
||||
player.update();
|
||||
|
||||
if (keys.rightKey.pressed && player.position.x < 400) {
|
||||
player.velocity.x = 5;
|
||||
} else if (keys.leftKey.pressed && player.position.x > 100) {
|
||||
player.velocity.x = -5;
|
||||
} else {
|
||||
player.velocity.x = 0;
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const keys = {
|
||||
rightKey: {
|
||||
pressed: false
|
||||
},
|
||||
leftKey: {
|
||||
pressed: false
|
||||
}
|
||||
};
|
||||
|
||||
const movePlayer = (key, xVelocity, isPressed) => {
|
||||
if (!isCheckpointCollisionDetectionActive) {
|
||||
player.velocity.x = 0;
|
||||
player.velocity.y = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
switch (key) {
|
||||
case "ArrowLeft":
|
||||
keys.leftKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x -= xVelocity;
|
||||
break;
|
||||
case "ArrowUp":
|
||||
case " ":
|
||||
case "Spacebar":
|
||||
player.velocity.y -= 8;
|
||||
break;
|
||||
case "ArrowRight":
|
||||
keys.rightKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x += xVelocity;
|
||||
}
|
||||
}
|
||||
|
||||
const startGame = () => {
|
||||
canvas.style.display = "block";
|
||||
startScreen.style.display = "none";
|
||||
animate();
|
||||
}
|
||||
|
||||
startBtn.addEventListener("click", startGame);
|
||||
|
||||
window.addEventListener("keydown", ({ key }) => {
|
||||
movePlayer(key, 8, true);
|
||||
});
|
||||
|
||||
window.addEventListener("keyup", ({ key }) => {
|
||||
movePlayer(key, 0, false);
|
||||
});
|
||||
|
||||
```
|
||||
@@ -0,0 +1,334 @@
|
||||
---
|
||||
id: 64c9db021d4d912906878f3a
|
||||
title: Step 75
|
||||
challengeType: 0
|
||||
dashedName: step-75
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Inside your condition, add a `forEach` loop to iterate through the `platforms` array.
|
||||
|
||||
Inside the loop, use the subtraction assignment operator to subtract 5 from the platform's `x` position.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `forEach` loop that iterates through the `platforms` array.
|
||||
|
||||
```js
|
||||
assert.match(code, /(?<=if\s*\(.*\)\s*{\s+)platforms\.forEach\(\s*\(.*\)\s*=>\s*{\s*(.*?)\s*}\s*\);?/);
|
||||
```
|
||||
|
||||
You should use the subtraction assignment operator to subtract 5 from the platform's `x` position.
|
||||
|
||||
```js
|
||||
assert.match(code, /platforms\.forEach\(\s*\(platform\)\s*=>\s*{\s*platform\.position\.x\s*-=\s*5\s*;?\s*}\s*\);?/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#99c9ff";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
|
||||
update() {
|
||||
this.draw();
|
||||
this.position.x += this.velocity.x;
|
||||
this.position.y += this.velocity.y;
|
||||
|
||||
if (this.position.y + this.height + this.velocity.y <= canvas.height) {
|
||||
if (this.position.y < 0) {
|
||||
this.position.y = 0;
|
||||
this.velocity.y = gravity;
|
||||
}
|
||||
this.velocity.y += gravity;
|
||||
} else {
|
||||
this.velocity.y = 0;
|
||||
}
|
||||
|
||||
if (this.position.x < this.width) {
|
||||
this.position.x = this.width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class Platform {
|
||||
constructor(x, y) {
|
||||
this.position = {
|
||||
x,
|
||||
y,
|
||||
};
|
||||
this.width = 200;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#acd157";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
}
|
||||
|
||||
const player = new Player();
|
||||
|
||||
const platformPositions = [
|
||||
{ x: 500, y: 450 },
|
||||
{ x: 700, y: 400 },
|
||||
{ x: 850, y: 350 },
|
||||
{ x: 900, y: 350 },
|
||||
{ x: 1050, y: 150 },
|
||||
{ x: 2500, y: 450 },
|
||||
{ x: 2900, y: 400 },
|
||||
{ x: 3150, y: 350 },
|
||||
{ x: 3900, y: 450 },
|
||||
{ x: 4200, y: 400 },
|
||||
{ x: 4400, y: 200 },
|
||||
{ x: 4700, y: 150 }
|
||||
];
|
||||
|
||||
const platforms = platformPositions.map(
|
||||
(platform) => new Platform(platform.x, platform.y)
|
||||
);
|
||||
|
||||
const animate = () => {
|
||||
requestAnimationFrame(animate);
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
platforms.forEach((platform) => {
|
||||
platform.draw();
|
||||
});
|
||||
|
||||
player.update();
|
||||
|
||||
if (keys.rightKey.pressed && player.position.x < 400) {
|
||||
player.velocity.x = 5;
|
||||
} else if (keys.leftKey.pressed && player.position.x > 100) {
|
||||
player.velocity.x = -5;
|
||||
} else {
|
||||
player.velocity.x = 0;
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
if (keys.rightKey.pressed && isCheckpointCollisionDetectionActive) {
|
||||
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const keys = {
|
||||
rightKey: {
|
||||
pressed: false
|
||||
},
|
||||
leftKey: {
|
||||
pressed: false
|
||||
}
|
||||
};
|
||||
|
||||
const movePlayer = (key, xVelocity, isPressed) => {
|
||||
if (!isCheckpointCollisionDetectionActive) {
|
||||
player.velocity.x = 0;
|
||||
player.velocity.y = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
switch (key) {
|
||||
case "ArrowLeft":
|
||||
keys.leftKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x -= xVelocity;
|
||||
break;
|
||||
case "ArrowUp":
|
||||
case " ":
|
||||
case "Spacebar":
|
||||
player.velocity.y -= 8;
|
||||
break;
|
||||
case "ArrowRight":
|
||||
keys.rightKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x += xVelocity;
|
||||
}
|
||||
}
|
||||
|
||||
const startGame = () => {
|
||||
canvas.style.display = "block";
|
||||
startScreen.style.display = "none";
|
||||
animate();
|
||||
}
|
||||
|
||||
startBtn.addEventListener("click", startGame);
|
||||
|
||||
window.addEventListener("keydown", ({ key }) => {
|
||||
movePlayer(key, 8, true);
|
||||
});
|
||||
|
||||
window.addEventListener("keyup", ({ key }) => {
|
||||
movePlayer(key, 0, false);
|
||||
});
|
||||
|
||||
```
|
||||
@@ -0,0 +1,346 @@
|
||||
---
|
||||
id: 64c9dc4bd63a92295347c449
|
||||
title: Step 76
|
||||
challengeType: 0
|
||||
dashedName: step-76
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Next, add an `else if` statement to check if the left key was pressed and if `isCheckpointCollisionDetectionActive` is true.
|
||||
|
||||
Inside that condition, add a `forEach` loop to iterate through the `platforms` array.
|
||||
|
||||
Inside the loop, use the addition assignment operator to add 5 to the platform's `x` position.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a condition that checks if the left key was pressed and if `isCheckpointCollisionDetectionActive` is true.
|
||||
|
||||
```js
|
||||
assert.match(code, /if\s*\(\s*keys\.rightKey\.pressed\s*&&\s*isCheckpointCollisionDetectionActive\s*\)\s*{\s*platforms\.forEach\(\s*\(platform\)\s*=>\s*{\s*platform\.position\.x\s*-=\s*5\s*;\s*}\s*\);\s*}\s*else\s+if\s*\(\s*keys\.leftKey\.pressed\s*&&\s*isCheckpointCollisionDetectionActive\s*\)\s*{.*}\s*\);?/s);
|
||||
|
||||
```
|
||||
|
||||
You should add a `forEach` loop that iterates through the `platforms` array.
|
||||
|
||||
```js
|
||||
assert.match(code, /(?<=else\sif\s*\(.*\)\s*{\s*)platforms\.forEach\(\s*\(platform\)\s*=>\s*{\s*(.*?)\s*}\s*\);?/);
|
||||
|
||||
```
|
||||
|
||||
You should use the addition assignment operator to add 5 to the platform's `x` position.
|
||||
|
||||
```js
|
||||
assert.match(code, /platforms\.forEach\(\s*\(platform\)\s*=>\s*{\s*platform\.position\.x\s*\+=\s*5\s*;?\s*}\s*\);?/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#99c9ff";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
|
||||
update() {
|
||||
this.draw();
|
||||
this.position.x += this.velocity.x;
|
||||
this.position.y += this.velocity.y;
|
||||
|
||||
if (this.position.y + this.height + this.velocity.y <= canvas.height) {
|
||||
if (this.position.y < 0) {
|
||||
this.position.y = 0;
|
||||
this.velocity.y = gravity;
|
||||
}
|
||||
this.velocity.y += gravity;
|
||||
} else {
|
||||
this.velocity.y = 0;
|
||||
}
|
||||
|
||||
if (this.position.x < this.width) {
|
||||
this.position.x = this.width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class Platform {
|
||||
constructor(x, y) {
|
||||
this.position = {
|
||||
x,
|
||||
y,
|
||||
};
|
||||
this.width = 200;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#acd157";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
}
|
||||
|
||||
const player = new Player();
|
||||
|
||||
const platformPositions = [
|
||||
{ x: 500, y: 450 },
|
||||
{ x: 700, y: 400 },
|
||||
{ x: 850, y: 350 },
|
||||
{ x: 900, y: 350 },
|
||||
{ x: 1050, y: 150 },
|
||||
{ x: 2500, y: 450 },
|
||||
{ x: 2900, y: 400 },
|
||||
{ x: 3150, y: 350 },
|
||||
{ x: 3900, y: 450 },
|
||||
{ x: 4200, y: 400 },
|
||||
{ x: 4400, y: 200 },
|
||||
{ x: 4700, y: 150 }
|
||||
];
|
||||
|
||||
const platforms = platformPositions.map(
|
||||
(platform) => new Platform(platform.x, platform.y)
|
||||
);
|
||||
|
||||
const animate = () => {
|
||||
requestAnimationFrame(animate);
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
platforms.forEach((platform) => {
|
||||
platform.draw();
|
||||
});
|
||||
|
||||
player.update();
|
||||
|
||||
if (keys.rightKey.pressed && player.position.x < 400) {
|
||||
player.velocity.x = 5;
|
||||
} else if (keys.leftKey.pressed && player.position.x > 100) {
|
||||
player.velocity.x = -5;
|
||||
} else {
|
||||
player.velocity.x = 0;
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
if (keys.rightKey.pressed && isCheckpointCollisionDetectionActive) {
|
||||
platforms.forEach((platform) => {
|
||||
platform.position.x -= 5;
|
||||
});
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const keys = {
|
||||
rightKey: {
|
||||
pressed: false
|
||||
},
|
||||
leftKey: {
|
||||
pressed: false
|
||||
}
|
||||
};
|
||||
|
||||
const movePlayer = (key, xVelocity, isPressed) => {
|
||||
if (!isCheckpointCollisionDetectionActive) {
|
||||
player.velocity.x = 0;
|
||||
player.velocity.y = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
switch (key) {
|
||||
case "ArrowLeft":
|
||||
keys.leftKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x -= xVelocity;
|
||||
break;
|
||||
case "ArrowUp":
|
||||
case " ":
|
||||
case "Spacebar":
|
||||
player.velocity.y -= 8;
|
||||
break;
|
||||
case "ArrowRight":
|
||||
keys.rightKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x += xVelocity;
|
||||
}
|
||||
}
|
||||
|
||||
const startGame = () => {
|
||||
canvas.style.display = "block";
|
||||
startScreen.style.display = "none";
|
||||
animate();
|
||||
}
|
||||
|
||||
startBtn.addEventListener("click", startGame);
|
||||
|
||||
window.addEventListener("keydown", ({ key }) => {
|
||||
movePlayer(key, 8, true);
|
||||
});
|
||||
|
||||
window.addEventListener("keyup", ({ key }) => {
|
||||
movePlayer(key, 0, false);
|
||||
});
|
||||
|
||||
```
|
||||
@@ -0,0 +1,344 @@
|
||||
---
|
||||
id: 64c9e4cc5f06902dc75dc8f4
|
||||
title: Step 77
|
||||
challengeType: 0
|
||||
dashedName: step-77
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
When you start the game, you will notice that the position of the platforms is animating alongside the player. But if you try to jump below one of the platforms, then you will jump right through it.
|
||||
|
||||
To fix this issue, you will need to add collision detection logic to the game.
|
||||
|
||||
Start by calling the `forEach` method on the `platforms` array. For the callback function pass in `platform` as the parameter.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `forEach` loop that iterates through the `platforms` array.
|
||||
|
||||
```js
|
||||
const splitter = code.split("platform.position.x += 5;")
|
||||
assert.match(splitter[1], /platforms\.forEach\(/);
|
||||
```
|
||||
|
||||
Your callback function should have a `platform` parameter.
|
||||
|
||||
```js
|
||||
const splitter = code.split("platform.position.x += 5;")
|
||||
assert.match(splitter[1], /platforms\.forEach\(\(platform\)\s*=>\s*\{\s*\}\);?/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#99c9ff";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
|
||||
update() {
|
||||
this.draw();
|
||||
this.position.x += this.velocity.x;
|
||||
this.position.y += this.velocity.y;
|
||||
|
||||
if (this.position.y + this.height + this.velocity.y <= canvas.height) {
|
||||
if (this.position.y < 0) {
|
||||
this.position.y = 0;
|
||||
this.velocity.y = gravity;
|
||||
}
|
||||
this.velocity.y += gravity;
|
||||
} else {
|
||||
this.velocity.y = 0;
|
||||
}
|
||||
|
||||
if (this.position.x < this.width) {
|
||||
this.position.x = this.width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class Platform {
|
||||
constructor(x, y) {
|
||||
this.position = {
|
||||
x,
|
||||
y,
|
||||
};
|
||||
this.width = 200;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#acd157";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
}
|
||||
|
||||
const player = new Player();
|
||||
|
||||
const platformPositions = [
|
||||
{ x: 500, y: 450 },
|
||||
{ x: 700, y: 400 },
|
||||
{ x: 850, y: 350 },
|
||||
{ x: 900, y: 350 },
|
||||
{ x: 1050, y: 150 },
|
||||
{ x: 2500, y: 450 },
|
||||
{ x: 2900, y: 400 },
|
||||
{ x: 3150, y: 350 },
|
||||
{ x: 3900, y: 450 },
|
||||
{ x: 4200, y: 400 },
|
||||
{ x: 4400, y: 200 },
|
||||
{ x: 4700, y: 150 }
|
||||
];
|
||||
|
||||
const platforms = platformPositions.map(
|
||||
(platform) => new Platform(platform.x, platform.y)
|
||||
);
|
||||
|
||||
const animate = () => {
|
||||
requestAnimationFrame(animate);
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
platforms.forEach((platform) => {
|
||||
platform.draw();
|
||||
});
|
||||
|
||||
player.update();
|
||||
|
||||
if (keys.rightKey.pressed && player.position.x < 400) {
|
||||
player.velocity.x = 5;
|
||||
} else if (keys.leftKey.pressed && player.position.x > 100) {
|
||||
player.velocity.x = -5;
|
||||
} else {
|
||||
player.velocity.x = 0;
|
||||
|
||||
if (keys.rightKey.pressed && isCheckpointCollisionDetectionActive) {
|
||||
platforms.forEach((platform) => {
|
||||
platform.position.x -= 5;
|
||||
});
|
||||
} else if (keys.leftKey.pressed && isCheckpointCollisionDetectionActive) {
|
||||
platforms.forEach((platform) => {
|
||||
platform.position.x += 5;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
|
||||
const keys = {
|
||||
rightKey: {
|
||||
pressed: false
|
||||
},
|
||||
leftKey: {
|
||||
pressed: false
|
||||
}
|
||||
};
|
||||
|
||||
const movePlayer = (key, xVelocity, isPressed) => {
|
||||
if (!isCheckpointCollisionDetectionActive) {
|
||||
player.velocity.x = 0;
|
||||
player.velocity.y = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
switch (key) {
|
||||
case "ArrowLeft":
|
||||
keys.leftKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x -= xVelocity;
|
||||
break;
|
||||
case "ArrowUp":
|
||||
case " ":
|
||||
case "Spacebar":
|
||||
player.velocity.y -= 8;
|
||||
break;
|
||||
case "ArrowRight":
|
||||
keys.rightKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x += xVelocity;
|
||||
}
|
||||
}
|
||||
|
||||
const startGame = () => {
|
||||
canvas.style.display = "block";
|
||||
startScreen.style.display = "none";
|
||||
animate();
|
||||
}
|
||||
|
||||
startBtn.addEventListener("click", startGame);
|
||||
|
||||
window.addEventListener("keydown", ({ key }) => {
|
||||
movePlayer(key, 8, true);
|
||||
});
|
||||
|
||||
window.addEventListener("keyup", ({ key }) => {
|
||||
movePlayer(key, 0, false);
|
||||
});
|
||||
|
||||
```
|
||||
@@ -0,0 +1,344 @@
|
||||
---
|
||||
id: 64c9e90c433fde2e870285a3
|
||||
title: Step 78
|
||||
challengeType: 0
|
||||
dashedName: step-78
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Inside the callback function, create a new `const` variable called `collisionDetectionRules` and assign it an empty array.
|
||||
|
||||
Inside that array, add a conditional statement that checks if the player's `y` position plus the player's height is less than or equal to the platform's `y` position.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `const` variable called `collisionDetectionRules` that is assigned an empty array.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+collisionDetectionRules\s*=\s*\[\s*(?:[^\]]*\s*)*\];?/);
|
||||
```
|
||||
|
||||
You should have a conditional statement that checks if the player's `y` position plus the player's height is less than or equal to the platform's `y` position.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+collisionDetectionRules\s*=\s*\[\s*player\.position\.y\s+\+\s*player\.height\s*<=\s*platform\.position\.y,?\s*]\s*;?/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#99c9ff";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
|
||||
update() {
|
||||
this.draw();
|
||||
this.position.x += this.velocity.x;
|
||||
this.position.y += this.velocity.y;
|
||||
|
||||
if (this.position.y + this.height + this.velocity.y <= canvas.height) {
|
||||
if (this.position.y < 0) {
|
||||
this.position.y = 0;
|
||||
this.velocity.y = gravity;
|
||||
}
|
||||
this.velocity.y += gravity;
|
||||
} else {
|
||||
this.velocity.y = 0;
|
||||
}
|
||||
|
||||
if (this.position.x < this.width) {
|
||||
this.position.x = this.width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class Platform {
|
||||
constructor(x, y) {
|
||||
this.position = {
|
||||
x,
|
||||
y,
|
||||
};
|
||||
this.width = 200;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#acd157";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
}
|
||||
|
||||
const player = new Player();
|
||||
|
||||
const platformPositions = [
|
||||
{ x: 500, y: 450 },
|
||||
{ x: 700, y: 400 },
|
||||
{ x: 850, y: 350 },
|
||||
{ x: 900, y: 350 },
|
||||
{ x: 1050, y: 150 },
|
||||
{ x: 2500, y: 450 },
|
||||
{ x: 2900, y: 400 },
|
||||
{ x: 3150, y: 350 },
|
||||
{ x: 3900, y: 450 },
|
||||
{ x: 4200, y: 400 },
|
||||
{ x: 4400, y: 200 },
|
||||
{ x: 4700, y: 150 }
|
||||
];
|
||||
|
||||
const platforms = platformPositions.map(
|
||||
(platform) => new Platform(platform.x, platform.y)
|
||||
);
|
||||
|
||||
const animate = () => {
|
||||
requestAnimationFrame(animate);
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
platforms.forEach((platform) => {
|
||||
platform.draw();
|
||||
});
|
||||
|
||||
player.update();
|
||||
|
||||
if (keys.rightKey.pressed && player.position.x < 400) {
|
||||
player.velocity.x = 5;
|
||||
} else if (keys.leftKey.pressed && player.position.x > 100) {
|
||||
player.velocity.x = -5;
|
||||
} else {
|
||||
player.velocity.x = 0;
|
||||
|
||||
if (keys.rightKey.pressed && isCheckpointCollisionDetectionActive) {
|
||||
platforms.forEach((platform) => {
|
||||
platform.position.x -= 5;
|
||||
});
|
||||
} else if (keys.leftKey.pressed && isCheckpointCollisionDetectionActive) {
|
||||
platforms.forEach((platform) => {
|
||||
platform.position.x += 5;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
platforms.forEach((platform) => {
|
||||
|
||||
});
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
|
||||
const keys = {
|
||||
rightKey: {
|
||||
pressed: false
|
||||
},
|
||||
leftKey: {
|
||||
pressed: false
|
||||
}
|
||||
};
|
||||
|
||||
const movePlayer = (key, xVelocity, isPressed) => {
|
||||
if (!isCheckpointCollisionDetectionActive) {
|
||||
player.velocity.x = 0;
|
||||
player.velocity.y = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
switch (key) {
|
||||
case "ArrowLeft":
|
||||
keys.leftKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x -= xVelocity;
|
||||
break;
|
||||
case "ArrowUp":
|
||||
case " ":
|
||||
case "Spacebar":
|
||||
player.velocity.y -= 8;
|
||||
break;
|
||||
case "ArrowRight":
|
||||
keys.rightKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x += xVelocity;
|
||||
}
|
||||
}
|
||||
|
||||
const startGame = () => {
|
||||
canvas.style.display = "block";
|
||||
startScreen.style.display = "none";
|
||||
animate();
|
||||
}
|
||||
|
||||
startBtn.addEventListener("click", startGame);
|
||||
|
||||
window.addEventListener("keydown", ({ key }) => {
|
||||
movePlayer(key, 8, true);
|
||||
});
|
||||
|
||||
window.addEventListener("keyup", ({ key }) => {
|
||||
movePlayer(key, 0, false);
|
||||
});
|
||||
|
||||
```
|
||||
@@ -0,0 +1,340 @@
|
||||
---
|
||||
id: 64c9efea385ca536bf467a7c
|
||||
title: Step 79
|
||||
challengeType: 0
|
||||
dashedName: step-79
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Add another conditional statement that checks if the sum of the player's `y` position, height, and `y` velocity is greater than or equal to the platform's `y` position.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a conditional statement that checks if the sum of the player's `y` position, height, and `y` velocity is greater than or equal to the platform's `y` position.
|
||||
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+collisionDetectionRules\s*=\s*\[\s*player\.position\.y\s*\+\s*player\.height\s*<=\s*platform\.position\.y\s*,\s*player\.position\.y\s*\+\s*player\.height\s*\+\s*player\.velocity\.y\s*>=\s*platform\.position\.y,?\s*]\s*;?/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#99c9ff";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
|
||||
update() {
|
||||
this.draw();
|
||||
this.position.x += this.velocity.x;
|
||||
this.position.y += this.velocity.y;
|
||||
|
||||
if (this.position.y + this.height + this.velocity.y <= canvas.height) {
|
||||
if (this.position.y < 0) {
|
||||
this.position.y = 0;
|
||||
this.velocity.y = gravity;
|
||||
}
|
||||
this.velocity.y += gravity;
|
||||
} else {
|
||||
this.velocity.y = 0;
|
||||
}
|
||||
|
||||
if (this.position.x < this.width) {
|
||||
this.position.x = this.width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class Platform {
|
||||
constructor(x, y) {
|
||||
this.position = {
|
||||
x,
|
||||
y,
|
||||
};
|
||||
this.width = 200;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#acd157";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
}
|
||||
|
||||
const player = new Player();
|
||||
|
||||
const platformPositions = [
|
||||
{ x: 500, y: 450 },
|
||||
{ x: 700, y: 400 },
|
||||
{ x: 850, y: 350 },
|
||||
{ x: 900, y: 350 },
|
||||
{ x: 1050, y: 150 },
|
||||
{ x: 2500, y: 450 },
|
||||
{ x: 2900, y: 400 },
|
||||
{ x: 3150, y: 350 },
|
||||
{ x: 3900, y: 450 },
|
||||
{ x: 4200, y: 400 },
|
||||
{ x: 4400, y: 200 },
|
||||
{ x: 4700, y: 150 }
|
||||
];
|
||||
|
||||
const platforms = platformPositions.map(
|
||||
(platform) => new Platform(platform.x, platform.y)
|
||||
);
|
||||
|
||||
const animate = () => {
|
||||
requestAnimationFrame(animate);
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
platforms.forEach((platform) => {
|
||||
platform.draw();
|
||||
});
|
||||
|
||||
player.update();
|
||||
|
||||
if (keys.rightKey.pressed && player.position.x < 400) {
|
||||
player.velocity.x = 5;
|
||||
} else if (keys.leftKey.pressed && player.position.x > 100) {
|
||||
player.velocity.x = -5;
|
||||
} else {
|
||||
player.velocity.x = 0;
|
||||
|
||||
if (keys.rightKey.pressed && isCheckpointCollisionDetectionActive) {
|
||||
platforms.forEach((platform) => {
|
||||
platform.position.x -= 5;
|
||||
});
|
||||
} else if (keys.leftKey.pressed && isCheckpointCollisionDetectionActive) {
|
||||
platforms.forEach((platform) => {
|
||||
platform.position.x += 5;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
platforms.forEach((platform) => {
|
||||
const collisionDetectionRules = [
|
||||
player.position.y + player.height <= platform.position.y,
|
||||
|
||||
];
|
||||
});
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
|
||||
const keys = {
|
||||
rightKey: {
|
||||
pressed: false
|
||||
},
|
||||
leftKey: {
|
||||
pressed: false
|
||||
}
|
||||
};
|
||||
|
||||
const movePlayer = (key, xVelocity, isPressed) => {
|
||||
if (!isCheckpointCollisionDetectionActive) {
|
||||
player.velocity.x = 0;
|
||||
player.velocity.y = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
switch (key) {
|
||||
case "ArrowLeft":
|
||||
keys.leftKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x -= xVelocity;
|
||||
break;
|
||||
case "ArrowUp":
|
||||
case " ":
|
||||
case "Spacebar":
|
||||
player.velocity.y -= 8;
|
||||
break;
|
||||
case "ArrowRight":
|
||||
keys.rightKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x += xVelocity;
|
||||
}
|
||||
}
|
||||
|
||||
const startGame = () => {
|
||||
canvas.style.display = "block";
|
||||
startScreen.style.display = "none";
|
||||
animate();
|
||||
}
|
||||
|
||||
startBtn.addEventListener("click", startGame);
|
||||
|
||||
window.addEventListener("keydown", ({ key }) => {
|
||||
movePlayer(key, 8, true);
|
||||
});
|
||||
|
||||
window.addEventListener("keyup", ({ key }) => {
|
||||
movePlayer(key, 0, false);
|
||||
});
|
||||
|
||||
```
|
||||
@@ -0,0 +1,340 @@
|
||||
---
|
||||
id: 64c9fa51209ab5395d524cce
|
||||
title: Step 80
|
||||
challengeType: 0
|
||||
dashedName: step-80
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Below that conditional statement, add another conditional statement that checks if the player's `x` position is greater than or equal to the platform's `x` position minus half of the player's width.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a conditional statement that checks if the player's `x` position is greater than or equal to the platform's `x` position minus half of the player's width.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+collisionDetectionRules\s*=\s*\[\s*player\.position\.y\s*\+\s*player\.height\s*<=\s*platform\.position\.y\s*,\s*player\.position\.y\s*\+\s*player\.height\s*\+\s*player\.velocity\.y\s*>=\s*platform\.position\.y\s*,\s*player\.position\.x\s*>=\s*platform\.position\.x\s*-\s*player\.width\s*\/\s*2,?\s*]\s*;?/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#99c9ff";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
|
||||
update() {
|
||||
this.draw();
|
||||
this.position.x += this.velocity.x;
|
||||
this.position.y += this.velocity.y;
|
||||
|
||||
if (this.position.y + this.height + this.velocity.y <= canvas.height) {
|
||||
if (this.position.y < 0) {
|
||||
this.position.y = 0;
|
||||
this.velocity.y = gravity;
|
||||
}
|
||||
this.velocity.y += gravity;
|
||||
} else {
|
||||
this.velocity.y = 0;
|
||||
}
|
||||
|
||||
if (this.position.x < this.width) {
|
||||
this.position.x = this.width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class Platform {
|
||||
constructor(x, y) {
|
||||
this.position = {
|
||||
x,
|
||||
y,
|
||||
};
|
||||
this.width = 200;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#acd157";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
}
|
||||
|
||||
const player = new Player();
|
||||
|
||||
const platformPositions = [
|
||||
{ x: 500, y: 450 },
|
||||
{ x: 700, y: 400 },
|
||||
{ x: 850, y: 350 },
|
||||
{ x: 900, y: 350 },
|
||||
{ x: 1050, y: 150 },
|
||||
{ x: 2500, y: 450 },
|
||||
{ x: 2900, y: 400 },
|
||||
{ x: 3150, y: 350 },
|
||||
{ x: 3900, y: 450 },
|
||||
{ x: 4200, y: 400 },
|
||||
{ x: 4400, y: 200 },
|
||||
{ x: 4700, y: 150 }
|
||||
];
|
||||
|
||||
const platforms = platformPositions.map(
|
||||
(platform) => new Platform(platform.x, platform.y)
|
||||
);
|
||||
|
||||
const animate = () => {
|
||||
requestAnimationFrame(animate);
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
platforms.forEach((platform) => {
|
||||
platform.draw();
|
||||
});
|
||||
|
||||
player.update();
|
||||
|
||||
if (keys.rightKey.pressed && player.position.x < 400) {
|
||||
player.velocity.x = 5;
|
||||
} else if (keys.leftKey.pressed && player.position.x > 100) {
|
||||
player.velocity.x = -5;
|
||||
} else {
|
||||
player.velocity.x = 0;
|
||||
|
||||
if (keys.rightKey.pressed && isCheckpointCollisionDetectionActive) {
|
||||
platforms.forEach((platform) => {
|
||||
platform.position.x -= 5;
|
||||
});
|
||||
} else if (keys.leftKey.pressed && isCheckpointCollisionDetectionActive) {
|
||||
platforms.forEach((platform) => {
|
||||
platform.position.x += 5;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
platforms.forEach((platform) => {
|
||||
const collisionDetectionRules = [
|
||||
player.position.y + player.height <= platform.position.y,
|
||||
player.position.y + player.height + player.velocity.y >= platform.position.y,
|
||||
|
||||
];
|
||||
});
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
|
||||
const keys = {
|
||||
rightKey: {
|
||||
pressed: false
|
||||
},
|
||||
leftKey: {
|
||||
pressed: false
|
||||
}
|
||||
};
|
||||
|
||||
const movePlayer = (key, xVelocity, isPressed) => {
|
||||
if (!isCheckpointCollisionDetectionActive) {
|
||||
player.velocity.x = 0;
|
||||
player.velocity.y = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
switch (key) {
|
||||
case "ArrowLeft":
|
||||
keys.leftKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x -= xVelocity;
|
||||
break;
|
||||
case "ArrowUp":
|
||||
case " ":
|
||||
case "Spacebar":
|
||||
player.velocity.y -= 8;
|
||||
break;
|
||||
case "ArrowRight":
|
||||
keys.rightKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x += xVelocity;
|
||||
}
|
||||
}
|
||||
|
||||
const startGame = () => {
|
||||
canvas.style.display = "block";
|
||||
startScreen.style.display = "none";
|
||||
animate();
|
||||
}
|
||||
|
||||
startBtn.addEventListener("click", startGame);
|
||||
|
||||
window.addEventListener("keydown", ({ key }) => {
|
||||
movePlayer(key, 8, true);
|
||||
});
|
||||
|
||||
window.addEventListener("keyup", ({ key }) => {
|
||||
movePlayer(key, 0, false);
|
||||
});
|
||||
|
||||
```
|
||||
@@ -0,0 +1,341 @@
|
||||
---
|
||||
id: 64c9fe7b2ffa3539fbf82d32
|
||||
title: Step 81
|
||||
challengeType: 0
|
||||
dashedName: step-81
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Add one last conditional statement that checks if the player's `x` position is less than or equal to the sum of the platform's `x` position plus the platform's width minus one-third of the player's width.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a conditional statement that checks if the player's `x` position is lesser than or equal to the platform's `x` position plus the platform's width minus the player's width divided by `3`.
|
||||
|
||||
```js
|
||||
assert.match(code, /player\.position\.x\s*<=\s*platform\.position\.x\s*\+\s*platform\.width\s*-\s*player\.width\s*\/\s*3,?/)
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#99c9ff";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
|
||||
update() {
|
||||
this.draw();
|
||||
this.position.x += this.velocity.x;
|
||||
this.position.y += this.velocity.y;
|
||||
|
||||
if (this.position.y + this.height + this.velocity.y <= canvas.height) {
|
||||
if (this.position.y < 0) {
|
||||
this.position.y = 0;
|
||||
this.velocity.y = gravity;
|
||||
}
|
||||
this.velocity.y += gravity;
|
||||
} else {
|
||||
this.velocity.y = 0;
|
||||
}
|
||||
|
||||
if (this.position.x < this.width) {
|
||||
this.position.x = this.width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class Platform {
|
||||
constructor(x, y) {
|
||||
this.position = {
|
||||
x,
|
||||
y,
|
||||
};
|
||||
this.width = 200;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#acd157";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
}
|
||||
|
||||
const player = new Player();
|
||||
|
||||
const platformPositions = [
|
||||
{ x: 500, y: 450 },
|
||||
{ x: 700, y: 400 },
|
||||
{ x: 850, y: 350 },
|
||||
{ x: 900, y: 350 },
|
||||
{ x: 1050, y: 150 },
|
||||
{ x: 2500, y: 450 },
|
||||
{ x: 2900, y: 400 },
|
||||
{ x: 3150, y: 350 },
|
||||
{ x: 3900, y: 450 },
|
||||
{ x: 4200, y: 400 },
|
||||
{ x: 4400, y: 200 },
|
||||
{ x: 4700, y: 150 }
|
||||
];
|
||||
|
||||
const platforms = platformPositions.map(
|
||||
(platform) => new Platform(platform.x, platform.y)
|
||||
);
|
||||
|
||||
const animate = () => {
|
||||
requestAnimationFrame(animate);
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
platforms.forEach((platform) => {
|
||||
platform.draw();
|
||||
});
|
||||
|
||||
player.update();
|
||||
|
||||
if (keys.rightKey.pressed && player.position.x < 400) {
|
||||
player.velocity.x = 5;
|
||||
} else if (keys.leftKey.pressed && player.position.x > 100) {
|
||||
player.velocity.x = -5;
|
||||
} else {
|
||||
player.velocity.x = 0;
|
||||
|
||||
if (keys.rightKey.pressed && isCheckpointCollisionDetectionActive) {
|
||||
platforms.forEach((platform) => {
|
||||
platform.position.x -= 5;
|
||||
});
|
||||
} else if (keys.leftKey.pressed && isCheckpointCollisionDetectionActive) {
|
||||
platforms.forEach((platform) => {
|
||||
platform.position.x += 5;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
platforms.forEach((platform) => {
|
||||
const collisionDetectionRules = [
|
||||
player.position.y + player.height <= platform.position.y,
|
||||
player.position.y + player.height + player.velocity.y >= platform.position.y,
|
||||
player.position.x >= platform.position.x - player.width / 2,
|
||||
|
||||
];
|
||||
});
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
|
||||
const keys = {
|
||||
rightKey: {
|
||||
pressed: false
|
||||
},
|
||||
leftKey: {
|
||||
pressed: false
|
||||
}
|
||||
};
|
||||
|
||||
const movePlayer = (key, xVelocity, isPressed) => {
|
||||
if (!isCheckpointCollisionDetectionActive) {
|
||||
player.velocity.x = 0;
|
||||
player.velocity.y = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
switch (key) {
|
||||
case "ArrowLeft":
|
||||
keys.leftKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x -= xVelocity;
|
||||
break;
|
||||
case "ArrowUp":
|
||||
case " ":
|
||||
case "Spacebar":
|
||||
player.velocity.y -= 8;
|
||||
break;
|
||||
case "ArrowRight":
|
||||
keys.rightKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x += xVelocity;
|
||||
}
|
||||
}
|
||||
|
||||
const startGame = () => {
|
||||
canvas.style.display = "block";
|
||||
startScreen.style.display = "none";
|
||||
animate();
|
||||
}
|
||||
|
||||
startBtn.addEventListener("click", startGame);
|
||||
|
||||
window.addEventListener("keydown", ({ key }) => {
|
||||
movePlayer(key, 8, true);
|
||||
});
|
||||
|
||||
window.addEventListener("keyup", ({ key }) => {
|
||||
movePlayer(key, 0, false);
|
||||
});
|
||||
|
||||
```
|
||||
@@ -0,0 +1,351 @@
|
||||
---
|
||||
id: 64cab4d06512c95234256cbb
|
||||
title: Step 82
|
||||
challengeType: 0
|
||||
dashedName: step-82
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Next, add an `if` statement that checks if every rule in the `collisionDetectionRules` array is `true`. Make sure to use the `every` method for this.
|
||||
|
||||
Inside the body of the `if` statement, assign the number 0 to the player's `y` velocity followed by a `return` statement.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have an if statement that uses the `every` method to check if every rule in the `collisionDetectionRules` array is `true`.
|
||||
|
||||
```js
|
||||
assert.match(code, /if\s*\(collisionDetectionRules\.every\(\((.+)\)\s*=>\s*\1\)\)\s*\{\s*/);
|
||||
```
|
||||
|
||||
You should assign the number 0 to the player's `y` velocity followed by a `return` statement inside the body of the `if` statement.
|
||||
|
||||
```js
|
||||
assert.match(code, /if\s*\(collisionDetectionRules\.every\(\((.+)\)\s*=>\s*\1\)\)\s*\{\s*player\.velocity\.y\s*=\s*0;?\s*return;?\s*\};?/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#99c9ff";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
|
||||
update() {
|
||||
this.draw();
|
||||
this.position.x += this.velocity.x;
|
||||
this.position.y += this.velocity.y;
|
||||
|
||||
if (this.position.y + this.height + this.velocity.y <= canvas.height) {
|
||||
if (this.position.y < 0) {
|
||||
this.position.y = 0;
|
||||
this.velocity.y = gravity;
|
||||
}
|
||||
this.velocity.y += gravity;
|
||||
} else {
|
||||
this.velocity.y = 0;
|
||||
}
|
||||
|
||||
if (this.position.x < this.width) {
|
||||
this.position.x = this.width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class Platform {
|
||||
constructor(x, y) {
|
||||
this.position = {
|
||||
x,
|
||||
y,
|
||||
};
|
||||
this.width = 200;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#acd157";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
}
|
||||
|
||||
const player = new Player();
|
||||
|
||||
const platformPositions = [
|
||||
{ x: 500, y: 450 },
|
||||
{ x: 700, y: 400 },
|
||||
{ x: 850, y: 350 },
|
||||
{ x: 900, y: 350 },
|
||||
{ x: 1050, y: 150 },
|
||||
{ x: 2500, y: 450 },
|
||||
{ x: 2900, y: 400 },
|
||||
{ x: 3150, y: 350 },
|
||||
{ x: 3900, y: 450 },
|
||||
{ x: 4200, y: 400 },
|
||||
{ x: 4400, y: 200 },
|
||||
{ x: 4700, y: 150 }
|
||||
];
|
||||
|
||||
const platforms = platformPositions.map(
|
||||
(platform) => new Platform(platform.x, platform.y)
|
||||
);
|
||||
|
||||
const animate = () => {
|
||||
requestAnimationFrame(animate);
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
platforms.forEach((platform) => {
|
||||
platform.draw();
|
||||
});
|
||||
|
||||
player.update();
|
||||
|
||||
if (keys.rightKey.pressed && player.position.x < 400) {
|
||||
player.velocity.x = 5;
|
||||
} else if (keys.leftKey.pressed && player.position.x > 100) {
|
||||
player.velocity.x = -5;
|
||||
} else {
|
||||
player.velocity.x = 0;
|
||||
|
||||
if (keys.rightKey.pressed && isCheckpointCollisionDetectionActive) {
|
||||
platforms.forEach((platform) => {
|
||||
platform.position.x -= 5;
|
||||
});
|
||||
} else if (keys.leftKey.pressed && isCheckpointCollisionDetectionActive) {
|
||||
platforms.forEach((platform) => {
|
||||
platform.position.x += 5;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
platforms.forEach((platform) => {
|
||||
const collisionDetectionRules = [
|
||||
player.position.y + player.height <= platform.position.y,
|
||||
player.position.y + player.height + player.velocity.y >= platform.position.y,
|
||||
player.position.x >= platform.position.x - player.width / 2,
|
||||
player.position.x <=
|
||||
platform.position.x + platform.width - player.width / 3,
|
||||
];
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
const keys = {
|
||||
rightKey: {
|
||||
pressed: false
|
||||
},
|
||||
leftKey: {
|
||||
pressed: false
|
||||
}
|
||||
};
|
||||
|
||||
const movePlayer = (key, xVelocity, isPressed) => {
|
||||
if (!isCheckpointCollisionDetectionActive) {
|
||||
player.velocity.x = 0;
|
||||
player.velocity.y = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
switch (key) {
|
||||
case "ArrowLeft":
|
||||
keys.leftKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x -= xVelocity;
|
||||
break;
|
||||
case "ArrowUp":
|
||||
case " ":
|
||||
case "Spacebar":
|
||||
player.velocity.y -= 8;
|
||||
break;
|
||||
case "ArrowRight":
|
||||
keys.rightKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x += xVelocity;
|
||||
}
|
||||
}
|
||||
|
||||
const startGame = () => {
|
||||
canvas.style.display = "block";
|
||||
startScreen.style.display = "none";
|
||||
animate();
|
||||
}
|
||||
|
||||
startBtn.addEventListener("click", startGame);
|
||||
|
||||
window.addEventListener("keydown", ({ key }) => {
|
||||
movePlayer(key, 8, true);
|
||||
});
|
||||
|
||||
window.addEventListener("keyup", ({ key }) => {
|
||||
movePlayer(key, 0, false);
|
||||
});
|
||||
|
||||
```
|
||||
@@ -0,0 +1,348 @@
|
||||
---
|
||||
id: 64caea41a4199e54253c60ca
|
||||
title: Step 83
|
||||
challengeType: 0
|
||||
dashedName: step-83
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create a new `const` variable called `platformDetectionRules` and assign it an empty array.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `const` variable called `platformDetectionRules` that is assigned an empty array.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+platformDetectionRules\s*=\s*\[\s*\]/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#99c9ff";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
|
||||
update() {
|
||||
this.draw();
|
||||
this.position.x += this.velocity.x;
|
||||
this.position.y += this.velocity.y;
|
||||
|
||||
if (this.position.y + this.height + this.velocity.y <= canvas.height) {
|
||||
if (this.position.y < 0) {
|
||||
this.position.y = 0;
|
||||
this.velocity.y = gravity;
|
||||
}
|
||||
this.velocity.y += gravity;
|
||||
} else {
|
||||
this.velocity.y = 0;
|
||||
}
|
||||
|
||||
if (this.position.x < this.width) {
|
||||
this.position.x = this.width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class Platform {
|
||||
constructor(x, y) {
|
||||
this.position = {
|
||||
x,
|
||||
y,
|
||||
};
|
||||
this.width = 200;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#acd157";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
}
|
||||
|
||||
const player = new Player();
|
||||
|
||||
const platformPositions = [
|
||||
{ x: 500, y: 450 },
|
||||
{ x: 700, y: 400 },
|
||||
{ x: 850, y: 350 },
|
||||
{ x: 900, y: 350 },
|
||||
{ x: 1050, y: 150 },
|
||||
{ x: 2500, y: 450 },
|
||||
{ x: 2900, y: 400 },
|
||||
{ x: 3150, y: 350 },
|
||||
{ x: 3900, y: 450 },
|
||||
{ x: 4200, y: 400 },
|
||||
{ x: 4400, y: 200 },
|
||||
{ x: 4700, y: 150 }
|
||||
];
|
||||
|
||||
const platforms = platformPositions.map(
|
||||
(platform) => new Platform(platform.x, platform.y)
|
||||
);
|
||||
|
||||
const animate = () => {
|
||||
requestAnimationFrame(animate);
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
platforms.forEach((platform) => {
|
||||
platform.draw();
|
||||
});
|
||||
|
||||
player.update();
|
||||
|
||||
if (keys.rightKey.pressed && player.position.x < 400) {
|
||||
player.velocity.x = 5;
|
||||
} else if (keys.leftKey.pressed && player.position.x > 100) {
|
||||
player.velocity.x = -5;
|
||||
} else {
|
||||
player.velocity.x = 0;
|
||||
|
||||
if (keys.rightKey.pressed && isCheckpointCollisionDetectionActive) {
|
||||
platforms.forEach((platform) => {
|
||||
platform.position.x -= 5;
|
||||
});
|
||||
} else if (keys.leftKey.pressed && isCheckpointCollisionDetectionActive) {
|
||||
platforms.forEach((platform) => {
|
||||
platform.position.x += 5;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
platforms.forEach((platform) => {
|
||||
const collisionDetectionRules = [
|
||||
player.position.y + player.height <= platform.position.y,
|
||||
player.position.y + player.height + player.velocity.y >= platform.position.y,
|
||||
player.position.x >= platform.position.x - player.width / 2,
|
||||
player.position.x <=
|
||||
platform.position.x + platform.width - player.width / 3,
|
||||
];
|
||||
|
||||
if (collisionDetectionRules.every((rule) => rule)) {
|
||||
player.velocity.y = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
const keys = {
|
||||
rightKey: {
|
||||
pressed: false
|
||||
},
|
||||
leftKey: {
|
||||
pressed: false
|
||||
}
|
||||
};
|
||||
|
||||
const movePlayer = (key, xVelocity, isPressed) => {
|
||||
if (!isCheckpointCollisionDetectionActive) {
|
||||
player.velocity.x = 0;
|
||||
player.velocity.y = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
switch (key) {
|
||||
case "ArrowLeft":
|
||||
keys.leftKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x -= xVelocity;
|
||||
break;
|
||||
case "ArrowUp":
|
||||
case " ":
|
||||
case "Spacebar":
|
||||
player.velocity.y -= 8;
|
||||
break;
|
||||
case "ArrowRight":
|
||||
keys.rightKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x += xVelocity;
|
||||
}
|
||||
}
|
||||
|
||||
const startGame = () => {
|
||||
canvas.style.display = "block";
|
||||
startScreen.style.display = "none";
|
||||
animate();
|
||||
}
|
||||
|
||||
startBtn.addEventListener("click", startGame);
|
||||
|
||||
window.addEventListener("keydown", ({ key }) => {
|
||||
movePlayer(key, 8, true);
|
||||
});
|
||||
|
||||
window.addEventListener("keyup", ({ key }) => {
|
||||
movePlayer(key, 0, false);
|
||||
});
|
||||
|
||||
```
|
||||
@@ -0,0 +1,352 @@
|
||||
---
|
||||
id: 64caeb134c3cdc5498cd75b9
|
||||
title: Step 84
|
||||
challengeType: 0
|
||||
dashedName: step-84
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Inside that array, add a conditional statement that checks if the player's `x` position is greater than or equal to the platform's `x` position minus half of the player's width.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a conditional statement that checks if the player's `x` position is greater than or equal to the platform's `x` position minus half of the player's width.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s*platformDetectionRules\s+=\s*\[\s*player\.position\.x\s*>=\s*platform\.position\.x\s*-\s*player\.width\s*\/\s*2,?\s*\];?/)
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#99c9ff";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
|
||||
update() {
|
||||
this.draw();
|
||||
this.position.x += this.velocity.x;
|
||||
this.position.y += this.velocity.y;
|
||||
|
||||
if (this.position.y + this.height + this.velocity.y <= canvas.height) {
|
||||
if (this.position.y < 0) {
|
||||
this.position.y = 0;
|
||||
this.velocity.y = gravity;
|
||||
}
|
||||
this.velocity.y += gravity;
|
||||
} else {
|
||||
this.velocity.y = 0;
|
||||
}
|
||||
|
||||
if (this.position.x < this.width) {
|
||||
this.position.x = this.width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class Platform {
|
||||
constructor(x, y) {
|
||||
this.position = {
|
||||
x,
|
||||
y,
|
||||
};
|
||||
this.width = 200;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#acd157";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
}
|
||||
|
||||
const player = new Player();
|
||||
|
||||
const platformPositions = [
|
||||
{ x: 500, y: 450 },
|
||||
{ x: 700, y: 400 },
|
||||
{ x: 850, y: 350 },
|
||||
{ x: 900, y: 350 },
|
||||
{ x: 1050, y: 150 },
|
||||
{ x: 2500, y: 450 },
|
||||
{ x: 2900, y: 400 },
|
||||
{ x: 3150, y: 350 },
|
||||
{ x: 3900, y: 450 },
|
||||
{ x: 4200, y: 400 },
|
||||
{ x: 4400, y: 200 },
|
||||
{ x: 4700, y: 150 }
|
||||
];
|
||||
|
||||
const platforms = platformPositions.map(
|
||||
(platform) => new Platform(platform.x, platform.y)
|
||||
);
|
||||
|
||||
const animate = () => {
|
||||
requestAnimationFrame(animate);
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
platforms.forEach((platform) => {
|
||||
platform.draw();
|
||||
});
|
||||
|
||||
player.update();
|
||||
|
||||
if (keys.rightKey.pressed && player.position.x < 400) {
|
||||
player.velocity.x = 5;
|
||||
} else if (keys.leftKey.pressed && player.position.x > 100) {
|
||||
player.velocity.x = -5;
|
||||
} else {
|
||||
player.velocity.x = 0;
|
||||
|
||||
if (keys.rightKey.pressed && isCheckpointCollisionDetectionActive) {
|
||||
platforms.forEach((platform) => {
|
||||
platform.position.x -= 5;
|
||||
});
|
||||
} else if (keys.leftKey.pressed && isCheckpointCollisionDetectionActive) {
|
||||
platforms.forEach((platform) => {
|
||||
platform.position.x += 5;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
platforms.forEach((platform) => {
|
||||
const collisionDetectionRules = [
|
||||
player.position.y + player.height <= platform.position.y,
|
||||
player.position.y + player.height + player.velocity.y >= platform.position.y,
|
||||
player.position.x >= platform.position.x - player.width / 2,
|
||||
player.position.x <=
|
||||
platform.position.x + platform.width - player.width / 3,
|
||||
];
|
||||
|
||||
if (collisionDetectionRules.every((rule) => rule)) {
|
||||
player.velocity.y = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
const platformDetectionRules = [
|
||||
|
||||
];
|
||||
|
||||
--fcc-editable-region--
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
const keys = {
|
||||
rightKey: {
|
||||
pressed: false
|
||||
},
|
||||
leftKey: {
|
||||
pressed: false
|
||||
}
|
||||
};
|
||||
|
||||
const movePlayer = (key, xVelocity, isPressed) => {
|
||||
if (!isCheckpointCollisionDetectionActive) {
|
||||
player.velocity.x = 0;
|
||||
player.velocity.y = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
switch (key) {
|
||||
case "ArrowLeft":
|
||||
keys.leftKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x -= xVelocity;
|
||||
break;
|
||||
case "ArrowUp":
|
||||
case " ":
|
||||
case "Spacebar":
|
||||
player.velocity.y -= 8;
|
||||
break;
|
||||
case "ArrowRight":
|
||||
keys.rightKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x += xVelocity;
|
||||
}
|
||||
}
|
||||
|
||||
const startGame = () => {
|
||||
canvas.style.display = "block";
|
||||
startScreen.style.display = "none";
|
||||
animate();
|
||||
}
|
||||
|
||||
startBtn.addEventListener("click", startGame);
|
||||
|
||||
window.addEventListener("keydown", ({ key }) => {
|
||||
movePlayer(key, 8, true);
|
||||
});
|
||||
|
||||
window.addEventListener("keyup", ({ key }) => {
|
||||
movePlayer(key, 0, false);
|
||||
});
|
||||
|
||||
```
|
||||
@@ -0,0 +1,353 @@
|
||||
---
|
||||
id: 64caeeae2fa57756035d6012
|
||||
title: Step 85
|
||||
challengeType: 0
|
||||
dashedName: step-85
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Below that conditional statement, add another conditional statement that checks if the player's `x` position is less than or equal to the sum of the platform's `x` position plus the platform's width minus one-third of the player's width.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a conditional statement that checks if the player's `x` position is less than or equal to the sum of the platform's `x` position and the platform's width minus one third of the player's width.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s*platformDetectionRules\s+=\s*\[\s*player\.position\.x\s*>=\s*platform\.position\.x\s*-\s*player\.width\s*\/\s*2,?\s*player\.position\.x\s*<=\s*platform\.position\.x\s*\+\s*platform\.width\s*-\s*player\.width\s*\/\s*3,?\s*\];?/)
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#99c9ff";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
|
||||
update() {
|
||||
this.draw();
|
||||
this.position.x += this.velocity.x;
|
||||
this.position.y += this.velocity.y;
|
||||
|
||||
if (this.position.y + this.height + this.velocity.y <= canvas.height) {
|
||||
if (this.position.y < 0) {
|
||||
this.position.y = 0;
|
||||
this.velocity.y = gravity;
|
||||
}
|
||||
this.velocity.y += gravity;
|
||||
} else {
|
||||
this.velocity.y = 0;
|
||||
}
|
||||
|
||||
if (this.position.x < this.width) {
|
||||
this.position.x = this.width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class Platform {
|
||||
constructor(x, y) {
|
||||
this.position = {
|
||||
x,
|
||||
y,
|
||||
};
|
||||
this.width = 200;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#acd157";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
}
|
||||
|
||||
const player = new Player();
|
||||
|
||||
const platformPositions = [
|
||||
{ x: 500, y: 450 },
|
||||
{ x: 700, y: 400 },
|
||||
{ x: 850, y: 350 },
|
||||
{ x: 900, y: 350 },
|
||||
{ x: 1050, y: 150 },
|
||||
{ x: 2500, y: 450 },
|
||||
{ x: 2900, y: 400 },
|
||||
{ x: 3150, y: 350 },
|
||||
{ x: 3900, y: 450 },
|
||||
{ x: 4200, y: 400 },
|
||||
{ x: 4400, y: 200 },
|
||||
{ x: 4700, y: 150 }
|
||||
];
|
||||
|
||||
const platforms = platformPositions.map(
|
||||
(platform) => new Platform(platform.x, platform.y)
|
||||
);
|
||||
|
||||
const animate = () => {
|
||||
requestAnimationFrame(animate);
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
platforms.forEach((platform) => {
|
||||
platform.draw();
|
||||
});
|
||||
|
||||
player.update();
|
||||
|
||||
if (keys.rightKey.pressed && player.position.x < 400) {
|
||||
player.velocity.x = 5;
|
||||
} else if (keys.leftKey.pressed && player.position.x > 100) {
|
||||
player.velocity.x = -5;
|
||||
} else {
|
||||
player.velocity.x = 0;
|
||||
|
||||
if (keys.rightKey.pressed && isCheckpointCollisionDetectionActive) {
|
||||
platforms.forEach((platform) => {
|
||||
platform.position.x -= 5;
|
||||
});
|
||||
} else if (keys.leftKey.pressed && isCheckpointCollisionDetectionActive) {
|
||||
platforms.forEach((platform) => {
|
||||
platform.position.x += 5;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
platforms.forEach((platform) => {
|
||||
const collisionDetectionRules = [
|
||||
player.position.y + player.height <= platform.position.y,
|
||||
player.position.y + player.height + player.velocity.y >= platform.position.y,
|
||||
player.position.x >= platform.position.x - player.width / 2,
|
||||
player.position.x <=
|
||||
platform.position.x + platform.width - player.width / 3,
|
||||
];
|
||||
|
||||
if (collisionDetectionRules.every((rule) => rule)) {
|
||||
player.velocity.y = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
const platformDetectionRules = [
|
||||
player.position.x >= platform.position.x - player.width / 2,
|
||||
|
||||
];
|
||||
|
||||
--fcc-editable-region--
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
const keys = {
|
||||
rightKey: {
|
||||
pressed: false
|
||||
},
|
||||
leftKey: {
|
||||
pressed: false
|
||||
}
|
||||
};
|
||||
|
||||
const movePlayer = (key, xVelocity, isPressed) => {
|
||||
if (!isCheckpointCollisionDetectionActive) {
|
||||
player.velocity.x = 0;
|
||||
player.velocity.y = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
switch (key) {
|
||||
case "ArrowLeft":
|
||||
keys.leftKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x -= xVelocity;
|
||||
break;
|
||||
case "ArrowUp":
|
||||
case " ":
|
||||
case "Spacebar":
|
||||
player.velocity.y -= 8;
|
||||
break;
|
||||
case "ArrowRight":
|
||||
keys.rightKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x += xVelocity;
|
||||
}
|
||||
}
|
||||
|
||||
const startGame = () => {
|
||||
canvas.style.display = "block";
|
||||
startScreen.style.display = "none";
|
||||
animate();
|
||||
}
|
||||
|
||||
startBtn.addEventListener("click", startGame);
|
||||
|
||||
window.addEventListener("keydown", ({ key }) => {
|
||||
movePlayer(key, 8, true);
|
||||
});
|
||||
|
||||
window.addEventListener("keyup", ({ key }) => {
|
||||
movePlayer(key, 0, false);
|
||||
});
|
||||
|
||||
```
|
||||
@@ -0,0 +1,372 @@
|
||||
---
|
||||
id: 64caf1be15606d5814c3387b
|
||||
title: Step 86
|
||||
challengeType: 0
|
||||
dashedName: step-86
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Add another conditional statement that checks if the player's `y` position plus the player's height is greater than or equal to the platform's `y` position.
|
||||
|
||||
Below that, add another conditional statement that checks if the player's `y` position is less than or equal to the sum of the platform's `y` position plus the platform's height.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should not alter the existing `platformDetectionRules` array and its content.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s*platformDetectionRules\s+=\s*\[\s*player\.position\.x\s*>=\s*platform\.position\.x\s*-\s*player\.width\s*\/\s*2,?\s*player\.position\.x\s*<=\s*platform\.position\.x\s*\+\s*platform\.width\s*-\s*player\.width\s*\/\s*3,\s*.*\s*.*\s*\];?/)
|
||||
|
||||
```
|
||||
|
||||
You should have a conditional statement that checks if the player's `y` position plus the player's height is greater than or equal to the platform's `y` position.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s*platformDetectionRules\s+=\s*\[\s*player\.position\.x\s*>=\s*platform\.position\.x\s*-\s*player\.width\s*\/\s*2,?\s*player\.position\.x\s*<=\s*platform\.position\.x\s*\+\s*platform\.width\s*-\s*player\.width\s*\/\s*3,\s*player\.position\.y\s*\+\s*player\.height\s*>=\s*platform\.position\.y,\s*.*\s*\];?/)
|
||||
|
||||
```
|
||||
|
||||
You should have a conditional statement that checks if the player's `y` position is less than or equal to the sum of the platform's `y` position plus the platform's height.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s*platformDetectionRules\s+=\s*\[\s*player\.position\.x\s*>=\s*platform\.position\.x\s*-\s*player\.width\s*\/\s*2,?\s*player\.position\.x\s*<=\s*platform\.position\.x\s*\+\s*platform\.width\s*-\s*player\.width\s*\/\s*3,\s*player\.position\.y\s*\+\s*player\.height\s*>=\s*platform\.position\.y,\s*player\.position\.y\s*<=\s*platform\.position\.y\s*\+\s*platform\.height,?\s*\];?/)
|
||||
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#99c9ff";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
|
||||
update() {
|
||||
this.draw();
|
||||
this.position.x += this.velocity.x;
|
||||
this.position.y += this.velocity.y;
|
||||
|
||||
if (this.position.y + this.height + this.velocity.y <= canvas.height) {
|
||||
if (this.position.y < 0) {
|
||||
this.position.y = 0;
|
||||
this.velocity.y = gravity;
|
||||
}
|
||||
this.velocity.y += gravity;
|
||||
} else {
|
||||
this.velocity.y = 0;
|
||||
}
|
||||
|
||||
if (this.position.x < this.width) {
|
||||
this.position.x = this.width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class Platform {
|
||||
constructor(x, y) {
|
||||
this.position = {
|
||||
x,
|
||||
y,
|
||||
};
|
||||
this.width = 200;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#acd157";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
}
|
||||
|
||||
const player = new Player();
|
||||
|
||||
const platformPositions = [
|
||||
{ x: 500, y: 450 },
|
||||
{ x: 700, y: 400 },
|
||||
{ x: 850, y: 350 },
|
||||
{ x: 900, y: 350 },
|
||||
{ x: 1050, y: 150 },
|
||||
{ x: 2500, y: 450 },
|
||||
{ x: 2900, y: 400 },
|
||||
{ x: 3150, y: 350 },
|
||||
{ x: 3900, y: 450 },
|
||||
{ x: 4200, y: 400 },
|
||||
{ x: 4400, y: 200 },
|
||||
{ x: 4700, y: 150 }
|
||||
];
|
||||
|
||||
const platforms = platformPositions.map(
|
||||
(platform) => new Platform(platform.x, platform.y)
|
||||
);
|
||||
|
||||
const animate = () => {
|
||||
requestAnimationFrame(animate);
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
platforms.forEach((platform) => {
|
||||
platform.draw();
|
||||
});
|
||||
|
||||
player.update();
|
||||
|
||||
if (keys.rightKey.pressed && player.position.x < 400) {
|
||||
player.velocity.x = 5;
|
||||
} else if (keys.leftKey.pressed && player.position.x > 100) {
|
||||
player.velocity.x = -5;
|
||||
} else {
|
||||
player.velocity.x = 0;
|
||||
|
||||
if (keys.rightKey.pressed && isCheckpointCollisionDetectionActive) {
|
||||
platforms.forEach((platform) => {
|
||||
platform.position.x -= 5;
|
||||
});
|
||||
} else if (keys.leftKey.pressed && isCheckpointCollisionDetectionActive) {
|
||||
platforms.forEach((platform) => {
|
||||
platform.position.x += 5;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
platforms.forEach((platform) => {
|
||||
const collisionDetectionRules = [
|
||||
player.position.y + player.height <= platform.position.y,
|
||||
player.position.y + player.height + player.velocity.y >= platform.position.y,
|
||||
player.position.x >= platform.position.x - player.width / 2,
|
||||
player.position.x <=
|
||||
platform.position.x + platform.width - player.width / 3,
|
||||
];
|
||||
|
||||
if (collisionDetectionRules.every((rule) => rule)) {
|
||||
player.velocity.y = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
const platformDetectionRules = [
|
||||
player.position.x >= platform.position.x - player.width / 2,
|
||||
player.position.x <=
|
||||
platform.position.x + platform.width - player.width / 3,
|
||||
|
||||
];
|
||||
|
||||
--fcc-editable-region--
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
const keys = {
|
||||
rightKey: {
|
||||
pressed: false
|
||||
},
|
||||
leftKey: {
|
||||
pressed: false
|
||||
}
|
||||
};
|
||||
|
||||
const movePlayer = (key, xVelocity, isPressed) => {
|
||||
if (!isCheckpointCollisionDetectionActive) {
|
||||
player.velocity.x = 0;
|
||||
player.velocity.y = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
switch (key) {
|
||||
case "ArrowLeft":
|
||||
keys.leftKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x -= xVelocity;
|
||||
break;
|
||||
case "ArrowUp":
|
||||
case " ":
|
||||
case "Spacebar":
|
||||
player.velocity.y -= 8;
|
||||
break;
|
||||
case "ArrowRight":
|
||||
keys.rightKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x += xVelocity;
|
||||
}
|
||||
}
|
||||
|
||||
const startGame = () => {
|
||||
canvas.style.display = "block";
|
||||
startScreen.style.display = "none";
|
||||
animate();
|
||||
}
|
||||
|
||||
startBtn.addEventListener("click", startGame);
|
||||
|
||||
window.addEventListener("keydown", ({ key }) => {
|
||||
movePlayer(key, 8, true);
|
||||
});
|
||||
|
||||
window.addEventListener("keyup", ({ key }) => {
|
||||
movePlayer(key, 0, false);
|
||||
});
|
||||
|
||||
```
|
||||
@@ -0,0 +1,356 @@
|
||||
---
|
||||
id: 64caf237baef43587be6d860
|
||||
title: Step 87
|
||||
challengeType: 0
|
||||
dashedName: step-87
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Add an `if` statement that checks if every platform detection rule is `true`. Make sure to use the `every` method for this.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have an `if` statement that uses the `every` method to check if every platform detection rule is `true`.
|
||||
|
||||
```js
|
||||
assert.match(code, /\s*if\s*\(platformDetectionRules\.every\(\(?(.+)\)?\s*=>\s*\1\s*\)\s*\)\s*{\s*}\s*;?/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#99c9ff";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
|
||||
update() {
|
||||
this.draw();
|
||||
this.position.x += this.velocity.x;
|
||||
this.position.y += this.velocity.y;
|
||||
|
||||
if (this.position.y + this.height + this.velocity.y <= canvas.height) {
|
||||
if (this.position.y < 0) {
|
||||
this.position.y = 0;
|
||||
this.velocity.y = gravity;
|
||||
}
|
||||
this.velocity.y += gravity;
|
||||
} else {
|
||||
this.velocity.y = 0;
|
||||
}
|
||||
|
||||
if (this.position.x < this.width) {
|
||||
this.position.x = this.width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class Platform {
|
||||
constructor(x, y) {
|
||||
this.position = {
|
||||
x,
|
||||
y,
|
||||
};
|
||||
this.width = 200;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#acd157";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
}
|
||||
|
||||
const player = new Player();
|
||||
|
||||
const platformPositions = [
|
||||
{ x: 500, y: 450 },
|
||||
{ x: 700, y: 400 },
|
||||
{ x: 850, y: 350 },
|
||||
{ x: 900, y: 350 },
|
||||
{ x: 1050, y: 150 },
|
||||
{ x: 2500, y: 450 },
|
||||
{ x: 2900, y: 400 },
|
||||
{ x: 3150, y: 350 },
|
||||
{ x: 3900, y: 450 },
|
||||
{ x: 4200, y: 400 },
|
||||
{ x: 4400, y: 200 },
|
||||
{ x: 4700, y: 150 }
|
||||
];
|
||||
|
||||
const platforms = platformPositions.map(
|
||||
(platform) => new Platform(platform.x, platform.y)
|
||||
);
|
||||
|
||||
const animate = () => {
|
||||
requestAnimationFrame(animate);
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
platforms.forEach((platform) => {
|
||||
platform.draw();
|
||||
});
|
||||
|
||||
player.update();
|
||||
|
||||
if (keys.rightKey.pressed && player.position.x < 400) {
|
||||
player.velocity.x = 5;
|
||||
} else if (keys.leftKey.pressed && player.position.x > 100) {
|
||||
player.velocity.x = -5;
|
||||
} else {
|
||||
player.velocity.x = 0;
|
||||
|
||||
if (keys.rightKey.pressed && isCheckpointCollisionDetectionActive) {
|
||||
platforms.forEach((platform) => {
|
||||
platform.position.x -= 5;
|
||||
});
|
||||
} else if (keys.leftKey.pressed && isCheckpointCollisionDetectionActive) {
|
||||
platforms.forEach((platform) => {
|
||||
platform.position.x += 5;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
platforms.forEach((platform) => {
|
||||
const collisionDetectionRules = [
|
||||
player.position.y + player.height <= platform.position.y,
|
||||
player.position.y + player.height + player.velocity.y >= platform.position.y,
|
||||
player.position.x >= platform.position.x - player.width / 2,
|
||||
player.position.x <=
|
||||
platform.position.x + platform.width - player.width / 3,
|
||||
];
|
||||
|
||||
if (collisionDetectionRules.every((rule) => rule)) {
|
||||
player.velocity.y = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
const platformDetectionRules = [
|
||||
player.position.x >= platform.position.x - player.width / 2,
|
||||
player.position.x <=
|
||||
platform.position.x + platform.width - player.width / 3,
|
||||
player.position.y + player.height >= platform.position.y,
|
||||
player.position.y <= platform.position.y + platform.height,
|
||||
];
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
const keys = {
|
||||
rightKey: {
|
||||
pressed: false
|
||||
},
|
||||
leftKey: {
|
||||
pressed: false
|
||||
}
|
||||
};
|
||||
|
||||
const movePlayer = (key, xVelocity, isPressed) => {
|
||||
if (!isCheckpointCollisionDetectionActive) {
|
||||
player.velocity.x = 0;
|
||||
player.velocity.y = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
switch (key) {
|
||||
case "ArrowLeft":
|
||||
keys.leftKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x -= xVelocity;
|
||||
break;
|
||||
case "ArrowUp":
|
||||
case " ":
|
||||
case "Spacebar":
|
||||
player.velocity.y -= 8;
|
||||
break;
|
||||
case "ArrowRight":
|
||||
keys.rightKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x += xVelocity;
|
||||
}
|
||||
}
|
||||
|
||||
const startGame = () => {
|
||||
canvas.style.display = "block";
|
||||
startScreen.style.display = "none";
|
||||
animate();
|
||||
}
|
||||
|
||||
startBtn.addEventListener("click", startGame);
|
||||
|
||||
window.addEventListener("keydown", ({ key }) => {
|
||||
movePlayer(key, 8, true);
|
||||
});
|
||||
|
||||
window.addEventListener("keyup", ({ key }) => {
|
||||
movePlayer(key, 0, false);
|
||||
});
|
||||
|
||||
```
|
||||
@@ -0,0 +1,370 @@
|
||||
---
|
||||
id: 64cb24c224ac2c61fa1c70aa
|
||||
title: Step 88
|
||||
challengeType: 0
|
||||
dashedName: step-88
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Inside the body of the `if` statement, assign `platform.position.y + player.height` to the player's `y` position.
|
||||
|
||||
Then, assign `gravity` to the player's `y` velocity.
|
||||
|
||||
Now, when you start the game, you will be able to jump underneath the platform and collide with it.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should assign the sum of the platform's `y` position and the player's height to the player's `y` position.
|
||||
|
||||
```js
|
||||
assert.match(code, /\s*player\.position\.y\s*=\s*platform\.position\.y\s*\+\s*player\.height\s*;?/);
|
||||
```
|
||||
|
||||
You should assign gravity to the player's `y` velocity.
|
||||
|
||||
```js
|
||||
assert.match(code, /\s*player\.velocity\.y\s*=\s*gravity\s*;?/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#99c9ff";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
|
||||
update() {
|
||||
this.draw();
|
||||
this.position.x += this.velocity.x;
|
||||
this.position.y += this.velocity.y;
|
||||
|
||||
if (this.position.y + this.height + this.velocity.y <= canvas.height) {
|
||||
if (this.position.y < 0) {
|
||||
this.position.y = 0;
|
||||
this.velocity.y = gravity;
|
||||
}
|
||||
this.velocity.y += gravity;
|
||||
} else {
|
||||
this.velocity.y = 0;
|
||||
}
|
||||
|
||||
if (this.position.x < this.width) {
|
||||
this.position.x = this.width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class Platform {
|
||||
constructor(x, y) {
|
||||
this.position = {
|
||||
x,
|
||||
y,
|
||||
};
|
||||
this.width = 200;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#acd157";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
}
|
||||
|
||||
const player = new Player();
|
||||
|
||||
const platformPositions = [
|
||||
{ x: 500, y: 450 },
|
||||
{ x: 700, y: 400 },
|
||||
{ x: 850, y: 350 },
|
||||
{ x: 900, y: 350 },
|
||||
{ x: 1050, y: 150 },
|
||||
{ x: 2500, y: 450 },
|
||||
{ x: 2900, y: 400 },
|
||||
{ x: 3150, y: 350 },
|
||||
{ x: 3900, y: 450 },
|
||||
{ x: 4200, y: 400 },
|
||||
{ x: 4400, y: 200 },
|
||||
{ x: 4700, y: 150 }
|
||||
];
|
||||
|
||||
const platforms = platformPositions.map(
|
||||
(platform) => new Platform(platform.x, platform.y)
|
||||
);
|
||||
|
||||
const animate = () => {
|
||||
requestAnimationFrame(animate);
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
platforms.forEach((platform) => {
|
||||
platform.draw();
|
||||
});
|
||||
|
||||
player.update();
|
||||
|
||||
if (keys.rightKey.pressed && player.position.x < 400) {
|
||||
player.velocity.x = 5;
|
||||
} else if (keys.leftKey.pressed && player.position.x > 100) {
|
||||
player.velocity.x = -5;
|
||||
} else {
|
||||
player.velocity.x = 0;
|
||||
|
||||
if (keys.rightKey.pressed && isCheckpointCollisionDetectionActive) {
|
||||
platforms.forEach((platform) => {
|
||||
platform.position.x -= 5;
|
||||
});
|
||||
} else if (keys.leftKey.pressed && isCheckpointCollisionDetectionActive) {
|
||||
platforms.forEach((platform) => {
|
||||
platform.position.x += 5;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
platforms.forEach((platform) => {
|
||||
const collisionDetectionRules = [
|
||||
player.position.y + player.height <= platform.position.y,
|
||||
player.position.y + player.height + player.velocity.y >= platform.position.y,
|
||||
player.position.x >= platform.position.x - player.width / 2,
|
||||
player.position.x <=
|
||||
platform.position.x + platform.width - player.width / 3,
|
||||
];
|
||||
|
||||
if (collisionDetectionRules.every((rule) => rule)) {
|
||||
player.velocity.y = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
const platformDetectionRules = [
|
||||
player.position.x >= platform.position.x - player.width / 2,
|
||||
player.position.x <=
|
||||
platform.position.x + platform.width - player.width / 3,
|
||||
player.position.y + player.height >= platform.position.y,
|
||||
player.position.y <= platform.position.y + platform.height,
|
||||
];
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
if (platformDetectionRules.every(rule => rule)) {
|
||||
|
||||
};
|
||||
|
||||
--fcc-editable-region--
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
const keys = {
|
||||
rightKey: {
|
||||
pressed: false
|
||||
},
|
||||
leftKey: {
|
||||
pressed: false
|
||||
}
|
||||
};
|
||||
|
||||
const movePlayer = (key, xVelocity, isPressed) => {
|
||||
if (!isCheckpointCollisionDetectionActive) {
|
||||
player.velocity.x = 0;
|
||||
player.velocity.y = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
switch (key) {
|
||||
case "ArrowLeft":
|
||||
keys.leftKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x -= xVelocity;
|
||||
break;
|
||||
case "ArrowUp":
|
||||
case " ":
|
||||
case "Spacebar":
|
||||
player.velocity.y -= 8;
|
||||
break;
|
||||
case "ArrowRight":
|
||||
keys.rightKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x += xVelocity;
|
||||
}
|
||||
}
|
||||
|
||||
const startGame = () => {
|
||||
canvas.style.display = "block";
|
||||
startScreen.style.display = "none";
|
||||
animate();
|
||||
}
|
||||
|
||||
startBtn.addEventListener("click", startGame);
|
||||
|
||||
window.addEventListener("keydown", ({ key }) => {
|
||||
movePlayer(key, 8, true);
|
||||
});
|
||||
|
||||
window.addEventListener("keyup", ({ key }) => {
|
||||
movePlayer(key, 0, false);
|
||||
});
|
||||
|
||||
```
|
||||
@@ -0,0 +1,362 @@
|
||||
---
|
||||
id: 64cb262dd91ecc62998736af
|
||||
title: Step 89
|
||||
challengeType: 0
|
||||
dashedName: step-89
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The last portion of the project is to add the logic for the checkpoints. When a player collides with a checkpoint, the checkpoint screen should appear.
|
||||
|
||||
Start by creating a new `class` called `CheckPoint`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `class` called `CheckPoint`.
|
||||
|
||||
```js
|
||||
assert.match(code, /\s*class\s*CheckPoint\s*{\s*};?/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#99c9ff";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
|
||||
update() {
|
||||
this.draw();
|
||||
this.position.x += this.velocity.x;
|
||||
this.position.y += this.velocity.y;
|
||||
|
||||
if (this.position.y + this.height + this.velocity.y <= canvas.height) {
|
||||
if (this.position.y < 0) {
|
||||
this.position.y = 0;
|
||||
this.velocity.y = gravity;
|
||||
}
|
||||
this.velocity.y += gravity;
|
||||
} else {
|
||||
this.velocity.y = 0;
|
||||
}
|
||||
|
||||
if (this.position.x < this.width) {
|
||||
this.position.x = this.width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class Platform {
|
||||
constructor(x, y) {
|
||||
this.position = {
|
||||
x,
|
||||
y,
|
||||
};
|
||||
this.width = 200;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#acd157";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
const player = new Player();
|
||||
|
||||
const platformPositions = [
|
||||
{ x: 500, y: 450 },
|
||||
{ x: 700, y: 400 },
|
||||
{ x: 850, y: 350 },
|
||||
{ x: 900, y: 350 },
|
||||
{ x: 1050, y: 150 },
|
||||
{ x: 2500, y: 450 },
|
||||
{ x: 2900, y: 400 },
|
||||
{ x: 3150, y: 350 },
|
||||
{ x: 3900, y: 450 },
|
||||
{ x: 4200, y: 400 },
|
||||
{ x: 4400, y: 200 },
|
||||
{ x: 4700, y: 150 }
|
||||
];
|
||||
|
||||
const platforms = platformPositions.map(
|
||||
(platform) => new Platform(platform.x, platform.y)
|
||||
);
|
||||
|
||||
const animate = () => {
|
||||
requestAnimationFrame(animate);
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
platforms.forEach((platform) => {
|
||||
platform.draw();
|
||||
});
|
||||
|
||||
player.update();
|
||||
|
||||
if (keys.rightKey.pressed && player.position.x < 400) {
|
||||
player.velocity.x = 5;
|
||||
} else if (keys.leftKey.pressed && player.position.x > 100) {
|
||||
player.velocity.x = -5;
|
||||
} else {
|
||||
player.velocity.x = 0;
|
||||
|
||||
if (keys.rightKey.pressed && isCheckpointCollisionDetectionActive) {
|
||||
platforms.forEach((platform) => {
|
||||
platform.position.x -= 5;
|
||||
});
|
||||
} else if (keys.leftKey.pressed && isCheckpointCollisionDetectionActive) {
|
||||
platforms.forEach((platform) => {
|
||||
platform.position.x += 5;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
platforms.forEach((platform) => {
|
||||
const collisionDetectionRules = [
|
||||
player.position.y + player.height <= platform.position.y,
|
||||
player.position.y + player.height + player.velocity.y >= platform.position.y,
|
||||
player.position.x >= platform.position.x - player.width / 2,
|
||||
player.position.x <=
|
||||
platform.position.x + platform.width - player.width / 3,
|
||||
];
|
||||
|
||||
if (collisionDetectionRules.every((rule) => rule)) {
|
||||
player.velocity.y = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
const platformDetectionRules = [
|
||||
player.position.x >= platform.position.x - player.width / 2,
|
||||
player.position.x <=
|
||||
platform.position.x + platform.width - player.width / 3,
|
||||
player.position.y + player.height >= platform.position.y,
|
||||
player.position.y <= platform.position.y + platform.height,
|
||||
];
|
||||
|
||||
if (platformDetectionRules.every(rule => rule)) {
|
||||
player.position.y = platform.position.y + player.height;
|
||||
player.velocity.y = gravity;
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
const keys = {
|
||||
rightKey: {
|
||||
pressed: false
|
||||
},
|
||||
leftKey: {
|
||||
pressed: false
|
||||
}
|
||||
};
|
||||
|
||||
const movePlayer = (key, xVelocity, isPressed) => {
|
||||
if (!isCheckpointCollisionDetectionActive) {
|
||||
player.velocity.x = 0;
|
||||
player.velocity.y = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
switch (key) {
|
||||
case "ArrowLeft":
|
||||
keys.leftKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x -= xVelocity;
|
||||
break;
|
||||
case "ArrowUp":
|
||||
case " ":
|
||||
case "Spacebar":
|
||||
player.velocity.y -= 8;
|
||||
break;
|
||||
case "ArrowRight":
|
||||
keys.rightKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x += xVelocity;
|
||||
}
|
||||
}
|
||||
|
||||
const startGame = () => {
|
||||
canvas.style.display = "block";
|
||||
startScreen.style.display = "none";
|
||||
animate();
|
||||
}
|
||||
|
||||
startBtn.addEventListener("click", startGame);
|
||||
|
||||
window.addEventListener("keydown", ({ key }) => {
|
||||
movePlayer(key, 8, true);
|
||||
});
|
||||
|
||||
window.addEventListener("keyup", ({ key }) => {
|
||||
movePlayer(key, 0, false);
|
||||
});
|
||||
|
||||
```
|
||||
@@ -0,0 +1,371 @@
|
||||
---
|
||||
id: 64cb26e84dd0b56313ba0c6e
|
||||
title: Step 90
|
||||
challengeType: 0
|
||||
dashedName: step-90
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Inside that `CheckPoint` class, add a constructor with `x` and `y` parameters.
|
||||
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `constructor` method inside the `CheckPoint` class.
|
||||
|
||||
```js
|
||||
assert.match(code, /\s*constructor\s*\(.*\)\s*{\s*}/);
|
||||
```
|
||||
|
||||
Your `constructor` should have `x` and `y` parameters.
|
||||
|
||||
```js
|
||||
assert.match(code, /\s*constructor\s*\(\s*x\s*,\s*y\s*\)\s*{\s*};?/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#99c9ff";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
|
||||
update() {
|
||||
this.draw();
|
||||
this.position.x += this.velocity.x;
|
||||
this.position.y += this.velocity.y;
|
||||
|
||||
if (this.position.y + this.height + this.velocity.y <= canvas.height) {
|
||||
if (this.position.y < 0) {
|
||||
this.position.y = 0;
|
||||
this.velocity.y = gravity;
|
||||
}
|
||||
this.velocity.y += gravity;
|
||||
} else {
|
||||
this.velocity.y = 0;
|
||||
}
|
||||
|
||||
if (this.position.x < this.width) {
|
||||
this.position.x = this.width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class Platform {
|
||||
constructor(x, y) {
|
||||
this.position = {
|
||||
x,
|
||||
y,
|
||||
};
|
||||
this.width = 200;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#acd157";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
class CheckPoint {
|
||||
|
||||
};
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
const player = new Player();
|
||||
|
||||
const platformPositions = [
|
||||
{ x: 500, y: 450 },
|
||||
{ x: 700, y: 400 },
|
||||
{ x: 850, y: 350 },
|
||||
{ x: 900, y: 350 },
|
||||
{ x: 1050, y: 150 },
|
||||
{ x: 2500, y: 450 },
|
||||
{ x: 2900, y: 400 },
|
||||
{ x: 3150, y: 350 },
|
||||
{ x: 3900, y: 450 },
|
||||
{ x: 4200, y: 400 },
|
||||
{ x: 4400, y: 200 },
|
||||
{ x: 4700, y: 150 }
|
||||
];
|
||||
|
||||
const platforms = platformPositions.map(
|
||||
(platform) => new Platform(platform.x, platform.y)
|
||||
);
|
||||
|
||||
const animate = () => {
|
||||
requestAnimationFrame(animate);
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
platforms.forEach((platform) => {
|
||||
platform.draw();
|
||||
});
|
||||
|
||||
player.update();
|
||||
|
||||
if (keys.rightKey.pressed && player.position.x < 400) {
|
||||
player.velocity.x = 5;
|
||||
} else if (keys.leftKey.pressed && player.position.x > 100) {
|
||||
player.velocity.x = -5;
|
||||
} else {
|
||||
player.velocity.x = 0;
|
||||
|
||||
if (keys.rightKey.pressed && isCheckpointCollisionDetectionActive) {
|
||||
platforms.forEach((platform) => {
|
||||
platform.position.x -= 5;
|
||||
});
|
||||
} else if (keys.leftKey.pressed && isCheckpointCollisionDetectionActive) {
|
||||
platforms.forEach((platform) => {
|
||||
platform.position.x += 5;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
platforms.forEach((platform) => {
|
||||
const collisionDetectionRules = [
|
||||
player.position.y + player.height <= platform.position.y,
|
||||
player.position.y + player.height + player.velocity.y >= platform.position.y,
|
||||
player.position.x >= platform.position.x - player.width / 2,
|
||||
player.position.x <=
|
||||
platform.position.x + platform.width - player.width / 3,
|
||||
];
|
||||
|
||||
if (collisionDetectionRules.every((rule) => rule)) {
|
||||
player.velocity.y = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
const platformDetectionRules = [
|
||||
player.position.x >= platform.position.x - player.width / 2,
|
||||
player.position.x <=
|
||||
platform.position.x + platform.width - player.width / 3,
|
||||
player.position.y + player.height >= platform.position.y,
|
||||
player.position.y <= platform.position.y + platform.height,
|
||||
];
|
||||
|
||||
if (platformDetectionRules.every(rule => rule)) {
|
||||
player.position.y = platform.position.y + player.height;
|
||||
player.velocity.y = gravity;
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
const keys = {
|
||||
rightKey: {
|
||||
pressed: false
|
||||
},
|
||||
leftKey: {
|
||||
pressed: false
|
||||
}
|
||||
};
|
||||
|
||||
const movePlayer = (key, xVelocity, isPressed) => {
|
||||
if (!isCheckpointCollisionDetectionActive) {
|
||||
player.velocity.x = 0;
|
||||
player.velocity.y = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
switch (key) {
|
||||
case "ArrowLeft":
|
||||
keys.leftKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x -= xVelocity;
|
||||
break;
|
||||
case "ArrowUp":
|
||||
case " ":
|
||||
case "Spacebar":
|
||||
player.velocity.y -= 8;
|
||||
break;
|
||||
case "ArrowRight":
|
||||
keys.rightKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x += xVelocity;
|
||||
}
|
||||
}
|
||||
|
||||
const startGame = () => {
|
||||
canvas.style.display = "block";
|
||||
startScreen.style.display = "none";
|
||||
animate();
|
||||
}
|
||||
|
||||
startBtn.addEventListener("click", startGame);
|
||||
|
||||
window.addEventListener("keydown", ({ key }) => {
|
||||
movePlayer(key, 8, true);
|
||||
});
|
||||
|
||||
window.addEventListener("keyup", ({ key }) => {
|
||||
movePlayer(key, 0, false);
|
||||
});
|
||||
|
||||
```
|
||||
@@ -0,0 +1,377 @@
|
||||
---
|
||||
id: 64cb2a87057eb5655c66d1c2
|
||||
title: Step 91
|
||||
challengeType: 0
|
||||
dashedName: step-91
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Inside the constructor, create an object with `x` and `y` parameters and assign it to the `position`.
|
||||
|
||||
Remember to use the `this` keyword to access the properties.
|
||||
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `this.position` property.
|
||||
|
||||
```js
|
||||
const splitter = code.split("ctx.fillRect(this.position.x, this.position.y, this.width, this.height);")
|
||||
assert.match(splitter[2], /this\.position\s*;?/);
|
||||
```
|
||||
|
||||
The `this.position` property should be an object with the `x` and `y` coordinates.
|
||||
|
||||
```js
|
||||
const splitter = code.split("ctx.fillRect(this.position.x, this.position.y, this.width, this.height);")
|
||||
assert.match(splitter[2], /this\.position\s*=\s*\{\s*x,\s*y,?\s*\};?/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#99c9ff";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
|
||||
update() {
|
||||
this.draw();
|
||||
this.position.x += this.velocity.x;
|
||||
this.position.y += this.velocity.y;
|
||||
|
||||
if (this.position.y + this.height + this.velocity.y <= canvas.height) {
|
||||
if (this.position.y < 0) {
|
||||
this.position.y = 0;
|
||||
this.velocity.y = gravity;
|
||||
}
|
||||
this.velocity.y += gravity;
|
||||
} else {
|
||||
this.velocity.y = 0;
|
||||
}
|
||||
|
||||
if (this.position.x < this.width) {
|
||||
this.position.x = this.width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class Platform {
|
||||
constructor(x, y) {
|
||||
this.position = {
|
||||
x,
|
||||
y,
|
||||
};
|
||||
this.width = 200;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#acd157";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
class CheckPoint {
|
||||
constructor(x, y) {
|
||||
|
||||
};
|
||||
};
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
const player = new Player();
|
||||
|
||||
const platformPositions = [
|
||||
{ x: 500, y: 450 },
|
||||
{ x: 700, y: 400 },
|
||||
{ x: 850, y: 350 },
|
||||
{ x: 900, y: 350 },
|
||||
{ x: 1050, y: 150 },
|
||||
{ x: 2500, y: 450 },
|
||||
{ x: 2900, y: 400 },
|
||||
{ x: 3150, y: 350 },
|
||||
{ x: 3900, y: 450 },
|
||||
{ x: 4200, y: 400 },
|
||||
{ x: 4400, y: 200 },
|
||||
{ x: 4700, y: 150 }
|
||||
];
|
||||
|
||||
const platforms = platformPositions.map(
|
||||
(platform) => new Platform(platform.x, platform.y)
|
||||
);
|
||||
|
||||
const animate = () => {
|
||||
requestAnimationFrame(animate);
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
platforms.forEach((platform) => {
|
||||
platform.draw();
|
||||
});
|
||||
|
||||
player.update();
|
||||
|
||||
if (keys.rightKey.pressed && player.position.x < 400) {
|
||||
player.velocity.x = 5;
|
||||
} else if (keys.leftKey.pressed && player.position.x > 100) {
|
||||
player.velocity.x = -5;
|
||||
} else {
|
||||
player.velocity.x = 0;
|
||||
|
||||
if (keys.rightKey.pressed && isCheckpointCollisionDetectionActive) {
|
||||
platforms.forEach((platform) => {
|
||||
platform.position.x -= 5;
|
||||
});
|
||||
} else if (keys.leftKey.pressed && isCheckpointCollisionDetectionActive) {
|
||||
platforms.forEach((platform) => {
|
||||
platform.position.x += 5;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
platforms.forEach((platform) => {
|
||||
const collisionDetectionRules = [
|
||||
player.position.y + player.height <= platform.position.y,
|
||||
player.position.y + player.height + player.velocity.y >= platform.position.y,
|
||||
player.position.x >= platform.position.x - player.width / 2,
|
||||
player.position.x <=
|
||||
platform.position.x + platform.width - player.width / 3,
|
||||
];
|
||||
|
||||
if (collisionDetectionRules.every((rule) => rule)) {
|
||||
player.velocity.y = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
const platformDetectionRules = [
|
||||
player.position.x >= platform.position.x - player.width / 2,
|
||||
player.position.x <=
|
||||
platform.position.x + platform.width - player.width / 3,
|
||||
player.position.y + player.height >= platform.position.y,
|
||||
player.position.y <= platform.position.y + platform.height,
|
||||
];
|
||||
|
||||
if (platformDetectionRules.every(rule => rule)) {
|
||||
player.position.y = platform.position.y + player.height;
|
||||
player.velocity.y = gravity;
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
const keys = {
|
||||
rightKey: {
|
||||
pressed: false
|
||||
},
|
||||
leftKey: {
|
||||
pressed: false
|
||||
}
|
||||
};
|
||||
|
||||
const movePlayer = (key, xVelocity, isPressed) => {
|
||||
if (!isCheckpointCollisionDetectionActive) {
|
||||
player.velocity.x = 0;
|
||||
player.velocity.y = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
switch (key) {
|
||||
case "ArrowLeft":
|
||||
keys.leftKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x -= xVelocity;
|
||||
break;
|
||||
case "ArrowUp":
|
||||
case " ":
|
||||
case "Spacebar":
|
||||
player.velocity.y -= 8;
|
||||
break;
|
||||
case "ArrowRight":
|
||||
keys.rightKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x += xVelocity;
|
||||
}
|
||||
}
|
||||
|
||||
const startGame = () => {
|
||||
canvas.style.display = "block";
|
||||
startScreen.style.display = "none";
|
||||
animate();
|
||||
}
|
||||
|
||||
startBtn.addEventListener("click", startGame);
|
||||
|
||||
window.addEventListener("keydown", ({ key }) => {
|
||||
movePlayer(key, 8, true);
|
||||
});
|
||||
|
||||
window.addEventListener("keyup", ({ key }) => {
|
||||
movePlayer(key, 0, false);
|
||||
});
|
||||
|
||||
```
|
||||
@@ -0,0 +1,394 @@
|
||||
---
|
||||
id: 64cb2da32f8443669fd4e725
|
||||
title: Step 92
|
||||
challengeType: 0
|
||||
dashedName: step-92
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The next step is to add the `width` and `height` to the `CheckPoint` class.
|
||||
|
||||
The `width` and `height` should be 40 and 70 respectively.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `width` property inside the `CheckPoint` class.
|
||||
|
||||
```js
|
||||
const splitter = code.split("ctx.fillRect(this.position.x, this.position.y, this.width, this.height);")
|
||||
assert.match(splitter[2], /this\.width;?/);
|
||||
```
|
||||
|
||||
You should have a `height` property inside the `CheckPoint` class.
|
||||
|
||||
```js
|
||||
const splitter = code.split("ctx.fillRect(this.position.x, this.position.y, this.width, this.height);")
|
||||
assert.match(splitter[2], /this\.height\s*;?/);
|
||||
```
|
||||
|
||||
You should assign the `width` property to 40.
|
||||
|
||||
```js
|
||||
const splitter = code.split("ctx.fillRect(this.position.x, this.position.y, this.width, this.height);")
|
||||
assert.match(splitter[2], /this\.width\s*=\s*40\s*;?/);
|
||||
```
|
||||
|
||||
You should assign the `height` property to 70.
|
||||
|
||||
```js
|
||||
const splitter = code.split("ctx.fillRect(this.position.x, this.position.y, this.width, this.height);")
|
||||
assert.match(splitter[2], /this\.height\s*=\s*70\s*;?/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#99c9ff";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
|
||||
update() {
|
||||
this.draw();
|
||||
this.position.x += this.velocity.x;
|
||||
this.position.y += this.velocity.y;
|
||||
|
||||
if (this.position.y + this.height + this.velocity.y <= canvas.height) {
|
||||
if (this.position.y < 0) {
|
||||
this.position.y = 0;
|
||||
this.velocity.y = gravity;
|
||||
}
|
||||
this.velocity.y += gravity;
|
||||
} else {
|
||||
this.velocity.y = 0;
|
||||
}
|
||||
|
||||
if (this.position.x < this.width) {
|
||||
this.position.x = this.width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class Platform {
|
||||
constructor(x, y) {
|
||||
this.position = {
|
||||
x,
|
||||
y,
|
||||
};
|
||||
this.width = 200;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#acd157";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
class CheckPoint {
|
||||
constructor(x, y) {
|
||||
this.position = {
|
||||
x,
|
||||
y,
|
||||
};
|
||||
|
||||
};
|
||||
};
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
const player = new Player();
|
||||
|
||||
const platformPositions = [
|
||||
{ x: 500, y: 450 },
|
||||
{ x: 700, y: 400 },
|
||||
{ x: 850, y: 350 },
|
||||
{ x: 900, y: 350 },
|
||||
{ x: 1050, y: 150 },
|
||||
{ x: 2500, y: 450 },
|
||||
{ x: 2900, y: 400 },
|
||||
{ x: 3150, y: 350 },
|
||||
{ x: 3900, y: 450 },
|
||||
{ x: 4200, y: 400 },
|
||||
{ x: 4400, y: 200 },
|
||||
{ x: 4700, y: 150 }
|
||||
];
|
||||
|
||||
const platforms = platformPositions.map(
|
||||
(platform) => new Platform(platform.x, platform.y)
|
||||
);
|
||||
|
||||
const animate = () => {
|
||||
requestAnimationFrame(animate);
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
platforms.forEach((platform) => {
|
||||
platform.draw();
|
||||
});
|
||||
|
||||
player.update();
|
||||
|
||||
if (keys.rightKey.pressed && player.position.x < 400) {
|
||||
player.velocity.x = 5;
|
||||
} else if (keys.leftKey.pressed && player.position.x > 100) {
|
||||
player.velocity.x = -5;
|
||||
} else {
|
||||
player.velocity.x = 0;
|
||||
|
||||
if (keys.rightKey.pressed && isCheckpointCollisionDetectionActive) {
|
||||
platforms.forEach((platform) => {
|
||||
platform.position.x -= 5;
|
||||
});
|
||||
} else if (keys.leftKey.pressed && isCheckpointCollisionDetectionActive) {
|
||||
platforms.forEach((platform) => {
|
||||
platform.position.x += 5;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
platforms.forEach((platform) => {
|
||||
const collisionDetectionRules = [
|
||||
player.position.y + player.height <= platform.position.y,
|
||||
player.position.y + player.height + player.velocity.y >= platform.position.y,
|
||||
player.position.x >= platform.position.x - player.width / 2,
|
||||
player.position.x <=
|
||||
platform.position.x + platform.width - player.width / 3,
|
||||
];
|
||||
|
||||
if (collisionDetectionRules.every((rule) => rule)) {
|
||||
player.velocity.y = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
const platformDetectionRules = [
|
||||
player.position.x >= platform.position.x - player.width / 2,
|
||||
player.position.x <=
|
||||
platform.position.x + platform.width - player.width / 3,
|
||||
player.position.y + player.height >= platform.position.y,
|
||||
player.position.y <= platform.position.y + platform.height,
|
||||
];
|
||||
|
||||
if (platformDetectionRules.every(rule => rule)) {
|
||||
player.position.y = platform.position.y + player.height;
|
||||
player.velocity.y = gravity;
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
const keys = {
|
||||
rightKey: {
|
||||
pressed: false
|
||||
},
|
||||
leftKey: {
|
||||
pressed: false
|
||||
}
|
||||
};
|
||||
|
||||
const movePlayer = (key, xVelocity, isPressed) => {
|
||||
if (!isCheckpointCollisionDetectionActive) {
|
||||
player.velocity.x = 0;
|
||||
player.velocity.y = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
switch (key) {
|
||||
case "ArrowLeft":
|
||||
keys.leftKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x -= xVelocity;
|
||||
break;
|
||||
case "ArrowUp":
|
||||
case " ":
|
||||
case "Spacebar":
|
||||
player.velocity.y -= 8;
|
||||
break;
|
||||
case "ArrowRight":
|
||||
keys.rightKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x += xVelocity;
|
||||
}
|
||||
}
|
||||
|
||||
const startGame = () => {
|
||||
canvas.style.display = "block";
|
||||
startScreen.style.display = "none";
|
||||
animate();
|
||||
}
|
||||
|
||||
startBtn.addEventListener("click", startGame);
|
||||
|
||||
window.addEventListener("keydown", ({ key }) => {
|
||||
movePlayer(key, 8, true);
|
||||
});
|
||||
|
||||
window.addEventListener("keyup", ({ key }) => {
|
||||
movePlayer(key, 0, false);
|
||||
});
|
||||
|
||||
```
|
||||
@@ -0,0 +1,391 @@
|
||||
---
|
||||
id: 64cb2e5bdfb23a67272a07c7
|
||||
title: Step 93
|
||||
challengeType: 0
|
||||
dashedName: step-93
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
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`.
|
||||
|
||||
Below the `fillStyle` property, use the `fillRect` method on the `ctx` object and pass in the `x`, `y`, `width`, and `height` properties as parameters.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `CheckPoint` class should have a `draw` method.
|
||||
|
||||
```js
|
||||
const splitter = code.split("ctx.fillRect(this.position.x, this.position.y, this.width, this.height)")
|
||||
assert.match(splitter[2], /draw\(\)\s*\{/);
|
||||
```
|
||||
|
||||
Your `draw` method should have a `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*ctx\.fillStyle\s*=\s*('|")#f1be32\1;?/);
|
||||
```
|
||||
|
||||
Your `draw` method should have a `fillRect` method.
|
||||
|
||||
```js
|
||||
const splitter = code.split('#f1be32')
|
||||
assert.match(splitter[1], /ctx\.fillRect\(this\.position\.x,\s*this\.position\.y\s*,\s*this\.width,\s*this\.height\);?/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#99c9ff";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
|
||||
update() {
|
||||
this.draw();
|
||||
this.position.x += this.velocity.x;
|
||||
this.position.y += this.velocity.y;
|
||||
|
||||
if (this.position.y + this.height + this.velocity.y <= canvas.height) {
|
||||
if (this.position.y < 0) {
|
||||
this.position.y = 0;
|
||||
this.velocity.y = gravity;
|
||||
}
|
||||
this.velocity.y += gravity;
|
||||
} else {
|
||||
this.velocity.y = 0;
|
||||
}
|
||||
|
||||
if (this.position.x < this.width) {
|
||||
this.position.x = this.width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class Platform {
|
||||
constructor(x, y) {
|
||||
this.position = {
|
||||
x,
|
||||
y,
|
||||
};
|
||||
this.width = 200;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#acd157";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
class CheckPoint {
|
||||
constructor(x, y) {
|
||||
this.position = {
|
||||
x,
|
||||
y,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 70;
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
const player = new Player();
|
||||
|
||||
const platformPositions = [
|
||||
{ x: 500, y: 450 },
|
||||
{ x: 700, y: 400 },
|
||||
{ x: 850, y: 350 },
|
||||
{ x: 900, y: 350 },
|
||||
{ x: 1050, y: 150 },
|
||||
{ x: 2500, y: 450 },
|
||||
{ x: 2900, y: 400 },
|
||||
{ x: 3150, y: 350 },
|
||||
{ x: 3900, y: 450 },
|
||||
{ x: 4200, y: 400 },
|
||||
{ x: 4400, y: 200 },
|
||||
{ x: 4700, y: 150 }
|
||||
];
|
||||
|
||||
const platforms = platformPositions.map(
|
||||
(platform) => new Platform(platform.x, platform.y)
|
||||
);
|
||||
|
||||
const animate = () => {
|
||||
requestAnimationFrame(animate);
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
platforms.forEach((platform) => {
|
||||
platform.draw();
|
||||
});
|
||||
|
||||
player.update();
|
||||
|
||||
if (keys.rightKey.pressed && player.position.x < 400) {
|
||||
player.velocity.x = 5;
|
||||
} else if (keys.leftKey.pressed && player.position.x > 100) {
|
||||
player.velocity.x = -5;
|
||||
} else {
|
||||
player.velocity.x = 0;
|
||||
|
||||
if (keys.rightKey.pressed && isCheckpointCollisionDetectionActive) {
|
||||
platforms.forEach((platform) => {
|
||||
platform.position.x -= 5;
|
||||
});
|
||||
} else if (keys.leftKey.pressed && isCheckpointCollisionDetectionActive) {
|
||||
platforms.forEach((platform) => {
|
||||
platform.position.x += 5;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
platforms.forEach((platform) => {
|
||||
const collisionDetectionRules = [
|
||||
player.position.y + player.height <= platform.position.y,
|
||||
player.position.y + player.height + player.velocity.y >= platform.position.y,
|
||||
player.position.x >= platform.position.x - player.width / 2,
|
||||
player.position.x <=
|
||||
platform.position.x + platform.width - player.width / 3,
|
||||
];
|
||||
|
||||
if (collisionDetectionRules.every((rule) => rule)) {
|
||||
player.velocity.y = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
const platformDetectionRules = [
|
||||
player.position.x >= platform.position.x - player.width / 2,
|
||||
player.position.x <=
|
||||
platform.position.x + platform.width - player.width / 3,
|
||||
player.position.y + player.height >= platform.position.y,
|
||||
player.position.y <= platform.position.y + platform.height,
|
||||
];
|
||||
|
||||
if (platformDetectionRules.every(rule => rule)) {
|
||||
player.position.y = platform.position.y + player.height;
|
||||
player.velocity.y = gravity;
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
const keys = {
|
||||
rightKey: {
|
||||
pressed: false
|
||||
},
|
||||
leftKey: {
|
||||
pressed: false
|
||||
}
|
||||
};
|
||||
|
||||
const movePlayer = (key, xVelocity, isPressed) => {
|
||||
if (!isCheckpointCollisionDetectionActive) {
|
||||
player.velocity.x = 0;
|
||||
player.velocity.y = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
switch (key) {
|
||||
case "ArrowLeft":
|
||||
keys.leftKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x -= xVelocity;
|
||||
break;
|
||||
case "ArrowUp":
|
||||
case " ":
|
||||
case "Spacebar":
|
||||
player.velocity.y -= 8;
|
||||
break;
|
||||
case "ArrowRight":
|
||||
keys.rightKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x += xVelocity;
|
||||
}
|
||||
}
|
||||
|
||||
const startGame = () => {
|
||||
canvas.style.display = "block";
|
||||
startScreen.style.display = "none";
|
||||
animate();
|
||||
}
|
||||
|
||||
startBtn.addEventListener("click", startGame);
|
||||
|
||||
window.addEventListener("keydown", ({ key }) => {
|
||||
movePlayer(key, 8, true);
|
||||
});
|
||||
|
||||
window.addEventListener("keyup", ({ key }) => {
|
||||
movePlayer(key, 0, false);
|
||||
});
|
||||
|
||||
```
|
||||
@@ -0,0 +1,399 @@
|
||||
---
|
||||
id: 64cb2ff0c31b0f67a6d76a47
|
||||
title: Step 94
|
||||
challengeType: 0
|
||||
dashedName: step-94
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The last method you will need to add to the `CheckPoint` class is the `claim` method.
|
||||
|
||||
Inside the `claim` method, assign 0 to the `width` and `height` properties of the `CheckPoint` instance.
|
||||
|
||||
Below those properties, assign `Infinity` to the `y` position.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `CheckPoint` class should have a `claim` method.
|
||||
|
||||
```js
|
||||
assert.match(code, /\s*claim\s*\(\s*\)\s*{\s*(.*\S)?\s*}\s*;/s);
|
||||
```
|
||||
|
||||
Your `claim` method should have a `width` property set to 0.
|
||||
|
||||
```js
|
||||
assert.match(code, /\s*this\.width\s*=\s*0\s*;?/);
|
||||
```
|
||||
|
||||
Your `claim` method should have a `height` property set to 0.
|
||||
|
||||
```js
|
||||
assert.match(code, /\s*this\.height\s*=\s*0\s*;?/);
|
||||
```
|
||||
|
||||
You should assign `Infinity` to the `y` position.
|
||||
|
||||
```js
|
||||
assert.match(code, /\s*this\.position\.y\s*=\s*Infinity\s*;?/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#99c9ff";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
|
||||
update() {
|
||||
this.draw();
|
||||
this.position.x += this.velocity.x;
|
||||
this.position.y += this.velocity.y;
|
||||
|
||||
if (this.position.y + this.height + this.velocity.y <= canvas.height) {
|
||||
if (this.position.y < 0) {
|
||||
this.position.y = 0;
|
||||
this.velocity.y = gravity;
|
||||
}
|
||||
this.velocity.y += gravity;
|
||||
} else {
|
||||
this.velocity.y = 0;
|
||||
}
|
||||
|
||||
if (this.position.x < this.width) {
|
||||
this.position.x = this.width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class Platform {
|
||||
constructor(x, y) {
|
||||
this.position = {
|
||||
x,
|
||||
y,
|
||||
};
|
||||
this.width = 200;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#acd157";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
class CheckPoint {
|
||||
constructor(x, y) {
|
||||
this.position = {
|
||||
x,
|
||||
y,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 70;
|
||||
};
|
||||
|
||||
draw() {
|
||||
ctx.fillStyle = "#f1be32";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
const player = new Player();
|
||||
|
||||
const platformPositions = [
|
||||
{ x: 500, y: 450 },
|
||||
{ x: 700, y: 400 },
|
||||
{ x: 850, y: 350 },
|
||||
{ x: 900, y: 350 },
|
||||
{ x: 1050, y: 150 },
|
||||
{ x: 2500, y: 450 },
|
||||
{ x: 2900, y: 400 },
|
||||
{ x: 3150, y: 350 },
|
||||
{ x: 3900, y: 450 },
|
||||
{ x: 4200, y: 400 },
|
||||
{ x: 4400, y: 200 },
|
||||
{ x: 4700, y: 150 }
|
||||
];
|
||||
|
||||
const platforms = platformPositions.map(
|
||||
(platform) => new Platform(platform.x, platform.y)
|
||||
);
|
||||
|
||||
const animate = () => {
|
||||
requestAnimationFrame(animate);
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
platforms.forEach((platform) => {
|
||||
platform.draw();
|
||||
});
|
||||
|
||||
player.update();
|
||||
|
||||
if (keys.rightKey.pressed && player.position.x < 400) {
|
||||
player.velocity.x = 5;
|
||||
} else if (keys.leftKey.pressed && player.position.x > 100) {
|
||||
player.velocity.x = -5;
|
||||
} else {
|
||||
player.velocity.x = 0;
|
||||
|
||||
if (keys.rightKey.pressed && isCheckpointCollisionDetectionActive) {
|
||||
platforms.forEach((platform) => {
|
||||
platform.position.x -= 5;
|
||||
});
|
||||
} else if (keys.leftKey.pressed && isCheckpointCollisionDetectionActive) {
|
||||
platforms.forEach((platform) => {
|
||||
platform.position.x += 5;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
platforms.forEach((platform) => {
|
||||
const collisionDetectionRules = [
|
||||
player.position.y + player.height <= platform.position.y,
|
||||
player.position.y + player.height + player.velocity.y >= platform.position.y,
|
||||
player.position.x >= platform.position.x - player.width / 2,
|
||||
player.position.x <=
|
||||
platform.position.x + platform.width - player.width / 3,
|
||||
];
|
||||
|
||||
if (collisionDetectionRules.every((rule) => rule)) {
|
||||
player.velocity.y = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
const platformDetectionRules = [
|
||||
player.position.x >= platform.position.x - player.width / 2,
|
||||
player.position.x <=
|
||||
platform.position.x + platform.width - player.width / 3,
|
||||
player.position.y + player.height >= platform.position.y,
|
||||
player.position.y <= platform.position.y + platform.height,
|
||||
];
|
||||
|
||||
if (platformDetectionRules.every(rule => rule)) {
|
||||
player.position.y = platform.position.y + player.height;
|
||||
player.velocity.y = gravity;
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
const keys = {
|
||||
rightKey: {
|
||||
pressed: false
|
||||
},
|
||||
leftKey: {
|
||||
pressed: false
|
||||
}
|
||||
};
|
||||
|
||||
const movePlayer = (key, xVelocity, isPressed) => {
|
||||
if (!isCheckpointCollisionDetectionActive) {
|
||||
player.velocity.x = 0;
|
||||
player.velocity.y = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
switch (key) {
|
||||
case "ArrowLeft":
|
||||
keys.leftKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x -= xVelocity;
|
||||
break;
|
||||
case "ArrowUp":
|
||||
case " ":
|
||||
case "Spacebar":
|
||||
player.velocity.y -= 8;
|
||||
break;
|
||||
case "ArrowRight":
|
||||
keys.rightKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x += xVelocity;
|
||||
}
|
||||
}
|
||||
|
||||
const startGame = () => {
|
||||
canvas.style.display = "block";
|
||||
startScreen.style.display = "none";
|
||||
animate();
|
||||
}
|
||||
|
||||
startBtn.addEventListener("click", startGame);
|
||||
|
||||
window.addEventListener("keydown", ({ key }) => {
|
||||
movePlayer(key, 8, true);
|
||||
});
|
||||
|
||||
window.addEventListener("keyup", ({ key }) => {
|
||||
movePlayer(key, 0, false);
|
||||
});
|
||||
|
||||
```
|
||||
@@ -0,0 +1,414 @@
|
||||
---
|
||||
id: 64cb30b8e4719a67fe14f364
|
||||
title: Step 95
|
||||
challengeType: 0
|
||||
dashedName: step-95
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Use `const` to create a new array called `checkpointPositions`.
|
||||
|
||||
Inside that array, add an object for each of the following positions:
|
||||
|
||||
```js
|
||||
x: 1170, y: 80
|
||||
x: 2900, y: 330
|
||||
x: 4800, y: 80
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `checkpointPositions` array.
|
||||
|
||||
```js
|
||||
assert.isArray(checkpointPositions);
|
||||
```
|
||||
|
||||
You should have three objects inside the `checkpointPositions` array.
|
||||
|
||||
```js
|
||||
assert.lengthOf(checkpointPositions, 3);
|
||||
```
|
||||
|
||||
You should have an object with an `x` property set to 1170 and a `y` property set to 80.
|
||||
|
||||
```js
|
||||
assert.deepStrictEqual(checkpointPositions[0], { x: 1170, y: 80 });
|
||||
```
|
||||
|
||||
You should have an object with an `x` property set to 2900 and a `y` property set to 330.
|
||||
|
||||
```js
|
||||
assert.deepStrictEqual(checkpointPositions[1], { x: 2900, y: 330 });
|
||||
```
|
||||
|
||||
You should have an object with an `x` property set to 4800 and a `y` property set to 80.
|
||||
|
||||
```js
|
||||
assert.deepStrictEqual(checkpointPositions[2], { x: 4800, y: 80 });
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#99c9ff";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
|
||||
update() {
|
||||
this.draw();
|
||||
this.position.x += this.velocity.x;
|
||||
this.position.y += this.velocity.y;
|
||||
|
||||
if (this.position.y + this.height + this.velocity.y <= canvas.height) {
|
||||
if (this.position.y < 0) {
|
||||
this.position.y = 0;
|
||||
this.velocity.y = gravity;
|
||||
}
|
||||
this.velocity.y += gravity;
|
||||
} else {
|
||||
this.velocity.y = 0;
|
||||
}
|
||||
|
||||
if (this.position.x < this.width) {
|
||||
this.position.x = this.width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class Platform {
|
||||
constructor(x, y) {
|
||||
this.position = {
|
||||
x,
|
||||
y,
|
||||
};
|
||||
this.width = 200;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#acd157";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
}
|
||||
|
||||
class CheckPoint {
|
||||
constructor(x, y) {
|
||||
this.position = {
|
||||
x,
|
||||
y,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 70;
|
||||
};
|
||||
|
||||
draw() {
|
||||
ctx.fillStyle = "#f1be32";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
claim() {
|
||||
this.width = 0;
|
||||
this.height = 0;
|
||||
this.position.y = Infinity;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const player = new Player();
|
||||
|
||||
const platformPositions = [
|
||||
{ x: 500, y: 450 },
|
||||
{ x: 700, y: 400 },
|
||||
{ x: 850, y: 350 },
|
||||
{ x: 900, y: 350 },
|
||||
{ x: 1050, y: 150 },
|
||||
{ x: 2500, y: 450 },
|
||||
{ x: 2900, y: 400 },
|
||||
{ x: 3150, y: 350 },
|
||||
{ x: 3900, y: 450 },
|
||||
{ x: 4200, y: 400 },
|
||||
{ x: 4400, y: 200 },
|
||||
{ x: 4700, y: 150 }
|
||||
];
|
||||
|
||||
const platforms = platformPositions.map(
|
||||
(platform) => new Platform(platform.x, platform.y)
|
||||
);
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
const animate = () => {
|
||||
requestAnimationFrame(animate);
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
platforms.forEach((platform) => {
|
||||
platform.draw();
|
||||
});
|
||||
|
||||
player.update();
|
||||
|
||||
if (keys.rightKey.pressed && player.position.x < 400) {
|
||||
player.velocity.x = 5;
|
||||
} else if (keys.leftKey.pressed && player.position.x > 100) {
|
||||
player.velocity.x = -5;
|
||||
} else {
|
||||
player.velocity.x = 0;
|
||||
|
||||
if (keys.rightKey.pressed && isCheckpointCollisionDetectionActive) {
|
||||
platforms.forEach((platform) => {
|
||||
platform.position.x -= 5;
|
||||
});
|
||||
} else if (keys.leftKey.pressed && isCheckpointCollisionDetectionActive) {
|
||||
platforms.forEach((platform) => {
|
||||
platform.position.x += 5;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
platforms.forEach((platform) => {
|
||||
const collisionDetectionRules = [
|
||||
player.position.y + player.height <= platform.position.y,
|
||||
player.position.y + player.height + player.velocity.y >= platform.position.y,
|
||||
player.position.x >= platform.position.x - player.width / 2,
|
||||
player.position.x <=
|
||||
platform.position.x + platform.width - player.width / 3,
|
||||
];
|
||||
|
||||
if (collisionDetectionRules.every((rule) => rule)) {
|
||||
player.velocity.y = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
const platformDetectionRules = [
|
||||
player.position.x >= platform.position.x - player.width / 2,
|
||||
player.position.x <=
|
||||
platform.position.x + platform.width - player.width / 3,
|
||||
player.position.y + player.height >= platform.position.y,
|
||||
player.position.y <= platform.position.y + platform.height,
|
||||
];
|
||||
|
||||
if (platformDetectionRules.every(rule => rule)) {
|
||||
player.position.y = platform.position.y + player.height;
|
||||
player.velocity.y = gravity;
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
const keys = {
|
||||
rightKey: {
|
||||
pressed: false
|
||||
},
|
||||
leftKey: {
|
||||
pressed: false
|
||||
}
|
||||
};
|
||||
|
||||
const movePlayer = (key, xVelocity, isPressed) => {
|
||||
if (!isCheckpointCollisionDetectionActive) {
|
||||
player.velocity.x = 0;
|
||||
player.velocity.y = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
switch (key) {
|
||||
case "ArrowLeft":
|
||||
keys.leftKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x -= xVelocity;
|
||||
break;
|
||||
case "ArrowUp":
|
||||
case " ":
|
||||
case "Spacebar":
|
||||
player.velocity.y -= 8;
|
||||
break;
|
||||
case "ArrowRight":
|
||||
keys.rightKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x += xVelocity;
|
||||
}
|
||||
}
|
||||
|
||||
const startGame = () => {
|
||||
canvas.style.display = "block";
|
||||
startScreen.style.display = "none";
|
||||
animate();
|
||||
}
|
||||
|
||||
startBtn.addEventListener("click", startGame);
|
||||
|
||||
window.addEventListener("keydown", ({ key }) => {
|
||||
movePlayer(key, 8, true);
|
||||
});
|
||||
|
||||
window.addEventListener("keyup", ({ key }) => {
|
||||
movePlayer(key, 0, false);
|
||||
});
|
||||
|
||||
```
|
||||
@@ -0,0 +1,405 @@
|
||||
---
|
||||
id: 64cb34c01b3d856a9a59261d
|
||||
title: Step 96
|
||||
challengeType: 0
|
||||
dashedName: step-96
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The next step is to create a list of new `checkpoint` instances using the `CheckPoint` class.
|
||||
|
||||
Start by creating a new `const` variable called `checkpoints` and assign it `checkpointPositions.map()`.
|
||||
|
||||
For the map callback function, pass in `checkpoint` for the parameter and implicitly return the creation of a new `CheckPoint` instance with the `checkpoint.x` and `checkpoint.y` values passed in as arguments.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should assign `checkpointPositions.map()` to a `checkpoints` variable.
|
||||
|
||||
```js
|
||||
assert.match(code, /\s*const\s+checkpoints\s*=\s*checkpointPositions\.map\s*\([^)]*\)\s*;?/);
|
||||
|
||||
```
|
||||
|
||||
Your callback function should have a `checkpoint` parameter.
|
||||
|
||||
```js
|
||||
assert.match(code, /\s*const\s+checkpoints\s*=\s*checkpointPositions\.map\s*\(\s*\(?checkpoint\)?\s*=>\s*[^)]*\s*\)\s*;?/);
|
||||
|
||||
```
|
||||
|
||||
You should implicitly return a new `CheckPoint` instance.
|
||||
|
||||
```js
|
||||
assert.match(code, /\s*checkpointPositions\.map\s*\(\s*checkpoint\s*=>\s*new\s+CheckPoint\s*\(\s*checkpoint\.x\s*,\s*checkpoint\.y\s*\)\s*\)\s*;?/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#99c9ff";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
|
||||
update() {
|
||||
this.draw();
|
||||
this.position.x += this.velocity.x;
|
||||
this.position.y += this.velocity.y;
|
||||
|
||||
if (this.position.y + this.height + this.velocity.y <= canvas.height) {
|
||||
if (this.position.y < 0) {
|
||||
this.position.y = 0;
|
||||
this.velocity.y = gravity;
|
||||
}
|
||||
this.velocity.y += gravity;
|
||||
} else {
|
||||
this.velocity.y = 0;
|
||||
}
|
||||
|
||||
if (this.position.x < this.width) {
|
||||
this.position.x = this.width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class Platform {
|
||||
constructor(x, y) {
|
||||
this.position = {
|
||||
x,
|
||||
y,
|
||||
};
|
||||
this.width = 200;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#acd157";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
}
|
||||
|
||||
class CheckPoint {
|
||||
constructor(x, y) {
|
||||
this.position = {
|
||||
x,
|
||||
y,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 70;
|
||||
};
|
||||
|
||||
draw() {
|
||||
ctx.fillStyle = "#f1be32";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
claim() {
|
||||
this.width = 0;
|
||||
this.height = 0;
|
||||
this.position.y = Infinity;
|
||||
}
|
||||
};
|
||||
|
||||
const player = new Player();
|
||||
|
||||
const platformPositions = [
|
||||
{ x: 500, y: 450 },
|
||||
{ x: 700, y: 400 },
|
||||
{ x: 850, y: 350 },
|
||||
{ x: 900, y: 350 },
|
||||
{ x: 1050, y: 150 },
|
||||
{ x: 2500, y: 450 },
|
||||
{ x: 2900, y: 400 },
|
||||
{ x: 3150, y: 350 },
|
||||
{ x: 3900, y: 450 },
|
||||
{ x: 4200, y: 400 },
|
||||
{ x: 4400, y: 200 },
|
||||
{ x: 4700, y: 150 }
|
||||
];
|
||||
|
||||
const platforms = platformPositions.map(
|
||||
(platform) => new Platform(platform.x, platform.y)
|
||||
);
|
||||
|
||||
const checkpointPositions = [
|
||||
{ x: 1170, y: 80 },
|
||||
{ x: 2900, y: 330 },
|
||||
{ x: 4800, y: 80 },
|
||||
];
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
const animate = () => {
|
||||
requestAnimationFrame(animate);
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
platforms.forEach((platform) => {
|
||||
platform.draw();
|
||||
});
|
||||
|
||||
player.update();
|
||||
|
||||
if (keys.rightKey.pressed && player.position.x < 400) {
|
||||
player.velocity.x = 5;
|
||||
} else if (keys.leftKey.pressed && player.position.x > 100) {
|
||||
player.velocity.x = -5;
|
||||
} else {
|
||||
player.velocity.x = 0;
|
||||
|
||||
if (keys.rightKey.pressed && isCheckpointCollisionDetectionActive) {
|
||||
platforms.forEach((platform) => {
|
||||
platform.position.x -= 5;
|
||||
});
|
||||
} else if (keys.leftKey.pressed && isCheckpointCollisionDetectionActive) {
|
||||
platforms.forEach((platform) => {
|
||||
platform.position.x += 5;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
platforms.forEach((platform) => {
|
||||
const collisionDetectionRules = [
|
||||
player.position.y + player.height <= platform.position.y,
|
||||
player.position.y + player.height + player.velocity.y >= platform.position.y,
|
||||
player.position.x >= platform.position.x - player.width / 2,
|
||||
player.position.x <=
|
||||
platform.position.x + platform.width - player.width / 3,
|
||||
];
|
||||
|
||||
if (collisionDetectionRules.every((rule) => rule)) {
|
||||
player.velocity.y = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
const platformDetectionRules = [
|
||||
player.position.x >= platform.position.x - player.width / 2,
|
||||
player.position.x <=
|
||||
platform.position.x + platform.width - player.width / 3,
|
||||
player.position.y + player.height >= platform.position.y,
|
||||
player.position.y <= platform.position.y + platform.height,
|
||||
];
|
||||
|
||||
if (platformDetectionRules.every(rule => rule)) {
|
||||
player.position.y = platform.position.y + player.height;
|
||||
player.velocity.y = gravity;
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
const keys = {
|
||||
rightKey: {
|
||||
pressed: false
|
||||
},
|
||||
leftKey: {
|
||||
pressed: false
|
||||
}
|
||||
};
|
||||
|
||||
const movePlayer = (key, xVelocity, isPressed) => {
|
||||
if (!isCheckpointCollisionDetectionActive) {
|
||||
player.velocity.x = 0;
|
||||
player.velocity.y = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
switch (key) {
|
||||
case "ArrowLeft":
|
||||
keys.leftKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x -= xVelocity;
|
||||
break;
|
||||
case "ArrowUp":
|
||||
case " ":
|
||||
case "Spacebar":
|
||||
player.velocity.y -= 8;
|
||||
break;
|
||||
case "ArrowRight":
|
||||
keys.rightKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x += xVelocity;
|
||||
}
|
||||
}
|
||||
|
||||
const startGame = () => {
|
||||
canvas.style.display = "block";
|
||||
startScreen.style.display = "none";
|
||||
animate();
|
||||
}
|
||||
|
||||
startBtn.addEventListener("click", startGame);
|
||||
|
||||
window.addEventListener("keydown", ({ key }) => {
|
||||
movePlayer(key, 8, true);
|
||||
});
|
||||
|
||||
window.addEventListener("keyup", ({ key }) => {
|
||||
movePlayer(key, 0, false);
|
||||
});
|
||||
|
||||
```
|
||||
@@ -0,0 +1,409 @@
|
||||
---
|
||||
id: 64cb3f62b10c336bada1c70c
|
||||
title: Step 97
|
||||
challengeType: 0
|
||||
dashedName: step-97
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Inside the animate function, you will need to draw each of the `checkpoints` onto the canvas.
|
||||
|
||||
Add a `forEach` loop that iterates through the `checkpoints` array.
|
||||
|
||||
Inside the callback function, add a `checkpoint` parameter and for the body of the function call the `draw` method on each `checkpoint`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `forEach` loop that iterates through the `checkpoints` array.
|
||||
|
||||
```js
|
||||
assert.match(code, /\bcheckpoints\b\s*\.\s*forEach\s*\(/s);
|
||||
```
|
||||
|
||||
You should have a `checkpoint` parameter inside the `forEach` callback function.
|
||||
|
||||
```js
|
||||
assert.match(code, /\s*checkpoints\s*\.\s*forEach\s*\(\s*checkpoint\s*=>\s*{/s);
|
||||
```
|
||||
|
||||
You should call the `draw` method on each `checkpoint` inside the `forEach` callback function.
|
||||
|
||||
```js
|
||||
assert.match(code, /\s*checkpoints\.forEach\s*\(\s*checkpoint\s*=>\s*{\s*checkpoint\.draw\(\s*\);?\s*}\s*\);?/s);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#99c9ff";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
|
||||
update() {
|
||||
this.draw();
|
||||
this.position.x += this.velocity.x;
|
||||
this.position.y += this.velocity.y;
|
||||
|
||||
if (this.position.y + this.height + this.velocity.y <= canvas.height) {
|
||||
if (this.position.y < 0) {
|
||||
this.position.y = 0;
|
||||
this.velocity.y = gravity;
|
||||
}
|
||||
this.velocity.y += gravity;
|
||||
} else {
|
||||
this.velocity.y = 0;
|
||||
}
|
||||
|
||||
if (this.position.x < this.width) {
|
||||
this.position.x = this.width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class Platform {
|
||||
constructor(x, y) {
|
||||
this.position = {
|
||||
x,
|
||||
y,
|
||||
};
|
||||
this.width = 200;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#acd157";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
claim() {
|
||||
this.width = 0;
|
||||
this.height = 0;
|
||||
this.position.y = Infinity;
|
||||
}
|
||||
}
|
||||
|
||||
class CheckPoint {
|
||||
constructor(x, y) {
|
||||
this.position = {
|
||||
x,
|
||||
y,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 70;
|
||||
};
|
||||
|
||||
draw() {
|
||||
ctx.fillStyle = "#f1be32";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const player = new Player();
|
||||
|
||||
const platformPositions = [
|
||||
{ x: 500, y: 450 },
|
||||
{ x: 700, y: 400 },
|
||||
{ x: 850, y: 350 },
|
||||
{ x: 900, y: 350 },
|
||||
{ x: 1050, y: 150 },
|
||||
{ x: 2500, y: 450 },
|
||||
{ x: 2900, y: 400 },
|
||||
{ x: 3150, y: 350 },
|
||||
{ x: 3900, y: 450 },
|
||||
{ x: 4200, y: 400 },
|
||||
{ x: 4400, y: 200 },
|
||||
{ x: 4700, y: 150 }
|
||||
];
|
||||
|
||||
const platforms = platformPositions.map(
|
||||
(platform) => new Platform(platform.x, platform.y)
|
||||
);
|
||||
|
||||
|
||||
const checkpointPositions = [
|
||||
{ x: 1170, y: 80 },
|
||||
{ x: 2900, y: 330 },
|
||||
{ x: 4800, y: 80 },
|
||||
];
|
||||
|
||||
const checkpoints = checkpointPositions.map(
|
||||
checkpoint => new CheckPoint(checkpoint.x, checkpoint.y)
|
||||
);
|
||||
|
||||
const animate = () => {
|
||||
requestAnimationFrame(animate);
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
platforms.forEach((platform) => {
|
||||
platform.draw();
|
||||
});
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
player.update();
|
||||
|
||||
if (keys.rightKey.pressed && player.position.x < 400) {
|
||||
player.velocity.x = 5;
|
||||
} else if (keys.leftKey.pressed && player.position.x > 100) {
|
||||
player.velocity.x = -5;
|
||||
} else {
|
||||
player.velocity.x = 0;
|
||||
|
||||
if (keys.rightKey.pressed && isCheckpointCollisionDetectionActive) {
|
||||
platforms.forEach((platform) => {
|
||||
platform.position.x -= 5;
|
||||
});
|
||||
} else if (keys.leftKey.pressed && isCheckpointCollisionDetectionActive) {
|
||||
platforms.forEach((platform) => {
|
||||
platform.position.x += 5;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
platforms.forEach((platform) => {
|
||||
const collisionDetectionRules = [
|
||||
player.position.y + player.height <= platform.position.y,
|
||||
player.position.y + player.height + player.velocity.y >= platform.position.y,
|
||||
player.position.x >= platform.position.x - player.width / 2,
|
||||
player.position.x <=
|
||||
platform.position.x + platform.width - player.width / 3,
|
||||
];
|
||||
|
||||
if (collisionDetectionRules.every((rule) => rule)) {
|
||||
player.velocity.y = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
const platformDetectionRules = [
|
||||
player.position.x >= platform.position.x - player.width / 2,
|
||||
player.position.x <=
|
||||
platform.position.x + platform.width - player.width / 3,
|
||||
player.position.y + player.height >= platform.position.y,
|
||||
player.position.y <= platform.position.y + platform.height,
|
||||
];
|
||||
|
||||
if (platformDetectionRules.every(rule => rule)) {
|
||||
player.position.y = platform.position.y + player.height;
|
||||
player.velocity.y = gravity;
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
const keys = {
|
||||
rightKey: {
|
||||
pressed: false
|
||||
},
|
||||
leftKey: {
|
||||
pressed: false
|
||||
}
|
||||
};
|
||||
|
||||
const movePlayer = (key, xVelocity, isPressed) => {
|
||||
if (!isCheckpointCollisionDetectionActive) {
|
||||
player.velocity.x = 0;
|
||||
player.velocity.y = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
switch (key) {
|
||||
case "ArrowLeft":
|
||||
keys.leftKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x -= xVelocity;
|
||||
break;
|
||||
case "ArrowUp":
|
||||
case " ":
|
||||
case "Spacebar":
|
||||
player.velocity.y -= 8;
|
||||
break;
|
||||
case "ArrowRight":
|
||||
keys.rightKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x += xVelocity;
|
||||
}
|
||||
}
|
||||
|
||||
const startGame = () => {
|
||||
canvas.style.display = "block";
|
||||
startScreen.style.display = "none";
|
||||
animate();
|
||||
}
|
||||
|
||||
startBtn.addEventListener("click", startGame);
|
||||
|
||||
window.addEventListener("keydown", ({ key }) => {
|
||||
movePlayer(key, 8, true);
|
||||
});
|
||||
|
||||
window.addEventListener("keyup", ({ key }) => {
|
||||
movePlayer(key, 0, false);
|
||||
});
|
||||
|
||||
```
|
||||
@@ -0,0 +1,412 @@
|
||||
---
|
||||
id: 64cb472593e3be6d10a7c13b
|
||||
title: Step 98
|
||||
challengeType: 0
|
||||
dashedName: step-98
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Inside your condition, add a `forEach` loop to iterate through the `checkpoints` array. Use `checkpoint` as the parameter name for the callback function.
|
||||
|
||||
Inside the loop, use the subtraction assignment operator to subtract 5 from the checkpoints's `x` position.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `forEach` loop that iterates through the `checkpoints` array.
|
||||
|
||||
```js
|
||||
const splitter = code.split("if (keys.rightKey.pressed && isCheckpointCollisionDetectionActive)")
|
||||
assert.match(splitter[1], /checkpoints\.forEach\(/);
|
||||
```
|
||||
|
||||
You should have a `checkpoint` parameter inside the `forEach` callback function.
|
||||
|
||||
```js
|
||||
const splitter = code.split("if (keys.rightKey.pressed && isCheckpointCollisionDetectionActive)")
|
||||
assert.match(splitter[1], /checkpoints\.forEach\(\s*\(?checkpoint\)?\s*=>\s*\{/);
|
||||
```
|
||||
|
||||
You should use the subtraction assignment operator to subtract 5 from the `checkpoint`'s `x` position.
|
||||
|
||||
```js
|
||||
assert.match(code, /\s*checkpoint\.position\.x\s*-=\s*5\s*;?/s);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#99c9ff";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
|
||||
update() {
|
||||
this.draw();
|
||||
this.position.x += this.velocity.x;
|
||||
this.position.y += this.velocity.y;
|
||||
|
||||
if (this.position.y + this.height + this.velocity.y <= canvas.height) {
|
||||
if (this.position.y < 0) {
|
||||
this.position.y = 0;
|
||||
this.velocity.y = gravity;
|
||||
}
|
||||
this.velocity.y += gravity;
|
||||
} else {
|
||||
this.velocity.y = 0;
|
||||
}
|
||||
|
||||
if (this.position.x < this.width) {
|
||||
this.position.x = this.width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class Platform {
|
||||
constructor(x, y) {
|
||||
this.position = {
|
||||
x,
|
||||
y,
|
||||
};
|
||||
this.width = 200;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#acd157";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
}
|
||||
|
||||
class CheckPoint {
|
||||
constructor(x, y) {
|
||||
this.position = {
|
||||
x,
|
||||
y,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 70;
|
||||
};
|
||||
|
||||
draw() {
|
||||
ctx.fillStyle = "#f1be32";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
claim() {
|
||||
this.width = 0;
|
||||
this.height = 0;
|
||||
this.position.y = Infinity;
|
||||
}
|
||||
};
|
||||
|
||||
const player = new Player();
|
||||
|
||||
const platformPositions = [
|
||||
{ x: 500, y: 450 },
|
||||
{ x: 700, y: 400 },
|
||||
{ x: 850, y: 350 },
|
||||
{ x: 900, y: 350 },
|
||||
{ x: 1050, y: 150 },
|
||||
{ x: 2500, y: 450 },
|
||||
{ x: 2900, y: 400 },
|
||||
{ x: 3150, y: 350 },
|
||||
{ x: 3900, y: 450 },
|
||||
{ x: 4200, y: 400 },
|
||||
{ x: 4400, y: 200 },
|
||||
{ x: 4700, y: 150 }
|
||||
];
|
||||
|
||||
const platforms = platformPositions.map(
|
||||
(platform) => new Platform(platform.x, platform.y)
|
||||
);
|
||||
|
||||
const checkpointPositions = [
|
||||
{ x: 1170, y: 80 },
|
||||
{ x: 2900, y: 330 },
|
||||
{ x: 4800, y: 80 },
|
||||
];
|
||||
|
||||
const checkpoints = checkpointPositions.map(
|
||||
checkpoint => new CheckPoint(checkpoint.x, checkpoint.y)
|
||||
);
|
||||
|
||||
const animate = () => {
|
||||
requestAnimationFrame(animate);
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
platforms.forEach((platform) => {
|
||||
platform.draw();
|
||||
});
|
||||
|
||||
checkpoints.forEach(checkpoint => {
|
||||
checkpoint.draw();
|
||||
});
|
||||
|
||||
player.update();
|
||||
|
||||
if (keys.rightKey.pressed && player.position.x < 400) {
|
||||
player.velocity.x = 5;
|
||||
} else if (keys.leftKey.pressed && player.position.x > 100) {
|
||||
player.velocity.x = -5;
|
||||
} else {
|
||||
player.velocity.x = 0;
|
||||
|
||||
if (keys.rightKey.pressed && isCheckpointCollisionDetectionActive) {
|
||||
platforms.forEach((platform) => {
|
||||
platform.position.x -= 5;
|
||||
});
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
} else if (keys.leftKey.pressed && isCheckpointCollisionDetectionActive) {
|
||||
platforms.forEach((platform) => {
|
||||
platform.position.x += 5;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
platforms.forEach((platform) => {
|
||||
const collisionDetectionRules = [
|
||||
player.position.y + player.height <= platform.position.y,
|
||||
player.position.y + player.height + player.velocity.y >= platform.position.y,
|
||||
player.position.x >= platform.position.x - player.width / 2,
|
||||
player.position.x <=
|
||||
platform.position.x + platform.width - player.width / 3,
|
||||
];
|
||||
|
||||
if (collisionDetectionRules.every((rule) => rule)) {
|
||||
player.velocity.y = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
const platformDetectionRules = [
|
||||
player.position.x >= platform.position.x - player.width / 2,
|
||||
player.position.x <=
|
||||
platform.position.x + platform.width - player.width / 3,
|
||||
player.position.y + player.height >= platform.position.y,
|
||||
player.position.y <= platform.position.y + platform.height,
|
||||
];
|
||||
|
||||
if (platformDetectionRules.every(rule => rule)) {
|
||||
player.position.y = platform.position.y + player.height;
|
||||
player.velocity.y = gravity;
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
const keys = {
|
||||
rightKey: {
|
||||
pressed: false
|
||||
},
|
||||
leftKey: {
|
||||
pressed: false
|
||||
}
|
||||
};
|
||||
|
||||
const movePlayer = (key, xVelocity, isPressed) => {
|
||||
if (!isCheckpointCollisionDetectionActive) {
|
||||
player.velocity.x = 0;
|
||||
player.velocity.y = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
switch (key) {
|
||||
case "ArrowLeft":
|
||||
keys.leftKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x -= xVelocity;
|
||||
break;
|
||||
case "ArrowUp":
|
||||
case " ":
|
||||
case "Spacebar":
|
||||
player.velocity.y -= 8;
|
||||
break;
|
||||
case "ArrowRight":
|
||||
keys.rightKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x += xVelocity;
|
||||
}
|
||||
}
|
||||
|
||||
const startGame = () => {
|
||||
canvas.style.display = "block";
|
||||
startScreen.style.display = "none";
|
||||
animate();
|
||||
}
|
||||
|
||||
startBtn.addEventListener("click", startGame);
|
||||
|
||||
window.addEventListener("keydown", ({ key }) => {
|
||||
movePlayer(key, 8, true);
|
||||
});
|
||||
|
||||
window.addEventListener("keyup", ({ key }) => {
|
||||
movePlayer(key, 0, false);
|
||||
});
|
||||
|
||||
```
|
||||
@@ -0,0 +1,419 @@
|
||||
---
|
||||
id: 64cb480723790d6d727b8ef5
|
||||
title: Step 99
|
||||
challengeType: 0
|
||||
dashedName: step-99
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Inside your `else if` statement, add a `forEach` loop to iterate through the `checkpoints` array. Use `checkpoint` as the parameter name for the callback function.
|
||||
|
||||
Inside the loop, use the addition assignment operator to add 5 to the checkpoints's `x` position.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `forEach` loop that iterates through the `checkpoints` array.
|
||||
|
||||
```js
|
||||
const splitter = code.split("else if (keys.leftKey.pressed && isCheckpointCollisionDetectionActive) {")
|
||||
assert.match(splitter[1], /checkpoints\.forEach\s*\(/s);
|
||||
```
|
||||
|
||||
You should use the `checkpoint` parameter inside the `forEach` callback function.
|
||||
|
||||
```js
|
||||
const splitter = code.split("else if (keys.leftKey.pressed && isCheckpointCollisionDetectionActive) {")
|
||||
assert.match(splitter[1], /checkpoints\.forEach\(\s*\(checkpoint\)\s*=>\s*\{/);
|
||||
```
|
||||
|
||||
You should use the addition assignment operator to add 5 to the `checkpoint`'s `x` position.
|
||||
|
||||
```js
|
||||
assert.match(code, /\s*checkpoint\.position\.x\s*\+=\s*5\s*;?/s);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#99c9ff";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
|
||||
update() {
|
||||
this.draw();
|
||||
this.position.x += this.velocity.x;
|
||||
this.position.y += this.velocity.y;
|
||||
|
||||
if (this.position.y + this.height + this.velocity.y <= canvas.height) {
|
||||
if (this.position.y < 0) {
|
||||
this.position.y = 0;
|
||||
this.velocity.y = gravity;
|
||||
}
|
||||
this.velocity.y += gravity;
|
||||
} else {
|
||||
this.velocity.y = 0;
|
||||
}
|
||||
|
||||
if (this.position.x < this.width) {
|
||||
this.position.x = this.width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class Platform {
|
||||
constructor(x, y) {
|
||||
this.position = {
|
||||
x,
|
||||
y,
|
||||
};
|
||||
this.width = 200;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#acd157";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
}
|
||||
|
||||
class CheckPoint {
|
||||
constructor(x, y) {
|
||||
this.position = {
|
||||
x,
|
||||
y,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 70;
|
||||
};
|
||||
|
||||
draw() {
|
||||
ctx.fillStyle = "#f1be32";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
claim() {
|
||||
this.width = 0;
|
||||
this.height = 0;
|
||||
this.position.y = Infinity;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const player = new Player();
|
||||
|
||||
const platformPositions = [
|
||||
{ x: 500, y: 450 },
|
||||
{ x: 700, y: 400 },
|
||||
{ x: 850, y: 350 },
|
||||
{ x: 900, y: 350 },
|
||||
{ x: 1050, y: 150 },
|
||||
{ x: 2500, y: 450 },
|
||||
{ x: 2900, y: 400 },
|
||||
{ x: 3150, y: 350 },
|
||||
{ x: 3900, y: 450 },
|
||||
{ x: 4200, y: 400 },
|
||||
{ x: 4400, y: 200 },
|
||||
{ x: 4700, y: 150 }
|
||||
];
|
||||
|
||||
const platforms = platformPositions.map(
|
||||
(platform) => new Platform(platform.x, platform.y)
|
||||
);
|
||||
|
||||
|
||||
|
||||
const checkpointPositions = [
|
||||
{ x: 1170, y: 80 },
|
||||
{ x: 2900, y: 330 },
|
||||
{ x: 4800, y: 80 },
|
||||
];
|
||||
|
||||
const checkpoints = checkpointPositions.map(
|
||||
checkpoint => new CheckPoint(checkpoint.x, checkpoint.y)
|
||||
);
|
||||
|
||||
const animate = () => {
|
||||
requestAnimationFrame(animate);
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
platforms.forEach((platform) => {
|
||||
platform.draw();
|
||||
});
|
||||
|
||||
checkpoints.forEach(checkpoint => {
|
||||
checkpoint.draw();
|
||||
});
|
||||
|
||||
player.update();
|
||||
|
||||
if (keys.rightKey.pressed && player.position.x < 400) {
|
||||
player.velocity.x = 5;
|
||||
} else if (keys.leftKey.pressed && player.position.x > 100) {
|
||||
player.velocity.x = -5;
|
||||
} else {
|
||||
player.velocity.x = 0;
|
||||
|
||||
if (keys.rightKey.pressed && isCheckpointCollisionDetectionActive) {
|
||||
platforms.forEach((platform) => {
|
||||
platform.position.x -= 5;
|
||||
});
|
||||
|
||||
checkpoints.forEach((checkpoint) => {
|
||||
checkpoint.position.x -= 5;
|
||||
});
|
||||
|
||||
} else if (keys.leftKey.pressed && isCheckpointCollisionDetectionActive) {
|
||||
platforms.forEach((platform) => {
|
||||
platform.position.x += 5;
|
||||
});
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
}
|
||||
|
||||
platforms.forEach((platform) => {
|
||||
const collisionDetectionRules = [
|
||||
player.position.y + player.height <= platform.position.y,
|
||||
player.position.y + player.height + player.velocity.y >= platform.position.y,
|
||||
player.position.x >= platform.position.x - player.width / 2,
|
||||
player.position.x <=
|
||||
platform.position.x + platform.width - player.width / 3,
|
||||
];
|
||||
|
||||
if (collisionDetectionRules.every((rule) => rule)) {
|
||||
player.velocity.y = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
const platformDetectionRules = [
|
||||
player.position.x >= platform.position.x - player.width / 2,
|
||||
player.position.x <=
|
||||
platform.position.x + platform.width - player.width / 3,
|
||||
player.position.y + player.height >= platform.position.y,
|
||||
player.position.y <= platform.position.y + platform.height,
|
||||
];
|
||||
|
||||
if (platformDetectionRules.every(rule => rule)) {
|
||||
player.position.y = platform.position.y + player.height;
|
||||
player.velocity.y = gravity;
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
const keys = {
|
||||
rightKey: {
|
||||
pressed: false
|
||||
},
|
||||
leftKey: {
|
||||
pressed: false
|
||||
}
|
||||
};
|
||||
|
||||
const movePlayer = (key, xVelocity, isPressed) => {
|
||||
if (!isCheckpointCollisionDetectionActive) {
|
||||
player.velocity.x = 0;
|
||||
player.velocity.y = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
switch (key) {
|
||||
case "ArrowLeft":
|
||||
keys.leftKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x -= xVelocity;
|
||||
break;
|
||||
case "ArrowUp":
|
||||
case " ":
|
||||
case "Spacebar":
|
||||
player.velocity.y -= 8;
|
||||
break;
|
||||
case "ArrowRight":
|
||||
keys.rightKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x += xVelocity;
|
||||
}
|
||||
}
|
||||
|
||||
const startGame = () => {
|
||||
canvas.style.display = "block";
|
||||
startScreen.style.display = "none";
|
||||
animate();
|
||||
}
|
||||
|
||||
startBtn.addEventListener("click", startGame);
|
||||
|
||||
window.addEventListener("keydown", ({ key }) => {
|
||||
movePlayer(key, 8, true);
|
||||
});
|
||||
|
||||
window.addEventListener("keyup", ({ key }) => {
|
||||
movePlayer(key, 0, false);
|
||||
});
|
||||
|
||||
```
|
||||
@@ -0,0 +1,415 @@
|
||||
---
|
||||
id: 64cb48e36c9ad56dd7a523f4
|
||||
title: Step 100
|
||||
challengeType: 0
|
||||
dashedName: step-100
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The next step is to create a function that will show the checkpoint message when the player reaches a checkpoint.
|
||||
|
||||
Create a new arrow function called `showCheckpointScreen` that takes in a `msg` parameter.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `showCheckpointScreen` function.
|
||||
|
||||
```js
|
||||
assert.isFunction(showCheckpointScreen);
|
||||
```
|
||||
|
||||
Your `showCheckpointScreen` function should have a `msg` parameter.
|
||||
|
||||
```js
|
||||
assert.match(code, /\s*const\s+showCheckpointScreen\s*=\s*\(?\s*msg\s*\)?\s*=>\s*{/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Learn Intermediate OOP by Building a Platformer Game</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start-screen">
|
||||
<h1 class="main-title">freeCodeCamp Code Warrior</h1>
|
||||
<p class="instructions">
|
||||
Help the main player navigate to the yellow checkpoints.
|
||||
</p>
|
||||
<p class="instructions">
|
||||
Use the keyboard arrows to move the player around.
|
||||
</p>
|
||||
<p class="instructions">You can also use the spacebar to jump.</p>
|
||||
|
||||
<div class="btn-container">
|
||||
<button class="btn" id="start-btn">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkpoint-screen">
|
||||
<h2>Congrats!</h2>
|
||||
<p>You reached the last checkpoint.</p>
|
||||
</div>
|
||||
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #0a0a23;
|
||||
--section-bg-color: #ffffff;
|
||||
--golden-yellow: #feac32;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
.start-screen {
|
||||
background-color: var(--section-bg-color);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-right: -50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
margin: 15px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
color: #0a0a23;
|
||||
font-size: 18px;
|
||||
background-color: var(--golden-yellow);
|
||||
background-image: linear-gradient(#fecc4c, #ffac33);
|
||||
border-color: var(--golden-yellow);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-image: linear-gradient(#ffcc4c, #f89808);
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--section-bg-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.start-screen {
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.checkpoint-screen {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const canvas = document.getElementById("canvas");
|
||||
const startScreen = document.querySelector(".start-screen");
|
||||
const checkpointScreen = document.querySelector(".checkpoint-screen");
|
||||
const checkpointMessage = document.querySelector(".checkpoint-screen > p");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = innerWidth;
|
||||
canvas.height = innerHeight;
|
||||
const gravity = 0.5;
|
||||
let isCheckpointCollisionDetectionActive = true;
|
||||
|
||||
class Player {
|
||||
constructor() {
|
||||
this.position = {
|
||||
x: 10,
|
||||
y: 400,
|
||||
};
|
||||
this.velocity = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#99c9ff";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
|
||||
update() {
|
||||
this.draw();
|
||||
this.position.x += this.velocity.x;
|
||||
this.position.y += this.velocity.y;
|
||||
|
||||
if (this.position.y + this.height + this.velocity.y <= canvas.height) {
|
||||
if (this.position.y < 0) {
|
||||
this.position.y = 0;
|
||||
this.velocity.y = gravity;
|
||||
}
|
||||
this.velocity.y += gravity;
|
||||
} else {
|
||||
this.velocity.y = 0;
|
||||
}
|
||||
|
||||
if (this.position.x < this.width) {
|
||||
this.position.x = this.width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class Platform {
|
||||
constructor(x, y) {
|
||||
this.position = {
|
||||
x,
|
||||
y,
|
||||
};
|
||||
this.width = 200;
|
||||
this.height = 40;
|
||||
}
|
||||
draw() {
|
||||
ctx.fillStyle = "#acd157";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
}
|
||||
|
||||
class CheckPoint {
|
||||
constructor(x, y) {
|
||||
this.position = {
|
||||
x,
|
||||
y,
|
||||
};
|
||||
this.width = 40;
|
||||
this.height = 70;
|
||||
};
|
||||
|
||||
draw() {
|
||||
ctx.fillStyle = "#f1be32";
|
||||
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
|
||||
}
|
||||
claim() {
|
||||
this.width = 0;
|
||||
this.height = 0;
|
||||
this.position.y = Infinity;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const player = new Player();
|
||||
|
||||
const platformPositions = [
|
||||
{ x: 500, y: 450 },
|
||||
{ x: 700, y: 400 },
|
||||
{ x: 850, y: 350 },
|
||||
{ x: 900, y: 350 },
|
||||
{ x: 1050, y: 150 },
|
||||
{ x: 2500, y: 450 },
|
||||
{ x: 2900, y: 400 },
|
||||
{ x: 3150, y: 350 },
|
||||
{ x: 3900, y: 450 },
|
||||
{ x: 4200, y: 400 },
|
||||
{ x: 4400, y: 200 },
|
||||
{ x: 4700, y: 150 }
|
||||
];
|
||||
|
||||
const platforms = platformPositions.map(
|
||||
(platform) => new Platform(platform.x, platform.y)
|
||||
);
|
||||
|
||||
|
||||
|
||||
const checkpointPositions = [
|
||||
{ x: 1170, y: 80 },
|
||||
{ x: 2900, y: 330 },
|
||||
{ x: 4800, y: 80 },
|
||||
];
|
||||
|
||||
const checkpoints = checkpointPositions.map(
|
||||
checkpoint => new CheckPoint(checkpoint.x, checkpoint.y)
|
||||
);
|
||||
|
||||
const animate = () => {
|
||||
requestAnimationFrame(animate);
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
platforms.forEach((platform) => {
|
||||
platform.draw();
|
||||
});
|
||||
|
||||
checkpoints.forEach(checkpoint => {
|
||||
checkpoint.draw();
|
||||
});
|
||||
|
||||
player.update();
|
||||
|
||||
if (keys.rightKey.pressed && player.position.x < 400) {
|
||||
player.velocity.x = 5;
|
||||
} else if (keys.leftKey.pressed && player.position.x > 100) {
|
||||
player.velocity.x = -5;
|
||||
} else {
|
||||
player.velocity.x = 0;
|
||||
|
||||
if (keys.rightKey.pressed && isCheckpointCollisionDetectionActive) {
|
||||
platforms.forEach((platform) => {
|
||||
platform.position.x -= 5;
|
||||
});
|
||||
|
||||
checkpoints.forEach((checkpoint) => {
|
||||
checkpoint.position.x -= 5;
|
||||
});
|
||||
|
||||
} else if (keys.leftKey.pressed && isCheckpointCollisionDetectionActive) {
|
||||
platforms.forEach((platform) => {
|
||||
platform.position.x += 5;
|
||||
});
|
||||
|
||||
checkpoints.forEach((checkpoint) => {
|
||||
checkpoint.position.x += 5;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
platforms.forEach((platform) => {
|
||||
const collisionDetectionRules = [
|
||||
player.position.y + player.height <= platform.position.y,
|
||||
player.position.y + player.height + player.velocity.y >= platform.position.y,
|
||||
player.position.x >= platform.position.x - player.width / 2,
|
||||
player.position.x <=
|
||||
platform.position.x + platform.width - player.width / 3,
|
||||
];
|
||||
|
||||
if (collisionDetectionRules.every((rule) => rule)) {
|
||||
player.velocity.y = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
const platformDetectionRules = [
|
||||
player.position.x >= platform.position.x - player.width / 2,
|
||||
player.position.x <=
|
||||
platform.position.x + platform.width - player.width / 3,
|
||||
player.position.y + player.height >= platform.position.y,
|
||||
player.position.y <= platform.position.y + platform.height,
|
||||
];
|
||||
|
||||
if (platformDetectionRules.every(rule => rule)) {
|
||||
player.position.y = platform.position.y + player.height;
|
||||
player.velocity.y = gravity;
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
const keys = {
|
||||
rightKey: {
|
||||
pressed: false
|
||||
},
|
||||
leftKey: {
|
||||
pressed: false
|
||||
}
|
||||
};
|
||||
|
||||
const movePlayer = (key, xVelocity, isPressed) => {
|
||||
if (!isCheckpointCollisionDetectionActive) {
|
||||
player.velocity.x = 0;
|
||||
player.velocity.y = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
switch (key) {
|
||||
case "ArrowLeft":
|
||||
keys.leftKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x -= xVelocity;
|
||||
break;
|
||||
case "ArrowUp":
|
||||
case " ":
|
||||
case "Spacebar":
|
||||
player.velocity.y -= 8;
|
||||
break;
|
||||
case "ArrowRight":
|
||||
keys.rightKey.pressed = isPressed;
|
||||
if (xVelocity === 0) {
|
||||
player.velocity.x = xVelocity;
|
||||
}
|
||||
player.velocity.x += xVelocity;
|
||||
}
|
||||
}
|
||||
|
||||
const startGame = () => {
|
||||
canvas.style.display = "block";
|
||||
startScreen.style.display = "none";
|
||||
animate();
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
startBtn.addEventListener("click", startGame);
|
||||
|
||||
window.addEventListener("keydown", ({ key }) => {
|
||||
movePlayer(key, 8, true);
|
||||
});
|
||||
|
||||
window.addEventListener("keyup", ({ key }) => {
|
||||
movePlayer(key, 0, false);
|
||||
});
|
||||
|
||||
```
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user