この記事では、ブロック崩しピンボールゲームを実装するためのJSの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。 ネイティブ JS で記述されているため、まだいくつかの欠陥があります。コードはHTMLにコピーして直接使用できます。 速度は水平速度と垂直速度が関係するためランダムであり、表示されるボールの速度値はそれらの合計(立方と平方根)になります。 <!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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Linux での Python スクリプトの自動起動とスケジュール起動の詳細な手順
>>: MYSQL インストールの解凍バージョンと発生したエラーと解決策
この記事では、参考までに、簡単な英中辞典を実装するためのjsの具体的なコードを紹介します。具体的な内...
MySQL は現在、ほとんどの企業や事業体で使用されているデータベースです。MySQL が使用される...
会社の基準により、特定のユーザーだけに Linux システムへのアクセスを許可することができます。あ...
序文1. この記事で使用したツールは、https://github.com/gianlucabore...
1. MySQLソフトウェアをインストールするMySQL 公式 Yum リポジトリ、MySQL バー...
方法1: SET PASSWORDコマンドを使用する MySQL -u ルート mysql> ...
MySQL はリレーショナル データベース管理システムです。リレーショナル データベースは、すべて...
今はモバイルインターネットが急速に発展している時代です。スマートフォンやタブレットはますます普及し、...
Nginx を使用して同じドメイン名で複数のプロジェクトを構成するには、次の 2 つの方法があります...
目次ローカルでコンテナを作成した後、このコンテナに基づいてローカル イメージを作成し、このイメージを...
目次需要背景思考分析UI 表示始める1. 支払いコンポーネントテンプレートを作成する2. 支払いコン...
MACでMySQLの初期パスワードを忘れた問題を解決する方法を参考までに共有します。具体的な内容は次...
<br />英語アドレス: http://developer.yahoo.com/per...
CentOS 6.4 環境で MySQL 5.1 を 5.5.36 にアップグレードする手順を記録し...
前面に書かれた最近、ある読者から、ブラウザからサーバーにアクセスすると、画像の表示が遅く、ブラウザに...