建站
咨詢
售后
建站咨詢
新聞中心
這篇文章主要講解了“怎么用HTML5實現(xiàn)String Avoider小游戲”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“怎么用HTML5實現(xiàn)String Avoider小游戲”吧！
目前創(chuàng)新互聯(lián)公司已為上千的企業(yè)提供了網(wǎng)站建設(shè)、域名、虛擬主機(jī)、成都網(wǎng)站托管、企業(yè)網(wǎng)站設(shè)計、平安網(wǎng)站維護(hù)等服務(wù)，公司將堅持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。
從游戲起始點移動鼠標(biāo)到終點位置，鼠標(biāo)移動過程繪制出移動軌跡的String平滑曲線，整個過程不能碰撞到邊界，從技術(shù)角度來說其核心就是根據(jù)鼠標(biāo)移動位置生成String線的算法，該游戲是ActionScript寫的Flash版，這里將其改造成HTML5版的JavaScript實現(xiàn)，并增加可自定義關(guān)卡功能的一種設(shè)計思路。
String連線我是緩存了300個點信息的數(shù)組，鼠標(biāo)移動時不斷調(diào)整300個點的新位置信息，每次更新時先將新鼠標(biāo)點設(shè)置給第一個元素，后續(xù)更新x點時，計算其與x-1點的角度，在此方向長度為1的位置更新坐標(biāo)，這樣就達(dá)到了平滑曲線的效果。
除了繪制String線外還有個技術(shù)點就是監(jiān)測碰撞，該Flash游戲的邊界都是線段，因此第一想到的監(jiān)測方式就是線線相交的思路，如果以LineLine的相交思路只需要遍歷所有point間的線段，判斷是否與游戲關(guān)卡定義的邊界線相交，但這種方式對不規(guī)則邊界就比較麻煩，監(jiān)測性能也不高。
考慮到我們還需要提供用戶可DIY自定義游戲關(guān)卡的功能，我們將采用監(jiān)測顏色透明度信息的方式，由于正常游戲時場景無需用戶動態(tài)修改，因此邊界的信息可提前緩存到ImageData內(nèi)存中，并且我們300個點的距離都是1，監(jiān)測只需根據(jù)點進(jìn)行就可以。
整個程序采用 HT for Web 的 GraphView 拓?fù)鋱D組件，再其上通過addTopPainter添加頂層畫筆繪制曲線，當(dāng)曲線碰到Node圖元時繪制成紅色，否則繪制成黃色，監(jiān)聽 GraphView 拓?fù)鋱D的interaction事件，在該事件中設(shè)置dirty的臟標(biāo)志，在繪制時根據(jù)dirty的標(biāo)志進(jìn)行更新，采用這樣的方式可將多次變換最終聚合成一次更新，這也是圖形刷新繪制常用的基本技巧。同時通過GraphView.setEditable(true)開啟了拓?fù)鋱D的可視化編輯功能，用戶可隨時改變界面圖元位置和旋轉(zhuǎn)等形狀信息，相當(dāng)于自定義關(guān)卡的效果。
function init(){
dataModel = new ht.DataModel();
graphView = new ht.graph.GraphView(dataModel);
graphView.handleScroll = function(){};
graphView.setEditable(true);
graphView.setPannable(false)
view = graphView.getView();
view.style.left = '10px';
view.style.top = '10px';
view.style.width = '600px';
view.style.height = '400px';
view.style.background = 'black'; document.body.appendChild(view);
createNode(20, 20, 80, 40, 'rect');
createNode(200, 300, 80, 40, 'star');
createNode(400, 100, 80, 40, 'oval');
createShape();
length = 1;
count = 300;
points = []; for(var i=0; i感謝各位的閱讀，以上就是“怎么用HTML5實現(xiàn)String Avoider小游戲”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對怎么用HTML5實現(xiàn)String Avoider小游戲這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！
文章標(biāo)題：怎么用HTML5實現(xiàn)StringAvoider小游戲
URL分享：http://www.ef60e0e.cn/article/pdpjgh.html
