A PROJECT REPORT

on

“THE AVIATOR”

Submitted to

KIIT Deemed to be University

In Partial Fulfillment of the Requirement for the Award of

BACHELOR’S DEGREE IN

COMPUTER SCIENCE AND ENGINEERING

BY

TOOBA SULTANA 2105932

ANUSHKA SARKAR 21052814
MEDHHAPRAGYA 21051064
SOMADRITA GOSWAMI 21051191
SOUMYA SATAPATHY 21051435
UNDER THE GUIDANCE OF
AJAY ANAND
 ACKNOWLEDGEMENT

We are profoundly grateful to AJAY ANAND for his expert guidance and
continuous encouragement throughout to see that this project meets its target since
its commencement to its completion. .....................

TOOBA SULTANA
ANUSHKA SARKAR
MEDHA PRAGYA
SOMADRITA
SOUMYA STAPATHY
 ABSTRACT

To learn and gain proficiency in 3D modeling and game development with

the help of Aviator game using Three.js library. The aim is to learn open
source tools and techniques to create web-based truly platform-
independent applications. The required skills have been acquired and we
are ready to use it further in research and development.
 CONTENTS

1. INTRODUCTION
 What is game development
 Steps of game development
 Testing and debugging
 Abstraction
2. LITERATURE SURVEY
 WebGL and Web3D
3. SOFTWARE REQUIREMENTS SPECIFICATION
 Coding standards
 Functions
 Game view
4. REQUIREMENT ANALYSIS
 Working of the WebGL Pipeline
 Working of Three JS
5. SYSTEM DESIGN
6. IMPLEMENTATION
7. SCREENSHOTS OF PROJECT
8. CONCLUSION
9. FUTURE SCOPE
10. REFERENCES
 INTRODUCTION

What is Game Development

Game development is the process of creating a video game. It involves a

variety of disciplines, including programming, art, sound design, animation,
and more. Game development is a complex process that requires a wide
range of skills and knowledge.

Steps of game development

Step 1:

• The first step in game development is understanding the

types of games and deciding what kind of games you want
to create.
• There are a variety of genres, such as,
• Action & Adventure
• Puzzle
• Simulation

Step 2:
• The next step is to choose a game engine.
• A game engine is a software development kit that provides the
tools and resources necessary to create a game
• There are several games to choose from, such as,
• Cryengine
• Unity
• Unreal Engine
Step 3:
• After choosing the game engine, you need to design the actual game.
• This involves the following:
• Creating a concept
• Coming up with the story
• Creating art assets
• Developing characters
• Creating environments
• Designing game mechanics

Step 4:

• Once you have designed the game, you’ll need to program it.
• This involves writing code to control the game’s logic and behavior.

Step 5:
• The game is now developed and needs to be tested.
• Testing ensures that the game plays how it was intended
• Any bugs that are found are also fixed in this stage

Choosing a Platform

• There are 4 main platforms you can choose to create your game for.
The platform you choose will dictate the type of game you can
create. Listed below are the various types of platforms

• Desktop Platforms
• Mobile Platforms
• Web Platforms
• Console Platforms
Testing and Debugging

Testing

• Testing is running the game and looking for any issues or bugs.
This can be done either manually or using automated testing
tools.

Debugging
• Debugging is the process of finding and fixing errors in the game
code. This is done by analyzing the code and looking for any errors
or bugs. Debugging can be done manually or with the help of
debugging tools.

Abstraction

Game development abstraction refers to the concept of simplifying

complex underlying systems in game design and programming. It's
basically a way to focus on the "what" instead of the "how" of
things.

Here's how abstraction works in games:

• Hiding complexity: Imagine a racing game. You don't need to know

the intricate physics calculations that make the car handle a
certain way. You just focus on steering and pressing the gas. The
complex code is abstracted away, letting you enjoy the race.

• Modular design: Game engines and libraries use abstraction to create

building blocks. Developers can focus on using these blocks without
needing to code everything from scratch.
 LITERATURE SURVEY

WebGL and Web3D:

Web3D, often called 3D Web, is all about bringing the magic of 3D graphics
to your web browsing experience. It started way back in 1994 with
something called VRML, which was like the granddaddy of 3D web stuff. But
back then, you needed special browser plug-ins to make it work, which kind
of slowed things down.

Then along came Adobe Flash Player in the 2000s, which let us do some
pretty cool stuff online, including 3D content. Around the same time, Google
introduced O3D, another way to bring 3D to the web using JavaScript.

