H5中游戲的核心控制器(定時器)


在網頁游戲的設計中,我們一般采用H5里面的canvas畫布來設計游戲,canvas畫布是H5中的一個重要內容。主要用於游戲設計和制作圖標。制作圖表通常包含:柱狀圖、餅狀圖、折線圖等。在實際項目當中通常通過引用chart.js中的插件來實現圖表的實現。

在H5中另一個與canvas類似的一種畫布svg,svg是一種通過XML技術描述二維圖形的語言。其實現的效果是矢量圖,所以svg不能引入圖片文件。這是svg與canvas相比的劣勢,通常在實際項目當中,因為矢量圖的圖形不會失真,我們我們喜歡用svg來制作一些小的圖標和圖形。two.js庫支持svg。在這里總結一下two.js支持canvas、svg、和webGL(多用於游戲開發)。但是在真實案例當中由於chrome瀏覽器不支持在運用H5中的canvas標簽的時候,不支持在js中引入圖片的源文件,所以存在兼容性問題。

由於H5游戲目前在國內的技術已經非常的成熟,今天我們來討論H5中游戲通過canvas實現游戲效果一個重要知識點:定時器(不需要用戶觸發,即可以自動執行的一種機制),定時器通常用於中,但是在H5的游戲當中定時器也是制作它的核心控制器,我試過在一個頁面當中定義兩個setInterval,但是只能有一個實現定時的效果。所以掌握在游戲當中定時器的運用,是至關重要的。要實現在一個canvas畫布當中來實現當觸發不同事件時,通過一個canvas來實現游戲動態效果,如下面的代碼:

setInterval(function(){
switch (state){
case START:
// 1 繪制背景圖片
sky.paint();
// 2 控制背景運動
sky.step();
// 3 繪制logo圖片
context.drawImage(logo,20,0);
break;
case STARTTING:
break;
case RUNNING:
break;
case PAUSE:
break;
case GAMEOVER:
break;
}
},100);

上述代碼是在2015年10月20號,的飛機大戰中項目中。這里我們通過一個setInterval定時器當中包含一個函數,然后在函數里面。定義一個分支的結構,這樣就可以實現在不同的時間里,通過觸發不同的事件實現不同的動態游戲效果。通過switch分支結構,在構造器中,通過if來實現其動畫效果的連貫性。在switch的case中通過調用構造函數實現動畫的流程。

以上內容有錯誤點,請各位大神指教。估計各位大神都讀不懂!!!凌亂!!!


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com