簡易語言

  記得兩年前使用ror做網站，自動生成功能記憶猶新，只是當時網絡知識實在缺乏，體會不到其中的樂趣。現在了解的很多了，書也有兩本，一直想重新體驗最新版做個網站。安裝這個過程實在有點坑爹，查找網上若干ror的書包括2012年版的書，按照上面的步驟都沒法安裝完成，搞得我一會在linux下試驗，一會在windows下試驗，都沒成功，只好放下。時間花不少，很不爽的體驗。

  好在，過了一段時間，忽然想看看ruby的那兩本書，然后就愛上這個語言了。于是做一些想做的試驗，一些試驗需要做些配置，對安裝目錄也就了解了。下載一些插件居然自己跑到了ruby的下載頁。看到上面居然一個版本有3樣要下的，幫助文件和安裝文件不就夠了嗎。還要一個mingw做工具么？這個不是有自己的官網下載么。也沒管。想起ruby目錄下include中有i386-mingw32，才聯系起來。應該是以mingw做make工具的。rails應該需要make，因為每次安裝都拋出make出錯信息。雖然有mingw官網，但這里應該是做成自己的插件。于是到下載頁http://rubyforge.org/frs/?group_id=167下載相應版本的mingw32工具解壓覆蓋到安裝目錄中，要是怕出問題先對目錄做備份

  另外下載不了的都cross wall下載


C:\Documents and Settings\Administrator>gem install rails
ERROR:  Error installing rails:
        The 'json' native gem requires installed build tools.

Please update your PATH to include build tools or download the DevKit
from 'http://rubyinstaller.org/downloads' and follow the instructions
at 'http://github.com/oneclick/rubyinstaller/wiki/Development-Kit'

  還有錯，但明顯不是曾經報的make錯誤了。
  按照網址下載和遵從上面的方法安裝即可（下面的命令即是按照安裝方法安裝的）
  其中config.yml文件僅僅描述ruby所在路徑，修改成你的ruby路徑即可

D:\>cd D:\Ruby192\devkit

D:\Ruby192\devkit>ruby dk.rb init
[INFO] found RubyInstaller v1.9.2 at D:/Ruby192

Initialization complete! Please review and modify the auto-generated
'config.yml' file to ensure it contains the root directories to all
of the installed Rubies you want enhanced by the DevKit.

D:\Ruby192\devkit>ruby dk.rb review
Based upon the settings in the 'config.yml' file generated
from running 'ruby dk.rb init' and any of your customizations,
DevKit functionality will be injected into the following Rubies
when you run 'ruby dk.rb install'.

D:/Ruby192

D:\Ruby192\devkit>ruby dk.rb install
[INFO] Updating convenience notice gem override for 'D:/Ruby192'
[INFO] Installing 'D:/Ruby192/lib/ruby/site_ruby/devkit.rb'

D:\Ruby192\devkit>gem install rdiscount --platform=ruby
Fetching: rdiscount-1.6.8.gem (100%)
Temporarily enhancing PATH to include DevKit...
Building native extensions.  This could take a while...
Successfully installed rdiscount-1.6.8
1 gem installed
Installing ri documentation for rdiscount-1.6.8...
Installing RDoc documentation for rdiscount-1.6.8...

D:\Ruby192\devkit>ruby -rubygems -e "require 'rdiscount'; puts RDiscount.new('**
Hello RubyInstaller**').to_html"
<p><strong>Hello RubyInstaller</strong></p>

下面安裝rails

D:\Ruby192\devkit>gem install rails
Temporarily enhancing PATH to include DevKit...
Building native extensions.  This could take a while...
Fetching: rdoc-3.12.gem (100%)
Depending on your version of ruby, you may need to install ruby rdoc/ri data:

<= 1.8.6 : unsupported
 = 1.8.7 : gem install rdoc-data; rdoc-data --install
 = 1.9.1 : gem install rdoc-data; rdoc-data --install
