這篇文章主要講解了“怎么用HTML5實(shí)現(xiàn)String Avoider小游戲”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“怎么用HTML5實(shí)現(xiàn)String Avoider小游戲”吧！

目前創(chuàng)新互聯(lián)公司已為上千的企業(yè)提供了網(wǎng)站建設(shè)、域名、虛擬主機(jī)、成都網(wǎng)站托管、企業(yè)網(wǎng)站設(shè)計(jì)、平安網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

從游戲起始點(diǎn)移動(dòng)鼠標(biāo)到終點(diǎn)位置，鼠標(biāo)移動(dòng)過程繪制出移動(dòng)軌跡的String平滑曲線，整個(gè)過程不能碰撞到邊界，從技術(shù)角度來說其核心就是根據(jù)鼠標(biāo)移動(dòng)位置生成String線的算法，該游戲是ActionScript寫的Flash版，這里將其改造成HTML5版的JavaScript實(shí)現(xiàn)，并增加可自定義關(guān)卡功能的一種設(shè)計(jì)思路。

String連線我是緩存了300個(gè)點(diǎn)信息的數(shù)組，鼠標(biāo)移動(dòng)時(shí)不斷調(diào)整300個(gè)點(diǎn)的新位置信息，每次更新時(shí)先將新鼠標(biāo)點(diǎn)設(shè)置給第一個(gè)元素，后續(xù)更新x點(diǎn)時(shí)，計(jì)算其與x-1點(diǎn)的角度，在此方向長(zhǎng)度為1的位置更新坐標(biāo)，這樣就達(dá)到了平滑曲線的效果。

除了繪制String線外還有個(gè)技術(shù)點(diǎn)就是監(jiān)測(cè)碰撞，該Flash游戲的邊界都是線段，因此第一想到的監(jiān)測(cè)方式就是線線相交的思路，如果以LineLine的相交思路只需要遍歷所有point間的線段，判斷是否與游戲關(guān)卡定義的邊界線相交，但這種方式對(duì)不規(guī)則邊界就比較麻煩，監(jiān)測(cè)性能也不高。

考慮到我們還需要提供用戶可DIY自定義游戲關(guān)卡的功能，我們將采用監(jiān)測(cè)顏色透明度信息的方式，由于正常游戲時(shí)場(chǎng)景無需用戶動(dòng)態(tài)修改，因此邊界的信息可提前緩存到ImageData內(nèi)存中，并且我們300個(gè)點(diǎn)的距離都是1，監(jiān)測(cè)只需根據(jù)點(diǎn)進(jìn)行就可以。

整個(gè)程序采用 HT for Web 的 GraphView 拓?fù)鋱D組件，再其上通過addTopPainter添加頂層畫筆繪制曲線，當(dāng)曲線碰到Node圖元時(shí)繪制成紅色，否則繪制成黃色，監(jiān)聽 GraphView 拓?fù)鋱D的interaction事件，在該事件中設(shè)置dirty的臟標(biāo)志，在繪制時(shí)根據(jù)dirty的標(biāo)志進(jìn)行更新，采用這樣的方式可將多次變換最終聚合成一次更新，這也是圖形刷新繪制常用的基本技巧。同時(shí)通過GraphView.setEditable(true)開啟了拓?fù)鋱D的可視化編輯功能，用戶可隨時(shí)改變界面圖元位置和旋轉(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實(shí)現(xiàn)String Avoider小游戲”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)怎么用HTML5實(shí)現(xiàn)String Avoider小游戲這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！
            
            
                        

            文章名稱：怎么用HTML5實(shí)現(xiàn)StringAvoider小游戲            

            網(wǎng)頁路徑：http://weahome.cn/article/pdpjgh.html