1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 body {
8 margin: 0;
9 padding: 0;
10 }
11
12 #game {
13 width: 800px;
14 height: 600px;
15 border: 1px solid #000;
16 background: url(images/sky.png);
17 overflow: hidden;
18 position: relative;
19 }
20
21 #game .pipeD {
22 background: url(images/pipe1.png) top center;
23 position: absolute;
24 }
25
26 #game .pipeU {
27 background: url(images/pipe2.png) bottom center;
28 position: absolute;
29 }
30
31 #bird {
32 width: 34px;
33 height: 26px;
34 /*border-radius: 10px;*/
35 /*background-color: red;*/
36 position: absolute;
37 top: 100px;
38 left: 100px;
39 background: url(images/birds.png) -8px -10px no-repeat;
40 }
41
42 </style>
43 </head>
44 <body>
45 <div id="game">
46 <div id="bird"></div>
47 </div>
48 </body>
49 </html>
50 <script>
51 var game = document.getElementById("game");
52 var birdEle = document.getElementById("bird");
53 var gameover = false;
54 var g = 1;
55
56 var sky = {
57 position: 0
58 }
59
60 var bird = {
61 entity: birdEle,
62 speedX: 5,
63 speedY: 5,
64 x: birdEle.offsetLeft,
65 y: birdEle.offsetTop
66 }
67
68 function Pipe(position) {
69 this.x = position;
70
71 this.width = 52;
72 this.upPipeY = 0;
73 this.upPipeH = parseInt(Math.random() * 175) + 100;
74 this.downPipeY = this.upPipeH + 200;
75 this.downPipeH = 600 - this.downPipeY;
76
77 var divUp = document.createElement("div");
78
79 divUp.className = "pipeU";
80 divUp.style.left = this.x + "px";
81 divUp.style.top = this.upPipeY + "px";
82 divUp.style.width = this.width + "px";
83 divUp.style.height = this.upPipeH + "px";
84 var divDown = document.createElement("div");
85 divDown.className = "pipeD";
86 divDown.style.left = this.x + "px";
87 divDown.style.top = this.downPipeY + "px";
88 divDown.style.width = this.width + "px";
89 divDown.style.height = this.downPipeH + "px";
90
91 game.appendChild(divUp);
92 game.appendChild(divDown);
93
94 var _this = this;
95 setInterval(function () {
96 _this.x -= 1;
97 if (_this.x < -52) {
98 _this.x = 800;
99 }
100 if (!gameover) {
101 divUp.style.left = _this.x + "px";
102 divDown.style.left = _this.x + "px";
103 }
104 var clsUp = (bird.x + 34 > _this.x) && (bird.x < _this.x + 52) && (bird.y < _this.upPipeH);
105 var clsDown = (bird.x + 34 > _this.x) && (bird.x < _this.x + 52) && (bird.y + 26 > _this.downPipeY);
106 if (clsUp || clsDown) {
107 gameover = true;
108 }
109 }, 10)
110 }
111
112 setInterval(function () {
113 if (!gameover) {
114 bird.speedY = bird.speedY + g;
115 bird.y = bird.y + bird.speedY;
116 if (bird.y > 574) {
117 bird.y = 574;
118 gameover = true;
119 }
120 if (bird.y < 0) {
121 bird.y = 0;
122 gameover = true;
123 }
124 bird.entity.style.top = bird.y + "px";
125 sky.position -= bird.speedX;
126 game.style.backgroundPositionX = sky.position + "px";
127 }
128 }, 25)
129
130 document.onmousedown = function () {
131 bird.speedY = -10;
132 }
133
134 for (var i = 0; i < 4; i++) {
135 new Pipe(400 + 800 / 4 * i);
136 }
137 </script>