But things really took off with WebGL. It's like a supercharged version of 3D
for the web that doesn't need any extra plug-ins. It works on your computer
and even on your phone, making 3D graphics a breeze to use on the web.

To make things even better, there's this thing called glTF, which is like a
special file format just for 3D stuff on the web. It's got all sorts of cool
features like making things look more realistic and even animating faces.

And get this, the future looks even brighter with something called
"WebGPU" in the works. It's like the next level of 3D graphics for the web,
being developed by big companies like Apple, Google, and Microsoft. So
soon, we might be seeing even more mind-blowing 3D stuff right in our
browsers.
 REQUIREMENT ANALYSIS

Working of the WebGL Pipeline:

he WebGL graphics pipeline involves several steps, each playing a crucial

role in rendering 3D graphics:

1. JavaScript Initialization: JavaScript initializes the WebGL context and

handles the control code of the program.

2. Data Preparation: JavaScript creates arrays to hold geometry data and

buffer objects (vertex and index) to pass this data to shaders.

3. Shader Management: Shaders are created, compiled, and linked using

JavaScript, and attributes and uniforms are associated with buffer objects.

4. Vertex Shader: This shader is executed for each vertex in the vertex
buffer object. It calculates vertex positions and other attributes like color
and texture coordinates.

5. Primitive Assembly: Triangles are assembled from vertices and passed

to the rasterizer.

6. Rasterization: Involves determining pixels in the final image of the

primitive, including culling (discarding improperly oriented triangles) and
clipping (removing parts of triangles outside the view area).

7. Fragment Shader: Calculates color values for each pixel between vertices
based on data from the vertex shader and primitives from rasterization.

8. Fragment Operations: Includes depth calculations, color buffer blending,

and dithering for each fragment (pixel) in the primitive.

9. Frame Buffer: The frame buffer holds the scene data, including pixel
color, depth, and stencil buffers, and is the final destination of the rendering
pipeline.
 Diagram 1. Working of WebGL

Working of Three JS:-

Three.js is an open-source library that brings 3D graphics to the web. It has

since become a go-to tool for web developers looking to add 3D elements to
their projects. Three.js abstracts away the complexities of WebGL, a low-
level API for rendering 2D and 3D graphics in web browsers, making it
accessible to developers with little to no experience in 3D graphics
programming.

Three.js works by providing a high-level API that simplifies the process of

creating 3D scenes. It does this by abstracting away the complexities of
WebGL, allowing developers to focus on the creative aspects of their
projects rather than the technical details of rendering 3D graphics.
Core Components of ThreeJS
Three.js is composed of several core components that work together to
render 3D graphics:
· Scene: The scene is the container for all the objects, lights, and
cameras in your 3D world. It's the top-level container for all your
3D content.
· Camera: The camera defines the point of view from which the scene
is viewed. Three.js provides several types of cameras, including
PerspectiveCamera and OrthographicCamera.
· Renderer: The renderer is responsible for drawing the scene to the
screen. It takes the scene, camera, and other parameters to
produce the final image.
· Geometry and Material: Geometry defines the shape of the objects
in your scene, while materials define how these objects look,
including their color, texture, and shininess.
· Light: Lights are used to illuminate the objects in your scene, adding
depth and realism to your 3D graphics.

Use Case Diagram

Diagram 2.Use Case for the game

 SOFTWARE REQUIREMENTS SPECIFICATION

Software Requirement : - 1) Web Browser that supports JavaScript (Chrome

, Edge , Firefox)

2) WebGL

3) Nvidia/Intel/AMD GPU Drivers

4) ThreeJS framework

Hardware Requirements :- 1) 64 MB RAM

2) Graphic Card that supports WebGL (Nvidia/Intel)

with 512

MB Memory

3) Intel/AMD processor with 2.1 GHz clock speed

Coding Standards
Variables:-
1. Colors: An object storing hexadecimal color values for various colors.

2. game, game2: Variables for game-related data, including speed, distance,

energy, level, and various game parameters.

3. deltaTime, newTime, oldTime: Variables used for tracking time and

calculating delta time for smooth animation.

4. ennemiesPool: An array to store enemy objects that will be used in the

game.

5. particlesPool, particlesInUse: Arrays for managing particle objects in the

game.

6. backgroundMusic, planeSound, fuelPopSound, brickHitSound: Variables

for holding audio elements used in the game.

7. scene, camera, renderer, container, controls: Variables related to the

Three.js 3D scene, camera, renderer, container, and controls.

