Air hockey

Created by:

• Oskar Swat
• Marcel Tracz

University of Lodz 2023

Project Development History

Initial Game Concepts:

• Air hockey table with paddles and puck
• Working physics: accurate rebounds, puck slowing down, acceleration after rebounds
• Paddle control initially sideways only, later expanded to half the table in all directions
• Table in a dark room, overhead light - one lamp
• Functioning scoreboard

Libraries Used:

• Physics: Cannon.js
• Models (room): GLTFLoader
• Models, lights, shadows, textures: Three.js
• Local server for display: Parcel

Initial Model Creation:

Puck:

Paddles:

Table:

Light DEMO Version:

Initial Game Physics Implementation:

Engine a :

• Puck rebounding off walls
• Poor paddle control
• Incorrect puck-paddle collision

Engine b:

• Puck rebounding off walls
• Correct paddle control
• Incorrect puck-paddle collision

Initial Implementation of cannon.js Engine:

Creating puck and paddle objects in cannon.js:

Testing cannon.js engine on test objects:

Adding walls in cannon.js: Adding paddle control:

Initiating puck movement" Adding friction: Removing air resistance: Setting gravity correctly:

Later also creating goal holes and scoring mechanics

Initial Frontend Development

Connecting ready-made models with cannon.js engine and minor adjustments :

Adding ready-made room model, field, and scoreboard:

Adding lights and shadows:

Finalized Project

Instructions:

Launching the game on a local server using the command:

parcel ./src/index.html.

• Paddle control keys WSAD and IKJL.
• Camera control using the mouse through Orbit Controls (dragging, scroll for zooming).