簡易語言

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

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

  另外下載不了的都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'

  還有錯(cuò)，但明顯不是曾經(jīng)報(bào)的make錯(cuò)誤了。
  按照網(wǎng)址下載和遵從上面的方法安裝即可（下面的命令即是按照安裝方法安裝的）
  其中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

  想做個(gè)實(shí)例，搜一下網(wǎng)上的書，還是不行，那些書最新的2012的都不用命令行做，2011的還是老的命令行方式。根本沒法用，上官網(wǎng)看就是了。
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/，熟悉的界面出現(xiàn)


  所以ror厚厚的書讀完也沒用，可能動(dòng)手連代碼都沒機(jī)會(huì)敲。

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

  這是六月初完成的一個(gè)游戲

 

兩個(gè)月時(shí)間終于完成了我們的涂鴉秀秀項(xiàng)目，與同類產(chǎn)品相比，我們內(nèi)容更多些，分為雙人對(duì)戰(zhàn)模式，多人模式，相信可以同時(shí)在線很多人。

 

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

 

其實(shí)從項(xiàng)目需求到解決各個(gè)小bug，真是刷了若干個(gè)夜

 

這樣的項(xiàng)目特點(diǎn)就是能在各手機(jī)上玩，包括ipod，pad。Pc上只要支持canvas也可以一起玩，多好的一個(gè)大融合。當(dāng)然其實(shí)要兼容ie6也不是什么難事，難在我根本沒時(shí)間理了，真不好意思。簡單說就是跨平臺(tái)。適配的機(jī)器也較多，能有較廣的群眾基礎(chǔ)。

 

我們也有好友系統(tǒng)，分享，邀請(qǐng)，當(dāng)然不會(huì)做深，我們的目標(biāo)是先吸引住市場(chǎng)，然后再集中力量對(duì)用戶喜歡的點(diǎn)做深入研發(fā)。

 

做完后同學(xué)陪我玩好長時(shí)間，他很喜歡玩，這一點(diǎn)讓我比較欣慰。感覺畫圖游戲來源于人類的自戀，人類天然喜歡用圖來表達(dá)意思。只是世界上的系統(tǒng)還是符號(hào)的多。

 

如圖：

 

SouApp.com還給我們蓋了章，我特地確認(rèn)了一下，這是人家主動(dòng)蓋的章。在審核的時(shí)候就下載了一百多次。當(dāng)然我也不知道這算什么概念。至少覺得有人感興趣，其實(shí)這游戲?qū)γ佬g(shù)是樂事，他們功底好，pc上有自己的畫圖板，畫起來非常專業(yè)。贏點(diǎn)小禮品根本不是問題。當(dāng)然以后的版本會(huì)更好，更吸引人。已經(jīng)有不少想法，可改進(jìn)的地方也不少。

 

 

如下是一些界面截圖

 

 

一些小作品

 

 

下載地址

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

官網(wǎng)地址

www.tuyaxiuxiu.com

 

兩個(gè)月我們都做了什么？

美術(shù)需求，協(xié)議定制，詳細(xì)編碼，修bug，手機(jī)測(cè)試，穩(wěn)定服務(wù)，官網(wǎng)搭建，后臺(tái)搭建，推廣運(yùn)維。非常多的細(xì)節(jié)，充實(shí)有趣。

 

現(xiàn)已通過sina,google等各大平臺(tái)，能搜到精選，分享，當(dāng)然不是我們自己弄的，比如下面這個(gè)精選，人家是還要注冊(cè)才能下載的社區(qū)。我們自己搞這種就過頭了。

 

 

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

 

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

 

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

 

其實(shí)其中有的地方不太到位，比如分享界面、官網(wǎng)、統(tǒng)計(jì)分析。只能等人來幫忙了。

 

如下圖是當(dāng)時(shí)做的一個(gè)極限測(cè)試

 

當(dāng)時(shí)數(shù)據(jù)量一大就丟失數(shù)據(jù)。于是自己做了個(gè)編碼方式，減少數(shù)據(jù)量，這個(gè)圖證明的就是只要網(wǎng)絡(luò)能傳輸，內(nèi)容再多都能處理。

 

這個(gè)游戲的不好之處就是必須有一定的玩家基數(shù)才能帶動(dòng)起來。另外，我們開發(fā)很多功能其實(shí)沒必要，先開發(fā)主要功能，看市場(chǎng)反應(yīng)，在進(jìn)一步開發(fā)才有意義。于是有了下一個(gè)游戲，見下一篇。

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

