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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

1回答

2840閲覧

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

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2017/05/23 09:12

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

###該当のソースコード

javascript&html

1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset=UTF-8"> 5 6 <script type="text/javascript" src="/js/lib/dummy.js"></script> 7 8 <link rel="stylesheet" type="text/css" href="abc.css"> 9 </style> 10 11 <title>ブロック崩し</title> 12 13 <script type='text/javascript'>//<![CDATA[ 14 window.onload=function(){ 15 (function (fld, pF, px, dx, dy, lifes, score) { // 16 var cycle = setInterval(function () { 17 var bx = pF(ball.style.left = pF(ball.style.left) + dx + 'px') | 0, 18 by = pF(ball.style.top = pF(ball.style.top) + dy + 'px') | 0, 19 row = ((by - 30) / 14) | 0, col = (bx / 32) | 0; 20 21 if (bx < 0 && dx < 0 || bx >= 314 && dx > 0) dx *= -1;//壁の広さ 22 if (bx + 6 >= px && bx <= px + 58 && by >= 259 && by <= 264) { 23 dy *= -1; 24 if (bx <= px + 15) dx = -6; 25 else if (bx >= px + 37) dx = 6; 26 else if (Math.abs(dx) === 6) dx = (dx * 2 / 3) | 0; 27 } 28 if (by < 0) dy *= -1; 29 if (by >= 288 && !--lifes) clearInterval(cycle), alert('残念(>.<)'); 30 if (by >= 288 && lifes) dy *= -1, lifesNode.innerHTML = lifes; 31 if (by >= 18 && by <= 100 && fld[row * 10 + col].className != 'removed') { 32 dy *= -1, fld[row * 10 + col].className = 'removed'; 33 if (dx < 0 && (bx % 32 < 10 || bx % 32 > 22)) dx *= -1; 34 if (dx > 0 && ((bx + 12) % 32 < 10 || (bx + 12) % 32 > 22)) dx *= -1; 35 scoreNode.innerHTML = ++score; 36 if (score == 50) clearInterval(cycle), alert('ゲームクリア\(・・)/'); //スコアが50になったらclearインターバルでsetインターバルの処理を停止させアラート表示 37 } 38 }, 1000 / 60); 39 40 document.addEventListener('mousemove', function (e) { //マウスを動かす 41 px = (e.pageX > 40) ? ((e.pageX < 290) ? e.pageX - 40 : 256) : 0; 42 paddle.style.left = px + 'px'; 43 }, false); 44 }(field.children, parseFloat, 129, -4, -4, 3, 0)); //左から順に、ブロック,,,,,ライフ数,スコアの初期値 45 }//]]> 46 47 </script> 48 49 </head> 50 51 <body> 52 <div id="field">//ブロック生成 53 <div class="brick"></div> 54 <div class="brick"></div> 55 <div class="brick"></div> 56 <div class="brick"></div> 57 <div class="brick"></div> 58 <div class="brick"></div> 59 <div class="brick"></div> 60 <div class="brick"></div> 61 <div class="brick"></div> 62 <div class="brick"></div> 63 <div class="brick"></div> 64 <div class="brick"></div> 65 <div class="brick"></div> 66 <div class="brick"></div> 67 <div class="brick"></div> 68 <div class="brick"></div> 69 <div class="brick"></div> 70 <div class="brick"></div> 71 <div class="brick"></div> 72 <div class="brick"></div> 73 <div class="brick"></div> 74 <div class="brick"></div> 75 <div class="brick"></div> 76 <div class="brick"></div> 77 <div class="brick"></div> 78 <div class="brick"></div> 79 <div class="brick"></div> 80 <div class="brick"></div> 81 <div class="brick"></div> 82 <div class="brick"></div> 83 <div class="brick"></div> 84 <div class="brick"></div> 85 <div class="brick"></div> 86 <div class="brick"></div> 87 <div class="brick"></div> 88 <div class="brick"></div> 89 <div class="brick"></div> 90 <div class="brick"></div> 91 <div class="brick"></div> 92 <div class="brick"></div> 93 <div class="brick"></div> 94 <div class="brick"></div> 95 <div class="brick"></div> 96 <div class="brick"></div> 97 <div class="brick"></div> 98 <div class="brick"></div> 99 <div class="brick"></div> 100 <div class="brick"></div> 101 <div class="brick"></div> 102 <div class="brick"></div> 103 104 <div id="paddle"></div> 105 <div id="ball" style="left: 154px; top: 258px;"></div> 106 <div id="lifesNode">3</div> 107 <div id="scoreNode">0</div> 108 </div> 109 <br> 110 <br> 111 <Form><Input type="button" value="タイトルに戻る" onClick="document.location ='../home.html'"></Form> 112 <Form><Input type="button" value="リセット" onClick="location.reload();"></Form> 113 <script> 114 if(window.parent && window.parent.parent){ 115 window.parent.parent.postMessage(["resultsFrame", { 116 height: document.body.getBoundingClientRect().height, 117 slug: "Fq8F4" 118 }], "*") 119 } 120 </script> 121 122 </body> 123 124</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: '; }

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2017/05/23 12:16

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

2017/05/25 04:42

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

回答1

0

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

投稿2018/12/23 01:03

bochan2

総合スコア2050

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問