>= 1.9.2 : nothing to do! Yay!
Fetching: railties-3.2.8.gem (100%)
Fetching: bundler-1.2.0.gem (100%)
Fetching: rails-3.2.8.gem (100%)
Successfully installed json-1.7.5
Successfully installed rdoc-3.12
Successfully installed railties-3.2.8
Successfully installed bundler-1.2.0
Successfully installed rails-3.2.8
5 gems installed
Installing ri documentation for json-1.7.5...
Installing ri documentation for rdoc-3.12...
unable to convert U+00A9 from UTF-8 to GBK for lib/rdoc/text.rb, skipping
Installing ri documentation for railties-3.2.8...
Installing ri documentation for bundler-1.2.0...
Installing ri documentation for rails-3.2.8...
Installing RDoc documentation for json-1.7.5...
Installing RDoc documentation for rdoc-3.12...
unable to convert U+00A9 from UTF-8 to GBK for lib/rdoc/text.rb, skipping
Installing RDoc documentation for railties-3.2.8...
Installing RDoc documentation for bundler-1.2.0...
Installing RDoc documentation for rails-3.2.8...

  果然成功了，哈哈

D:\Ruby192\devkit>rails -v
Rails 3.2.8

  想做個實例，搜一下網上的書，還是不行，那些書最新的2012的都不用命令行做，2011的還是老的命令行方式。根本沒法用，上官網看就是了。
D:\Ruby192\devkit>rails new D:/project/ruby/railsapp
      create
      create  README.rdoc
      create  Rakefile
      create  config.ru
      create  .gitignore
      create  Gemfile
      create  app
      create  app/assets/images/rails.png
      create  app/assets/javascripts/application.js
      create  app/assets/stylesheets/application.css
      create  app/controllers/application_controller.rb
      create  app/helpers/application_helper.rb
      create  app/mailers
      create  app/models
      create  app/views/layouts/application.html.erb
      create  app/mailers/.gitkeep
      create  app/models/.gitkeep
      create  config
      create  config/routes.rb
      create  config/application.rb
      create  config/environment.rb
      create  config/environments
      create  config/environments/development.rb
      create  config/environments/production.rb
      create  config/environments/test.rb
      create  config/initializers
      create  config/initializers/backtrace_silencers.rb
      create  config/initializers/inflections.rb
      create  config/initializers/mime_types.rb
      create  config/initializers/secret_token.rb
      create  config/initializers/session_store.rb
      create  config/initializers/wrap_parameters.rb
      create  config/locales
      create  config/locales/en.yml
      create  config/boot.rb
      create  config/database.yml
      create  db
      create  db/seeds.rb
      create  doc
      create  doc/README_FOR_APP
      create  lib
      create  lib/tasks
      create  lib/tasks/.gitkeep
      create  lib/assets
      create  lib/assets/.gitkeep
      create  log
      create  log/.gitkeep
      create  public
      create  public/404.html
      create  public/422.html
      create  public/500.html
      create  public/favicon.ico
      create  public/index.html
      create  public/robots.txt
      create  script
      create  script/rails
      create  test/fixtures
      create  test/fixtures/.gitkeep
      create  test/functional
      create  test/functional/.gitkeep
      create  test/integration
      create  test/integration/.gitkeep
      create  test/unit
      create  test/unit/.gitkeep
      create  test/performance/browsing_test.rb
      create  test/test_helper.rb
      create  tmp/cache
      create  tmp/cache/assets
      create  vendor/assets/javascripts
      create  vendor/assets/javascripts/.gitkeep
      create  vendor/assets/stylesheets
      create  vendor/assets/stylesheets/.gitkeep
      create  vendor/plugins
      create  vendor/plugins/.gitkeep
         run  bundle install
