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>
<title>Flappy Bird</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Permanent Marker' rel='stylesheet'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<style>
#div1 {
font-size:48px; }
body { background-color: #721bc4 ; font-family: 'Pacifico'; }
h1{ background-color: #a666e3 ; text-shadow:5px 5px 5px #dfd2ec ; text-align:center;}
canvas{ animation: mymove 5s infinite; border: 5px solid #0a3cda ; border-style:dotted; border-radius: 15px 50px; }
@keyframes mymove {
50% {box-shadow: 10px 20px 30px blue;} }
h3{ font-family:'Permanent Marker'; }
</style>
<body>
<h1><b>Flappy Bird !!! (game) <div id="div1" class="fa"></div> </b></h1>
<h3><b>If you want to have a very high score. Think out of this game !! ~_^ <hr> and tell me your high score </b></h3>
<canvas id="myCanvas" width=320 height=480
style="background:url('http://s2js.com/img/etc/flappyback.png'); background-size: 100%; height: 95% "
</canvas>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
body {
}
Enter to Rename, Shift+Enter to Preview
js
js
1
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run