html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div class="disp">
<p class="p">Score <span class="score">0</span></p>
<img class="bird" src="https://i.gifer.com/origin/39/3933c213d43ed004e381fefdb9ec0605_w200.gif">
<div class="pipe">
<div class="hole"></div>
</div>
</div>
<div class="gameover">
<h2>GAME OVER !!</h2>
<p>Try again</p>
<p class="sco">Score : <span class="scor"></span></p>
<button class="butt">Play</button>
</div>
</body>
</html>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
*{
padding:0;
margin:0;
box-sizing:border-box;
}
body {
background: black;
}
.disp{
height:550px;
width:360px;
background: #ddd;
display:;
overflow:hidden ;
position:relative ;
display:block;
}
.bird{
height:80px;
width:80px;
position:absolute ;
top:100px;
z-index:10;
border-radius:10px;
border-radius:70%;
left:30px;
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
window.onload = function (){
var gameover = document.querySelector(".gameover");
var hole = document.querySelector(".hole");
var aud1 = document.querySelector(".aud1");
var butt = document.querySelector(".butt");
var pipe = document.querySelector(".pipe");
var disp = document.querySelector(".disp");
var sco = document.querySelector(".scor");
var score = document.querySelector(".score");
//random top value
var bird = document.querySelector(".bird");
pipe.onanimationiteration = function random(){
var randomho = ((Math.random()*390)+0);
hole.style.top= randomho +"px";
sc++
score.innerHTML =sc;
sco.innerHTML = sc;
document.querySelector(".aud").play();
};
var sc=0;
var number= 0;
var gravity = 1;
var y= 1;
var fall = setInterval(()=> {
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run