So you want to use your basic knowledge of web development to create something a little cooler than a to-do app. Games are one of the best projects you can create because they are very easily enjoyed by the end user and are all around fun to make! There are JavaScript libraries that are pre-made for game development, but I prefer creating from scratch so that I can understand everything completely.
What better game to represent web development, than the Chrome dinosaur game that you play when you lose your internet connection. It’s a fun game and it’s easy to recreate the code. It doesn’t look exactly the same, but it functions the same and if you really want, when you’re done you can style it!
To begin coding the game, create a new folder in your documents. Use your favorite text editor to open that folder, then create three new files and name them: index.html
, style.css
and script.js
. It’s possible to do everything in one file with HTML5 but it’s more organized to keep everything separate.
Our index.html
file is going to be very simple, once you have a basic HTML layout, create a div
with the id
“game”, and then two more div
s inside of it with the ID “character” and “block”. The character will be the dinosaur and the block will be the cactuses coming towards us.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jump Game</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="game">
<div id="character"></div>
<div id="block"></div>
</div>
<script src="script.js"></script>
</body>
</html>
Next, go over to the CSS file and start applying styles to the two div
s we just created. First, we’ll start with the game div
. Select the element by its id
, which is represented by the hash(#) symbol.
#game{
width: 500px;
height: 200px;
border: 1px solid black;
margin: auto;
}
#html #css #javascript #game-development