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
25
26
27
28
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Indie+Flower|PT+Sans|Raleway" rel="stylesheet">
</head>
<body>
<!-- Loading animation -->
<div id="load"></div>
<div id='contents'>
<div id='info'>
<div id='score'>
Level 0 - No rank
</div>
<div class='bottom' id='reset' onclick="resetGame()">Reset</div>
<div class='bottom' onclick="showStats()">Stats</div>
</div>
<canvas id='c'></canvas>
<div id='back'>
<div class='content' id='stats' onclick="hideStats()">
<span>Stats</span>
Highscore: 0
<br>
Badges: 0
<br><br>
You won 0 challenges
<br>
You lost 0 challenges
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
body {
padding: 0;
margin: 0;
}
canvas {
border: 5px black solid;
}
/*Loading*/
#load{
width:100%;
height:100%;
position:fixed;
border: 5px black solid;
z-index:5;
background:url("https://media.giphy.com/media/UXEFpolvTijD2/giphy.gif") no-repeat center center rgba(0,0,0,0.3)
}
/* Background for the Stats pop-up*/
#back {
position: absolute;
top: 0;
right: 25px;
bottom: 0;
left: 25px;
margin-top: 150px;
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
// Canvas and animation
var c, ctx, t;
// Bird and frames per second
var bird, ground, bonus;
var frames = 60;
var multiplier = 25;
// Flag if the user has lost and time needed to spawn a new pipe
var lost = false;
var time = 1;
// Score, level and rank variables
var score = 0;
var level = 1;
var rank = 'Bronze';
// Object that has the colour of the badge and the pipes' colours
var col = {
fill: 'peru',
stroke: 'darkkhaki'
};
var colours = ["green", "red", "purple", "indigo", "orange", "blue", "#7FFF00"];
// Messages variables
var badges = 0;
// Text object that has properties of the text that shows the bonus
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run