posts - 48,comments - 156,trackbacks - 0

          本來想寫幾句的,但是看到前面一篇的反映不是很理想,所以也沒動力了,原計劃下面還想寫個“貪吃蛇”的,看看再說吧,直接上源代碼。

          這一次在上一篇程序的基礎上增加了以下功能:

          1、鍵盤控制

          2、開始、暫停

          3、消除時候空行的停頓效果

          4、隨著消除行數的增多,速度加快

          5、音效

          等等。

          代碼里的注釋已經很詳細了,上一篇中模型的代碼基本上沒改動,只是增加了控制和圖形的代碼,自己感覺寫的還是比較有條理的。

          代碼下載:點擊

           

          提示:本文中的俄羅斯方塊游戲需要 Chrome 瀏覽器才能得到最好的運行效果,Firefox 瀏覽器也可以運行,但是沒有聲音效果。

           

          {{{{{{

          你的瀏覽器不支持 Canvas 標簽,請使用 Chrome 瀏覽器 或者 FireFox 瀏覽器

          }}}}}}

           

          后面羅嗦兩句,愿意看的就看看。

          這一部分代碼主要由兩個定時器組成。

           

          第一個定時器每間隔一段時間就產生一個 TickMessage 消息,對這個消息的處理就是使方塊下落,下落后每消去一次,觸發的速度就更快一點。

           

          第二個定時器是消息循環,他盡可能快的循環,所以時間間隔設置為0。

          因為整個游戲的模型部分和控制部分會產生很多的事件,誰也不知道用戶什么時候按下按鍵,所以這里維護了一個消息隊列。

          一旦有新的情況產生,就在消息隊列里面添加上一條對應的消息,而消息循環不停的從里面取出消息,只要有就取出一條,并處理它。

           

          圖形部分,重點是要把七種顏色的小方塊事先繪制好,并緩存起來,后面需要的時候直接使用。否則臨時繪制的話,隨著方塊的增多,程序會出現卡死現象。

           

          好了,就說這么多吧,有什么問題請留言。

           


          //==========================================

          posted on 2010-10-18 18:31 左洸 閱讀(3007) 評論(9)  編輯  收藏 所屬分類: HTML5

          FeedBack:
          # re: HTML5邊玩邊學(10):俄羅斯方塊就是這么簡單 之 控制界面篇(源碼)
          2010-10-18 18:55 | 左洸
          如果 上下左右鍵 沒有起作用,可能是頁面沒有完全裝入,我的頁面里廣告比較多,所以有時候速度可能比較慢,呵呵,刷新一下就好了。  回復  更多評論
            
          # re: HTML5邊玩邊學(10):俄羅斯方塊就是這么簡單 之 控制界面篇(源碼)
          2010-10-19 10:55 | kookoo
          我用的chrome啊 一直是黑的
            回復  更多評論
            
          # re: HTML5邊玩邊學(10):俄羅斯方塊就是這么簡單 之 控制界面篇(源碼)
          2010-10-19 21:32 | huliqing
          呵呵,上一個我玩了一下,不過疊了兩行之后瀏覽器死了。
          這個在ff(FireFox3.6.10)下是沒有反應呢。  回復  更多評論
            
          # re: HTML5邊玩邊學(10):俄羅斯方塊就是這么簡單 之 控制界面篇(源碼)
          2010-10-20 15:30 | 樓主
          @kookoo
          點擊開始按鈕  回復  更多評論
            
          # re: HTML5邊玩邊學(10):俄羅斯方塊就是這么簡單 之 控制界面篇(源碼)
          2010-10-20 15:31 | 樓主
          @huliqing
          如果上一個能玩,這一個肯定沒問題,請確定頁面全部裝入后再開始  回復  更多評論
            
          # re: HTML5邊玩邊學(10):俄羅斯方塊就是這么簡單 之 控制界面篇(源碼)
          2010-10-20 18:19 | huliqing
          @樓主
          我可沒有騙你哦,我用FF的控制臺查到了錯誤所在行, 截了張圖。或許能幫你找到問題的原因。
          http://www.aygfsteel.com/images/blogjava_net/huliqing/html5-js-error.jpg
          另外我的環境(vista, FF版本是3.6.10)  回復  更多評論
            
          # re: HTML5邊玩邊學(10):俄羅斯方塊就是這么簡單 之 控制界面篇(源碼)
          2010-10-20 20:31 | 樓主
          @huliqing
          發來你的圖看看
            回復  更多評論
            
          # re: HTML5邊玩邊學(10):俄羅斯方塊就是這么簡單 之 控制界面篇(源碼)
          2010-12-13 17:18 | 左洸
          @huliqing

          Display 是我自己定義的一個類,在另外一個 JS 文件中,你沒有下載他,當然運行不起來。

          繪制的代碼其實只占很少的一部分,其中一些繪圖函數我為了方便對 HTML5 的 2D 函數進行了簡單的封裝,您完全可以用原生的 HTML5 函數,或者用您自己平臺的繪圖函數,因為他們本身不是太復雜。  回復  更多評論
            
          # re: HTML5邊玩邊學(10):俄羅斯方塊就是這么簡單 之 控制界面篇(源碼)
          2011-04-05 22:26 | chatwin
          大師你好!請問如果我想方塊用圖形畫出,而不是單色圖塊,應該怎樣修改?我試了drawImage,程序沒響應。
          謝謝!  回復  更多評論
            
          主站蜘蛛池模板: 白沙| 贵溪市| 淮安市| 三江| 肃宁县| 阜平县| 阿巴嘎旗| 桐乡市| 花莲县| 泾源县| 汝州市| 鹤壁市| 新宾| 什邡市| 长海县| 泸水县| 嵊泗县| 陈巴尔虎旗| 哈尔滨市| 榕江县| 左云县| 丹阳市| 丘北县| 双江| 九江县| 阳山县| 革吉县| 青海省| 罗城| 达孜县| 嵩明县| 白河县| 陇南市| 阿坝县| 昌都县| 湖州市| 班玛县| 清丰县| 扎兰屯市| 普兰县| 石首市|