JeuTropFacile - WayTooEasyGame

5

This a a game entirely made on HTML and JavaScript with the library P5js. There is 2 files named index.html and sketch.js. I am very beginner in code so I'm sorry if it's unclear.

You can play the game with this link --> https://clement39100.github.io/JeuTropFacile/

You control a white ball with the arrow keys and you have to avoid the red ball (currently, there is only one).

I created 2 variables : posX = 200 and posY = 200

On sketch.js, I created a canva in the function setup with 640x by 480y with a grey background in the function draw, then I created a white circle with position on posX, posY, 75, 75.

Teacher Notes

Teachers! Did you use this instructable in your classroom?
Add a Teacher Note to share how you incorporated it into your lesson.

Step 1: Moving the Circle

Like I said before, you can use the arrow keys to move the circle.

To do that I created a function updatePositionEllipse().

I used this condition to make it work : if (keyIsDown(DOWN_ARROW)) {

posY += 5;

}

When the down key is pressed, the circle moves down.

I used it on every other keys so you can move left, right, up and down.

Step 2: Creating Limit Borders

To make the white ball stop at the end of the canva I used the function testOutOfScreen.

Inside of it, I used the condition if (posX > 600) {

posX = 600; strokeWeight(6); stroke('blue'); line(637, 0, 637, 480); }

if position of x is superior to 600 :it blocks the ball and it draws a blue line with a border 6 placed on the right side of the canva.

I do this for every borders.

Recommendations

• Internet of Things Class

22,795 Enrolled