h5遊戲代碼怎麼制作-tft每日頭條

“HTML5工程師”這個職位也可以說是如日中天，越來越火，市場上也越來越缺乏H5優秀的工程師，下面是H5開發的一款鬥牛小遊戲，相信很多人都玩過，如果大神看到請賜教，小白看到就跟着小編我一起好好學習吧~

h5遊戲代碼怎麼制作（微信H5鬥牛遊戲開發總結）1

H5遊戲你可以看作是移動端的Web遊戲，無需下載軟件就可以體驗，這就是H5在傳播上的優勢。一種快捷、即時性的遊戲形式。

H5遊戲的迅速流行告訴了大家，并不是畫面極度精美，劇情嚴密的遊戲才是遊戲成功的唯一法則。雖然并不否認大型遊戲能成功的說法，但随着人們閑暇時間的縮小，簡單易上手的小遊戲更能适應當下遊戲發展的趨勢。

随着朋友圈在最近幾年瘋狂的流行，越來越多的遊戲從業者投入到H5遊戲産業當中。相比較一個大型遊戲創作的耗時耗力，H5遊戲有着門檻更低、所需時間更少的優點。

你可以像寫網頁一樣寫遊戲，不需要太多的額外學習。相信在不久的遊戲行業，将會大量的湧現出一大批的H5遊戲。

布局的時候，如果一個元素你想讓他的寬高保持一定比例，而不随屏幕變化，寬高設置的時候，使用同一個單位都是CSS3的單位，低版本不兼容 <span style="font-family: Arial, sans-serif; ">1.移動端頁面布局，使用相對的數值，不要使用絕對數值，推薦使用%，vw，vh，rem，em</span>

2.兼容性：蘋果設備微信強制使用的是os的浏覽器safar，頁面訪問的體驗遠大于安卓；安卓情況比較亂套：知乎上有人說是微信6.0.2以上是強制使用的QQ的X5浏覽器，但是實際情況來看（公司範圍），一部分手機如（魅族，小米，一加，三星，LG等）使用的是X5内核，另一部分如（nexus，國靖的小米）使用的是chrome的内核，由此來看，安卓上的訪問情況大部分不容樂觀，會不支持某些屬性和出現一些異常。

3.經驗之談：UI給出的設計圖越來越美觀了，但是對于前端的要求就變高了，寫頁面之前，良好的頁面結構設計可以極大地豐富了兼容性和擴展性，這個東西沒有對錯之分，隻有好和更好。

4.移動端的動畫：這次我使用的是jquery.animate，出現情況，ios上各個設備均正常，但是安卓方面X5内核的動畫卡頓嚴重。查閱資料，移動端的動畫大部分使用CSS3和zepto.js，盡量不使用jquery的，對于移動端的遊戲動畫，流行canvas。

5.touch事件：安卓支持click事件，但是ios不支持，推薦使用touch事件；touch事件基本類型：touchstart,touchmove,touchend,

對于之前需求中的判定向上滑動，向左滑動，向右滑動等推薦使用以下代碼進行處理：

//返回角度

function GetSlideAngle(dx, dy) {

return Math.atan2(dy, dx) * 180 / Math.PI;

}

//根據起點和終點返回方向 1：向上，2：向下，3：向左，4：向右,0：未滑動

function GetSlideDirection(startX, startY, endX, endY) {

var dy = startY - endY;

var dx = endX - startX;

var result = 0;

//如果滑動距離太短

if (Math.abs(dx) < 2 && Math.abs(dy) < 2) {

return result;

}

var angle = GetSlideAngle(dx, dy);

if (angle >= -45 && angle < 45) {

result = 4;

} else if (angle >= 45 && angle < 135) {

result = 1;

} else if (angle >= -135 && angle < -45) {

result = 2;

}

else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {

result = 3;

}

return result;

}

//滑動處理

var startX, startY;

document.addEventListener('touchstart', function (ev) {

startX = ev.touches[0].pageX;

startY = ev.touches[0].pageY;

}, false);

document.addEventListener('touchend', function (ev) {

var endX, endY;

endX = ev.changedTouches[0].pageX;

endY = ev.changedTouches[0].pageY;

var direction = GetSlideDirection(startX, startY, endX, endY);

switch (direction) {

case 0:

alert("沒滑動");

break;

case 1:

alert("向上");

break;

case 2:

alert("向下");

break;

case 3:

alert("向左");

break;

case 4:

alert("向右");

break;

default:

}

}, false);

6.禁止滑屏：手指按住頁面進行滑動，頁面的動畫會停止，但是松手之後，動畫已經完成，影響了用戶體驗，在某些情況下（頁面隻有一屏），應該禁止手指滑動，代碼：

//禁止頁面滾動

function forbidPageScroll(){

var stop=0;

document.addEventListener("touchmove",function(e){

if(stop==0){

e.preventDefault();

e.stopPropagation();

}

},false);

}

7.音頻：audio标簽的自動播放autoplay，iOS不支持，并給出理由“這會導緻用戶的流量被偷取” 所以ios設備上禁止了自動播放功能，可以綁定touchmove事件，用戶點擊屏幕任何一處都可以觸發音頻播放。安卓支持自動播放。

8.推薦一個打亂數組順序的簡單的方法：

var boss = [1,2,3,4,5,6,7,8];

//打亂順序

boss = boss.sort(function(){ return 0.5 - Math.random() });

總結起來就兩點：

1.簡單，随時随地能立馬玩兒起來!

2.可以在朋友圈進行分享。

隻要這兩點，就能獲得大量的用戶。