This is a tutorial on how to make a game with CSS, JavaScript and HTML. Making games are fun and they are not that hard to do. The object of this game is to shoot the objects and make them stop. We have some cool sound effects that we are loading into this as well. The game below is what we are going to code.
Link to game here.
HTML Code For Game Page
This is the HTML for the game page. Notice we included the link to the external stylesheet. We also included an external javascript page. On the page we also included our audio files that we will be using for the game. We want them to load on startup so they can be called when they are needed.
<html>
<head>
<title>My Game</title>
<link href="style.css" type="text/css" rel='stylesheet' />
</head>
<body onLoad="siren()">
<div id="canvas" onClick="shot()">
<div id="circle" onClick="stop(), play()"></div>
<div id="circletwo" onClick="stoptwo(), play()"></div>
</div>
<button onClick="go(), siren()">Reset</button>
<audio id="audio" src="yaa.mp3" ></audio>
<audio id="shot" src="shot.mp3" ></audio>
<audio id="siren" src="siren.mp3" ></audio>
<script src="js.js" type="text/javascript" /></script>
</body>
</html>
Our Style Sheet For Our Game
The stylesheet for our game is pretty easy as well. Basically this is where we animate the objects. We make our objects change shape and color. We also make them move within the canvas to one side or the other.
body{
}
#canvas{
position:relative;
width:90%;
height:500px;
background-color:tan;
display:block;
margin:0 auto;
cursor:crosshair;
-webkit-animation-name: bggg;
animation-name:bggg;
-webkit-animation-duration: 2s;
animation-duration: 2s;
animation-iteration-count: infinite;
}
@-webkit-keyframes bggg {
}
@keyframes bggg {
0% {background-color:red; }
25% {background-color:yellow; }
50% {background-color:pink; }
75% {background-color:blue; }
100% {background-color:black;}
}
#circle{
position:relative;
width:20px;
height:20px;
border-radius:100%;
-webkit-animation-name: animatecircle;
animation-name:animatecircle;
-webkit-animation-duration: 1s;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#circle:hover{
background-color:red;
}
@-webkit-keyframes animatecircle {
}
@keyframes animatecircle {
0% {background-color:orange; left:0px; top:0px;}
25% {background-color:yellow; left:20%; top:90%; width:60px; height:60px;}
50% {background-color:pink; left:50%; top:0; border-radius:10%; border:solid #000 5px; width:20px; height:20px;}
75% {background-color:blue; left:70%; top:90%; width:60px; height:60px;}
100% {background-color:black; left:90%; top:0;}
}
#circletwo{
position:relative;
width:20px;
height:20px;
border-radius:100%;
-webkit-animation-name: animatecircletwo;
animation-name:animatecircletwo;
-webkit-animation-duration: 2s;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#circletwo:hover{
background-color:#666;
}
@-webkit-keyframes animatecircletwo {
}
@keyframes animatecircletwo {
0% {background-color:orange; left:90%; top:90%;}
25% {background-color:red; left:20%; top:0; width:60px; height:60px;}
50% {background-color:pink; left:50%; top:90%; border-radius:10%; border:solid #000 5px; width:20px; height:20px;}
75% {background-color:blue; left:20%; top:0%; width:60px; height:60px;}
100% {background-color:black; left:0; top:90%;}
}
Our JavaScript for Our Game
The JavaScript for our game is simple as well. Basically we are using get element by id and making something happen. In the HTML code above we are calling those functions when certain div are hit with the cursor.
function blood(){
document.getElementById("circle").style.cursor = "url('tt.gif'), auto";
}
function bloodd(){
document.getElementById("circletwo").style.cursor = "url('tt.gif'), auto";
}
function stop(){
document.getElementById("circle").style.webkitAnimationPlayState="paused";
}
function stoptwo(){
document.getElementById("circletwo").style.webkitAnimationPlayState="paused";
}
function go(){
document.getElementById("circle").style.webkitAnimationPlayState="running";
document.getElementById("circletwo").style.webkitAnimationPlayState="running";
}
function splat(){
document.getElementById("circle").style.webkitAnimationPlayState="running";
}
function play(){
var audio = document.getElementById("audio");
audio.play();
}
function shot(){
var audio = document.getElementById("shot");
audio.play();
}
function siren(){
var audio = document.getElementById("siren");
audio.play();
}
Here are the
Complete game files for you to download and experiment with. Enjoy!
