首页 > 代码库 > mymatrix

mymatrix

2024-07-30 18:15:01   212人阅读

　　作为mycircle的姊妹版本，其实现和mycircle大同小异->点击预览

 1 <!DOCTYPE html> 2 <html> 3   <head> 4     <script type="text/javascript"> 5       window.onload = function() { 6         var canvas = document.getElementById(‘myCanvas‘); 7         var c = canvas.getContext(‘2d‘); 8         var r = 20, w = 40; 9         var x = 20 * Math.sqrt(2), y = 20 * Math.sqrt(2), deg = 0;10         var addx = 1, addy = 1, adddeg = 1;11         changeColor();12         setInterval(function(){gameStart();}, 1);13 14         function gameStart() {15           judge();16           c.clearRect(0, 0, 500, 250);17           c.save();18           c.translate(x, y);19           c.rotate(Math.PI / 180 * deg);20           c.fillRect(-r, -r, w, w);21           x += addx, y += addy, deg += adddeg;22           c.restore();23         }24         25         function judge() {26           var _r = r / Math.cos(deg) + r * (1 - Math.tan(deg)) * Math.sin(deg);27           if(x + _r > 500 || x - _r < 0) 28             addx *= -1, adddeg *= -1, changeColor();29 30           if(y + _r > 250 || y - _r < 0)31             addy *= -1, adddeg *= -1, changeColor();32         }33 34         function getNum() {35           while(true) {36             var res = Math.random();37             if(res < 0.5) continue;38             return res;39           }40         }41         42         function changeColor() {43           c.fillStyle = ‘#‘ + (‘00000‘ + parseInt(getNum() * 0xffffff).toString(16)).slice(-6);44         }45       };46     </script>47   </head>48   <body>49     <canvas id=‘myCanvas‘ width=500 height=250 style=‘background-color:rgb(18,18,18); border:1px solid blue‘> </canvas>50   </body>51 </html>

　　碰撞的计算有点麻烦，仔细画下图就好了~

mymatrix


联系
我们