8. HEIGHT, WIDTH: Variables to store the height and width of the window.
9. mousePos: Object to store the current mouse position.

10. ambientLight: Variable for controlling ambient light intensity.

11. sea, airplane: Variables representing sea and airplane objects in the
game.

12. coinsHolder, ennemiesHolder, particlesHolder: Variables representing

holders for coins, enemies, and particles in the game.

13. sky: Variable representing the sky object in the game.

14. fieldDistance, energyBar, replayMessage, bannerElement, scoreElement,

fieldLevel, levelCircle: Variables representing various DOM elements for UI
purposes.

Functions:-

1. resetGame(): Function to reset the game state and initialize game

parameters.

2. startGame(): Function to start the game.

3. createScene(): Function to initialize the Three.js scene, camera, renderer,

and related components.

4. handleWindowResize(): Event handler function for window resize events.

5. handleMouseMove(event): Event handler function for mouse move

events.

6. handleTouchMove(event): Event handler function for touch move events.

7. handleMouseUp(event): Event handler function for mouse up events.

8. handleTouchEnd(event): Event handler function for touch end events.

9. handleKeyDown(event): Event handler function for key down events.

10. loop(): Main game loop function responsible for updating game state
and rendering.

11. updateDistance(): Function to update the distance traveled in the game.

12. updateEnergy(): Function to update the energy level in the game.

13. addEnergy(): Function to add energy to the player.

14. removeEnergy(): Function to remove energy from the player.

15. updatePlane(): Function to update the position and rotation of the

airplane in the game.
16. showReplay(): Function to display the replay message.

17. hideReplay(): Function to hide the replay message.

18. normalize(v, vmin, vmax, tmin, tmax): Function to normalize a value

within a given range.

19. init(event): Initialization function called when the window loads.

These are the variables and functions present in the provided code and their
purposes within the game implementation.

Game View
Menu View:-

Diagram 3. Menu View of the game

Game View:-
Diagram 4. Game view
 SYSTEM DESIGN

1. Breakdown of the properties and methods used in the AirPlane function:

Class: AirPlane

Property Type Description

mesh Object3D The main mesh for the airplane

propeller Mesh Mesh representing the airplane’s

propeller

pilot Pilot Instance of the Pilot class

Method Description

None(constructor Initializes and constructs the airplane object with

function) its components

The constructor's role AirPlane creates a new object that is an airplane.

Among other things, it sets up the pilot, engine, tailplane, wings, propeller,
windshield, and wheels of the aircraft. These components are produced as
meshes with specific materials and geometries.
Since the airplane object (this.mesh) functions as their parent object, all the
elements in the Three.js scenario can be combined together and handled as
a single entity. The propeller and pilot are added to the main mesh as child
objects.
Additional methods, including propeller animation, movement control, and
interaction with other objects in the scene, could be added to this AirPlane
class.
 2. Breakdown of the Coin and CoinsHolder functions along with their
properties and methods:

Class: Coins

Property Type Description

Mesh Mesh Mesh representing the coin

angle Number Angle of rotation of the coin

dist Number Distance of the coin from the center

Method Description

None(construct Initializes and constructs the coin object with

or function) its components

The Coin function creates a new coin object. It initializes a tetrahedron

geometry with a specified radius and detail. The coin mesh is created using
a Phong material with a flat shading. The coin's mesh is set to cast shadows.
The angle and dist properties are used to control the position and rotation
of the coin.

Class: CoinsHolder

Property Type Description

mesh Object3D The main mesh for holding coins

coinsInUse Array Array containing coins currently in

use

coinsPool Array Array containing unused coins

 Method Description

spawnCoins() Spawns a random coin with random positions

and distances

rotateCoins() Rotates coins, checks for collisions with airplane,

and manages coin recycling

Class: CoinsHolder

Property Type Description

mesh Object3D The main mesh for holding coins

coinsInUse Array Array containing coins currently in

use

coinsPool Array Array containing unused coins

Method Description

spawnCoins() Spawns a random coin with random positions

and distances

rotateCoins() Rotates coins, checks for collisions with airplane,

and manages coin recycling

The CoinsHolder function builds a container for holding coins. To put all the
coins in one group, it has an Object3D mesh. To handle the status of the
coins, it keeps track of the arrays coinsInUse and coinsPool. Coins are
randomly generated and positioned via the spawnCoins function. The
rotateCoins function adjusts the coins' orientation and position, detects any
collisions with the aircraft, and recycles them appropriately.
3. Breakdown of the ‘Ennemy’ and ‘EnnemiesHolder’ functions along with
their properties and methods:

