In this platform we are here to play games with our friends at a same time without any interuption Our primary goal is to create a plateform where two or more friends can gather and play games online (such as multiplayer) without having to download any software or tools to their computers or mobile devices.
Selects SVG Element: The code starts by selecting an SVG element using document.querySelector("svg").
Creates SVG Point: It creates an SVG point named cursor with svg.createSVGPoint() to track the mouse position within the SVG.
Initializes Variables: An element with the class "arrows" is selected, and a variable randomAngle is initialized to zero, representing the initial angle of the bow.
Defines Objects:
target: Center of the target.
lineSegment: Used for target intersection.
pivot: Rotation point of the bow.
Aim Function: Takes a mouse event and updates animations and transformations for the bow and arrow based on mouse position, handling the aiming process.
Draw Function: Triggered by a mouse click (mousedown event). It initializes the arrow drawing process, sets up event listeners for mouse movement and release, and calls the aim function to start aiming.
Loose Function: Triggered by mouse button release (mouseup event). It releases the arrow, removes event listeners, animates the bow's return, duplicates the arrow, and animates the arrow's flight.
HitTest Function: Checks for collisions between the arrow and the target using mathematical calculations, and calls showMessage with appropriate messages based on the result (e.g., "hit," "bullseye," or "miss").
OnMiss Function: Called when the arrow misses the target, displaying a "miss" message using showMessage.
ShowMessage Function: Handles the animation of text messages using TweenMax from the GSAP animation library.
Utility Functions:
getMouseSVG: Normalizes the mouse position within the SVG.
getIntersection: Calculates the intersection point between two line segments and checks if the point is on either segment.
Point down the features
Game points
It will answer HIT if the arrow placed in perfect or desired point on the board.
It will answer BULLSEYE if the arrow placed in any other point.
🎮 Game Request
Game logic and basic description
Selects SVG Element: The code starts by selecting an SVG element using document.querySelector("svg").
Creates SVG Point: It creates an SVG point named cursor with svg.createSVGPoint() to track the mouse position within the SVG.
Initializes Variables: An element with the class "arrows" is selected, and a variable randomAngle is initialized to zero, representing the initial angle of the bow.
Defines Objects:
target: Center of the target. lineSegment: Used for target intersection. pivot: Rotation point of the bow. Aim Function: Takes a mouse event and updates animations and transformations for the bow and arrow based on mouse position, handling the aiming process.
Draw Function: Triggered by a mouse click (mousedown event). It initializes the arrow drawing process, sets up event listeners for mouse movement and release, and calls the aim function to start aiming.
Loose Function: Triggered by mouse button release (mouseup event). It releases the arrow, removes event listeners, animates the bow's return, duplicates the arrow, and animates the arrow's flight.
HitTest Function: Checks for collisions between the arrow and the target using mathematical calculations, and calls showMessage with appropriate messages based on the result (e.g., "hit," "bullseye," or "miss").
OnMiss Function: Called when the arrow misses the target, displaying a "miss" message using showMessage.
ShowMessage Function: Handles the animation of text messages using TweenMax from the GSAP animation library.
Utility Functions:
getMouseSVG: Normalizes the mouse position within the SVG. getIntersection: Calculates the intersection point between two line segments and checks if the point is on either segment.
Point down the features
Game points
It will answer HIT if the arrow placed in perfect or desired point on the board. It will answer BULLSEYE if the arrow placed in any other point.
Select program in which you are contributing
GSSoC24
Code of Conduct