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

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

ただいまの
回答率

89.85%

javascriptで作るブロック崩しについて

受付中

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 1,433
退会済みユーザー

退会済みユーザー

前提・実現したいこと

javascriptでブロック崩しを作っていますが、なかなかうまくいかず、参考サイトを調べていたら、とあるサイトが見つかり、そのサイトのソースコードを参照にして作りたいと思ったのですが、コード自体は短いものの、それぞれのコードの意味を理解することができません、よろしかったら、漠然としてもいいので、コードの解説をお願いします。
サイトURLも載せておきます
http://jsfiddle.net/martin_/Fq8F4/

該当のソースコード

<!DOCTYPE html>
<html>
    <head>
    <meta charset=UTF-8">

    <script type="text/javascript" src="/js/lib/dummy.js"></script>

      <link rel="stylesheet" type="text/css" href="abc.css">
    </style>

    <title>ブロック崩し</title>

    <script type='text/javascript'>//<![CDATA[
    window.onload=function(){
        (function (fld, pF, px, dx, dy, lifes, score) { //
              var cycle = setInterval(function () { 
            var bx = pF(ball.style.left = pF(ball.style.left) + dx + 'px') | 0,
              by = pF(ball.style.top = pF(ball.style.top) + dy + 'px') | 0,
              row = ((by - 30) / 14) | 0, col = (bx / 32) | 0;

            if (bx < 0 && dx < 0 || bx >= 314 && dx > 0) dx *= -1;//壁の広さ
            if (bx + 6 >= px && bx <= px + 58 && by >= 259 && by <= 264) {
                  dy *= -1;
                  if (bx <= px + 15) dx = -6;
                  else if (bx >= px + 37) dx = 6;
                  else if (Math.abs(dx) === 6) dx = (dx * 2 / 3) | 0;
            }
            if (by < 0) dy *= -1;
               if (by >= 288 && !--lifes) clearInterval(cycle), alert('残念(>.<)');
            if (by >= 288 && lifes) dy *= -1, lifesNode.innerHTML = lifes;
            if (by >= 18 && by <= 100 && fld[row * 10 + col].className != 'removed') {
                  dy *= -1, fld[row * 10 + col].className = 'removed';
                  if (dx < 0 && (bx % 32 < 10 || bx % 32 > 22)) dx *= -1;
                  if (dx > 0 && ((bx + 12) % 32 < 10 || (bx + 12) % 32 > 22)) dx *= -1;
                  scoreNode.innerHTML = ++score;
                  if (score == 50) clearInterval(cycle), alert('ゲームクリア\(・・)/'); //スコアが50になったらclearインターバルでsetインターバルの処理を停止させアラート表示
            }
              }, 1000 / 60);

             document.addEventListener('mousemove', function (e) { //マウスを動かす
            px = (e.pageX > 40) ? ((e.pageX < 290) ? e.pageX - 40 : 256) : 0;
             paddle.style.left = px + 'px';
              }, false);
        }(field.children, parseFloat, 129, -4, -4, 3, 0)); //左から順に、ブロック,,,,,ライフ数,スコアの初期値
    }//]]> 

    </script>

    </head>

    <body>
          <div id="field">//ブロック生成
            <div class="brick"></div>
            <div class="brick"></div>
            <div class="brick"></div>
            <div class="brick"></div>
            <div class="brick"></div>
            <div class="brick"></div>
            <div class="brick"></div>
            <div class="brick"></div>
            <div class="brick"></div>
            <div class="brick"></div>
            <div class="brick"></div>
            <div class="brick"></div>
            <div class="brick"></div>
            <div class="brick"></div>
            <div class="brick"></div>
            <div class="brick"></div>
            <div class="brick"></div>
            <div class="brick"></div>
            <div class="brick"></div>
            <div class="brick"></div>
            <div class="brick"></div>
            <div class="brick"></div>
            <div class="brick"></div>
            <div class="brick"></div>
            <div class="brick"></div>
            <div class="brick"></div>
            <div class="brick"></div>
            <div class="brick"></div>
            <div class="brick"></div>
            <div class="brick"></div>
            <div class="brick"></div>
            <div class="brick"></div>
            <div class="brick"></div>
            <div class="brick"></div>
            <div class="brick"></div>
            <div class="brick"></div>
            <div class="brick"></div>
            <div class="brick"></div>
            <div class="brick"></div>
            <div class="brick"></div>
            <div class="brick"></div>
            <div class="brick"></div>
            <div class="brick"></div>
            <div class="brick"></div>
            <div class="brick"></div>
            <div class="brick"></div>
            <div class="brick"></div>
            <div class="brick"></div>
            <div class="brick"></div>
            <div class="brick"></div>

            <div id="paddle"></div>
            <div id="ball" style="left: 154px; top: 258px;"></div>
            <div id="lifesNode">3</div>
            <div id="scoreNode">0</div>
        </div>
        <br>
        <br>
        <Form><Input type="button" value="タイトルに戻る" onClick="document.location ='../home.html'"></Form>
        <Form><Input type="button" value="リセット" onClick="location.reload();"></Form>
        <script>
            if(window.parent && window.parent.parent){
                window.parent.parent.postMessage(["resultsFrame", {
                  height: document.body.getBoundingClientRect().height,
                  slug: "Fq8F4"
                }], "*")
              }
        </script>

    </body>