Class: ‘Ennemy’

Property Type Description

mesh Mesh Mesh representing the enemy

angle Number Angle of rotation for the enemy

dist Number Distance of the enemy from the

center

Method Description

None(construc Initializes and constructs the enemy object with

tor function) its geometry, material, and properties

The Enemy function creates a new enemy object. It restores a tetrahedron

geometry's original radius and detail. The enemy mesh is created using the
Phong material with flat shading. The enemy's mesh is casting shadows. The
‘angle’ and ‘dist’ properties can be used to control the enemy's position and
rotation.

Class:’EnnemiesHolder’

Property Type Description

mesh Object3D The main mesh for holding

enemies

ennemiesInUse Array Array containing enemies

currently in use
 Method Description

spawnEnnemi Spawns a number of enemies based on the

es() current game level with random positions and
distances

rotateEnnemie Rotates enemies, checks for collisions with the

s() airplane, and manages enemy recycling

A container for handling adversaries is created by the EnnemiesHolder

function. To put all of the opponents in one group, it has an Object3D mesh.
To handle the status of the enemies, it keeps an array called ennemiesInUse.
The spawnEnnemies function generates enemies based on the current game
level and places them randomly. The rotateEnnemies method recycles
enemies based on their updated position and rotation, as well as a check for
collisions with the aircraft.

4. Breakdown of the Particles and ParticlesHolder functions along with

their properties and methods:

Class: ‘Particles’

Property Type Description

mesh Mesh Mesh representing the particle

Method Description

Explode(pos,color,s Animates the particle to explode from a

cale) given position with a specified color and
scale

The Particle function creates a new particle object. It initializes a

tetrahedron geometry with a specified radius and detail. The particle mesh
is created using a Phong material with flat shading.Using a set color and
size, the explosion method animates the particle to burst from a particular
place (pos). Using the TweenMax animation package, it randomly
determines the particle's scale, rotation, and target position. The particle's
characteristics are reset and it is returned to the particle pool after the
animation is finished.

Class: ‘ParticlesHolder’
Property Type Description

mesh Object3D The main mesh for holding

particles

particlesInUse Array Array containing particles

currently in use

Method Description

spawnParticles Spawns a specified number of particles at a

(pos, density, given position with a given color and scale
color, scale)

The ParticlesHolder function creates a container for managing particles. It

holds an Object3D mesh to group all the particles together. It maintains an
array particlesInUse to manage the particles' status.Particles with a given
density, color, and scale are generated at a specified point (pos) via the
spawnParticles method. If there are particles in the particle pool, it retrieves
them; if not, it generates new ones. Next, it adds the particles into the mesh
of the holder and initiates the explosion animation for every particle.

5. Breakdown of the Pilot function along with its properties and methods

Class:Pilot

Property Type Description

mesh Object3D The main mesh for the pilot

character

angleHairs Number Angle for controlling the hair

movement

Method Description

None(construc Initializes and constructs the pilot character

 tor function) with its components

updateHairs() Updates the hair movement of the pilot

character

The class ‘Pilot’ creates a 3D model of the character pilot. It has various
components such as body, face, hairs, glasses, and ears that have been
created using different geometries and materials and are added to the mesh
of the pilot character.

Method: ‘updateHairs()’

This program is responsible for changing the hair movement of the driver.
AngleHairs adjusts the proportions of each hair component according to the
sine function. Therefore, the hair begins to curl. The tempo of the game and
the time increase determine how much the hair angle will be increased.
To put it all together, the Pilot category offers a way to create and watch a
pilot in a scene, complete with hair movement animation.

6. Breakdown of the class Sea and its methods

Class:Sea

Property Type Description

waves Array Array to store wave properties

mesh Mesh Mesh representing the sea

Method Description

None(construc Initializes and constructs the sea with its waves

tor function)

moveWaves() Moves the waves to simulate wave motion

The Sea class is responsible for generating and animating waves. The Sea
class creates a cylindrical form that is used to depict the sea. It initializes a
mesh with a Phong material using this geometry. By changing the properties
of each vertex in the geometry, waves are created. These properties are
stored in the waves array and include the initial position (x, y, z), angle
(ang), amplitude (amp), and speed (speed) of each wave.

Method:moveWaves()

This method alters the position of each vertex in the sea geometry to
simulate the motion of waves. Update the position of each vertex iteratively
using the matching wave attributes stored in the waves array. The sine and
cosine functions are used to calculate the location in order to create a
motion that resembles waves. Each wave also experiences an increase in
angle based on its speed compounded by the delta time. In the end, it sets
verticesNeedUpdate to true to inform Three.js that the vertices of the mesh
have changed.

