效果图：
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 <meta name="viewport" content="width=device-width, initial-scale=1.0">
8 <title>Canvas</title>
9 <style>
10 * {
11 margin: 0;
12 padding: 0;
13 }
14
15 html,
16 body {
17 height: 100%;
18 }
19
20 canvas {
21 background-color: #EEEEEE;
22 }
23 </style>
24 </head>
25
26 <body>
27
28 <canvas id="canvas"></canvas>
29
30 <script>
31 var canvas = document.querySelector("#canvas");
32 var ctx = canvas.getContext("2d");
33 canvas.width = window.innerWidth;
34 canvas.height = window.innerHeight;
35
36 var x = 200;
37 var y = 100;
38 // 总帧
39 var fno = 0;
40 // 下落的帧
41 var dropFno = 0;
42 var deg = -0.6;
43 var isClick = false;
44 var image = new Image();
45 // size: 48 * 48
46 image.src = "../static/images/bird0_0.png";
47 image.onload = function() {
48 setInterval(function() {
49 ctx.clearRect(0, 0, canvas.width, canvas.height);
50 fno++;
51 deg += 0.03
52 ctx.font = "20px 微软雅黑";
53 ctx.fillText(fno, 10, 30);
54
55 // 鼠标没有点击，*落体
56 if (!isClick) {
57 y += 0.4 * dropFno;
58 } else {
59 // 鼠标点击，速度反向，上升20帧
60 y -= 0.4 * (20 - dropFno);
61 if (dropFno > 20) {
62 isClick = false;
63 dropFno = 0;
64 }
65 // 不能上升到屏幕外
66 if (y < 0) {
67 y = 0;
68 }
69 }
70 dropFno++;
71 ctx.save();
72
73 // 不管上升还是下降，都要旋转(俯冲)
74 ctx.translate(x + 24, y + 24);
75 ctx.rotate(deg);
76 ctx.fillText(dropFno, -24, -24);
77 ctx.drawImage(image, -24, -24);
78 ctx.restore();
79 }, 20)
80 }
81
82 // 鼠标点击，小鸟方向直接回正，重新计算加速度
83 canvas.onclick = function() {
84 isClick = true;
85 dropFno = 0;
86 deg = -0.6;
87 }
88 </script>
89 </body>
90
91 </html>