Fetching gem metadata from https://rubygems.org/.........
Installing rake (0.9.2.2)
Installing i18n (0.6.1)
Installing multi_json (1.3.6)
Using activesupport (3.2.8)
Using builder (3.0.0)
Using activemodel (3.2.8)
Using erubis (2.7.0)
Using journey (1.0.4)
Using rack (1.4.1)
Using rack-cache (1.2)
Using rack-test (0.6.1)
Using hike (1.2.1)
Using tilt (1.3.3)
Using sprockets (2.1.3)
Using sprockets (2.1.3)
Using actionpack (3.2.8)
Installing mime-types (1.19)
Using polyglot (0.3.3)
Using treetop (1.4.10)
Using mail (2.4.4)
Using actionmailer (3.2.8)
Using arel (3.0.2)
Using tzinfo (0.3.33)
Using activerecord (3.2.8)
Using activeresource (3.2.8)
Using bundler (1.2.0)
Installing coffee-script-source (1.3.3)
Installing execjs (1.4.0)
Installing coffee-script (2.2.0)
Using rack-ssl (1.3.2)
Using json (1.7.5)
Using rdoc (3.12)
Installing thor (0.16.0)
Using railties (3.2.8)
Installing coffee-rails (3.2.2)
Installing jquery-rails (2.1.1)
Using rails (3.2.8)
Installing sass (3.2.1)
Installing sass-rails (3.2.5)
Using sqlite3 (1.3.6)
Installing uglifier (1.2.7)
Your bundle is complete! Use `bundle show [gemname]` to see where a bundled gem
is installed.

D:\Ruby192\devkit>cd D:\project\ruby\railsapp

D:\project\ruby\railsapp>rails server
=> Booting WEBrick
=> Rails 3.2.8 application starting in development on http://0.0.0.0:3000
=> Call with -d to detach
=> Ctrl-C to shutdown server
[2012-09-01 06:44:40] INFO  WEBrick 1.3.1
[2012-09-01 06:44:41] INFO  ruby 1.9.2 (2011-07-09) [i386-mingw32]
[2012-09-01 06:44:41] INFO  WEBrick::HTTPServer#start: pid=2924 port=3000

  瀏覽器中輸入http://localhost:3000/，熟悉的界面出現


  所以ror厚厚的書讀完也沒用，可能動手連代碼都沒機會敲。

  另外也可以到網站http://railsinstaller.org/下載配置好的安裝包，就免去手動配置啦。

  這是六月初完成的一個游戲

 

兩個月時間終于完成了我們的涂鴉秀秀項目，與同類產品相比，我們內容更多些，分為雙人對戰模式，多人模式，相信可以同時在線很多人。

 

技術上實踐了一把前后端都js的游戲。算是過了把小癮。用到nodejs，socket.io，phonegap，express框架和其他細枝末節。一路上我們披荊斬棘，果然爽。

 

其實從項目需求到解決各個小bug，真是刷了若干個夜

 

這樣的項目特點就是能在各手機上玩，包括ipod，pad。Pc上只要支持canvas也可以一起玩，多好的一個大融合。當然其實要兼容ie6也不是什么難事，難在我根本沒時間理了，真不好意思。簡單說就是跨平臺。適配的機器也較多，能有較廣的群眾基礎。

 

我們也有好友系統，分享，邀請，當然不會做深，我們的目標是先吸引住市場，然后再集中力量對用戶喜歡的點做深入研發。

 

做完后同學陪我玩好長時間，他很喜歡玩，這一點讓我比較欣慰。感覺畫圖游戲來源于人類的自戀，人類天然喜歡用圖來表達意思。只是世界上的系統還是符號的多。

 

如圖：

 

SouApp.com還給我們蓋了章，我特地確認了一下，這是人家主動蓋的章。在審核的時候就下載了一百多次。當然我也不知道這算什么概念。至少覺得有人感興趣，其實這游戲對美術是樂事，他們功底好，pc上有自己的畫圖板，畫起來非常專業。贏點小禮品根本不是問題。當然以后的版本會更好，更吸引人。已經有不少想法，可改進的地方也不少。

 

 