All things considered, the Sea class provides a systematic way to create and
animate waves in the image, giving the appearance of a real sea surface.

7. Breakdown of ‘Sky’ and ‘Cloud’ class and their methods:

Class:’Sky’

Property Type Description

mesh Object3D The min mesh for the sky

nClouds Number Number of clouds in the sky

clouds Array Array to store cloud objects

Method Description

None(construc Initializes and constructs the sky with its clouds

tor function)

moveClouds() Moves the clouds to simulate cloud motion

The Sky class is responsible for creating and animating clouds in the
Three.js scene. A group of cloud objects is assembled by the Sky class and
dispersed throughout the sky. By building instances of the Cloud class and
arranging them in a circle around the scene's center, it produces a given
number of clouds (nClouds). To create variation, each cloud is rotated and
scaled at random.
The clouds are animated with the'moveClouds' function. To add a rotating
effect to each cloud, it invokes the rotate method. It also rotates the whole
sky mesh around the z-axis according to the speed and delta time of the
game.

Class:’Cloud’

Property Type Description

mesh Object3D The main mesh for the cloud

Method Description

None(construc Initializes and constructs the cloud with its

tor function) components

rotate() Rotates each component of the cloud

The Cloud class represents individual cloud components.The Cloud class

uses a set of cube geometries to build a cloud object. A more realistic cloud
shape is produced by randomly rotating, scaling, and positioning numerous
cubes, each of which represents a portion of the cloud. The rotate method
gives each cube a random rotation, giving the cloud a soft drifting
appearance.

In general, the Cloud class represents individual cloud components and

controls their rotation, whereas the Sky class oversees a group of cloud
objects. This arrangement makes it possible to create interesting and
dynamic cloud patterns in the scene.

8. Breakdown of the ‘createLights’ function:

Light Color Intensit Position Shado Shadow Description

w Parame
Type y Castin ters
g

Ambient 0xdc8874 0.5 N/A N/A N/A Ambient lights

light provide a global
illumination that
evenly lights up
all objects in the
scene. This helps
to eliminate
harsh shadows
and adds overall
brightness to the
scene.

Hemisp skyColor: 0.9 N/A N/A N/A Hemisphere

here oxaaaaaa, lights provide a
light groundCo soft, ambient
lor: illumination to
0x000000 the scene,
simulating
natural light. The
skyColor and
groundColor
determine the
colors of the
upper and lower
hemispheres,
respectively.
Directio 0xffffff 0.9 (150, Enable Camera Directional lights
nal light 350, d Frustu simulate the sun
350) m: Left by emitting
(-400), parallel rays
Right from one
(400), direction. This
Top light creates
(400), shadows in the
Bottom area to simulate
(-400) real lighting.
Adjust
Near parameters such
Plane: as position,
1, Far camera cutout,
Plane: and shadow map
1000 size to control
the appearance
Shadow
and quality of
Map
shadows. The
Size:
createLights
Width
function lists
(4096),
these lights and
Height
adds them to the
(4096)
scene. It also
creates a
CameraHelper
object ch to
represent the
shadow camera
view interrupt,
although it is
now commented
out. Finally, he
added lights to
the scene.

The createLights function sets up these lights and adds them to the scene.
 IMPLEMENTATION

Breakdown of the main.js file line by line, focusing on different sections:

Lines(1-140)

This code uses Three.js to start creating different game elements and set the
game environment:

 Color definition: Use hex color codes to describe the various colors used
in the game.

 Game variables: Issue and initialize various game variables such as

speed, distance, power, level, aircraft position, sea area, camera position,
tokens and enemy area and game state.

 resetGame() function: When called, resets the game state to the initial
value. This function is responsible for resetting speed, distance, power,
level, airspace, seaspace, temperature and enemy position and status
game related variables.

 startGame() function: Start the game by setting the game to "Play" and
turning on the background music and sound effects. Additionally, all
banners displayed on the screen will also be deleted.

 THREE.js related variables: Publish Three.js related variables, including

events, cameras, objects, packages, and controls.

 Screen and mouse variables: Declare variables to store screen

dimensions (height and width) and mouse position (mousePos).

 createScene() function: Start the Three.js scene job by setting the

camera, weather and camera. The camera is at (0,
game.planeDefaultHeight, 200) and is facing the origin (0, 0, 0).

 This policy lays out the main elements of the game environment and
