Welcome to my web game arcade! Here, you can play a selection of classic arcade games that I’ve mostly adapted from Python applications to web-based applications using HTML, CSS, and JavaScript. Each game has its own set of rules introduced, and you can access the source code for all the games my GitHub gaming folder. To play, simply click on the play button.
As I developed these games, I learned several new web development concepts, By experimenting with these concepts, I was able to create a more engaging and interactive gameplay and to enahnce the design and user experience of each game. If you want to learn more about my journey in mastering HTML, CSS, and JavaScript languages in a short span of time, I highly recommend reading my article, How did I learn Front-End Web Developement In A Week?
I hope you enjoy playing these web games as much as I enjoyed creating them!
1. Guess the Number
Rules: The computer will think of a secret number from 1 to 20 and ask you to guess it. After each guess, the computer will tell you whether the number is too high or too low. You win if you can guess the number within six tries.
Program:
Main new web concepts: This program provides a good starting point for understanding how HTML, CSS, and JavaScript work together to create an interactive web page. I learned basics such as buidling the HTML document structure, integrating JavaScript within its body, using <meta> tags to define character encoding and viewport settings, also using CSS <style> to style elements. I then grasped how to apply the elements attributes (id, type, placeholder, onclick …) to provide additional functionalities to my HTML elements. Finally, I leveraged two key mechanics: assigning JavaScript functions to be executed when a event occurs like clicking on a button for instance, and manipulating Document Object Model (DOM) with methods like getElementById(), and properties like textContent and style.display.
2. Dragon Realm
Rules: You are in a land full of dragons. The dragons all live in caves with their large piles of collected treasure. Some dragons are friendly and share their treasure. Other dragons are hungry and eat anyone who enters their cave. You approach two caves but you don’t know which dragon are in the caves so you must decide which one to enter:
Program:
Main new web concepts: This program dives into the font, buttons, containers and images html personalisation properties (@font-face, img). I also used asynchronous JavaScript to create a pause between text lines and simulate a sequential story-like display (async function, await and promise).
3. The Hangman
Rules: The computer thinks of a word and then draws a blank line for each letter in the word. You then try to guess letters that might be in the word. If you guess the letter correctly, the computer writes the letter in the proper blank. But if you guess incorrectly, the computer will draw a single body part of a hanging man. You have to guess all the letters in the word before the hanging man is completely drawn to win the game.
Program:
Main new web concepts: This program was challenging to design. It consists of several CSS container{} inceptions to make into fit into the fixed website iframe. Indeed there is a lot of conditional rendering to manage to deliver a dynamic user interface. I also used the ASCII character encoding standard to draw the hangman onto the school board. Finally we learn to manipulate dictionaries via the functions math.random() to select and splice() to suppress.
4. Tic-Tac-Toucan
Rules: You are a Toucan and must defeat the jungle’s jaguars. To do so, you play Tic-Tac-Toe against the computer and take turns placing your Toucans or Jaguars on the board. If a player gets three of their marks on the board in a row, column, or diagonal, they win. When the board fills up with neither player winning, the game ends in a draw.
Program:
Main new web concepts: This program offers the opportunity to develop a very simplistic version of an Artificial Intelligence to lead the computer’s strategy. I enhanced my design skills, by employing the <z-index> property to layer containers effectively, adding shadows and background elements, incorporating images using attributes, and integrating sound effects. Finally, the code also uses addEventListener and inline onclick event handlers to respond to user interactions on the game board instead of using a single validation click button.
5. Tacode
Rules: This is a deduction game in which you try to guess a random three-digit number. It is similar in concept and strategy to MasterMind and Jotto with the exception that you are not allowed repeating digits. After each guess, the computer gives you three types of clues: Bagels (no correct digit in the correct place), Pizza (correct digit not at the correct place) and Taco (correct digit at the correct place).
Program:
Main new web concepts: We do not choose a for loop even though we know in advance the number of maximum times the player can iterate the guesses, which is 10. Instead we also choose a while True loop because the number of times the game will be played depends on the player’s decision whether or not to play again.