這個(gè)游戲名稱叫砸金幣水果機(jī)，我們做了英文版，中文版，ios版,andriod版。如下就是英文andriod版，模仿街機(jī)風(fēng)格，頗有懷舊的味道。當(dāng)然技術(shù)上我并不看好這款游戲，但實(shí)際效果卻不好說，圖片精美，物理效果不錯(cuò)，觸發(fā)的神奇界面不少，就看游戲?qū)沤z對(duì)街機(jī)是否著迷過了。估計(jì)也是這些原因?qū)е卤?/span>google推薦吧，我們也沒花任何一分錢買推薦。

 

其實(shí)我更想推薦的是多人網(wǎng)上互動(dòng)的手機(jī)游戲，希望在下一篇給大家做介紹。

 

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

 

這幾個(gè)月的經(jīng)驗(yàn)總結(jié)希望給大家一些啟發(fā)， 如果我們做一個(gè)跨平臺(tái)手機(jī)游戲發(fā)最好做好以下準(zhǔn)備

 

Js越熟越好，不要以為它真的很簡單，要做手機(jī)游戲，必須學(xué)會(huì)優(yōu)化，如果是客戶端，要求很高，如果在繪圖時(shí)畫一大堆對(duì)象，andriod一定會(huì)過不去的。那么就一方面研究js（我的建議是，不要去啃面向?qū)ο?，代碼清晰，規(guī)范最重要），一方面細(xì)讀html5規(guī)范吧。

 

有java基礎(chǔ)，那么在用phonegap打包到andriod系統(tǒng)下時(shí)，就能較快明白怎么做配置，怎么添加插件和使用。Java和js都不錯(cuò)的話那么寫點(diǎn)插件也不錯(cuò)。有的功能是必須用插件的哦。

 

有點(diǎn)andriod設(shè)計(jì)的基礎(chǔ)，我是沒什么基礎(chǔ)，所以也花不少時(shí)間研究，其實(shí)就研究它的一些配置關(guān)系。也會(huì)有煩人問題的。

 

有點(diǎn)mac下的xcode基礎(chǔ)，xcode的基本的使用最好明白，否則還是要花不少時(shí)間摸索，對(duì)于mac系統(tǒng)的設(shè)計(jì)，我實(shí)在不太茍同，雖然我能挺快適應(yīng)。至于oc，會(huì)一些也更好，這樣方便使用插件和寫插件。

 

想進(jìn)軍app store，越早申請(qǐng)賬號(hào)，越早提交越好，遇到的問題非常之多。也許怪物英文不好，mac不熟吧。

 

當(dāng)然硬件上最好有幾個(gè)手機(jī)，ipod,pad做測(cè)試，ipad3尤其要測(cè)。

 

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

 

 另一個(gè)建議就是認(rèn)準(zhǔn)了自己喜歡的，一頭扎進(jìn)去動(dòng)手就是了。

 

這篇文章總體質(zhì)量不高，沒給大家講講技術(shù)細(xì)節(jié)，商業(yè)游戲，不太方便哈，會(huì)給大家講開源的。甚至有的地方可能講失誤也歡迎批評(píng)指出。本篇完。

 

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

游戲地址2：

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

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

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

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

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

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

  那么這樣的一個(gè)規(guī)則列表就很好建立了，其實(shí)這個(gè)過程還是有很多規(guī)則可以遵循的，其中這里遵循了左遞歸，終結(jié)字符先出現(xiàn)的規(guī)則優(yōu)先表達(dá)這兩條規(guī)則。更多，你還可以畫個(gè)有限狀態(tài)機(jī)，做一下分析，化解，做成閉包，某些運(yùn)算還要考慮優(yōu)先級(jí)之類。當(dāng)然這里這樣小的結(jié)構(gòu)基本是最優(yōu)了，沒什么化解的必要。

代碼附上
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中最基本的結(jié)構(gòu)。kv_list就是剝離大括號(hào)后的鍵值對(duì)列表。v_list是剝離中括號(hào)的列表。

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

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

本來一直覺得js是個(gè)讓人混亂不堪的語言，html5的出現(xiàn)改變了我對(duì)它的看法。到了html5的時(shí)代，各種犀利的設(shè)計(jì)就更明顯的需要js了?？戳艘恍┬∮螒蛟O(shè)計(jì)，忽然來了興趣，于是寫了幾個(gè)小游戲，這是其中一個(gè)。已經(jīng)開源，歡迎下載https://github.com/yangyusong/ChainReaction。

 