prepares it for action and planning. Use Three.js for chat.

Lines(140-239)

1. Sound Setup:

 This line configures the sound effect using the THREE.js Audio API.

 Create a listener (audio) and add it to the camera (camera.add(listener))

to display the audio in the 3D scene relative to the camera.

 Use THREE.Audio (listener) to create four sounds. :

 backgroundMusic: Load background music from "sounds/bg-music.ogg",
set it to continuous loop (setLoop(true)) and set the volume to 0.3.

 planeSound: Load the plane sound effect from "sounds/plane.ogg", set it

to loop (setLoop(true)) and set the volume to 0.7.

 fuelPopSound: Load the fuel pop sound from "Sounds/fuel-pop.ogg", set

the volume to 0.4 and disable the loop (setLoop(false) because there can
be a short sound only once at a time).

 brickHitSound: Load the brick hit sound effect from "sounds/brick -

hit.ogg", set the volume to 0.4 and disable the loop (setLoop(false) for
one-off events).

2. Renderer Setup:

Use THREE.WebGLRenderer({ alpha: true, antialias: true }) to create a

WebGL renderer.

 alpha: Definitely focus on the upper part of the background of the

website.

 antialias: true enables anti-aliasing for smoother edges.

Set the size of the renderer (renderer.setSize(WIDTH, HEIGHT)) to match

the width and height of the browser window.

Enable shadows for true lighting (renderer.shadowMap.enabled = true).

Take the HTML element with ID "world" (container =

document.getElementById('world')) and add the DOM element
(renderer) .domElement ) as a child element. This essentially adds a 3D
canvas to the web page.

Add an event listener (window.addEventListener('resize',

handWindowResize, false)) to the window object. When the window size
changes, the handWindowResize function is called.

3. Window Resize Handling:

When the window is resized, the handWindowResize function is activated

Updates the HEIGHT and WIDTH variables with the new window.

Resize renderer to fit new view size (renderer.setSize(WIDTH, HEIGHT)) <

br> Update camera aspect ratio (camera.aspect ratio = WIDTH/HEIGHT) to
ensure correct measurement.

Call Camera.updateProjectionMatrix() to recalculate the camera's projection

matrix according to the new aspect ratio.
4. Mouse and Touch Events:

These lines define functions that handle mouse and touch input events.

handleMouseMove(event): This function will be called as long as the mouse

is moved. It calculates the mouse position (tx and ty) based on the measured
length and stores it in the mousePos object for later use (possibly to control
the movement of the aircraft).

handleTouchMove(event): Similar to HandleMouseMove, this function

handles touch events on mobile devices. Captures the touch position and
calculates its normalized position relative to the screen.

handleMouseUp(event): This function will be called when the mouse button

is released. Checks the status of the game:

If the game is "waitingForPlayer", restarts the game, starts the game and
hides the possible menu of use hideReplay (invisible function).

If the game is in the "Waiting for Replay" state, it will reload the window and
actually restart the game.

handleTouchEnd(event): Similar to HandleMouseUp, this function handles

the cell's touch end event and restarts the game if necessary based on the
game's status.

handleKeyDown (event): This function is called when a key is pressed.

Checks whether the "M" key is pressed (keyCode 77) and changes the
background music (backgroundMusic.pause() or backgroundMusic.play()).

5. Logging Message:

A log message "maybe this is working" is printed to the console, for

debugging purposes.

Lines(240-476)

1. Creating the 3D model:

Define the function to create various 3D objects in the activity:

 createPlane(): Use the AirPlane class (not shown) and the scale to create
the model plane Get it, preset place it at the set height and attach it to the
ground.

 createSea(): Create a sea model using the Sea class (not shown), place it
on the sea surface (maybe below the surface) and add it to the surface.

 createSky(): Create a sky model using the Sky category (not shown),
place it in the sea radius and add it to the scene (possibly as a
background). >createCoins(): Create a coin holder with the number of
 coins (20) using the CoinsHolder class (invisible) and add a grid holder
to the field.

 createEnnemies(): Create the enemy pool Ennemy object (not shown) by

creating 10 enemies and adding them to the ennemiesPool array. Then
use the EnemiesHolder class (not shown) to create the enemy holder
and add its mesh to the location.

 createParticles(): Similar to createEnnemies(), creates an (invisible)

pool of 10 particles and adds a grid of support particles to the space.

2. Game loop:

The loop function is the basis of the animation and updates the state of the
game with each frame.

