【整理】HTML5遊戲開發學習筆記（2）- 彈跳球

標籤：style   blog   http   color   io   os   ar   java   sp   

1.預備知識
(1)在畫布上繪製外部圖片資源
(2)梯度（gradient）：HTML5中的物件類型,包括線性梯度和徑向梯度。如createLinearGradient，繪製梯度需要顏色組
http://www.w3school.com.cn/tags/canvas_createlineargradient.asp

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 = gradientctx.fillRect(10,10,200,100)}//test2()

 

2.實現思路
整個遊戲中涉及的對象，包括運動的球(Ball)，牆壁(Box)，速度(Speed)。
同時，球必須在牆壁內部進行運動，碰到牆壁則會反彈。

當到球和牆壁碰撞的時候，運行方向會發生改變，這個改變對速度的絕對值沒有變化，而是改變速度的正負。在實現過程中，我把方向的概念合并到

了速度對象中，主要是代碼實現上的方便。

3.代碼（片段）

// Ballfunction Ball(){var opts,ctx,ballX,ballYfunction drawBall(){var ballOpts = opts.ballOptsballX = ballOpts.xballY = ballOpts.yctx.lineWidth = ballOpts.lineWidthctx.strokeStyle = ballOpts.strokeStylectx.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.canvasif(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)+offsetXif(top<boxInnerBoundry.top){ballY += top-boxInnerBoundry.topoffsetY = -offsetYdirectionChanged = true}if(right>boxInnerBoundry.right){ballX += right-boxInnerBoundry.rightoffsetX = -offsetXdirectionChanged = true}if(bottom>boxInnerBoundry.bottom){ballY += offsetY - (bottom-boxInnerBoundry.bottom)offsetY = -offsetYdirectionChanged = true}if(left<boxInnerBoundry.left){ballX+= left-boxInnerBoundry.leftoffsetX = -offsetXdirectionChanged = true}ballX += offsetXballY += 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()}}}

 

4.最佳化和完善
（1）主要還是在球和牆壁的判斷上，通過大量的IF判斷，實現得比較噁心
（2）速度實現為了類似的單例方式，不符合重用
（3）風格可以美化，加入外部圖片資源等，比如美化成足球和球場
（4）引入加速度

【整理】HTML5遊戲開發學習筆記（2）- 彈跳球