coffeescriptが思うように動きません

Question

###わからないこと
前にjsで書いたものをcoffeescriptで書いてみましたが思うように動きません。

###今起きていること
・なぜかチカチカします。(描かれてすぐ消えている？)
・弾がすごく遅い

エラーは出なくなりましたが、jsと同じように動いてくれません。

どなたか教えてくれると助かります。
###ソースコード

window.onload = ->
    draw()

draw = ->
         canvas = document.getElementById('canvas')
         if !canvas || !canvas.getContext then return false
         ctx = canvas.getContext('2d')
         start=0
         end=0
         balls=[]
         schottBalls=[]
         direction=['top','right','left','bottom']

         rand = (min,max)->
                return min+Math.floor(Math.random()*(max-min+1))

         Ball = (name, direction) ->
              this.x = rand(100, 300)
              this.y = rand(100, 200)
              this.r = 10
              this.name = name
              this.direction = direction
              if name == '' then this.name = 'enemy'

         Ball.prototype.draw = ->
            if this.direction == 'top'
                start = 290
                end = 250
            else if this.direction == 'left'
                start = 200
                end = 160
            else if this.direction == 'bottom'
                start = 110
                end = 70
            else if this.direction == 'right'
                start = 20
                end = 340

            ctx.beginPath()
            ctx.arc(this.x, this.y, this.r, start / 180 * Math.PI, end / 180 * Math.PI)
            ctx.stroke()

         checkPosition =(x, y, r, ball) ->
            if x - r < 0
                ball.x = r
            else if x + r > canvas.width
                ball.x = canvas.width - r
            else if y - r < 0
                ball.y = r
            else if y + r > canvas.height
                ball.y = canvas.height - r

          stop = (a, b, c) ->
            switch a
             when 1
               return msg = if (b - c) < 0 then 5 else -5
             when 2
               return msg = if (b + c) > canvas.width then -5 else 5
             when 3
               return msg = if (b - c) < 0 then 5 else -5
             when 4
               return msg = if (b + c) > canvas.height then -5 else 5

          mobMove = ->
                 for i in [1..balls.length-1]
                      enemyBall = balls[i]
                      if enemyBall.name == 'enemy'
                           a = rand(1, 4)
                           switch a
                               when 1
                                   enemyBall.direction = 'left'
                                   enemyBall.x += stop(1, enemyBall.x, enemyBall.r)
                               when 2
                                   enemyBall.direction = 'right'
                                   enemyBall.x += stop(2, enemyBall.x, enemyBall.r)
                               when 3
                                   enemyBall.direction = 'top'
                                   enemyBall.y += stop(3, enemyBall.y, enemyBall.r)
                               when 4
                                   enemyBall.direction = 'bottom'
                                   enemyBall.y += stop(4, enemyBall.y, enemyBall.r)
                              checkPosition(enemyBall.x, enemyBall.y, enemyBall.r, enemyBall)

           window.onkeydown = ->
                  k = event.keyCode
                  userBall = balls[0]
                  if k == 37
                        userBall.x -= 5
                        userBall.direction = 'left'
                  else if k == 38
                        userBall.y -= 5
                        userBall.direction = 'top'
                  else if k == 39
                        userBall.x += 5
                        userBall.direction = 'right'
                  else if k == 40
                        userBall.y += 5
                        userBall.direction = 'bottom'
                  checkPosition(userBall.x, userBall.y, userBall.r, userBall)


            draw = ->
                  requestAnimationFrame(draw)
                  ctx.clearRect(0, 0, canvas.width, canvas.height)
                  frame+=1
                  if !(frame % 10)
                    mobMove()
                    for i in [0..balls.length-1]
                              balls[i].draw()
                    for i in [0..schottBalls.length-1]
                              schottBalls[i].draw()

            SchottBall =(x, y, w)->
                  this.x = x
                  this.y = y
                  this.w = w

            SchottBall.prototype.draw = ->
                  ctx.beginPath()
                  ctx.arc(this.x, this.y, 5, 0, 2 * Math.PI)
                  ctx.stroke()
                  switch this.w
                      when 'top'
                          this.y -= 3
                      when 'right'
                          this.x += 3
                      when 'left'
                          this.x -= 3
                      when 'bottom'
                          this.y += 3
                  if this.x >= canvas.width + 5 ||
                     this.x <= -5 ||
                     this.y >= canvas.height + 5 ||
                     this.y <= -5
                      schottBalls.splice(schottBalls.indexOf(this), 1)

              frame = 0
              init = ->
                  balls.push(new Ball('user', direction[rand(0, 4)]))
                  for i in [0..2]
                      balls.push(new Ball('', direction[rand(0, 4)]))
                  draw()

              init()

              window.onkeyup = (e)->
                  if e.keyCode == 32
                      for  i in [0..balls.length-1]
                          ball = balls[i]
                          if ball.name == 'user'
                              if ball.direction == 'top'
                                  schottBalls.push(new SchottBall(ball.x, ball.y - ball.r, 'top'))
                              else if ball.direction == 'left'
                                  schottBalls.push(new SchottBall(ball.x - ball.r, ball.y, 'left'))
                              else if ball.direction == 'bottom'
                                  schottBalls.push(new SchottBall(ball.x, ball.y + ball.r, 'bottom'))
                              else if ball.direction == 'right'
                                  schottBalls.push(new SchottBall(ball.x + ball.r, ball.y, 'right'))