游戲叫連鎖反應(yīng)，這個(gè)游戲是看到有人在ipad上面玩的游戲，覺得好玩，自己實(shí)現(xiàn)一遍。游戲是這樣的，一群小球在區(qū)域內(nèi)彈來彈去，玩家鼠標(biāo)點(diǎn)擊一個(gè)地方，在一個(gè)圓的范圍內(nèi)，小球碰上就會(huì)爆炸，爆炸的過程中其他小球碰上也會(huì)發(fā)生爆炸，這就叫連鎖反應(yīng)。每一關(guān)爆破一定數(shù)量的小球就算勝利。

 

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

 

看看截圖

 

大的那個(gè)灰色的（其實(shí)是半透明的）圓是鼠標(biāo)范圍。其他是彈來彈去的小球?？梢钥吹?，小球是各種顏色的。

 

我們看看小球的定義

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

    //圓心坐標(biāo)

    this.x = x;

    this.y = y;

    //運(yùn)動(dòng)速度

    this.xSpeed = xSpeed;

    this.ySpeed = ySpeed;

    //半徑

    this.radius = radius;

    //顏色

    this.color = color;

    //生存計(jì)數(shù)器

    this.liveTime = liveTime;

    //狀態(tài)：

    this.state = state;

}

 

其中生存計(jì)數(shù)器是要和狀態(tài)結(jié)合使用的，狀態(tài)分為如下5個(gè)狀態(tài)

//小球狀態(tài)

var SMALL = 0;

var BIG = 1;

var EXPEND = 2;

var END = 3;

var DIS_VISIBLE = 4;

 

當(dāng)處于EXPEND狀態(tài)的時(shí)候，就說明小球進(jìn)入爆炸狀態(tài)，這時(shí)候生存計(jì)數(shù)器就用上了。計(jì)數(shù)器是個(gè)倒計(jì)時(shí)，計(jì)時(shí)到零，小球進(jìn)入DIS_VISIBLE狀態(tài)。這時(shí)候小球就不再渲染出來。

 

我們的小球有不同大小，不同顏色，看看小球的初始化就知道了，代碼在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負(fù)責(zé)我們關(guān)卡的管理，有這一關(guān)的小球數(shù)，和通關(guān)需要爆破的小球數(shù)?？傊@里按照本關(guān)需要的小球數(shù)初始化小球，可以看到里面有很多的隨機(jī)函數(shù)使用。小球的半徑處于如下兩個(gè)數(shù)之間

var SMALL_RADIUS1 = 3;

var SMALL_RADIUS2 = 10;

通過random_range來進(jìn)行這個(gè)范圍隨機(jī)。我們看到速度也是隨機(jī)的，范圍是

var SPEED_MIN = 10;

var SPEED_MAX = 50;

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

 

我們講講主要流程，其實(shí)其中的詳細(xì)注釋，我覺得已經(jīng)可以教會(huì)很多初學(xué)者。不過還是講講好。主要流程就在Main.js中。負(fù)責(zé)初始化，渲染和循環(huán)。開始我們?cè)O(shè)置了一堆全局變量。

var g_ObjectMgr = null;

var g_MouseEventDispatch = new MouseEventDispatch();

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

//當(dāng)前關(guān)

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

//關(guān)卡數(shù)組

var g_StepsArr = [];

g_StepsArr = stepsInit();

//爆炸開始標(biāo)識(shí)

var _ExpendStart = false;

 

if(DEBUG){

    _CircleLib.test();

}

var _Main = { 。。。

 

包括關(guān)卡數(shù)組，當(dāng)前關(guān)數(shù)，爆炸標(biāo)識(shí)等。居然還設(shè)置了一個(gè)是否調(diào)試的狀態(tài)量，其實(shí)我也不知道js調(diào)試怎樣才好，基本就按自己的方式調(diào)。 _Main是個(gè)很大的結(jié)構(gòu)。我更寧愿把它當(dāng)做單例來思考。主要是，它包括了渲染，這個(gè)渲染不具通用性，僅此一例就夠。其他地方用了且不是畫出什么就難說了。當(dāng)然已經(jīng)設(shè)計(jì)其實(shí)我會(huì)更多考慮通用性的設(shè)計(jì)，盡量不設(shè)計(jì)成這種單例。

 

這個(gè)_Main結(jié)構(gòu)中有我們的畫布canvas,我們的初始化函數(shù)，每關(guān)調(diào)用一次，它來負(fù)責(zé)2d對(duì)象的初始化，游戲?qū)ο蟮某跏蓟Ｊ髽?biāo)監(jiān)聽初始化。然后就是進(jìn)入我們的循環(huán)。循環(huán)很簡單，就干四件事情

