這邊想再單獨和大家分享一下有關(guān)虛擬搖桿的開發(fā)經(jīng)驗，因為覺得這個功能還是很實用和用途廣泛的！

效果：

運行地址：
http://h5demo.yyfuncdn.com/res/gameDemo/Pokemon/game.html

搖桿顯示：

因為制作該游戲使用了 pixi 框架，所以需要利用 PIXI.Graphics() 方法繪制兩個圓就可以了，一大一小，大圓為移動背景，給與一個顏色和透明度，默認(rèn)隱藏即可，下面是繪制一個按鈕移動背景圓的代碼：

var rockerbg = new PIXI.Graphics();//繪制搖桿背景rockerbg.lineStyle(0);//外邊框?qū)挾葹?rockerbg.beginFill(0x000000, 0.3);//背景色 透明度var radius = 0;//半徑if(phoneWidth > phoneHeight)radius = phoneWidth/10;else radius = phoneHeight/10;rockerbg.drawCircle(0,0,radius);//設(shè)置半徑rockerbg.endFill();//結(jié)束繪畫parent.addChild(rockerbg);//添加到舞臺，parent為傳進(jìn)來的舞臺參數(shù)

控制按鈕同理，只不過小一點就可以了。當(dāng)然如果小伙伴們圖省事或不使用框架，找兩個圓的圖片也可以，但是要注意設(shè)置錨點為中心

搖桿功能：

接下來就要具體說明一下他是如何將被操作的人或物捆綁到一起的了，在該寶可夢游戲中主要為了提供給角色一個速度，這個速度是一個 json 數(shù)據(jù)，里面存放了 x 軸與 y 軸的速度

var speed = {x:0,y:0};

如何實現(xiàn)觸摸屏幕給與速度相應(yīng)數(shù)據(jù)呢，這就要用到開啟舞臺交互事件中的“鼠標(biāo)按下”、“鼠標(biāo)抬起”、“鼠標(biāo)移動”三個事件

其中“鼠標(biāo)按下”事件中控制獲取當(dāng)前鼠標(biāo)位置，以及按鈕的顯示