Answer 1

前の質問の回答にあった https://jsfiddle.net/6qvjc5s5/
を fork して、
js2coffee を使って coffee スクリプトに自動変換したものを https://jsfiddle.net/katoy/yv2qg6fn/におきました。

回転しない円が１つありますが、それなりには動作しているようです。
私は コマンドラインツールで js2coffee を動作させたのですが、その際に、いくつか waraning がでました。
そのあたりを見直していくと、回転しない円があるのを修正できるかもしれません。

$ js2coffee a.js
a.js:115:115:12: [warning] Operator '==' is not supported in CoffeeScript, use '===' instead
a.js:186:186:13: [warning] Variable shadowing ('i') is not fully supported in CoffeeScript
a.js:1:1:0: [warning] Assignment of global variable 'Ball'
a.js:7:7:8: [warning] Operator '==' is not supported in CoffeeScript, use '===' instead
a.js:13:13:8: [warning] Operator '==' is not supported in CoffeeScript, use '===' instead
a.js:14:14:8: [warning] Assignment of global variable 'start'
a.js:15:15:8: [warning] Assignment of global variable 'end'
a.js:16:16:15: [warning] Operator '==' is not supported in CoffeeScript, use '===' instead
a.js:17:17:8: [warning] Assignment of global variable 'start'
a.js:18:18:8: [warning] Assignment of global variable 'end'
a.js:19:19:15: [warning] Operator '==' is not supported in CoffeeScript, use '===' instead
a.js:20:20:8: [warning] Assignment of global variable 'start'
a.js:21:21:8: [warning] Assignment of global variable 'end'
a.js:22:22:15: [warning] Operator '==' is not supported in CoffeeScript, use '===' instead
a.js:23:23:8: [warning] Assignment of global variable 'start'
a.js:24:24:8: [warning] Assignment of global variable 'end'
a.js:33:33:0: [warning] Assignment of global variable 'SchottBall'
a.js:141:141:8: [warning] Operator '==' is not supported in CoffeeScript, use '===' instead
a.js:144:144:16: [warning] Operator '==' is not supported in CoffeeScript, use '===' instead
a.js:160:160:4: [warning] Assignment of global variable 'k'
a.js:162:162:8: [warning] Operator '==' is not supported in CoffeeScript, use '===' instead

参考情報：

• javascript <--> coffeescript、css <--> scssの変換はツールを使おう http://qiita.com/sgp/items/57bceba48ef20626a604

Comments

[miiichat]

回答ありがとうございます！
動くようになりました。
javascript_include_tagを<%= yield %>の後ろに持っていったらうまくいきました。