WEB PROJECTS
GAMING SITE PROJECT
For this project, the idea was to create an interactive gaming library/website featuring various games primarily using JavaScript. There are three games in total, each developed using either a different form of JavaScript or using the same but using different elements. In the beginning, the idea was to create a web-based game with heavy use of JavaScript, however during the process of learning, researching and developing the project over several months, three games of different genres and complexities were created based on different single-player arcade classics: Pong, brick breaker and racing games.
​
The project is split into five key areas: the start screen, menu screen, and game screen. Each serves a different purpose, with the start screen gaining the user's information, the menu screen displaying the options for the user and each game screen displaying the game for the user to play. The project also features two splash screen displays for a few seconds before the corresponding page is loaded.
​
To run the project, Servez and a web browser are required. Servez is a stand-alone app that runs a simple web server for local web development. It provides an easier way to get started without installing multiple dependencies or integrating things with the system. This project was developed using Visual Studio Code, which is a freeware source-code editor made by Microsoft. It was chosen due to its many features, including support for debugging, syntax highlighting and intelligent code completion.
When first loaded, the project will display a splash screen, which welcomes you to the project and is created by using Vanilla JS. Vanilla JS refers to using plain JavaScript without any additional libraries. It is created using two classes: splash, which is used for the actual page of the splash screen and fade-in animation. Following the splash screen is this login/name input screen. The idea for this is to make the project more interactive by learning the user's name, and this can be further developed into a complete login system in the future. The page uses a text effect, which makes the text look like a typewriter that appears one character at a time. The page also showcases an input box with submit button within a container. This asks for the user to input their name, which is then used on the next screen. The page uses the same typewriter effect as the splash screen, which is displayed character by character, pushing the name input form to the right of the screen.
​
Validation is vital for a website's compatibility, as, in the case of this project, the user's name is used to add to the website's interactivity. When the name text box is empty, and the user tries to submit, an HTML <input> required attribute, seen in the HTML section, a Boolean attribute, is used to indicate to the user that the field must be filled out.
​
The second splash screen is displayed after the user submits the name form on the start screen. This splash screen welcomes the user and gets input from the form before. It does this by using the "getElementById" method and inserts it into the screen welcome message. The "id" for this input is set as "name", as shown in the HTML section above. In the JavaScript a function called "getParameterByName" is used. If no URL is passed into the function, it uses the current one and explicitly replaces any square braces in the name of the wanted attribute to be used in a regular expression later on. It builds an expression that will use the value processed by either a "?" or "&" characters and a group to match its value. It then attempts to find a match in the URL, and if none are found, then null is returned. If a second group is empty, it returns an empty string; otherwise, there is a result, and it is decoded and replaces the "+" characters with spaces, meaning in this case, if there are two names entered, like a first and last name, the name is displayed accurately (e.g., Amy Law, not Amy+Law). The second half of the JavaScript uses the function and assigns the result to the "username" variable. To ensure that the result is in the same format as the rest of the website, the username is reassigned to a "display name" variable, put uses a function to transform the result to upper case. This is then displayed on the screen (both splash and menu screen) using the getElementById method and displays the message and name on the screen.
​
The menu screen is displayed after the splash screen, and displays the three games, which will load the corresponding game when the user clicks on. When the user hovers over the game's thumbnail, a gif of the game being played is shown. Giving the user an insight into what the game is before they click to proceed and play the game. Each gif is created by using a video recording of the game. The video below shows the project running.
To make the website more interactive, an effect is enabled when mouse movement is detected. Using JavaScript, shown below, the mouse is assigned several colours, and the location of the mouse is found. A constructor function is created for effect, a draw method is added to the effect prototype. This is updated in correlation with the mouse position and movement direction. The mouse interactivity is calculated, and an array created. When the page and mouse are active, the animation occurs, with the shapes size dependant on when the mouse is in a set position.
​
In terms of controls, the project makes use of the mouse and keyboard, predominantly the keypad. Use the mouse to navigate the site; on the menu section, a mouse effect created using JavaScript. On the first screen, the keyboard will need to insert the name input to gain access to the game menu. All three games are controlled uses the arrows on the keypad. Before each game, the instructions are displayed on a splash screen before the game is loaded.
PONG GAME
The first game developed was an arcade classic called Pong. Pong is a table tennis-themed arcade sports game that features two-dimensional graphics. The image above shows the thumbnail, designed using Adobe Photoshop, used on the menu screen to indicate where to click to access the game. Each thumbnail was designed to incorporate the game element; in this case, both paddles and ball are featured to form the word "Pong".
​
This game uses a basic concept of two 2D paddles on opposing sides with a single ball, making it the perfect game to gain future development skills. Pong can be created using different versions of JavaScript, but for this development, HTML5 Canvas offered elements to draw graphics using several methods, such as boxes, circles and text. For this game, the user will be first prompted with a splash screen displaying how to play the game. To begin the game, any key can be pressed and to control the player paddle, press the up and down arrows on the keypad to perform the corresponding action.
​
When loaded, the HTML <canvas> element draws the graphics on the web page; a background, player paddle, opponent paddle, ball, court and scoreboard is drawn. Once the player has pressed a key, the game will begin by spawning a ball towards the opponent's side. The opponent uses a simple form of artificial intelligence to detect the direction that the ball is heading. When a player fails to return the ball, the score is increased by one for the opposing side, and the ball is respawned towards the losing side. The game runs until either the player or opponent have 7 points or game sets, and the game loop is reloaded. To exit the game, click the back button, and this will turn the user to the menu screen.
SHIP GAME
The second game developed was a continuation of HTML5 Canvas but offered a more complex development using different aspects of JavaScript. The game is a classic twist on a classic racing game, which incorporates maintaining a balance of an object. The development began with trying to create a bike racing game, like the Trials game series, but quickly developed into a ship-themed game, intending to escape an island over the waves while keeping the ship balanced. The image above shows the thumbnail for the game displayed on the menu screen. This was designed using Adobe Photoshop and includes the image for the ship used in the actual game.
​
Like all of the games, the user will first have the instructions displayed on a splash screen before the game begins. As shown in the video below, the user will use the keypad to manoeuvre the ship to play the game. To accelerate the ship, the user uses the up arrow and the down arrow to decelerate. When the ship moves over the waves, this impacts the ship's rotation, so the user uses the right arrow to tilt the ship forwards and the left arrow to tilt backwards. The game begins immediately after the splash screen.
Using the canvas element, a lerp is used to create curves, used for the hills, land and waves. This is done by using the "c.getContext("2d"), which is assigned to a variable. This variable is then used to draw/set the background, hills, land and sea. The JavaScript below shows the code for the creation of the sea element of the game. The game aims to last as long as possible without tipping the ship as the user navigates the "waves". These "waves" cause the ship to rotate both forwards and backwards. If the ship tips over, it will spin out until it reaches the left side of the page. At the end of the game, an alert is displayed, showing the players final score. When the close button is pressed, the game loop will restart. The function for the end of a game is called when the ships x position is less than 0, meaning that the ship has tipped over. The video below shows the game working.
BREAKER GAME
The final game developed is the most complex and most prolonged development of the three games. The idea for this game was to create a new version of the game Brick Breaker, which is a famous single-player video game, where a player must smash the ball into a wall of bricks, which is then deflected off based in the opposite direction of the hit. Instead of just recreating the famous game, for this development, the goal was to modernise it and create a game with the same principles but with a new look. During research into how this could be achieved, the idea of using randomised shapes with a form of animation was found. Unlike the other games, it does not use HTML5 canvas. This game was developed using the p5.js library, a client-side JS platform for further creativity with developments and a library that can be any JavaScript code that extends or adds to the p5.js core functionality. The p5.js, p5.sound.js and p5.dom.js are the libraries used for this game. The p5.sound library extends p5 with web audio functionality, and p5.dom allows for document object model elements to be added. These are core libraries and a part of the p5.js distribution, while contributed libraries are developed, owned, and maintained by members of the p5.js community.
​
The image above shows the thumbnail for this game, designed using Adobe Photoshop displayed on the menu screen. The image was created using actual shapes created in the game to spell out the name "Breaker" and the ball and player paddle.
​
Once again, the user will first have the instructions displayed on a splash screen before the game begins. The user will use the keypad to move the player paddle to play the game. The right and left arrows are used to move the player to either side of the screen. The starter screen for the game will appear after this splash screen. The start screen, which displays the random layout of objects that have been created and informs the user to press the enter key to begin playing. When enter is pressed, the ball is immediately dropped, and the game begins.
​
As stated previously, this was the most significant development of the three games. Each key game element is separated into five JavaScript files to ensure that the code was easier to edit and modify instead of being in one file. In the objects file, the functions to create the shapes is located. Each shape is created at random, with the number of sides being randomly selected between three to seven and the shape's size. A rotation animation is added to the shapes to increase the difficulty of hitting them slightly and improve the game's look. The player file contains the code for the player, precisely the appearance of the paddle as well as its speed and boundaries. The function for the ball is located in the ball file. The function is used to control the balls, position, size, appearance, and boundaries, ensuring it does not go off the screen. The file also contains the ball function for when it hits a player of the object. To further add to the look of the game, a shadow effect is added to the ball. Finally, the main JavaScript file for this development is the game file, which contains the set-up and function to play the game. It uses the JavaScript files mention previously, combines and draws the corresponding element to the game screen. Whilst the user is playing the game, functions within this file are continually waiting to perform the required event, such as restarting when the player fails to hit the ball, removing shape when hit and determining if the player has won. Most importantly, this file contains the function for keypresses so that the user can move the paddle and play the game.
​
When the player has won, the userWin variable is set to true, and the text "YOU WIN!" is displayed. The ball and paddle become stationary, and the instruction to press enter to play again is displayed once more. Initially, when the player won, only the game element was frozen, and text was displayed, but this looked boring and needed some form of effect to enhance the user experience. After researching potential effects, an idea of creating a confetti cannon that would swirl around the screen was developed. This was achieved by randomly creating small rectangle elements that fall from the top of the screen, with a slight rotation creating the swirl effect. The video below shows the game working.
The videos displayed throughout show the website running using Servez. Code available to view on my Github account.
MINOR PORTFOLIO PROJECTS
Throughout University, I complete a number of small tasks and projects to explore different aspects of website development. These can be viewed by clicking the link below.