A casual eli5 tutorial with a $200 merch giveaway challenge.
Make 3 files:
script.js, index.html, and style.css
Copy basic HTML boilerplate:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Game</title>
</head>
</html>
Link stylesheet (in <head>) & JavaScript (in <html>) file by adding:
<link rel="stylesheet" href="style.css">
&
<script src="script.js"></script>
Time to make the actual game!
We start by making a body with a div.
This div contains the entire game and has 2 smaller divs inside of that one containing our character and a block.
All of this is positioned inside of our <HTML> tag
<body>
<div id="game">
<div id="character"></div>
<div id="block"></div>
</div>
</body>
We start with some basic styling.
This takes care of any browser default padding or margins and we can start our design fresh from 0.
*{
padding: 0;
margin: 0;
}
Then we head over to the game div.
Add some styles so we can see it.
#game{
width: 500px;
height: 200px;
border: 1px solid black;
}
This is a good time to start our live server and take a look at what’s happening.
How to install the live server.
Skip this section if you have one already.
Click extensions.
Type “live server” into the search bar and install it
Click on the tiny “Go Live” button at the very bottom right of your VSC editor and your server should be live!
Back to the CSS file
Create the character by adding some styles to the character div.
#character {
width: 20px;
height: 50px;
background-color: red;
}
Let’s put the character at the bottom of the box.
position: relative;
top: 150px;
The box is 200 pixels and our character is 50px, so we need to put it down by 150px to put it at the very bottom.
Let’s move on to our block.
#block{
width: 20px;
height: 20px;
background-color: blue;
position: relative;
top: 130px;
left: 480px;
}
This time we push it all the way to the right.
To make our character slide towards the block, we create an animation and add it to the block.
#block{
width: 20px;
height: 20px;
background-color: blue;
position: relative;
top: 130px;
left: 480px;
animation: block 1s;
}@keyframes block {
0%{left:480px;}
100%{left:-40px;}
}
To make the animation repeat, we add infinite to animation
animation: block 1s infinite;
Woops, the screen recorder went for the entire tab. Ah well, it will do.
It kind of zips across. Let’s add linear too.
animation: block 1s infinite linear;
Now for the jumping, we create a second animation in which we make the box jump to the top.
We set it to 30 and 70%. This make make it jump up, hover a bit, and then go back down.
@keyframes jump{
0%{top: 150px;}
30%{top: 100px;}
70%{top: 100px;}
100%{top: 150px;}
}
Just like we did with block, we add the animation to our character.
animation: jump 500ms infinite;
We want to control the jump.
More specifically we want it to jump when we call the JavaScript function we are about to make.
More more specifically we run a function that ads the class to our character,
making it jump, and then it removes the class again, so it stops. Let’s start with the class.
.animate{
animation: jump 500ms;
}
We start by making two variables to access our character and block.
let character = document.getElementById("character")
let block = document.getElementById("block")
Now let’s make the aforementioned jump function.
function jump() {
character.classList.add("animate")
}
Sorry for the illusion that we are done with HTML. We kind of are, but we do need to add a few “linkers” to our new stuff. That’s it though, promise.
To run our function, we need to add an onClick to our index (the HTML file).
<html lang="en" onclick = "jump()">
For this to work, we need to remove our original jump automation so it doesn’t override our new one.
Remove the following line:
animation: jump 500ms ;
It jumps! But only on our first click.
We fix this by:
- We set an interval
- running a function (after 500ms, the animation length)
This removes the class once the animation is done.
In code:
setTimeout(function(){
character.classList.remove("anime")
}, 500)
setTimeout(function(){
character.classList.remove("anime")
}, 500)
Now our character jumps every time we click, not just the first time.
Little fix needed: we don’t want the class to be added if it was already added. Otherwise our browser will get bloated with hundreds of lines of our class.
We wrap our classList.add with some if-else code:
if (character.classList != "animate") {
character.classList.add("animate")
}
All that’s left is adding collisions for when we don’t dodge the block with a jump.
For this, we will make a function that runs every 10ms and checks if you lost or not.
var checkDead = setInterval(function(){},10)
Now we fetch the top position of the character and the left position of the block.
We set an interval running our function (every 10ms). We put that in a variable and parsed as an integer, so the parsing returns the number and not a string like 69px.
var checkDead = setInterval(function(){
var characterTop =
parseInt(
window.getComputedStyle(character)
.getPropertyValue(“top”))
},10)
This will return the top position of our character.
In other words, the top position of our character right now is 50. When I click, it goes up to 100 and then back to 50.
In other other words: function checks if the character is up or down.
Now we do the same for our block, the enemy.
var checkDead = setInterval(function(){ var characterTop =
parseInt(
window.getComputedStyle(character)
.getPropertyValue("top")) var blockLeft =
parseInt(
window.getComputedStyle(block)
.getPropertyValue("left"))},10)
Now time for the actual check.
If the blockLeft is smaller than 20,
and bigger than zero,
and there is more than 130px space above the character (meaning it didn’t jump),
the player loses.
if(blockLeft<20 &&
blockLeft>0 &&
characterTop>=130){
alert("caught")
}
We also want to remove the block’s animation, so it doesn’t continue after the player has been caught with this one line.
if(blockLeft<20 &&
blockLeft>0 &&
characterTop>=130){
block.style.animation = "none
alert("caught")
}
Done!
If you have read this far I have something for you!
I am giving away $200 worth of Lambda merchandise if you can answer the following question:
You still have to reload the page to play a new game, how can we fix this? (with code)
Challenge will run until the end of October or until the first person enters! (I’m assuming it could take a while, I have about 2 followers on right now).