【整理】HTML5游戏开发学习笔记（3）- 抛物线运动

1.预备知识
(1)Canvas旋转的实现过程

			window.onload = function(){

				var ctx = document.getElementById(‘canvas1‘).getContext(‘2d‘)

				//旋转
				ctx.save()
				ctx.translate(200,200)//把（200，200）点作为临时的（0，0）点
				ctx.rotate(30*Math.PI/180)//顺时针旋转30度所对应的弧度
				ctx.fillRect(0,0,100,150)
				ctx.restore()

			}

(2)抛物线运动中的重力加速度的模拟实现模型

			/*
				抛物线运动
				这个版本做了修改，为了减少一次角度和弧度之间的转换计算（通过Math.atan2可以直接算出弧度），
				构造参数中的角度改成了弧度
				deleted:
				angle = angle,								//初始角度
				radians = angle*Math.PI/180,	//初始弧度

				object ParabolicMotion
					@velocity:初始速度
					@radians:初始弧度
					@gravity:初始加速度{x:0,y:2}
			*/
			function ParabolicMotion(velocity,radians,gravity){
				var velocity = velocity,
						radians = radians,
						gravity = gravity	 

				var offsetX = velocity*Math.cos(radians),
						offsetY = -velocity*Math.sin(radians)

				function next(offset,gravity){
					var offset1 = offset
					var offset2 = offset+gravity

					return {offset:offset2,dv:(offset1+offset2)*.5}
				}

				return {

					/*
						获取运动轨迹到下一个时间点，x,y轴所偏移的距离
					*/
					moveNext : function(){
						var offsetXD = next(offsetX,gravity.x)
						var offsetYD = next(offsetY,gravity.y)

						offsetX = offsetXD.offset
						offsetY = offsetYD.offset

						//console.log(offsetX+‘,‘+offsetY)

						return {x:offsetXD.dv,y:offsetYD.dv}
					}

				}
			}

2.实现思路
涉及的对象，包括球(Ball)，弹弓(Slingshot)，抛物线运动(ParabolicMotion)。
操作过程是，鼠标键按下拖拽小球，和弹弓的作用点成一定的角度，鼠标键按起后，小球做抛物线运动

3.主要代码

			/*弹弓*/
			function Slingshot(){

				var opts,
						ctx,
						crtBall,
						ballSelected = false

				function refresh(){
					ctx.clearRect(0,0,opts.width,opts.height)

					drawSling()
					crtBall.draw()
				}

				function drawSling(){
					var point = opts.actionPoint

					ctx.beginPath()
					ctx.moveTo(point.x,point.y)
					ctx.lineTo(point.x,opts.height)
					ctx.closePath()
					ctx.stroke()

					if(crtBall!=null&&ballSelected){
						//绘制连接球和弹弓的"橡皮筋"
						ctx.beginPath()
						ctx.moveTo(point.x,point.y)
						ctx.lineTo(crtBall.x,crtBall.y)
						ctx.closePath()
						ctx.stroke()
					}
				}

				function isBallSelected(offsetX,offsetY){
					var point = opts.actionPoint
					var a = Math.abs(point.x-offsetX)
					var b = Math.abs(point.y-offsetY)
					//var c = Math.sqrt(a*a+b*b)

					return (a*a+b*b)<=crtBall.radius*crtBall.radius
				}

				// 添加拉弹弓事件
				function initEvents(){
						var canvas = opts.canvas
						/*
							addEventListener函数的第3个参数，
							false表示内层元素事件先触发，ture则表示外层的事件先触发

							alert(e.offsetX+‘,‘+e.offsetY)
							必须使用offsetX，offsetX是相对于canvas画布的距离(但firefox不支持)

							事件参数e没有考虑浏览器兼容问题
						*/
						canvas.addEventListener(‘mousedown‘,function(e){
							// 判断球是否被选中
							ballSelected = isBallSelected(e.offsetX,e.offsetY)

							if(ballSelected){
								crtBall.locate(e.offsetX,e.offsetY)
								refresh()
							}
						},false)

						canvas.addEventListener(‘mousemove‘,function(e){
							if(ballSelected){
								crtBall.locate(e.offsetX,e.offsetY)
								refresh()
							}
						},false)

						canvas.addEventListener(‘mouseup‘,function(e){
							if(ballSelected){
								ballSelected = false

								crtBall.locate(e.offsetX,e.offsetY)
								refresh()			

								//发射炮弹
								fire(function(x,y){
									//TODO 判断是否打中目标

								})
							}
						},false)
				}

				function fire(onCompleted){
					// 获取当前的炮弹发射速度和弧度
					var velocity = ($.square(opts.actionPoint.y-crtBall.y)+$.square(opts.actionPoint.x-crtBall.x))/100
					var radians = -Math.atan2(opts.actionPoint.y-crtBall.y,opts.actionPoint.x-crtBall.x)//30*Math.PI/180
					var gravity = {x:0,y:2}

					var parabolicMotion = new ParabolicMotion(velocity,radians,gravity)
					var completed = false

					var timer =	setInterval(function(){
						// 在当前抛物线轨迹下，获取炮弹下一次单位时间内x,y轴需要偏移的单位长度
						var offset = parabolicMotion.moveNext()

						crtBall.move(offset.x,offset.y)
						refresh()

						// 检查是否超出画布边界
						completed = (crtBall.x>=opts.width||crtBall.y>=opts.height)

						if(completed){
							clearInterval(timer)

							if(typeof onCompleted==‘function‘){
								onCompleted(crtBall.x,crtBall.y)
							}
						}
					},100)
				}

				return {

					init : function(options){
						opts = $.extend(options,{
							canvas : null,//画布
							width : 1000,//画布长
							height : 300,//画布高
							actionPoint : {x:150,y:200}/*作用力点坐标*/
						})

						ctx = opts.canvas.getContext(‘2d‘)
						drawSling()

						// 添加拉弹弓事件
						initEvents()

						return this
					},

					loadBall : function(ball){
						var point = opts.actionPoint

						crtBall = ball.init({ctx:ctx,x:point.x,y:point.y})
													.draw()

						return this
					}

				}
			}

			// app
			window.onload = function(){

				var canvas = document.getElementById(‘canvas1‘)
				var ball = new Ball(10)
				var slingshot = new Slingshot().init({canvas:canvas})			

				// 装载一个炮弹
				slingshot.loadBall(ball)
			}

4.优化和完善
（1）需实现球打中目标物体后，目标物体进行旋转
（2）可以实现同时有多个小球发射，就像游戏里发射子弹的效果