1 Star2 Stars3 Stars4 Stars5 Stars (5 votes, average: 5.00 out of 5)

Make A Game CSS JavaScript and HTML

Make A Game CSS JavaScript and HTML

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.

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!

Please follow and like us:
Make A Game CSS JavaScript and HTML was last modified: November 4th, 2016 by Maximus Mccullough

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.