如下是一些界面截圖

 

 

一些小作品

 

 

下載地址

http://souapp.com/app_detail/?appid=aaf7a621-205a-4c73-a88b-a5ef3ebb9431

 

http://www.appchina.com/soft_detail_291505_0_10.html

 

游戲地址

m.tuyaxiuxiu.com

360.tuyaxiuxiu.com

google.tuyaxiuxiu.com

官網地址

www.tuyaxiuxiu.com

 

兩個月我們都做了什么？

美術需求，協議定制，詳細編碼，修bug，手機測試，穩定服務，官網搭建，后臺搭建，推廣運維。非常多的細節，充實有趣。

 

現已通過sina,google等各大平臺，能搜到精選，分享，當然不是我們自己弄的，比如下面這個精選，人家是還要注冊才能下載的社區。我們自己搞這種就過頭了。

 

 

如果大家覺得兩個月太長了，其實試試就知道，光推廣就夠累的，各個平臺各種限制。不玩得技術欲仙欲死才怪。官網，后臺，各種修改更新。甚至圖都要自己改改。開始半個月，美術需求就寫了10次，不敢說每次都很詳細，但也夠有調理和詳細的了。

 

不過從中也獲得不少經驗，本來規劃非常短的時間來完成，這個按照很理想的條件來處理的話。當然其實也準時完成了，只不過我們又要了加倍的功能，而我們的人數從開始實施時就減少了一半。這樣的條件下，沒報告什么特別的，既然說了就做吧，通宵很多個晚上，弄得我經常起不來。

 

另一些感觸就是積極加入各種思考分析中就好，根本不要去考慮回報，這個世界上能去考慮回報的人并不多。

 

其實其中有的地方不太到位，比如分享界面、官網、統計分析。只能等人來幫忙了。

 

如下圖是當時做的一個極限測試

 

當時數據量一大就丟失數據。于是自己做了個編碼方式，減少數據量，這個圖證明的就是只要網絡能傳輸，內容再多都能處理。

 

這個游戲的不好之處就是必須有一定的玩家基數才能帶動起來。另外，我們開發很多功能其實沒必要，先開發主要功能，看市場反應，在進一步開發才有意義。于是有了下一個游戲，見下一篇。

轉眼又過了幾個月，但是這幾個月做了好多游戲，瘋狂了。其中做的第一款游戲今天進了google應用首頁最上面的圖。如圖中，有好多金幣那個圖，就是我們的游戲。一個非常簡單的游戲。

這個游戲名稱叫砸金幣水果機，我們做了英文版，中文版，ios版,andriod版。如下就是英文andriod版，模仿街機風格，頗有懷舊的味道。當然技術上我并不看好這款游戲，但實際效果卻不好說，圖片精美，物理效果不錯，觸發的神奇界面不少，就看游戲屌絲對街機是否著迷過了。估計也是這些原因導致被google推薦吧，我們也沒花任何一分錢買推薦。

 

其實我更想推薦的是多人網上互動的手機游戲，希望在下一篇給大家做介紹。

 

現在我們發現最火的語言成了javascript，原因是html5的推出，其實原理上講，這個語言也是必然要火的，首先人類交互最密集的地方轉移到互聯網上了，人類交互的重要性是不言而喻的，就要求我們的網頁有更多的功能，而這個功能的提供者第一個是js，且語言簡潔，開源，這就奠定了它的競爭力基礎。有了這些基礎后，最大數量的研究人員都會在這上面。如果將it產業比喻成火山，那么網絡這部分就是巖漿部分，就是變化最快的地方。一開始都是最專業的人研究底層，當這些底層成熟后，應用層就快速發展起來，推陳出新非常快。Html5推出將人們最常用的應用以很簡潔的方式表達出來，nodejs將js推向后端，socket.io加速交互效率和交互設計。當然有非常多的js框架都出來了。這里不具體說了。

 

