If you want to create a game like Google Dino game so you can create it with a copy of given source code.
STEP 01
Create 3 files.
index.html
style.css
index.js
STEP 02
Copy this code and paste it into the index.html file or if you know about it you can paste it into any HTML file but don't forget to change or remove the link.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Game Like Google Dino | HunerOn</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body style="background-color: rgb(17, 75, 151);">
<div class="body">
<div class="heading">
<h1>Game Like Google Dino</h1>
</div>
<div class="maindiv">
<div id="counterbox">
<input type="number" value="0">
</div>
<div id="game">
<div id="chracter"></div>
<div id="block"></div>
</div>
<button onclick="jump()" id="addnum">Click to Jump</button>
<button onclick="reload()">Try Again</button>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
STEP :- 03
Copy this code and paste it into the style.css file or if you know about it so you can paste it into any CSS file but don't forget to change or remove the link.
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#game {
width: 500px;
height: 200px;
border-bottom: 2px dashed #959567;
background-color: white;
overflow: hidden;
}
#chracter {
width: 20px;
height: 50px;
background-color: red;
position: relative;
top: 150px;
}
.animate {
-webkit-animation: jump 500ms infinite;
animation: jump 500ms infinite;
}
@-webkit-keyframes jump {
0% {
top: 150px;
}
30% {
top: 100px;
}
70% {
top: 100px;
}
100% {
top: 150px;
}
}
@keyframes jump {
0% {
top: 150px;
}
30% {
top: 100px;
}
70% {
top: 100px;
}
100% {
top: 150px;
}
}
#block {
width: 20px;
height: 20px;
background-color: blue;
position: relative;
top: 130px;
left: 480px;
-webkit-animation: block 1.5s infinite linear;
animation: block 1.5s infinite linear;
}
@-webkit-keyframes block {
0% {
left: 480px;
}
100% {
left: -40px;
}
}
@keyframes block {
0% {
left: 480px;
}
100% {
left: -40px;
}
}
button {
margin-top: 10px;
width: 120px;
height: 35px;
text-transform: uppercase;
background-color: blue;
color: white;
font-weight: 600;
}
button:hover {
background-color: red;
color: white;
}
.maindiv {
width: auto;
height: auto;
border: 10px solid black;
position: absolute;
margin-top: 100px;
margin-left: 425px;
text-align: center;
background-color: white;
}
.heading {
width: 100%;
height: auto;
text-align: center;
padding-top: 20px;
}
.heading h1 {
color: white;
font-size: 50px;
text-transform: uppercase;
font-family: 'Gill Sans', 'Gill Sans MT', 'Calibri', 'Trebuchet MS', sans-serif;
}
#counterbox {
width: 500px;
height: 50px;
border: 1px solid red;
text-align: center;
text-transform: uppercase;
vertical-align: center;
font-size: 30px;
}
STEP :- 04
Copy this code and paste it into the index.js file or if you know about it so you can paste it into any JAVASCRIPT file but don't forget to change or remove the link.
var chracter = document.getElementById("chracter");
var block = document.getElementById("block");
function jump() {
if (chracter.classList != "animate") {
chracter.classList.add("animate");
}
setTimeout(function () {
chracter.classList.remove("animate")
}, 500);
}
var checkDead = setInterval(function () {
var chracterTop =
parseInt(window.getComputedStyle(chracter).getPropertyValue("top"));
var blockLeft =
parseInt(window.getComputedStyle(block).getPropertyValue("left"));
if (blockLeft < 20 && blockLeft > 0 &&
chracterTop >= 130) {
block.style.animation = "none";
block.style.display = "none";
alert("Game Over");
}
}, 10);
function reload() {
location.reload();
}
// ******************Score Counter Start****************
let btnAdd = document.querySelector('#addnum');
let input = document.querySelector('input');
btnAdd.addEventListener('click', () => {
input.value = parseInt(input.value) + 1;
})
// ******************Score Counter End****************
0 Comments