###前提・実現したいこと
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: '; }