這幾個月的經驗總結希望給大家一些啟發， 如果我們做一個跨平臺手機游戲發最好做好以下準備

 

Js越熟越好，不要以為它真的很簡單，要做手機游戲，必須學會優化，如果是客戶端，要求很高，如果在繪圖時畫一大堆對象，andriod一定會過不去的。那么就一方面研究js（我的建議是，不要去啃面向對象，代碼清晰，規范最重要），一方面細讀html5規范吧。

 

有java基礎，那么在用phonegap打包到andriod系統下時，就能較快明白怎么做配置，怎么添加插件和使用。Java和js都不錯的話那么寫點插件也不錯。有的功能是必須用插件的哦。

 

有點andriod設計的基礎，我是沒什么基礎，所以也花不少時間研究，其實就研究它的一些配置關系。也會有煩人問題的。

 

有點mac下的xcode基礎，xcode的基本的使用最好明白，否則還是要花不少時間摸索，對于mac系統的設計，我實在不太茍同，雖然我能挺快適應。至于oc，會一些也更好，這樣方便使用插件和寫插件。

 

想進軍app store，越早申請賬號，越早提交越好，遇到的問題非常之多。也許怪物英文不好，mac不熟吧。

 

當然硬件上最好有幾個手機，ipod,pad做測試，ipad3尤其要測。

 

你還會遇到的問題，比如手機屏幕適配，音樂的使用，兼容瀏覽器等。

 

 另一個建議就是認準了自己喜歡的，一頭扎進去動手就是了。

 

這篇文章總體質量不高，沒給大家講講技術細節，商業游戲，不太方便哈，會給大家講開源的。甚至有的地方可能講失誤也歡迎批評指出。本篇完。

 

游戲地址1：http://app.baidu.com/273943

游戲地址2：

https://chrome.google.com/webstore/detail/jdjcanmclknahldoohmphkiicmggghdf?hl=zh-CN

（要在chrome下安裝過才可玩）

  昨天寫了個json的解析器。其實yecc早看過了，只是那時對自己要求太高，想一下子寫個小語言。然后大腦就陷入混亂... 后來注意力轉移了。就不那么急著去開發些難道大的。今天回來一看，覺得都理解了，實踐一下，發現沒人寫json的，太好了。于是就在紙上寫了一下。晚上沒事都敲掉計算機里試試。果然很好用。廢話就不多說了，不專業的我在readme里面已經寫了不少廢話了。主要也不知道git有沒規范約束readme不能寫廢話。其實被google騙了一下，有人寫過json的erlang解析，每次我搜yrl，它就主動搜url文件。還要點一下堅持搜索才行。看看https://github.com/jchris/erlang-json-eep-parser/downloads這上面就是一個解析器，還好我們寫的不是太像，他寫的更精細一點。我寫的更容易使用上手。我寫的就到這下載吧https://github.com/yangyusong/erlang_json_parser。

  接著就是講講內容了，大學學過編譯原理就很容易理解這其中的內容。yrl文件就是erlang中的滿足LALR-1規范的解析生成器，相似于yacc。會有很多文章做解釋，這里不詳述。yrl文件或yacc中的.y這類文件就是給我們寫編譯規則用的，我們寫好一個推理機制，按照規范分解成4部分，放到這一個文件中，那么yecc就可以給我們生成一個符合這個推理規則的解析器，當然這里就是生成.erl的源文件給我們使用，其中會有parse作為默認方法提供給我們解析我們的字符串。

  yrl文件中一共有四部分，其實三部分分別用Nonterminals Terminals Rootsymbol關鍵字來標識，意義很明顯，非終結符，終結符，起始符（這個忘了怎么翻譯）。要解釋一下也行，一個更好的理解方式就是，非終結符可以在推理符號（->）的左邊和右邊，相當于函數作用，最終分析為終結符的組合。終結符只能在推理符號（->）的右邊。意義就是一個符號系統的基本集合。 Rootsymbol是其中一個非終結符，作為推理的起始點。用一棵解析樹來表示的話，Rootsymbol就是根節點。Nonterminals就是樹枝。Terminals就是樹葉。任何一個符合此推理規則的字符串都可以用這樣一棵解析樹表示出來（我就不畫了）。

  除了上面說的三部分就剩下最重要的部分了:推理規則。其實這四部分都是列表，只不過Rootsymbol這個表只有一個元素。規則列表有多條，通常每行一條規則，和erlang一樣用.結束一條規則。
