【整理】HTML5游戏开发学习笔记（2）- 弹跳球

function test1(){
				//在画布上绘制外部图片资源
				var ctx = document.getElementById(‘ballCanvas‘).getContext(‘2d‘)
				var image =new Image()
				image.src = ‘football.jpg‘

				ctx.drawImage(image,0,0,360,300)
			}
			//test1()

			function test2(){
				/*
				梯度（gradient）：HTML5中的对象类型,包括线性梯度和径向梯度。如createLinearGradient，
				绘制梯度需要颜色组
				http://www.w3school.com.cn/tags/canvas_createlineargradient.asp
				*/
				var ctx = document.getElementById(‘ballCanvas‘).getContext(‘2d‘)
				var gradient = ctx.createLinearGradient(10,10,200,10)
				var hue = [‘#FFF‘,‘#F00‘,‘#000‘]

				gradient.addColorStop(0,hue[0])
				gradient.addColorStop(0.5,hue[1])
				gradient.addColorStop(1,hue[2])

				ctx.fillStyle = gradient
				ctx.fillRect(10,10,200,100)
			}
			//test2()

			// Ball
			function Ball(){
				var opts,
						ctx,
						ballX,
						ballY

				function drawBall(){
					var ballOpts = opts.ballOpts
					ballX = ballOpts.x
					ballY = ballOpts.y

					ctx.lineWidth = ballOpts.lineWidth
					ctx.strokeStyle = ballOpts.strokeStyle
					
					ctx.beginPath()
					ctx.arc(ballX,ballY,ballOpts.radius,0,2*Math.PI,false)
					ctx.closePath()
					ctx.stroke()
				}

				return {

					init : function(options){
						opts = $.extend(options,{
							canvas : null,
							ballOpts : {
								x : 100,
								y : 100,
								radius : 50,
								lineWidth : 1,
								strokeStyle : ‘#000‘
							}
						})

						var canvas =	opts.canvas

						if(canvas==null){
							alert(‘canvas is null.‘)
							return
						}


						ctx = canvas.getContext(‘2d‘)
						drawBall()

						return this
					},			

					/*
						beginMove
							@return:void
							@speed:{offsetX:0,offsetY:0}
							@box:Box instance
					*/
					beginMove : function(speed,box){
						box.refresh()

						var boxSize = box.getSize(),
								ballOpts = opts.ballOpts,
								offsetX = speed.offsetX,
								offsetY = speed.offsetY,
								directionChanged = false
								
						// 判断球ball是在盒子box内边框（上,右,下,左）内
						var boxInnerBoundry = {	top:boxSize.y+boxSize.lineWidth,
																		right:boxSize.x+boxSize.lineWidth+boxSize.width,
																		bottom:boxSize.y+boxSize.lineWidth+boxSize.height,
																		left:boxSize.x+boxSize.lineWidth }

						var top = (ballY-ballOpts.radius-ballOpts.lineWidth)+offsetY,
								right = (ballX+ballOpts.radius+ballOpts.lineWidth)+offsetX,
								bottom = (ballY+ballOpts.radius+ballOpts.lineWidth)+offsetY,
								left = (ballX-ballOpts.radius-ballOpts.lineWidth)+offsetX

						if(top<boxInnerBoundry.top){
							ballY += top-boxInnerBoundry.top
							offsetY = -offsetY

							directionChanged = true
						}

						if(right>boxInnerBoundry.right){
							ballX += right-boxInnerBoundry.right
							offsetX = -offsetX

							directionChanged = true
						}

						if(bottom>boxInnerBoundry.bottom){
							ballY += offsetY - (bottom-boxInnerBoundry.bottom)
							offsetY = -offsetY

							directionChanged = true
						}						

						if(left<boxInnerBoundry.left){
							ballX	+= left-boxInnerBoundry.left
							offsetX = -offsetX

							directionChanged = true
						}

						ballX += offsetX
						ballY += offsetY

						/*
						必须变更当前速度speed,因为在定时器中传入的速度speed是个常量，
						而实际运动中速度（用加号和减号来表示的方向是会改变的）
						*/
						if(directionChanged){
							speed.changeSpeed(offsetX,offsetY)
						}

						//alert(ballOpts.x+offsetX+‘-‘+ballOpts.y+offsetY)

						ctx.beginPath()
						ctx.arc(ballX,ballY,ballOpts.radius,0,2*Math.PI,false)
						ctx.closePath()
						ctx.stroke()
					}

				}				
			}