/*

     * 循環(huán)繪圖

     * 1.清空畫面

     * 2.游戲?qū)ο箨P(guān)系處理

     * 3.渲染出來

     * 4.循環(huán)調(diào)用

     */

    step: function(){

        this.clear();

        g_ObjectMgr.step();

        this.render();

        _this = this;

        this._st = setTimeout(function(){

            _this.step();

        }, 50);

    }

 

看看我們的下一關(guān)都干些什么

/*

     * 下一關(guān)

     */

    nextStep: function(){

        clearTimeout(this._st);

        if(this.canvas.getContext)

        {

            g_MouseEventDispatch.start();

            this.initObjects();

            this.step();

        }

    }

它就是清除計(jì)時(shí)器，重新分配事件，初始化對(duì)象。然后進(jìn)入循環(huán)，為什么是這樣呢？清除計(jì)時(shí)器以使我們之前的循環(huán)停止。因?yàn)槲覀凂R上有新的循環(huán)了，其實(shí)事件可以看做有兩個(gè)狀態(tài)，我們按下鼠標(biāo)的時(shí)候，這個(gè)事件就不可用了，下次使用必須初始化。小球數(shù)量變了，必須按照本關(guān)的需求來初始化。進(jìn)入循環(huán)，新的循環(huán)開始。

看看再玩一次（本級(jí)）按鈕的調(diào)用：

/*

     * 再玩一次（本級(jí)）

     */

    again: function(){

        this.nextStep()

    }

 

為什么居然是調(diào)用下一關(guān)呢？只能說我設(shè)計(jì)的太懶惰，nextStep()本身根本不管關(guān)卡的變更。關(guān)卡的變更完全在爆炸檢查函數(shù)里，一旦發(fā)現(xiàn)小球爆炸，就會(huì)修改當(dāng)前關(guān)卡。而單純調(diào)用nextStep所使用的關(guān)卡是未改變過的，故而是在玩本級(jí)。

 

我們?cè)倏匆幌?/span>ObjectMgr.js中的爆炸檢查函數(shù)

 

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+"個(gè)小球，恭喜進(jìn)入第"+ next + "關(guān)，\n\

下一關(guān)需要爆破" +g_StepsArr[g_Steps + 1].killNum + "個(gè)小球");

                g_Steps++;

                _Main.init();

            }

        }

    }

 

還記得_ExpendStart這個(gè)變量的意思么？就是說鼠標(biāo)是否按下了，按下的話我們就要檢查是否有小球撞上鼠標(biāo)范圍或撞上爆炸中的小球。其實(shí)這里的調(diào)用_CircleLib.intersect這個(gè)函數(shù)是有些小問題的。它是通過引用修改的當(dāng)前小球的狀態(tài)，至于為什么有很少量的小球未修改狀態(tài)，這個(gè)我還沒弄明白?？傊@個(gè)函數(shù)檢查了爆炸小球的數(shù)量，一旦爆炸小球的數(shù)量符合本關(guān)的要求，那么就可以進(jìn)入下一關(guān)，可以看到我們進(jìn)入下一關(guān)的提示是一個(gè)對(duì)話框，不是很友好，可以設(shè)計(jì)為一個(gè)圖片較好，可惜我沒時(shí)間找美術(shù)。

 

點(diǎn)擊確定，我們玩下一關(guān)

 

小球多了很多，找個(gè)好點(diǎn)的位置，能捕捉很多小球。

看一下爆炸過程吧：

這是第十八關(guān)的一個(gè)爆炸情形，更具體的內(nèi)容歡迎看具體代碼吧，要不還講好長時(shí)間。

 

做完這個(gè)例子，發(fā)現(xiàn)其實(shí)非常多的小游戲很好設(shè)計(jì)，可惜沒那么多時(shí)間，再說設(shè)計(jì)別人設(shè)計(jì)過的游戲也不是我的目標(biāo)。設(shè)計(jì)一些有趣的小游戲到手機(jī)里，這個(gè)倒是個(gè)不錯(cuò)的方向