終結符用單引號引起，冒號后面是我們解析后的erlang表達式。$1,$2,$3這種相似正則表達式規則，也說一下吧，就是對冒號左邊的元素作為列表并從1計數。再搞不懂就發郵局問吧，呵呵。

  那么這樣的一個規則列表就很好建立了，其實這個過程還是有很多規則可以遵循的，其中這里遵循了左遞歸，終結字符先出現的規則優先表達這兩條規則。更多，你還可以畫個有限狀態機，做一下分析，化解，做成閉包，某些運算還要考慮優先級之類。當然這里這樣小的結構基本是最優了，沒什么化解的必要。

代碼附上
Nonterminals list object kv_list v_list kv k v. % 7

Terminals ',' ':' 'element' '[' ']' '{' '}'. % 7

Rootsymbol object.

object -> '{' '}' : {}.
object -> '{' kv_list '}' : { '$2' }.


kv_list -> kv ',' kv_list : '$1' , '$3'.
kv_list -> kv : '$1'.

kv -> k ':' v : {'$1', '$3'}.

k -> 'element' : '$1'.

v -> 'element' : '$1'.
v -> list : '$1'.
v -> object : '$1'.

list -> '[' ']' : [].
list -> '[' v_list ']' : [ '$2' ].

v_list -> v ',' v_list : '$1' , '$3'.
v_list -> v.

  其中object，list就是json中最基本的結構。kv_list就是剝離大括號后的鍵值對列表。v_list是剝離中括號的列表。

  再講講這個解析器的使用吧，json_parser就是yrl文件生成的解析器了，我們就用這個解析器來做解析。文件use_json_parser對json_parser的使用做了一個包裝，那就是parser/1函數了，我們給它傳入json字符串就返回解析后的erlang列表。例如我們輸入use_json_parser:parser("{a, b, c}").就會返回[{'{',1},
                                        {atom,1,a},
                                        {',',1},
                                        {atom,1,b},
                                        {',',1},
                                        {atom,1,c},
                                        {'}',1},
                                        {'$end',999}]。
  這個文件還提供一個測試函數了unit_test_()。為了方便大家，我還是講講測試方法吧。在命令行輸入
cd erlang_json_parser
erl -pa ./ebin/ -eval "make:all([{d, 'EUNIT'},{outdir, \"./ebin/\"}, debug_info]) ,eunit:test(\"./ebin\",[]),init:stop()"

  參考更多的解析器制作，可以參考erlang官網提供的計算表達式解析，list解析。也可以從其他網站搜到html,xml等的解析,當然如果你看得多一點還會看到aleppo,erlydtl這類的工程。希望更多的人們投入到這些更有意思的開發中。下次再寫yecc，就不寫這么簡單的了。哈哈。不要期待在下一篇里出現哦。

本來一直覺得js是個讓人混亂不堪的語言，html5的出現改變了我對它的看法。到了html5的時代，各種犀利的設計就更明顯的需要js了。看了一些小游戲設計，忽然來了興趣，于是寫了幾個小游戲，這是其中一個。已經開源，歡迎下載https://github.com/yangyusong/ChainReaction。

 

游戲叫連鎖反應，這個游戲是看到有人在ipad上面玩的游戲，覺得好玩，自己實現一遍。游戲是這樣的，一群小球在區域內彈來彈去，玩家鼠標點擊一個地方，在一個圓的范圍內，小球碰上就會爆炸，爆炸的過程中其他小球碰上也會發生爆炸，這就叫連鎖反應。每一關爆破一定數量的小球就算勝利。

 

