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

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>

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

プラグインがないとスタイルが少し醜くなります。
次に、左矢印キーと右矢印キーに終了値が設定されていないというバグがあります。時々、位置の精度が失われ、スライダーでボールが揺れることがあります。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JavaScript でピンボール ゲームの Web バージョンを実装する
  • jsはポイント付きの小さなピンボールゲームを実装します
  • ネイティブ JS を使用して複数のボールが衝突して跳ね返る効果を実現する例
  • JSはボールの弾性衝突効果を実現します
  • ピンボールゲームのサンプルコードの js バージョンの非 HTML5 実装
  • 跳ねるボールを実現するネイティブjs

<<:  Linux での Python スクリプトの自動起動とスケジュール起動の詳細な手順

>>:  MYSQL インストールの解凍バージョンと発生したエラーと解決策

推薦する

Linux ユーザー グループと権限の概要

ユーザーグループLinux では、すべてのユーザーはグループに属する必要があり、Linux には次の...

VMwareがモジュールディスクを早期に開けない場合の解決策の詳細な説明

VMWare (Virtual Machine ware) は、「仮想 PC」ソフトウェア会社です。...

検証コード干渉を実装する js (静的)

この記事では、検証コード干渉を実装するためのjsの具体的なコードを参考までに共有します。具体的な内容...

QQブラウザ機能を実装するためのCSS

コード知識ポイント1. fullpage.jsを組み合わせてフルスクリーンスクロールを実現する2. ...

mysqlは複数の主キーを設定する操作を実装します

ユーザーテーブル、ID番号は一意である必要があります、携帯電話番号、電子メールアドレスは一意である必...

Centos7にTenda U12ワイヤレスネットワークカードドライバーをインストールする際の問題を解決する

解決プロセス:方法1: CentOS7.3 のデフォルトのカーネル バージョンは低く、3.10.0-...

docker run後、ステータスは常にExitedになります

追加するdocker run -it -name test -d nginx:latest /bin...

検索データ表示を実装するJavaScript

この記事ではJavaScript検索のデータ表示コードを参考までに共有します。具体的な内容は以下のと...

MySQLでデータをエクスポートするいくつかの方法の詳細な説明

MySQL データをエクスポートする目的は、データベースのバックアップ、テーブル構造のエクスポート、...

MySQLデータをOracleに移行する正しい方法

mysql データベースには student テーブルがあり、その構造は次のとおりです。 Oracl...

トピックページデザインの 5 つの基本スキル (Alibaba UED Shanmu)

このトピックは、2012 年後半の社内共有です。まだ記事にはなっていませんが、春節が近づいているので...

mysql を解決: エラー 1045 (28000): ユーザー 'root'@'localhost' のアクセスが拒否されました (パスワードの使用: NO/YES)

1. 問題時々Mysqlにログインしてパスワードを入力すると、この状況が発生しますmysql -u...

Vue の親子コンポーネントの値転送と一方向データフローの問題の詳細な説明

目次序文1. 親コンポーネントが子コンポーネントに値を渡す2. サブコンポーネントのprops型制約...

httpsウェブサイトにリファラーhttpsとhttpジャンプリファラーを送信させる方法

この記事では、HTTP プロトコルのリファラーのメタデータ パラメータの提案について説明します。この...

設計仕様に準拠した設計は良い設計でしょうか?

これまでの数年間、私はいわゆる「設計仕様」についてかなりの数の執筆やコンサルティングを行ってきました...