Introduction: JeuTropFacile - WayTooEasyGame
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.
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.