我的設計中一個有20關，數值增長比較平和，運氣不是太差的話都能一次通關。在說有個再玩本級的功能，過一關的壓力是一點都沒有。這樣設計是為了給工作后的朋友緩解壓力。我們輕松的一點就爆炸一片。

 

看看截圖

 

大的那個灰色的（其實是半透明的）圓是鼠標范圍。其他是彈來彈去的小球。可以看到，小球是各種顏色的。

 

我們看看小球的定義

function Circle(x, y, xSpeed, ySpeed, radius, color, liveTime, state){

    //圓心坐標

    this.x = x;

    this.y = y;

    //運動速度

    this.xSpeed = xSpeed;

    this.ySpeed = ySpeed;

    //半徑

    this.radius = radius;

    //顏色

    this.color = color;

    //生存計數器

    this.liveTime = liveTime;

    //狀態：

    this.state = state;

}

 

其中生存計數器是要和狀態結合使用的，狀態分為如下5個狀態

//小球狀態

var SMALL = 0;

var BIG = 1;

var EXPEND = 2;

var END = 3;

var DIS_VISIBLE = 4;

 

當處于EXPEND狀態的時候，就說明小球進入爆炸狀態，這時候生存計數器就用上了。計數器是個倒計時，計時到零，小球進入DIS_VISIBLE狀態。這時候小球就不再渲染出來。

 

我們的小球有不同大小，不同顏色，看看小球的初始化就知道了，代碼在ObjectMgr.js中

for(i = 0; i < g_StepsArr[g_Steps].ballsNum; i++){

            //_Util.dump_obj(_Color.color_str(new Color(Math.random(), Math.random(), Math.random())));

            var raduis = _Util.random_range(SMALL_RADIUS1, SMALL_RADIUS2);

            this.circles.push(new Circle(

                _Util.random_range(raduis*2, this.canvasWidth-2*raduis),

                _Util.random_range(raduis*2, this.canvasHeight-2*raduis),

                _Util.random(SPEED_MIN, SPEED_MAX),

                _Util.random(SPEED_MIN, SPEED_MAX),

                raduis,

                _Color.color_rgba_str(new Color1(Math.random(), Math.random(), Math.random(), 0.8)),

                MID_LIVE_TIME,

                SMALL

                ));

        }

 

其中g_StepsArr負責我們關卡的管理，有這一關的小球數，和通關需要爆破的小球數。總之，這里按照本關需要的小球數初始化小球，可以看到里面有很多的隨機函數使用。小球的半徑處于如下兩個數之間

var SMALL_RADIUS1 = 3;

var SMALL_RADIUS2 = 10;

通過random_range來進行這個范圍隨機。我們看到速度也是隨機的，范圍是

var SPEED_MIN = 10;

var SPEED_MAX = 50;

顏色中的color_rgba_str函數的第四個參數說明我們的每個小球的透明度是0.8，這樣我們就能在爆破的時候，或彈動的時候仍然看清其他小球。這段代碼就說到這。

 

我們講講主要流程，其實其中的詳細注釋，我覺得已經可以教會很多初學者。不過還是講講好。主要流程就在Main.js中。負責初始化，渲染和循環。開始我們設置了一堆全局變量。

var g_ObjectMgr = null;

var g_MouseEventDispatch = new MouseEventDispatch();

var g_MouseMgr = null;//g_MouseMgr在g_ObjectMgr初始化后才初始化

//當前關

var g_Steps = 1;//todo 顯示出來

//關卡數組

var g_StepsArr = [];

g_StepsArr = stepsInit();

//爆炸開始標識

var _ExpendStart = false;

 

if(DEBUG){

    _CircleLib.test();

}

