jQueryはバウンドボールゲームを実装します

＃箱 {
       幅: 600ピクセル;
       高さ: 650px;
       境界線: 5px実線rgb(245, 164, 96);
       位置: 相対的;
       左: 500ピクセル;
       上: 50px;
       背景: -webkit-gradient(linear, 0 0, 0 bottom, from(#ffffff), to(rgba(0, 0, 255, 0.5)));
            }
 
             /*ボール設定*/
            ＃ボール {
                幅: 20px;
                高さ: 20px;
                境界線の半径: 10px;
                背景色: 白;
                位置: 絶対;
                上: 560px;
                ボックスの影: 0px 0px 3px 3px 水色;
            }
            
            /*ゲーム開始ボタン設定*/
            #ボタン{
                幅: 150ピクセル;
                高さ: 90px;
                位置: 固定;
                左: 730ピクセル;
                上: 400px;
                境界線の半径: 10px;
                ボックスシャドウ: #BBBBBB;
                フォントサイズ: 24px;
                カーソル: ポインタ;
            }
              /* スライダー設定 */
            #スライダー{
                幅: 120ピクセル;
                高さ: 20px;
                背景色: ライトピンク;
                位置: 絶対;
                上: 585px;
                境界線の半径: 10px;
                ボックスの影: 0px 0px 2px 2px 白;
                カーソル: ポインタ;
            }
             /*各ブロックの境界*/
            #レンガ div {
                幅: 98ピクセル;
                高さ: 20px;
                フロート: 左;
                境界線: 1px 黒一色;
            }
             /*ゲームルールの境界*/
            ＃ヒント {
                幅: 280ピクセル;
                位置: 固定;
                上: 200px;
                左: 100px;
                境界線: 1px 黒一色;
                テキストインデント: 2em;
                パディング: 10px;
                境界線の半径: 20px;
            }
           /*難易度スコア境界*/
            ＃学年 {
                幅: 180ピクセル;
                位置: 固定;
                上: 100px;
                左: 1150ピクセル;
                境界線: 1px 黒一色;
                テキストインデント: 2em;
                パディング: 10px;
                境界線の半径: 20px;
            }
        
             /*h3 フォント設定*/
            #グレード h3 {
                フォントの太さ: 500;
            }
            #phb{
                幅: 180ピクセル;
                位置: 固定;
                上: 50px;
                左: 1150ピクセル;
                境界線: 1px 黒一色;
                テキストインデント: 2em;
                パディング: 10px;
                境界線の半径: 10px;
                
            }