Gets the current time (newTime) and calculates the time difference
(deltaTime) from the previous time.

Display game status (game.status):

"Playing": Perform the main game logic:

Generate coins remotely (game.distanceForCoinsSpawn).

Update target speed based on distance and time delay

(game.distanceForSpeedUpdate).

Enemies spawn at a certain distance (game.distanceForEnnemiesSpawn).

Update level, background color gradient and target speed based on distance
and level (game .distanceForLevelUpdate).

Call the function to change the aircraft's position, distance, power, and other
aspects of the game.

"gameover": Slow down the plane, turn the plane, increase its speed and
check

"waitingReplay": Nothing (where?).

"waitingForPlayer": Update target speed based on time delay, aircraft

position etc. Update by level.

Adjust the rotation of the jet fan and the rotation of the ocean net according
to the speed.

Adjust the lighting on time.

Summon the role of coins, flipping enemies, moving clouds (can be part of
the sky model) and moving waves (can be part of the ocean model).
Render the scene using a renderer and request another keyframe using
requestAnimationFrame(loop).

3. Latency and power update:

updateDistance():

Update game distance based on speed, delta time and distance

(game.ratioSpeedDistance).

Adjust the distance shown in the game interface.

Determines the path of the level circle based on the distance to the current
level (value of the dashoffset property).

updateEnergy():

Reduces game time energy and energy ratio (game.ratioSpeedEnergy)

depending on speed and increase.

Make sure the power is in the range 0-100.

Change the width and color of the energy bar for additional energy.

If power is low, set blinking animation for power bar.

If the energy reaches 0, the game is over.

4. Plane update:

updatePlane():

Sets target plane speed based on normalized mouse position (used in

account boundaries).

Select the target Y and X position of the plane according to the normalized
position of the mouse in a specific way.

Update the crash plan used by the crash.

Adjust plane position, rotation (relative to target position), and camera

position based on the Y position of the plane and user input.

Update camera view based on mouse position (probably used for zoom
effects).

Gradually reduce the impact of the aircraft and accelerate towards zero.

New pilot hair animation.

Lines(476-511)

This part of the code starts the game by setting various context and event
listeners:

1. User Interface Elements: Initialize a variable to store data sent to the

HTML elements used to display game data and messages, such as distance,
power usage, replay messages, flag, score, priority level, and circle level.

2. Initialization function (init): The function is called when the window is

loaded. Starts the game by following these steps:

- Initialize the UI element by getting a reference to the HTML element using

its id.

- Use the resetGame() function to reset the game state.

- Build us.

- Use the resetGame() function to reset the game state.

- Build us.

- Use the resetGame() function to reset the game state.

- Build us.

- Use the resetGame() function to reset the game state.

- Build us.

- Use the showReplay() function to display replay messages.

- Create lights, planes, oceans, skies, coins, enemies and bars using the
creation functions.

- Add event listeners for mouse movement, touch gesture, mouse lift, end of
touch, and key events to control user input and interaction.

3. Event Listener: Record event listeners to capture user input and

interaction such as mouse movement, touch gesture, mouse release, last
touch, and important events.

4.Window Loading Event Listener: Registers the initialization function

called when the window has finished loading.

These codes set up the game environment, initialize user interface elements,
create scenes and game objects, and listen for user input to control the
game.
SCREENSHOTS OF PROJECT
 CONCLUSION

Implemented in Three.js, gameplay involves flying a plane across the ocean

while avoiding obstacles such as enemy planes and collecting coins. Here
are the game features details according to the codes:

Airplane: The game features an airplane model with detailed components

such as cabin, engine, wings, propellers and pilot. The plane is controlled by
the player and can be moved around the game environment.

Coins: Coins are items that can be collected in the game world. Players can
collect coins to get points or rewards.

Enemies: There are enemy planes in the game and players must avoid
colliding with them. Collisions with enemy aircraft will result in penalties or
loss of points.

Particles: Particle effects are used for various purposes in the game, such as
collecting gold coins, damaging enemies, or visually affecting other
situations.

Ocean and Sky: The playground features an ocean with moving waves and
a cloudy sky. These elements help create a beautiful game.

Lighting: Use different lights to illuminate the game, including spotlights,

spotlights, and hemispherical lights.

Animation: Various animations such as the movement of ocean waves, the

rotation of clouds in the sky, the movement of airplanes and other objects
have been put into the game.

Interaction: Players can interact with the game environment by controlling

planes and collecting coins while avoiding enemies.

