作为刚进公司的毕业生，第一个项目便是开发html5游戏，于是网上搜寻各种有关html5的资料，把w3School中有关html5的教程通通过了一遍，发现里面的教程非常适合刚接触html5的人，作为菜鸟的我看了各种资料终于有所领会，作为游戏开发，其实就是通过JavaScript对html5 中Canvas画布进行各种处理，之后又在网上搜了一些有关html5 游戏Demo,其中有类似贪吃蛇，超级玛丽这样的，之后自己也尝试写了个Demo,是关于摇摆Rotate，伸长以及碰撞到物体检测。
先附上绳子摇摆rotate代码，过段时间再加上伸长和碰撞检测代码(在网上随便找了两张图片在代码下方)：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <canvas id="canvas"></canvas> </body> <script> // 设置定时器用来控制旋转 var interval; // 绳子摇摆的角度 var angle = 0; // 接在绳子上钩子摇摆角度 var hookAngle = 0; // 控制摇摆的变量 var i = 1; var flag = 1; // 获得画布 var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); // 获得绳子图片 var line = new Image(); line.src = "line.png"; line.width = 100; // 获得钩子图片 var hook = new Image(); hook.src = "laoshu.png"; // 定时器重复执行animate方法 function animate() { lineRotate(); clearInterval(interval); interval = setInterval("animate()", 50); } // 绳子摇摆 function lineRotate(){ if (angle > Math.PI / 2) { flag = -1; } else if (angle < 0){ flag = 1; } if (flag == 1) { i = 1; } else { i = -1; } angle += i*Math.PI / 180; draw(); } //画图 function draw() { context.clearRect(0,0,canvas.width, canvas.height); context.translate(0,0); context.save(); context.rotate(angle); context.drawImage(line, 0 , 0, line.width, line.height); context.save(); context.translate(line.width + hook.width / 2, hook.height / 2); context.rotate(-angle); context.drawImage(hook, -hook.width / 2, -hook.height / 2); context.restore(); context.restore(); } </script> </html>
line.png: 
laoshu.png: 