<script type="text/javascript">
            var box = document.getElementById("box");
            var ボール = document.getElementById("ボール");
            var btn = document.getElementById("btn");
            var スライダー = document.getElementById("スライダー");
            var obrick = document.getElementById("brick");
            var brickArr = obrick.getElementsByTagName("div");
            var グレード = document.getElementById("グレード");
 
            var ランク = グレード.子供[1]
            var スコア = グレード.子供[3]
            var sco = 0; //スコア var timer; //ボールが走っている var isRunning = false;
            var speedX = rand(3, 12);
            var speedY = -rand(3, 12);
            var num = スピードX - スピードY;
            //難易度をランダムに選択 var num = Math.ceil((Math.random() * 9));
            console.log("num は: " + num);
            スイッチ (数値) {
                ケース1:
                ケース2:
                ケース3:
                    rank.innerHTML = "シンプル";
                    壊す;
                ケース4:
                ケース5:
                ケース6:
                    rank.innerHTML = "中";
                    slider.style.width = 80 + "px";
                    壊す;
                ケース7:
                ケース8:
                ケース9:
                    rank.innerHTML = "難しい";
                    slider.style.width = 60 + "px";
                    壊す;
            }
 
            //ボールとスライダーの初期位置をランダムに生成します。var beginGo = rand(100, 500);
            ball.style.left = beginGo + 40 + "px";
            slider.style.left = beginGo + "px";
 
            //スタートボタンのクリックイベント btn.onclick = function() {
                btn.style.display = "none"; //ボタンを非表示 isRunning = true;
                タイマーの間隔をクリアします。
                タイマー = setInterval(関数() {
 
                    //ボールの初期位置を取得します。var ballLeft = ball.offsetLeft;
                    var ballTop = ball.offsetTop;
 
 
                    // 移動後のボールの位置を取得します。var nextleft = ballLeft + speedX;
                    var nexttop = ballTop + speedY;
 
                    //水平境界判定、ボールの左の値がコンテナの左境界より小さいかコンテナの右境界より大きい場合、水平速度が反転します if (nextleft <= 0 || nextleft >= box.offsetWidth - ball.offsetWidth - 10) {
                        速度X = -速度X;
                    }
                    //垂直境界判定、ボールの上限値がコンテナの上限値より小さい場合、垂直速度が反転します if (nexttop <= 0) {
                        速度Y = -速度Y;
                    }
                    //ボールが下の境界に触れると、「ゲーム失敗」と表示され、ページが更新されます。if (nexttop > box.offsetHeight - ball.offsetHeight) {
                        場所を再読み込みします。
                        alert("ゲームオーバー!");
                    }
 
                    //移動後の位置をボールに再割り当てします。ball.style.left = nextleft + "px";
                    ball.style.top = nexttop + "px";
 
                    //ボールとスライダーの衝突 if (knock(ball, slider)) {
                        速度Y = -速度Y;
                    }
 
                    //ボールとブロックの衝突 for (var j = 0; j < brickArr.length; j++) {
                        もし(ノック(brickArr[j], ボール)) {
                            速度Y = -速度Y
                            obrick.removeChild(brickArr[j]);
                            スコ++;
                            スコア.innerHTML = sco;
                            壊す;
                        }
                    }
 
                    //コンテナ内のブロック数が0になったら、「ゲーム勝利」とアナウンスし、ページを更新します。if (brickArr.length <= 0) {
                        場所を再読み込みします。
                        alert("あなたの勝ちです!");
                    }
                }, 20)
            }
 
            //マウスコントロールスライダー slider.onmousedown = function(e) {
                var e = e || window.event;
                //スライダーの初期位置を取得します。var offsetX = e.clientX - slider.offsetLeft;
                if (実行中) {
                    document.onmousemove = 関数(e) {
                        var e = e || window.event;
                        var l = e.clientX - offsetX;
                        もし（l <= 0）{
                            0 の場合
                        }
                        if (l >= box.offsetWidth - slider.offsetWidth - 10) {
                            l = box.offsetWidth - slider.offsetWidth - 10;
                        }
                        slider.style.left = l + "px";
                    }
                }
            }
            document.onmouseup = 関数() {
                document.onmousemove = null; //マウスが動いたとき}
 
            //ボタンコントロールスライダー document.onkeydown = function(e) {
                var e = e || window.event;
                var code = e.keyCode || e.which;
                var offsetX = スライダー.offsetLeft;
                if (実行中) {
                    スイッチ（コード）{
                        ケース37: //leftif (offsetX <= 0) {
                                スライダー.スタイル.左 = 0
                                壊す;
                            }
                            slider.style.left = offsetX * 4 / 5 + "px";
                            壊す;
                        ケース 39: //右 if (offsetX >= box.offsetWidth - slider.offsetWidth - 10) {
                                slider.style.left = box.offsetWidth - slider.offsetWidth;
                                壊す;
                            }
                            slider.style.left = (box.offsetWidth - slider.offsetWidth - offsetX) / 5 + offsetX + "px";
                            壊す;
                    }
                }
 
            }
            //ブロックは全部で66個あります createBrick(66);
 
            //コンテナ内にブロックを作成する function createBrick(n) {
                var oBrick = document.getElementById("brick");
                //大きなボックスブロックに n 個の div ブロックを挿入し、ランダムな色を設定します for (var i = 0; i < n; i++) {
                    var ノード = document.createElement("div");
                    ノードスタイルの背景色 = color();
                    oBrick.appendChild(ノード);
                }
                //すべてのブロックを取得 var brickArr = obrick.getElementsByTagName("div")
 
                // 各ブロックの現在の位置に応じて、ブロックに左と上の値を割り当てます for (var i = 0; i < brickArr.length; i++) {
                    brickArr[i].style.left = brickArr[i].offsetLeft + "px";
                    brickArr[i].style.top = brickArr[i].offsetTop + "px";
                }
                //すべてのブロックを絶対位置に設定します。この手順は前の手順と入れ替えることはできません。for (var i = 0; i < brickArr.length; i++) {
                    brickArr[i].style.position = "絶対";
                }
            }
            //ランダムに色を生成する function color() {
                var 結果 = "#";
                (var i = 0; i < 6; i++) の場合 {
                    結果 += rand(0, 15).toString(16)
 
                }
                結果を返します。
            }
            //乱数生成関数 rand(n, m) {
                n + parseInt(Math.random() * (m - n + 1)) を返します。
            }
 
            //衝突検出関数 knock(node1, node2) {
                var l1 = node1.offsetLeft;
                var r1 = node1.offsetLeft + node1.offsetWidth;
                var t1 = node1.offsetTop;
                var b1 = node1.offsetTop + node1.offsetHeight;
                var l2 = node2.offsetLeft;
                var r2 = node2.offsetLeft + node2.offsetWidth;
                var t2 = node2.offsetTop;
                var b2 = node2.offsetTop + node2.offsetHeight;
                もし (l2 > r1 || r2 < l1 || t2 > b1 || b2 < t1) {
                    false を返します。
                } それ以外 {
                    true を返します。
                }
            }
</スクリプト>