A puzzle game heavily inspired by and styled after a certain hugely popular game. Players traverse through a treacherous cave, sliding across the slippery icy floor, in an attempt to reach the exit and escape.
The game can be played over at https://project1-ice-path.vercel.app. Alternatively, clone/download all files into a folder, and run index.html to start.
- HTML5
- CSS3
- JavaScript
- Use the arrow keys or WASD to move around
- ESC to return to the title screen
Puzzle data is saved as a 2D array, and is used to generate various map layouts from the spritesheet.
When a player moves in a certain direction, the game will compare the player's position to the puzzle data and keep moving them until they encounter an obstacle.
Due to Javascript's lack of a sleep function, setInterval is used instead. Additional player input is disabled when the player moves. The movement function is continuously called to simulate motion and is stopped once the player hits an obstacle.
Each puzzle is stored as a 2D array to be called up later to generate the maps onscreen. The number in each array corresponds to the type of tile that will be rendered in that position. This also becomes useful later on in determining whether the player runs into a wall or obstacle, and whether they reach the goal.
The game is rendered using graphics from 2 spritesheets: 1 for the puzzle tiles and 1 for the player. The spritesheets were cropped and sized in CSS to form each individual sprite. These sprites could then be displayed in quick succession to simulate animation. Like in most 2D games, the sprites can be used to form a wide variety of map layouts without needing to store excessive image data.
To create the map, the sprites are rendered onto the screen in a two-dimensional grid. The player's character is also rendered in one of the predetermined starting tiles.
The main mechanic of this game is that when a player moves across the ice floor, they are unable to stop and will keep moving in the same direction until they encounter an obstacle or wall, or reach the end goal.
When a player moves in a certain direction, additional movement input is disabled. The game then checks if the position they are moving to is a valid tile. If it is valid, the player continues moving in that direction. Otherwise, the player will come to a stop and control is given back to them. While this is happening, the player's sprite is updated to a moving version, and then gets reverted to the original idle version once they come to a stop.
Spritesheets from: