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

創(chuàng)新互聯(lián)擁有十年成都網(wǎng)站建設(shè)工作經(jīng)驗(yàn),為各大企業(yè)提供成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、外貿(mào)網(wǎng)站建設(shè)服務(wù)，對(duì)于網(wǎng)頁(yè)設(shè)計(jì)、PC網(wǎng)站建設(shè)（電腦版網(wǎng)站建設(shè)）、App定制開(kāi)發(fā)、wap網(wǎng)站建設(shè)（手機(jī)版網(wǎng)站建設(shè)）、程序開(kāi)發(fā)、網(wǎng)站優(yōu)化（SEO優(yōu)化）、微網(wǎng)站、域名注冊(cè)等，憑借多年來(lái)在互聯(lián)網(wǎng)的打拼，我們?cè)诨ヂ?lián)網(wǎng)網(wǎng)站建設(shè)行業(yè)積累了很多網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、網(wǎng)絡(luò)營(yíng)銷經(jīng)驗(yàn)，集策劃、開(kāi)發(fā)、設(shè)計(jì)、營(yíng)銷、管理等網(wǎng)站化運(yùn)作于一體，具備承接各種規(guī)模類型的網(wǎng)站建設(shè)項(xiàng)目的能力。

從游戲起始點(diǎn)移動(dòng)鼠標(biāo)到終點(diǎn)位置，鼠標(biāo)移動(dòng)過(guò)程繪制出移動(dòng)軌跡的String平滑曲線，整個(gè)過(guò)程不能碰撞到邊界，從技術(shù)角度來(lái)說(shuō)其核心就是根據(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)景無(wú)需用戶動(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組件，再其上通過(guò)addTopPainter添加頂層畫筆繪制曲線，當(dāng)曲線碰到Node圖元時(shí)繪制成紅色，否則繪制成黃色，監(jiān)聽(tīng) GraphView 拓?fù)鋱D的interaction事件，在該事件中設(shè)置dirty的臟標(biāo)志，在繪制時(shí)根據(jù)dirty的標(biāo)志進(jìn)行更新，采用這樣的方式可將多次變換最終聚合成一次更新，這也是圖形刷新繪制常用的基本技巧。同時(shí)通過(guò)GraphView.setEditable(true)開(kāi)啟了拓?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)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)怎么用HTML5實(shí)現(xiàn)String Avoider小游戲這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！
            

            名稱欄目：怎么用HTML5實(shí)現(xiàn)StringAvoider小游戲-創(chuàng)新互聯(lián)            

            分享網(wǎng)址：http://weahome.cn/article/djpgej.html