質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.34%

  • CoffeeScript

    146questions

    CoffeeScriptはプログラミング言語です。シンタックスシュガーの導入により、JavaScriptのコードに変換された後動作します。JavaScriptに比べ、可読性と簡潔性が向上しています。

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 563

miiichat

score 46

わからないこと

前に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'))
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+2

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

回転しない円が1つありますが、それなりには動作しているようです。
私は コマンドラインツールで 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

参考情報:

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/02/06 09:17

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

    キャンセル

同じタグがついた質問を見る

  • CoffeeScript

    146questions

    CoffeeScriptはプログラミング言語です。シンタックスシュガーの導入により、JavaScriptのコードに変換された後動作します。JavaScriptに比べ、可読性と簡潔性が向上しています。