var _Main = { 。。。

 

包括關卡數組，當前關數，爆炸標識等。居然還設置了一個是否調試的狀態量，其實我也不知道js調試怎樣才好，基本就按自己的方式調。 _Main是個很大的結構。我更寧愿把它當做單例來思考。主要是，它包括了渲染，這個渲染不具通用性，僅此一例就夠。其他地方用了且不是畫出什么就難說了。當然已經設計其實我會更多考慮通用性的設計，盡量不設計成這種單例。

 

這個_Main結構中有我們的畫布canvas,我們的初始化函數，每關調用一次，它來負責2d對象的初始化，游戲對象的初始化。鼠標監聽初始化。然后就是進入我們的循環。循環很簡單，就干四件事情

/*

     * 循環繪圖

     * 1.清空畫面

     * 2.游戲對象關系處理

     * 3.渲染出來

     * 4.循環調用

     */

    step: function(){

        this.clear();

        g_ObjectMgr.step();

        this.render();

        _this = this;

        this._st = setTimeout(function(){

            _this.step();

        }, 50);

    }

 

看看我們的下一關都干些什么

/*

     * 下一關

     */

    nextStep: function(){

        clearTimeout(this._st);

        if(this.canvas.getContext)

        {

            g_MouseEventDispatch.start();

            this.initObjects();

            this.step();

        }

    }

它就是清除計時器，重新分配事件，初始化對象。然后進入循環，為什么是這樣呢？清除計時器以使我們之前的循環停止。因為我們馬上有新的循環了，其實事件可以看做有兩個狀態，我們按下鼠標的時候，這個事件就不可用了，下次使用必須初始化。小球數量變了，必須按照本關的需求來初始化。進入循環，新的循環開始。

看看再玩一次（本級）按鈕的調用：

/*

     * 再玩一次（本級）

     */

    again: function(){

        this.nextStep()

    }

 

為什么居然是調用下一關呢？只能說我設計的太懶惰，nextStep()本身根本不管關卡的變更。關卡的變更完全在爆炸檢查函數里，一旦發現小球爆炸，就會修改當前關卡。而單純調用nextStep所使用的關卡是未改變過的，故而是在玩本級。

 

我們再看一下ObjectMgr.js中的爆炸檢查函數

 

expendCheck: function(){

        if(_ExpendStart){

            this.expendNum = _CircleLib.intersect(this.circles, g_MouseMgr.mouseCircle);

//            _Util.dump_obj(g_StepsArr[g_Steps])

            if(this.expendNum >= g_StepsArr[g_Steps].killNum){

                var next = g_Steps + 1;

                alert("成功爆破超過"+this.expendNum+"個小球，恭喜進入第"+ next + "關，\n\

下一關需要爆破" +g_StepsArr[g_Steps + 1].killNum + "個小球");

                g_Steps++;

                _Main.init();

            }

        }

    }

 

還記得_ExpendStart這個變量的意思么？就是說鼠標是否按下了，按下的話我們就要檢查是否有小球撞上鼠標范圍或撞上爆炸中的小球。其實這里的調用_CircleLib.intersect這個函數是有些小問題的。它是通過引用修改的當前小球的狀態，至于為什么有很少量的小球未修改狀態，這個我還沒弄明白。總之，這個函數檢查了爆炸小球的數量，一旦爆炸小球的數量符合本關的要求，那么就可以進入下一關，可以看到我們進入下一關的提示是一個對話框，不是很友好，可以設計為一個圖片較好，可惜我沒時間找美術。

 

點擊確定，我們玩下一關

 

小球多了很多，找個好點的位置，能捕捉很多小球。

看一下爆炸過程吧：

這是第十八關的一個爆炸情形，更具體的內容歡迎看具體代碼吧，要不還講好長時間。

 

做完這個例子，發現其實非常多的小游戲很好設計，可惜沒那么多時間，再說設計別人設計過的游戲也不是我的目標。設計一些有趣的小游戲到手機里，這個倒是個不錯的方向