html5 画个球碰撞

最新推荐文章于 2021-12-21 22:37:47 发布

weixin_30430169

最新推荐文章于 2021-12-21 22:37:47 发布

阅读量145

点赞数

原文链接：http://www.cnblogs.com/lihui1030/archive/2013/05/10/3071620.html

版权

 1 <!DOCTYPE html>  
 2 <html>  
 3 <head>  
 4 <meta charset="utf-8">  
 5 <title></title>  
 6 
 7 </head>  
 8 <body>  
 9 
10 <canvas width="300px;" height="300px" id="canvas"></canvas>
11 
12 <div id="coord"></div>
13  <script type="text/javascript">
14 
15      var pos = { x: 10, y: 10 };
16      var speed = { speedX: 2, speedY: 2 };
17 
18      function Draw() {
19 
20          var canvas = document.getElementById("canvas");
21          var context = canvas.getContext("2d");
22          context.clearRect(0,0,canvas.clientWidth,canvas.clientHeight);
23          context.fillStyle = "blue";
24          context.beginPath();
25          context.arc(pos.x, pos.y, 10, 0, Math.PI * 2, true);
26          context.closePath();
27          context.fill();
28 
29          pos.x += speed.speedX;
30          pos.y += speed.speedY;
31 
32          if (pos.x > canvas.width) {
33              speed.speedX = -(Math.random() * (5 - 1) + 1);
34          }
35 
36          if (pos.x < canvas.offsetLeft) {
37              speed.speedX = (Math.random() * (5 - 1) + 1);
38          }
39 
40 
41          if (pos.y > canvas.height) {
42              speed.speedY = -(Math.random() * (5 - 1) + 1);
43          }
44          if (pos.y < canvas.offsetTop) {
45              speed.speedY = (Math.random() * (5 - 1) + 1);
46          }
47 
48          document.getElementById("coord").innerHTML = "X:" + pos.x + " Y:" + pos.y;
49      }
50      // setTimeout(Draw, 1);
51      setInterval(Draw, 1);
52 </script>
53 
54 </body>
55 </html>