Harry Potter CSS Game

Number of players

1 2 3 4

Characters

START GAME

About

This Harry Potter game is based on Snakes and Ladders, an ancient Indian board game regarded today as a worldwide classic. The ladders have been replaced with flying brooms and the snakes are basilisks. The object of the game is to navigate one's game piece, according to die rolls, from the start (bottom square) to the finish (top square), helped or hindered by brooms and basilisks respectively.^[1]

This version was developed by Alvaro Montoro using HTML and CSS, to practice Pug and Sass (for simplicity, they compile to standard HTML and CSS), and without any line of JavaScript code.

The idea behind this project is that many classic board games are actually Finite-State Machines (FSM), so they can be recreated simulating the states of the automaton with radio buttons, labels, and some CSS styling.

Close

Basilisk!

Oh no! You were attacked by a monster from the Chamber of Secrets! You'll have to move your piece to the basilisk's tail.

Move Down Move Down Move Down Move Down Move Down Move Down Move Down Move Down Move Down Move Down Move Down Move Down Move Down Move Down Move Down Move Down Move Down Move Down Move Down Move Down Move Down Move Down Move Down Move Down Move Down Move Down Move Down Move Down Move Down Move Down Move Down Move Down Move Down Move Down Move Down Move Down Move Down Move Down Move Down Move Down

Broom!

Yay! You found a flying broom! Hop on and fly to the next tile now.

Move Up Move Up Move Up Move Up Move Up Move Up Move Up Move Up Move Up Move Up Move Up Move Up Move Up Move Up Move Up Move Up Move Up Move Up Move Up Move Up Move Up Move Up Move Up Move Up Move Up Move Up Move Up Move Up Move Up Move Up Move Up Move Up Move Up Move Up Move Up Move Up Move Up Move Up Move Up Move Up Move Up Move Up Move Up Move Up

Home

You made it to the end of the maze, but you didn't do it in an exact jump so you will bounce back the remaining tiles.

Bounce back Bounce back Bounce back Bounce back Bounce back Bounce back Bounce back Bounce back Bounce back Bounce back Bounce back Bounce back Bounce back Bounce back Bounce back Bounce back Bounce back Bounce back Bounce back Bounce back Bounce back Bounce back Bounce back Bounce back

Congratulations!

You made it to the end of the maze! You won the TriWizard Cup!

Reload the page to play again.