canvas_17 下落的小鸟

2022-01-08 10:33:27 阅读：133 来源： 互联网

标签：24 canvas 20 dropFno 17 ctx 小鸟 var

效果图：

 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>

标签：24,canvas,20,dropFno,17,ctx,小鸟,var
来源： https://www.cnblogs.com/luwei0915/p/15777649.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

canvas_17 下落的小鸟