app.stage.on("pointerdown",function(event){//在鼠標(biāo)按下位置顯示控制器var pos = event.data.getLocalPosition(app.stage);rockerbg.x = pos.x;rockerbg.y = pos.y;rockerbg.visible = true;})

“鼠標(biāo)抬起”事件中控制控制器隱藏以及速度歸零

app.stage.on("pointerup",function(){//鼠標(biāo)抬起時控制器隱藏,速度歸零rocker.x = 0;rocker.y = 0;rockerbg.visible = false;speed = {x:0,y:0};})

“鼠標(biāo)移動”事件是整個控制的關(guān)鍵，他將控制按鈕的移動，利用大圓與小圓的圓心位置獲得角色所需的移動方向，因為角色只能四個方向移動，所以只需要先判斷小圓圓心據(jù)原點的X軸與Y軸絕對值的最大值，再判斷最大值為正值或負(fù)值即可得出角色的移動方向

rocker.on("pointermove",function(event){//利用判斷控制器在控制器背景原點的方向進(jìn)行設(shè)置角色移動方向var pos = event.data.getLocalPosition(app.stage);var A = rockerbg.x-pos.x;//搖桿起始點與鼠標(biāo)X軸距離var B = rockerbg.y-pos.y;//搖桿起始點與鼠標(biāo)Y軸距離var Z = radius;//控制器背景的半徑var X = pos.x-rockerbg.x;//獲取鼠標(biāo)X軸位置var Y = pos.y-rockerbg.y;//獲取鼠標(biāo)Y軸位置if(Z*Z<A*A+B*B){//判斷鼠標(biāo)位置是否超出搖桿移動范圍var angle = Math.atan((pos.y-rockerbg.y)/(pos.x-rockerbg.x));//計算鼠標(biāo)與搖桿起始點角度if(pos.x<rockerbg.x){//判斷鼠標(biāo)是否在搖桿左側(cè)X = -Z*Math.cos(angle);Y = -Z*Math.sin(angle);}else{//判斷鼠標(biāo)是否在搖桿右側(cè)X = Z*Math.cos(angle);Y = Z*Math.sin(angle);}}speed = {x:0,y:0};var movescope = rockerbg.width/6;//設(shè)置控制器移動的最小范圍（當(dāng)超過這個值時則可設(shè)置方向與速度）if(Math.abs(X) > Math.abs(Y) && Math.abs(X) > movescope){if(X < 0){obj.moveState = true;obj.direction = "a";//人物動畫speed.x = -3;//設(shè)置x軸速度}else if(X > 0){obj.moveState = true;obj.direction = "d";//人物動畫speed.x = 3;//設(shè)置x軸速度}}else if(Math.abs(X) < Math.abs(Y) && Math.abs(Y) > movescope){if(Y < 0){obj.moveState = true;obj.direction = "w";//人物動畫speed.y = -3;//設(shè)置y軸速度}else if(Y > 0){obj.moveState = true;obj.direction = "s";//人物動畫speed.y = 3;//設(shè)置y軸速度}}rocker.x = X;//設(shè)置按鈕x坐標(biāo)rocker.y = Y;//設(shè)置按鈕y坐標(biāo)})

上面代碼中各行都有詳細(xì)的功能注釋說明，希望對大家的理解有所幫助，最后的最后是調(diào)用當(dāng)前對象中的 getSpeed 方法即可獲取該對象中的 json 數(shù)據(jù) speed

this.getSpeed = function(){return speed;}

下面的是整個虛擬控制器的完整代碼

function Fsvjoy(parent){//虛擬控制器var self = this;var rockerbg = new PIXI.Graphics();//繪制搖桿背景rockerbg.lineStyle(0);rockerbg.beginFill(0x000000, 0.3);var radius = 0;if(phoneWidth > phoneHeight)radius = phoneWidth/10;else radius = phoneHeight/10;rockerbg.drawCircle(0,0,radius);rockerbg.endFill();parent.addChild(rockerbg);var rocker = new PIXI.Graphics();//繪制搖桿rocker.lineStyle(0);rocker.beginFill(0xf0f0f0,0.7);rocker.drawCircle(0,0,rockerbg.height/8);rocker.endFill();rockerbg.addChild(rocker);rockerbg.visible = false;var obj = null;this.setobj = function(role){obj = role;}var speed = {x:0,y:0};app.stage.interactive = true;//開啟舞臺交互app.stage.on("pointerdown",function(event){//在鼠標(biāo)按下位置顯示控制器var pos = event.data.getLocalPosition(app.stage);rockerbg.x = pos.x;rockerbg.y = pos.y;rockerbg.visible = true;})app.stage.on("pointerup",function(){//鼠標(biāo)抬起時控制器隱藏,速度歸零rocker.x = 0;rocker.y = 0;rockerbg.visible = false;speed = {x:0,y:0};})rocker.interactive = true;//開啟搖桿交互rocker.on("pointermove",function(event){//利用判斷控制器在控制器背景原點的方向進(jìn)行設(shè)置角色移動方向var pos = event.data.getLocalPosition(app.stage);var A = rockerbg.x-pos.x;//搖桿起始點與鼠標(biāo)X軸距離var B = rockerbg.y-pos.y;//搖桿起始點與鼠標(biāo)Y軸距離var Z = radius;//控制器背景的半徑var X = pos.x-rockerbg.x;//獲取鼠標(biāo)X軸位置var Y = pos.y-rockerbg.y;//獲取鼠標(biāo)Y軸位置if(Z*Z<A*A+B*B){//判斷鼠標(biāo)位置是否超出搖桿移動范圍var angle = Math.atan((pos.y-rockerbg.y)/(pos.x-rockerbg.x));//計算鼠標(biāo)與搖桿起始點角度if(pos.x<rockerbg.x){//判斷鼠標(biāo)是否在搖桿左側(cè)X = -Z*Math.cos(angle);Y = -Z*Math.sin(angle);}else{//判斷鼠標(biāo)是否在搖桿左側(cè)X = Z*Math.cos(angle);Y = Z*Math.sin(angle);}}speed = {x:0,y:0};var movescope = rockerbg.width/6;//設(shè)置控制器移動的最小范圍（當(dāng)超過這個值時則可設(shè)置方向與速度）if(Math.abs(X) > Math.abs(Y) && Math.abs(X) > movescope){if(X < 0){obj.moveState = true;obj.direction = "a";speed.x = -3;}else if(X > 0){obj.moveState = true;obj.direction = "d";speed.x = 3;}}else if(Math.abs(X) < Math.abs(Y) && Math.abs(Y) > movescope){if(Y < 0){obj.moveState = true;obj.direction = "w";speed.y = -3;}else if(Y > 0){obj.moveState = true;obj.direction = "s";speed.y = 3;}}rocker.x = X;rocker.y = Y;})this.getSpeed = function(){return speed;} }

總結(jié)

以上是生活随笔為你收集整理的游戏开发：Html5 虚拟摇杆控制人物移动的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。