🕑 This lesson will take about 5 minutes
In this lesson, you will learn how to make the player teleport from one edge of the screen to the other in WoofJS, as shown in the example below.
Go to woofjs.com, create a new project and use the code below:
| // Set the backdrop image | |
| setBackdropURL("./docs/images/platformer-backdrop2.png") | |
| setBackdropStyle("cover") | |
| // Create a speed variable for player movement | |
| var speed = 5 | |
| // Create the player variable | |
| var player = new Image({ | |
| url: "./docs/images/emoji-glasses.png", | |
| width: 30, | |
| height: 30, | |
| x: 0, | |
| y: 0 | |
| }) | |
| forever(() => { | |
| // Check if player has moved past right edge of screen | |
| if (player.x > maxX) { | |
| // Teleport player to left edge of screen | |
| player.x = minX | |
| } | |
| // Check if player has moved past left edge of screen | |
| if (player.x < minX) { | |
| // Teleport player to right edge of screen | |
| player.x = maxX | |
| } | |
| // Check if player has moved past top edge of screen | |
| if (player.y > maxY) { | |
| // Teleport player to bottom edge of screen | |
| player.y = minY | |
| } | |
| // Check if player has moved past bottom edge of screen | |
| if (player.y < minY) { | |
| // Teleport player to top edge of screen | |
| player.y = maxY | |
| } | |
| // Make player move up when pressing UP arrow key | |
| if (keysDown.includes('UP')) { | |
| player.y += speed | |
| } | |
| // Make player move down when pressing DOWN arrow key | |
| if (keysDown.includes('DOWN')) { | |
| player.y -= speed | |
| } | |
| // Make player move left when pressing LEFT arrow key | |
| if (keysDown.includes('LEFT')) { | |
| player.x -= speed | |
| } | |
| // Make player move right when pressing RIGHT arrow key | |
| if (keysDown.includes('RIGHT')) { | |
| player.x += speed | |
| } | |
| }) |