Created by Alyssa Tadeo, Artemis Tran, and Kevin Zhang for UCLA CS174A Spring 2024.
Play now: https://kevz1209.github.io/CS174A-Tanks/
Tanks! is a recreation of the classic Wii Play "Tanks!" game using the Tiny Graphics library. This game features a user controled a tank via mouse and keyboard to avoid enemy fire, shooting bullets that ricochet off walls, and placing bombs which explode after a duration or can be exploded by a bullet. The goal of the game is to eliminate all enemy tanks without getting hit before the level timer ends, and advance through all possible levels to win the game!
Tanks are modeled using a 3D object mesh made in Blender which separates the body from the turret for isolated animations. Basic Cube, Square, and Sphere models from Tiny Graphics are used for all other objects.
Tanks translate and rotate about the game map. Bullets translate in one direction with a given velocity (based on bullet type: Normal, Fast, or User)
The map is lit from above to simulate room lighting. Tanks, Bullets, and Bombs are shaded with Phong Shaders to simulate a plastic look as if the models were toys. All other objects such as wood blocks, cork blocks, game banners, dead tank markers, and map holes are shaded with Textured Phong Shaders with graphics designed in Photoshop or textures pulled from the web.
Smoke from bullets and collisions are generated through particles which have numerous parameters such as opacity, color, lifetime and scale to mimic realistic physics. Each particle is created with subdivision_spheres(1) to improve performance.
- WASD keys control the translation of the user tank body
- Using a mousedown event handler, user shoots a bullet towards the cursor position
- Using a mousemove event handler, the user tank turret rotates to the cursor position and the cursor is replaced with a target
- E key places a bomb at the user’s current position
- Enter key starts the game from the initial loading screen
For our cursor-based interactivity, we had to converting screen space coordinates to world space coordinates to create a seamless connection between the user and the game world.
- Transform mouse position to normalized device coordinates
- Transform position to world space:
$$(Projection(ModelView)*Object)^{-1}$$ - Find intersection between WS position and ground plane (y = 4.3 in order to avoid clipping with tall map obstacles)
Every 5 levels, the user gets an extra life!
Collision detection is accomplished by approximating collision boundaries with AABB via hitboxes for Tanks, Bullets, and Obstacles.
- Tank-Obstacles
- Tank-Tank
- Bullet-Obstacles
- Bullet-Tank
- Bullet-Bullet
- Bullet-Bomb
Bullet ricochet is calculated using the formula for light reflections to get a realistic result.
Each level map is defined as a text file where each character corresponds to a block type or tank type. Before each level state in the game loop, the schematic is parsed and the locations, textures, and types of each map element is stored in game memory to be used for collision detection.
| Element | Schematic Encoding |
|---|---|
| Empty | 0 |
| Block (1 height) | 1 |
| Cork (1 height) | 2 |
| Hole | 3 |
| Block (2 height) | 4 |
| Cork (2 height) | 5 |
| Block (3 height) | 6 |
| Cork (3 height) | 7 |
| User | * |
| Stationary Enemy (tan) | s |
| Moving Enemy (brown) | m |
| Moving Bomb Enemy (yellow) | b |
| Moving Fast Shooting Enemy (green) | f |
| Moving Fast Reload Enemy (red) | r |
- The Tourist: moves in a chosen direction until it hits a wall or randomly changes direction.
- The Pro Gamer: dodges bullets if it gets too close
- The Bestie: follows you if close
- Shoots random directions if user not detected.
- Shoots directly at user upon detection.