This game is very simple and easy to understand. I have build just now and posted here. If you are beginner on HTML, CSS and Javascript this game will teach you a lot.
Step 1: Lets create html file now:
click_winner/index.html
<!DOCTYPE html>
<html>
<head>
<title>Shooter Ball</title>
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<div class="floor">
<div id="time"></div>
<div id="score-box">Score: <strong id="score">0</strong></div>
<div id="plane" disabled>Click Me</div>
</div>
<script src="js/script.js"></script>
</body>
</html>
Step 2:
Create CSS file on css folder now
click_winner/css/style.css
width:500px;
margin:auto;
background:green;
height:100vh;
}
#time, #score-box{
color:#fff;
padding:5px 10px;
}
#plane{
border-radius: 50%;
padding: 10px;
height:50px;
width: 50px;
background:red;
text-align:center;
color:#fff;
box-shadow: 10px 10px 60px 0px rgba(0,0,0,0.75);
-webkit-box-shadow: 10px 10px 60px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 60px 0px rgba(0,0,0,0.75);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor:pointer;
}
Step 3:
Create a script file as well now in javascript.
click_winner/js/script.js
var pl = document.getElementById('plane');
//make a gravity for Plane;
var x =0;
var y=0;
var score = 0;
var timer_start = setInterval(makeMove, 10);
function makeMove(){
x++;
y++;
pl.style.transform = "translate("+ x +"px"+","+ y+"px)";
if(y >= 200){
x = Math.floor(Math.random()*300);
y = Math.floor(Math.random()*300);
}
}
pl.onclick = ()=>{
score++
document.getElementById('score').innerHTML = score;
}
var time = 0;
setInterval(()=>{
time++;
document.getElementById('time').innerHTML = time + " Seconds left";
if(time == 60){
clearInterval(timer_start);
alert("Time Off. Restart the game again..")
}
}, 1000);
Conclusion
I hope you guys enjoyed my simple game. If you learned something new today. You can check out the source code here.
Thank you!
Top comments (0)