JeuTropFacile - WayTooEasyGame

by ClementKoz in Circuits > Computers

205 Views, 0 Favorites, 0 Comments

JeuTropFacile - WayTooEasyGame

JeuTropFacile.PNG

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.

Moving the Circle

JeuTropFacile.PNG

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.

Creating Limit Borders

JeuTropFacile.PNG

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.

Creating an Obstacle

JeuTropFacile.PNG