30行のjavascriptが
エクセルと
ヘビに収まるのを見
て 、私は進歩に追いつき、そのようなものを作成することにしました。
紳士dies女-純粋なJSの30行アルカノイド
フィドルへのリンク。
また、私は
codepenでそれを複製します。
JavaScript：
(function (fld, pF, px, py, dx, dy, lifes, score) { var cycle = setInterval(function () { var bx = pF(ball.style.left = pF(ball.style.left) + dx + 'px'), by = pF(ball.style.top = pF(ball.style.top) + dy + 'px'), 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 + 6 <= px + 64 && by >= 259 && by <= 264) { dy *= -1; if (bx + 6 <= px + 21) dx = -6; else if (bx + 6 >= px + 43) 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('Game over!'); 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 | 0) % 32 < 10 || (bx | 0) % 32 > 22)) dx *= -1; if (dx > 0 && (((bx + 12) | 0) % 32 < 10 || ((bx + 12) | 0) % 32 > 22)) dx *= -1; scoreNode.innerHTML = ++score; if (score == 50) clearInterval(cycle), alert('Victory!'); } }, 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, 270, -4, -4, 3, 0));
一般的に、私は最大限の信頼性を達成しようとしました：
- ボールの反射角は、ラケットのどちら側に落ちたかによって（わずかに）左右されます。左3分の1に落ちると、ボールは右3分の1に当たると左に飛ぶ（どちらの場合も、発射物は中央に当たるときよりもわずかに大きい角度で反射される） 、中心に当たると、ボールは45°で飛び出し、x軸に沿った方向は変化しません。
- スコアリング（およびそれなし）。
- 3つの命が与えられます。 確かに、ボールが底に当たったとき、ゲームはリセットされず、ボールはただ跳ね返り、1つのライフを取ります。
欠点の中で、ボールは時々不適切に動作し、あまりにも多くのレンガを壊します。
ボンネットの下
レイアウトを使用すると、すべてが簡単になります。 レンガ-インラインブロック、ラケット、および発射体-位置：絶対。
しかし、衝突検出ではもう少しおもしろいです。 レンガが配置されるエリアは上下に制限されています。つまり、発射物がこのエリアにある場合にのみ衝突をチェックするのが理にかなっています。 レンガの高さと幅が決定されます。 したがって、ボールの座標を取得して、ボールが落ちたレンガの数を正確に判断できます。 その座標が
Xと
Yであり、ブリックの幅と高さが幅と高さである場合、プライベート
X / widthと
Y / heightから整数部分を取得すると、現在のターゲットの列と行番号の列と行を正確に取得します。 これを知って、この要素の数を計算できます：
number = row * rowLength + col 。
幸いなことに、
querySelectorAllは、htmlにある正確な順序で要素を返します。 そして、現在のブリックを簡単に削除できます。
elements[number].className = 'removed' 。
setInterval
ネイティブの
requestAnimationFrameはすべてのデスクトップブラウザーに既に
実装されているという事実にもかかわらず、setIntervalを優先して破棄することが決定されました。 第一に、古いバージョンをカバーすることもでき、第二に、1つの（貴重な！）行を保存します。
requestAnimationFrame(function () frame { requestAnimationFrame(frame); });
合計
私の意見では、コードは非常にコンパクトであることが判明しました。 最も長い行は88文字（インデントを含む）です。 ゲーム自体は少し曲がっていますが、30行から他に何が期待できますか？）
さて、明らかに、誰かが以前の投稿のコメントで気づいたように、30行で「Tiny Windows」を待つべきです。