enchant.js を追加: express + coffeescript + mongoose の練習 (その2)
http://youichi-kato.cocolog-nifty.com/blog/2011/12/express-coffees.html
> express + coffeescript + mongoose の練習
への追加。
さらに enchant.js での ページも追加してみた。
ファイル構成は次のようになる (nmp install する前の node_modules/ が無い状態)
$ tree
├── README.txt
├── app.coffee
├── package.json
├── public
│ ├── game.html
│ ├── images
│ │ └── miku.gif
│ ├── javascripts
│ │ ├── coffee-script.js
│ │ └── enchant.js
│ ├── src
│ │ └── sample-game.coffee
│ └── stylesheets
│ └── style.css
├── routes
│ └── index.js
└── views
├── index.jade
└── layout.jade
追加したファイルは
public/
game.html
javascripts/
coffee-script.js
enchant.js
images/
miku.gif
coffee-script.js, enchant.js は ネット上から download してくる。
miku.gif は自分で作るか 適当なものを ネット上から download してくる。
game.html、src/sample-game.coffee は
http://d.hatena.ne.jp/gigi-net/20111222/1324541519
> CoffeeScript+enchant.jsで始めるゲーム開発入門
にあったサンプル。
$ cat public/game.html
<html>
<head>
<title>CoffeScript Canvas</title>
<script src="javascripts/coffee-script.js" type='text/javascript'></script>
<script src='javascripts/enchant.js' type='text/javascript'></script>
<script src="src/sample-game.coffee" type="text/coffeescript"></script>
</head>
<body>
</body>
</html>
$ cat public/src/sample-game.coffee
nchant()
class SampleGame extends Game
constructor : ->
super 320, 320
@fps = 30
SampleGame.game = @
@preload "images/miku.gif"
@onload = ->
@rootScene.addChild new Player(100, 100)
@start()
class Player extends Sprite
constructor: (x, y) ->
super 44, 32
@x = x
@y = y
game = SampleGame.game
@image = game.assets['images/miku.gif']
@addEventListener 'enterframe', ->
if game.input.up
@y -= 5
else if game.input.down
@y += 5
if game.input.left
@x -= 5
else if game.input.right
@x += 5
new SampleGame()
$ coffee app.coffee
として、サーバーを起動してから http://localhost/game.html にアクセスする。
カーソルキーでキャラクターが上下左右に移動します。
最近のコメント