游戲中有點(diǎn)擊障礙點(diǎn)，人物走到離障礙物最近點(diǎn)的算法。我這給一個(gè)簡單的算法，這個(gè)問題可以復(fù)雜化，另外這個(gè)問題應(yīng)該由客戶端來完成。

如圖，玩家在b點(diǎn)，點(diǎn)擊了a點(diǎn)，a在一個(gè)障礙區(qū)（紅色，玩家只能在障礙區(qū)外移到）。這時(shí)候玩家應(yīng)該走到c點(diǎn)，我們就需要計(jì)算出c點(diǎn)，一個(gè)簡單的數(shù)學(xué)題，用什么語言都沒幾行代碼，我就用erlang寫一下。


障礙物通常都不規(guī)則的，我們只能從a點(diǎn)開始一個(gè)個(gè)點(diǎn)測(cè)試，直到不是障礙點(diǎn)，也就是x自增，y=x*tan(A),然后測(cè)試這個(gè)點(diǎn)，地圖數(shù)據(jù)都是靜態(tài)的數(shù)據(jù)，方便測(cè)試，這里就寫死一個(gè)x為障礙結(jié)束的地方作為障礙檢測(cè)函數(shù)。

我們還需要一個(gè)記錄表示點(diǎn)，tan函數(shù)在erlang中是有的，但其實(shí)可以不用，我們就直接要一個(gè)比值，但需要一個(gè)向上取整的函數(shù)，據(jù)說是round函數(shù)，但測(cè)試一下，不行，難道是因?yàn)椴皇亲钚耾tp
D:\NetBeanPj\mytest\src>erl
Eshell V5.8.1.1  (abort with ^G)
1> round(1.2).
1

所以這里我們要寫的一個(gè)輔助函數(shù)，最后就是我們的重點(diǎn)，取最近點(diǎn)，用一個(gè)列表解析就夠了，剩下的就看具體實(shí)現(xiàn)吧，還可以寫個(gè)測(cè)試函數(shù)，這次就不寫成單元測(cè)試了。好的我們看代碼：
-module(nearst_point).

-export([ceil/1, is_barrier/1, nearst_point/2]).

-export([p1/0, p2/0, test_1/0]).

%% 一個(gè)點(diǎn)
-record(point,{
    x,
    y
              }).

%% 向上取整
ceil(Num) ->
    Num1 = round(Num),
    case Num1 >= Num of
        true ->
            Num1;
        false ->
            Num1+1
    end.

%% 判斷是否是障礙物
is_barrier(Point) ->
    Point#point.x =/= 5 .

%% 查找最近點(diǎn)
nearst_point(Pointa,Pointb) ->
    Tan = (Pointa#point.x - Pointb#point.x)/(Pointa#point.y - Pointb#point.y),
    case Pointa#point.x > Pointb#point.y of
        true ->
            MaxX = Pointa#point.x,
            MinX = Pointb#point.x;
        false ->
            MaxX = Pointb#point.x,
            MinX = Pointa#point.x
    end,
    try
        [
            begin
                Point = #point{
                    x = X,
                    y = ceil(X*Tan)},
                case is_barrier(Point) of
                    true ->
                        ok;
                    false ->
                        throw(Point)
                end
            end|| X <- lists:seq(MinX, MaxX)]
    catch
        throw: Point ->
            io:format("~p", [Point]),
            Point
    end.

%% 下面函數(shù)測(cè)試用，可以改成單元測(cè)試，這里就免了
p1() ->
    #point{
        x = 1,
        y = 9}.

p2() ->
    #point{
        x = 15,
        y = 25}.

test_1() ->
    nearst_point(p1(),p2()).

編譯和測(cè)試
2> c(nearst_point).
{ok,nearst_point}
3> nearst_point:test_1().
{point,5,5}{point,5,5}
4>

我們的測(cè)試如預(yù)期的在5那個(gè)點(diǎn)得到，好像有個(gè)小問題，怎么這個(gè)點(diǎn)輸出了兩次？哦，這不是問題，一個(gè)點(diǎn)是代碼里的io輸出的，一個(gè)點(diǎn)是返回給shell，shell的輸出，看來寫代碼的人太懶，疑惑也會(huì)增多啊。在nearst_point中用到了一個(gè)小技巧，就是用throw來跳出循環(huán)（這個(gè)在erlang中還是挺有意思），這次到這，應(yīng)該說寫的很基礎(chǔ)很難看。下次會(huì)來點(diǎn)有意思的，歡迎大家學(xué)習(xí)erlang。