</html>


CSS

* {
    padding: 0;
    margin: 0;
}

body {
    padding: 8px;
    cursor: none !important;
}

#field {
    width: 322px;
    height: 270px;
    padding-top: 30px;
    border: 1px solid #ccc;
    font-size: 0;
    position: relative;
}

.brick,
.removed {
    width: 28px;
    height: 10px;
    margin: 1px;
    display: inline-block;
    border: 1px solid;
}

.brick {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cdd), color-stop(100%, #777));
    background: -webkit-linear-gradient(top,  #cdd 0%, #777 100%);
    background: linear-gradient(to bottom,  #cdd 0%, #777 100%);
    border-color: #777 #777 #000 #000;
    border-radius: 3px;
}

.brick:nth-child(2n) {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ccc), color-stop(100%, #777));
    background: -webkit-linear-gradient(top,  #ccc 0%, #777 100%);
    background: linear-gradient(to bottom,  #ccc 0%, #777 100%);
}

.brick:nth-child(5n) {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ccc), color-stop(100%, #008));
    background: -webkit-linear-gradient(top,  #ccc 0%, #008 100%);
    background: linear-gradient(to bottom,  #ccc 0%, #008 100%);
}

.brick:nth-child(3n) {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ccc), color-stop(100%, #080));
    background: -webkit-linear-gradient(top,  #ccc 0%, #080 100%);
    background: linear-gradient(to bottom,  #ccc 0%, #080 100%);
}

.brick:nth-child(7n) {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ccc), color-stop(100%, #808));
    background: -webkit-linear-gradient(top,  #ccc 0%, #808 100%);
    background: linear-gradient(to bottom,  #ccc 0%, #808 100%);
}

.brick:nth-child(11n) {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ccc), color-stop(100%, #880));
    background: -webkit-linear-gradient(top,  #ccc 0%, #880 100%);
    background: linear-gradient(to bottom,  #ccc 0%, #880 100%);
}

.removed {
    border-color: transparent;
}

#paddle {
    width: 62px;
    height: 5px;
    border: 1px solid #777;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cdd), color-stop(100%, #777));
    background: -webkit-linear-gradient(top,  #cdd 0%, #777 100%);
    background: linear-gradient(to bottom,  #cdd 0%, #777 100%);
    position: absolute;
    left: 128px;
    top: 270px;
    border-radius: 3px;
}

#ball {
    width: 10px;
    height: 10px;
    border: 1px solid #955;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fdd), color-stop(100%, #500));
    background: -webkit-linear-gradient(top,  #fdd 0%, #500 100%);
    background: linear-gradient(to bottom,  #fdd 0%, #500 100%);
    border-radius: 50%;
    position: absolute;
}

#lifesNode,
#scoreNode {
    position: absolute;
    right: -85px;
    font: 14px arial, helvetica, sans-serif;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 1px 0;
    width: 75px;
    text-align: center;
}

#lifesNode {
    top: 20px;
}

#lifesNode:before {
    content: 'lifes: ';
}

#scoreNode {
    top: 50px;
}

#scoreNode:before {
    content: 'score: ';
}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2017/05/23 21:16

    正直どんなコードであれ全て説明するのは不可能です。時間面もそうですし、労力も果てしない。顔を突き合わせてやるわけではないですし、ネットを利用した質問機能を使う以上は、ある程度調べてからじゃないと回答は得られませんよ。まずはひとつひとつ部品に分解して調べて理解をしていってください。文法が分からないレベルであればそもそも基礎からです。

    キャンセル

  • koyhoge

    2017/05/25 13:42

    どの部分が分からないのか、1点に絞って質問するのが良いのではないでしょうか?

    キャンセル

  • 退会済みユーザー

    2017/06/02 19:47

    複数のユーザーから「やってほしいことだけを記載した丸投げの質問」という意見がありました
    「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。

回答 1

0

これはballのhtml elementをdomで移動させて、
blockのelementとif文で矩形判定して横側に当たったのか上下の辺に当たったのかを判定しているようです。
また、%(余り)と並んだブロックの座標の周期性を使ってブロックとボールの相対座標を出しています。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

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