标签：style blog http io color ar os java sp
作为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>
碰撞的计算有点麻烦，仔细画下图就好了~
标签：style blog http io color ar os java sp
原文地址：http://www.cnblogs.com/bigbigsunrise/p/4069316.html
