--- id: 64a2d86799a58517c29f79a5 title: Step 35 challengeType: 0 dashedName: step-35 --- # --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 Learn Intermediate OOP by Building a Platformer Game

freeCodeCamp Code Warrior

Help the main player navigate to the yellow checkpoints.

Use the keyboard arrows to move the player around.

You can also use the spacebar to jump.

Congrats!

You reached the last checkpoint.

``` ```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; const proportionalSize = (size) => { return innerHeight < 500 ? Math.ceil((size / 500) * innerHeight) : size; } class Player { constructor() { this.position = { x: proportionalSize(10), y: proportionalSize(400), }; this.velocity = { x: 0, y: 0, }; this.width = proportionalSize(40); this.height = proportionalSize(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; } if (this.position.x >= canvas.width - 2 * this.width) { this.position.x = canvas.width - 2 * this.width; } } } --fcc-editable-region-- --fcc-editable-region-- ```