Class 9 - 14/04/2023

1. Test on JavaScript (8am-8:50am)

Exam JavaScript 2023 - to appear here

Hints: 

- The css commands: "cursor:pointer" can change the default cursor appearance (see here).

- The opposite of [element].addEventListener(eventName, functionName), is [element].removeEventListener(eventName, functionName) (removing a listener on an element).

- The opposite of [element].classList.add(className) is [element].classList.remove(className). (remove className to the element).

- Math.random() can be used to generate a random number in [0,1[. Math.sqrt(x) returns the square root of a number.

Don't forget that you JS code must start with the line "use strict;". Your HTML and CSS code must remain valid and pass the HTML validator without error. Avoid giving a code that crashes: It is better to provide a code that works, than a code that does theoretically more but actually crashes. 

Basic functionality and general behavior provide more points than fine details. Focus on these only if you have done the basic functionality - they are often trickier to implement while providing fewer points.

Principle: 

The test consists of a game with two main parts.

First part: You manually place an arbitrary number of discs on your window using the mouse click. Each disc has a radius of 20px and inherit the color indicated by the GUI element. The initial color of the GUI element is set to cyan (#00ffff).

Second part: Once the player is ready, he can click on the start button. The spheres then start to move with constant velocity and bounce on the boundary of the window. The cursor of the player is attached to a red disc. During the game, the player must avoid touching the other moving discs. If it does, the game stops indicating "Game Failed" and shows in color the collision.

More hints:

A constant velocity motion can be implemented as: p = p + v dt in an animation loop, where p is the position to be moved, v is the velocity (constant), and dt is the constant time step (you can consider dt=1 to simplify your relation).

A 2D velocity vector v=(vx,vy) that has a prescribed magnitude L must satisfy the relation L*L = vx*vx+vy*vy

The bouncing effect along x (resp. y) direction can be obtained by reversing the velocity in x (resp. y) coordinates. (x -> -x, and y -> -y)

Webpage to reproduce

Video of the expected behavior

(or on Ubicast)

Grading: 

First part (creating colored discs): 12 points

- Creating a new disc at the selected position after a click: 4 points

- Creating this new disc at the correct position: 3 points

- Setting the color of the newly creating disc: 5 points

Second part (animation): 8 points

- An action take place when we click on Start button: 1 point

- The discs are moving in a decent way: 2 points

- The discs bounce on the window limits: 3 points

- A red disc is following the user cursor: 1 point

- Handling the Game Over: 1 point

Bonus/Malus

- Code readability: +2 points if decent code. Up to -2 malus points if very bad/overly-complex code (ex. brute force generic chatGPT).

- Late submission: -1 point

2. Project (9:00am - 10am)

Make sure to validate your project topic with one of the teacher.

Information on the project