About

上の Demo, Download ボタンでそれぞれプレイ, ダウンロードできます.

マウス, もしくはタッチでプレイヤー(戦闘機)を操作し向かってくるエネミー(ウィルス)を 避けるシンプルなゲームです.

Movie

ライブコーディングをキャプチャした動画です.

Code

今回制作したゲームのコードです.

# CoffeeScript と gl.enchant.js を使って 3D ゲームを作っていきます
# 10分ほどお付き合い下さい

# この下にコードを書いていきます

# 定数
SCREEN_SIZE   = 640
PLAYER_MODEL  = "model/player.mqo"
ENEMY_MODEL   = "model/virus.mqo"

# おまじない
enchant()

# ゲーム生成
game = new Game(SCREEN_SIZE, SCREEN_SIZE)
game.preload PLAYER_MODEL, ENEMY_MODEL

# 初期化
game.onload = ->
  # シーン
  scene = game.rootScene
  
  # シーン3D
  scene3d = new Scene3D()
  
  # ライト
  light = new DirectionalLight()
  light.color = [1.0, 1.0, 1.0]
  scene3d.setDirectionalLight light
  
  # カメラ
  camera = new Camera3D()
  camera.x = 0
  camera.y = 1
  camera.z = 15
  camera.centerY = -1
  scene3d.setCamera camera
  
  # プレイヤー
  player = new Sprite3D()
  scene3d.addChild player
  player.set game.assets[PLAYER_MODEL]
  
  # タッチ
  scene.ontouchmove = (e) ->
    player.x = (e.x/SCREEN_SIZE) * 4-2
    player.y = -((e.y/SCREEN_SIZE) * 4-2)
  
  # シーン切替時処理
  scene.onenter = ->
    game.frame = 0
  
  # 更新
  scene.onenterframe = ->
    # 敵生成
    if game.frame % 10 is 0
      enemy = new Cube()
      scene3d.addChild enemy
      enemy.set game.assets[ENEMY_MODEL]
      
      enemy.x = Math.random()*4-2
      enemy.y = Math.random()*4-2
      enemy.z = -100
      
      enemy.onenterframe = ->
        @z += 1
        @parentNode.removeChild this if @z > 15
        
    # 衝突判定
    i = 0
    len = scene3d.childNodes.length
    
    while i<len
      elm = scene3d.childNodes&#91;i&#93;
      if elm isnt player and player.intersect(elm) is true
        seconds = game.frame / game.fps
        score = seconds.toFixed()*100
        console.log score, seconds
        game.end score, score + "秒耐えました"
      ++i
    
  
  
  

# ゲーム開始
game.start()

# 完成です.
# 最後まで見ていただきありがとうございました.
# ではまたノシ

&#91;/code&#93;</pre>
</section>

<section>
    <h2>Tips</h2>
    <p>
        今回 CoffeeScript を使ってゲームのコード解説です.
        gl.enchant.js やゲームのアルゴリズムについての解説ではなく, CoffeeScript の特徴について触れています.
    </p>
    
    <section>
        <h3>-&gt;による関数定義</h3>
        
        <p>
            -&gt;で簡単に関数を定義できます. function という単語は長いので -&gt; で代用できるのは
            非常に楽ですね.
        </p>
        <p>
            ただ C++ から来た人とかはポインタのメンバアクセスと勘違いしちゃうかも!! コードの流れ的に大丈夫かな.
        </p>
        <pre class="prettyprint">
  # タッチ
  scene.ontouchmove = (e) ->
    player.x = (e.x/SCREEN_SIZE) * 4-2
    player.y = -((e.y/SCREEN_SIZE) * 4-2)

先に処理を記述する後置 if

CoffeeScript では Ruby でよく使われる後置 if が使えます.

@parentNode.removeChild this if @z > 15

Ruby に慣れている人や, せっかちな人はこっちの方が良いかも!!

is, isnt 演算子を使った条件記述

CoffeeScript では === と !== の代わりにそれぞれ is, isnt が使えます. 文法的にしゃべり言葉に近付くので読みやすくなりますね.

if elm isnt player and player.intersect(elm) is true