Overall, playing in Three.js seems to provide a great and visually appealing

experience through detailed 3D models, dynamic animations and interactive
game content. The combination of these features provides cooperative and
fun gameplay for players.

Games created with Three.js provide a comprehensive representation of

interactive 3D graphics and game design concepts on the web. The project
demonstrates the integration of various objects such as 3D modeling,
animation, physics simulation and user interaction to create integration and
participation in games, using the power of WebGL and the Three.js library.

From perspective, the project means using modern technology to deliver

high-quality and real-time 3D images in the browser environment. The
game achieves a beautiful visual effect with lighting, shadows and effects
through the use of shadows, materials and lighting. Using the design process
of terrain, waves, and clouds increases the complexity and realism of the
game world, improving its visibility and understanding.
It also teaches good software engineering principles and practices, including
project, design, product performance and optimization. Using design
patterns such as factory model, model model, and analysis model is good for
legal organization, reuse, and control and increases the scalability and
extensibility of the project.

Game design, which also includes design elements such as level design,
enemy AI, writing, and feedback for players, enhances gameplay and
engages players. The inclusion of many aspects of the game, including coins,
enemies, obstacles and power-ups, makes it possible to repeat and retain
the player, providing a deep and varied strategy.

In conclusion, games created with Three.js incorporate the advanced

application of web-based 3D graphics and game development technologies
and demonstrate the potential of web technology in creating
communication and negotiation skills. This project is a useful learning tool
for learning WebGL, Three.js, game development, and interactive graphics,
and provides information on best practices, design, and optimization
techniques for developing complex web-based applications.
 FUTURE SCOPE

Here are some future improvements and extensions to the game in Three.js:

 Level Design: Shows different levels of increasing difficulty, each with

special effects, terrain and challenges. This can include many locations
such as mountains, forests or urban landscapes.

 Power-ups and Abilities: Includes power-ups that give the aircraft

temporary buffs or special abilities, such as increased speed, shield
protection, or instant suspicion.

 Multiplayer Mode: Use multiplayer mode where players can compete

with others online or locally. This may include racing, competing for high
scores, or participating in air races.

 Customization Options: Allows players to customize their aircraft with

different skins, colors, decals and upgrades. This adds a personal touch
to the gaming experience and encourages player participation.

 Goals and Story Mode: Provides a story with roles and objectives that
players must complete. This could include a rescue mission, a battle, or
an exploration mission, providing a deeper narrative and sense of
progression.

 Dynamic Weather System: Use dynamic weather conditions such as

rain, snow, fog or wind that affect the gameplay and add realism to the
environment. Different weather conditions can affect visibility, control
and behavior.

 Boss Battles: Show off epic boss battles against enemy planes or
powerful creatures. These encounters will require strategic planning
and precise timing to defeat, presenting players with unforgettable
challenges.

 Leaderboards and Achievements: Add leaderboards and achievements

to track and compare players' progress and achievements. This
encourages replayability and competition between players.

 Virtual Reality (VR) Support: Optimize the game for virtual reality
headsets to provide an immersive experience. VR support improves
perception and adds a new dimension to gameplay.

 Cross-platform compatibility: Make sure your game is compatible with

multiple platforms and devices, including desktops, mobile and consoles.
This expands the player base and accessibility of the game.

By combining these future developments and expansions, games can be

transformed into more intuitive, efficient and effective games that appeal to
a wider range of users and keep players entertained for longer.
 REFERENCES

 Keith Gladstien. "Game Development In a Social, Mobile and 3D World".

Cengage Learning, 2013.

 Braibant, S.; Giacomelli, G.; Spurio, M.. Particles and Fundamental

Interactions: An Introduction to Particle Physics. Springer, 2009.

 Gómez-Maureira, Marcello A.; Westerlaken, Michelle; Janssen, Dirk P.;

Gualeni, Stefano; Calvi, Licia. "Improving level design through game user
research: A comparison of methodologies". Entertainment Computing,
2014.

 Sellers, Graham, "Vulkan Programming Guide", Addison-Wesley

Professional, 2016.

 Kosarevsky, S., "3D Graphics Rendering Cookbook", Packt Publishing

2021.

* Web References *

 "History of Gaming - Interactive Timeline of Game History".

https://www.pbs.org/kcts/videogamerevolution/inside/index.html
retrieved April 8, 2024.

 Official Three.js documentation, https://threejs.org/docs retrieved April

8, 2024.

 WebGPU, https://www.w3.org/TR/webgpu/ retrieved April 2, 2024.