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

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

ただいまの
回答率

90.53%

  • JavaScript

    16321questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Ruby on Rails

    7231questions

    Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

  • CoffeeScript

    140questions

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

jsのコードをCoffeeScriptにしたい

解決済

回答 3

投稿 編集

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

miiichat

score 46

わからないこと

以前書いたjsのコードをrailsに移すとき、せっかくならcoffeeに書き直してみようと考え、頑張ってみましたがうまくいきません。
coffeescriptのことはよくわからず、どこがまちがっているのかわかりません。

どなたか教えてくれると助かります。

エラー

SyntaxError: [stdin]:7:1: unexpected indentation このようなエラーが出ていました

(追記)今はこんなエラーが出ています。
SyntaxError: [stdin]:8:18: unexpected ,

エラー直りました!

ソースコード

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)
                                   break
                               when 2
                                   enemyBall.direction = 'right'
                                   enemyBall.x += stop(2, enemyBall.x, enemyBall.r)
                                   break
                               when 3
                                   enemyBall.direction = 'top'
                                   enemyBall.y += stop(3, enemyBall.y, enemyBall.r)
                                   break
                               when 4
                                   enemyBall.direction = 'bottom'
                                   enemyBall.y += stop(4, enemyBall.y, enemyBall.r)
                                   break
                              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++
                  if !(frame % 10)
                    mobMove()
                    for i in [0..balls.length-1]
                              balls[i].draw()
                    while i = schottBalls.length
                              schottBalls[i].draw()
                              i--

            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'))

その他

本文が決められている文字数を超えるのでもとのjsのコードは載せれませんでした。以前の質問に載せてあります

  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 3

checkベストアンサー

+2

JavaScriptがCoffeeScriptでどう表現されるのかは下記サイトを利用してみてください。
js2coffee 2.0 — convert JavaScript to CoffeeScript
想定しているJavaScriptが本当にその書き方でいいのかを確認できると思います。

まず、CoffeeScriptでの変数宣言ですが、CoffeeScriptでは変数への最初の代入が宣言と初期化を兼ねます。これはPythonやRubyでの変数宣言と同じ考えで、そもそも変数は初期化しないと意味がないのが普通なのだから、初期化を宣言と兼ねようという考えてです。もし、undefined値といて初期化したい場合は、a = undefinedと明記する必要があります。

次に、if-else文の所ですが、elseのあとにifが抜けているようです。ここはJavaScriptと同じようにelse if 条件と書く必要があります。

CoffeeScriptはPythonと同じように行儀がいい書き方を強制します。ある程度インデントが不揃いでも動くことは動きますが、文法エラーや予期せぬ解釈が発生します。インデントの幅は揃えてください。それだけで、Pythonのように美しく、わかりやすいコードになるはずです。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/02/04 09:47

    回答ありがとうございます。
    エラー直りました!
    しかしなんだかチカチカしてるし、色が薄いです。
    line:114のところでエラーが出てしまします。
    (forで書いていましたがエラーが出たのでwhileに変えてみましたが・・)

    キャンセル

  • 2017/02/04 10:03

    丸が描かれてなぜかそのあとすぐ消されているみたいです。

    キャンセル

  • 2017/02/04 10:21

    そこはまた別の問題かなと思います。
    一度整理して、それでもわからなければ、また別の問題として質問を別途上げていただければと思います。

    キャンセル

  • 2017/02/04 10:46

    そうですね
    もうちょっと考えて出来なければ質問してみたいと思います。

    キャンセル

+1

unexpected indentation
インデントに不都合があるのではないでしょうか。
coffeeはインデントで構造を制御しています。

line:6 ifの位置が微妙にズレているようにみえるのはteratailのコードコーティングのせいでしょうか?

追記
メインの言語ではないのでそこまで詳しくはないのですが、coffeeって変数宣言単体でできなかったはず(start,end)するなら空文字いれるとかしないと。(start="")
試せてないので少し不安ですがjsとは変数定義の方法が結構違ったはずですので,ではなく;でちゃんと区切ってみたらどうでしょうか

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

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/02/03 15:30

    回答ありがとうございます。
    インデントが重要なんですね!
    少し修正してみましたが直りませんでした、、

    キャンセル

  • 2017/02/03 15:30

    コードを修正したものに変えてみます。

    キャンセル

  • 2017/02/03 15:33

    エラーが変わりました

    キャンセル

  • 2017/02/03 16:59

    少し調べましたがやっぱりjsのように,区切りでは定義できないのと、nullで変数宣言できないっぽいですね。
    慣れていない言語で大変だとは思いますがもう少しリファレンスを深く読んでみるとこもお勧めいたします。
    http://memo.sappari.org/coffeescript/coffeescript-langref

    キャンセル

  • 2017/02/03 17:43

    いろいろ調べてくださりありがとうございます。
    今度はstylesheetがおかしいと言われました、、

    キャンセル

  • 2017/02/04 09:47

    エラーは出なくなりました!
    でもなぜかチカチカします

    キャンセル

+1

js2coffee というコマンドで、 javascript コードを coffee script に変換できます。

$ gem install js2coffee
( $ npm install -g js2coffee でもよいかもしれない)

で js2coffee コマンドをインストールできます。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/02/04 10:05

    回答ありがとうございます。
    そんな便利なものがあるんですね。
    今回は自分でcoffeescriptに変えてみたいと思います!

    キャンセル

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

  • ただいまの回答率 90.53%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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

  • JavaScript

    16321questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Ruby on Rails

    7231questions

    Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

  • CoffeeScript

    140questions

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