JS はシンプルなブロック崩しピンボールゲームを実装します

この記事では、ブロック崩しピンボールゲームを実装するためのJSの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

ネイティブ JS で記述されているため、まだいくつかの欠陥があります。コードはHTMLにコピーして直接使用できます。

速度は水平速度と垂直速度が関係するためランダムであり、表示されるボールの速度値はそれらの合計（立方と平方根）になります。
Enter キーを押すか、スライダーを左クリックしてゲームを開始します。マウスでスライドするか、キーボードの A (左) または D (右) でスライダーの方向を制御してボールをキャッチします。
この小さなデモの目的は、主に論理的思考力を鍛えることです。

<!DOCTYPE html>
<html>
<ヘッド>
<メタ文字セット="UTF-8">
<title>ドキュメント</title>
<スタイル>
。容器{
    幅: 500ピクセル;
    高さ: 500px;
    境界線:1px実線 #000;
    マージン:自動;
    位置:相対;
}
.brickBox{
    幅: 500ピクセル;
    高さ: 300px;
    /* 背景色: 黄緑; */
    位置:絶対;
    左: 0;
    上: 0;
}
。ボール{
    幅: 15px;
    高さ: 15px;
    背景色:紫;
    境界線の半径:50%;
    位置:絶対;
    下:30px;
    左:235px;
    /* 左マージン:-15px; */
}
。スライダー{
    幅: 150ピクセル;
    高さ: 30px;
    背景色: #00f;
    位置:絶対;
    /* 左:50%; */
    左:175px;
    /* 左マージン:-75px; */
    下:0;
}
</スタイル>
</head>
<本文>
<div class="コンテナ">
    <div class="brickBox"></div>
    <div class="ボール"></div>
    <div class="スライダー"></div>
</div>
<div style="margin-left: 40%;font-size: 25px;">現在の速度: <span id="speed"></span> </div>
<div style="margin-left: 40% ;font-size: 25px;">現在破壊されたブロックの数: <span id="count"></span> </div>

</本文>
<スクリプト>
// 現在のタグをすべて取得する var container = document.querySelector('.container')
var brickBox = container.querySelector('.brickBox')
var ボール = container.querySelector('.ボール')
var スライダー = container.querySelector('.slider')
// 動的にレンガを作成する // レンガのサイズを定義する var brickWidth = 50;
var レンガの高さ = 15;
// レンガの数を計算します var brickNum = brickBox.clientWidth * brickBox.clientHeight / (brickWidth * brickHeight)
// コンソールログ(ブリック番号);
var brickColNum = brickBox.clientWidth / brickWidth
// 数量に応じて作成 for(var i=0;i<brickNum;i++){
    var div = document.createElement('div')
    setStyle(div,{
        幅:レンガ幅 + "px",
        高さ:brickHeight + "px",
        背景色:getColor(true)、
        位置:'絶対',
        上部:parseInt(i/brickColNum)*brickHeight + 'px',
        左:(i%brickColNum)*brickWidth + 'px'
    })
    brickBox.appendChild(div)
}


// スライダーをクリックするとボールが動き始めます // 水平方向と垂直方向の移動値を定義します var speedX = getRandom(1,8);
var speedY = getRandom(1,8);
document.querySelector("#speed").innerHTML = Math.sqrt(Math.pow(speedX,2)+Math.pow(speedY,2))
var タイマー;
//クリックして移動します slider.onclick = move;
//Enterキーでポップアップ関数が起動します。move(){
    var count=0;
    クリアインターバル(タイマー)
    タイマー = setInterval(関数(){
        // 移動を開始 // ボールの左と上を取得する
        左にボールを置きます。
        上の値を ball.offsetTop とします。
       
        // 左と上の速度を上げる // ボールがスライダーに衝突する if (boom (slider, ball)) {
            速度Y = -速度Y
        }
        // 小さなボールが大きな箱と衝突します if(left<=0 || left>=container.clientWidth - ball.offsetWidth){
            スピードX = -スピードX
        }
        上端<=0の場合{
            速度Y = -速度Y
        }
        // すべてのレンガとボールが衝突するかどうかを確認します for(let i=0;i<brickBox.children.length;i++){
            if(boom(brickBox.children[i],ball)){
                
                速度Y = -速度Y
                brickBox.removeChild(brickBox.children[i]);
                カウント++;
            }
           
            
        }
        コンソール.log(カウント)
        document.querySelector("#count").innerHTML=count
        // ゲームオーバー
        if(top>=container.clientHeight-ball.offsetHeight){
            クリアインターバル(タイマー)
            if(confirm("ゲームオーバー、もう一度プレイするかどうか")){
   場所を再読み込みします。
  }else{alert('あなたの最終スコア'+count)}
        }
        左 += 速度X
        トップ += スピードY
        // ボールの左と上を設定します
        ball.style.left = 左 + "px"
        ball.style.top = 上 + "px"
    },20)
}

// スライダーをマウスの動きに追従させる slider.onmouseover = function(){
    document.onmousemove = function(e){
        var e = e || window.event;
        var x = e.pageX;
        var l = x - コンテナ.offsetLeft - 1 - スライダー.offsetWidth / 2
        もし(l<0){
            0 の場合
        }
        if (l > container.clientWidth - slider.offsetWidth) {
            l = container.clientWidth - slider.offsetWidth
        }
        slider.style.left = l + "px"
    }
}
// スライダーを左右のキーボードに合わせて動かす window.onload = function(){
    ドキュメント.onkeydown = e=>{
        var e = e || window.event;
        var キーコード = e.keyCode || e.which;
        var キーワード = String.fromCharCode(keycode).toLowerCase();
        if(キーコード==13){
            動く（）;
        }
       if(キーワード=='a'){
           コンソールログ("1111")
        slider.style.left = slider.offsetLeft-15+"px"
       }else if(キーワード=='d'){
        コンソールログ("222")
           slider.style.left=slider.offsetLeft+15+"px"
       }
       console.log(スライダー.オフセット左)
        
        
    }
    
}
// 衝突検出関数をカプセル化する function boom(node1,node2){
    // 衝突しない可能性は 4 つだけです if(node1.offsetLeft+node1.offsetWidth<node2.offsetLeft || node1.offsetTop+node1.offsetHeight<node2.offsetTop || node2.offsetLeft+node2.offsetWidth<node1.offsetLeft || node2.offsetTop+node2.offsetHeight<node1.offsetTop){
        false を返します。
    }それ以外{
        true を返します。
    }
}
// ランダムな色を取得する関数をカプセル化します function getColor(hex=true){
    if(16進数){
        var color = '#'
        (var i=0;i<3;i++){
            var rgb = getRandom(256).toString(16);
            rgb = rgb.length===1?'0'+rgb:rgb;
            色 += rgb
        }
        色を返します。
    }
    `rgb(${getRandom(256)},${getRandom(256)},${getRandom(256)})` を返します
}
// スタイル設定の関数をカプセル化する function setStyle(ele,styleObj){
    for(var attr in styleObj){
            ele.style[属性] = styleObj[属性]
    }
}
// 乱数を取得する関数をカプセル化する function getRandom(a,b=0){
    var max = Math.max(a,b);
    var min = Math.min(a,b)
    Math.floor(Math.random() * (max-min)) + min を返します。
}
</スクリプト>
</html>

効果図は図に示すとおりである。