この記事の例では、参考のために航空機戦争ゲームを実装するためのJSの具体的なコードを共有しています。具体的な内容は次のとおりです。 <html> <ヘッド> <title> 航空機戦争</title> <スタイル タイプ="text/css"> *{margin:0;padding:0;font-family:"マイクロソフト ヤヘイ"} 本文{オーバーフロー:hidden;;} </スタイル> </head> <本文> <スクリプト> window.onload = 関数(){ ゲーム.exe(); }; var ゲーム = { //プログラムを起動します exe: function(){ document.body.style.background = '#fff'; var oDiv = document.createElement('div'); oDiv.id = 'ゲームボックス'; oDiv.style.cssText = 'width:600px;height:500px;border:10px solid #999;margin:50px auto;font-family:"Microsoft yahei";text-align:center;position:relative;overflow:hidden;background:#fff'; document.body.appendChild(oDiv); これを初期化します。 }, スコア: 0, ifEnd: false、 //初期化 init: function(){ var これ = これ; var oDiv = document.getElementById('GameBox'); oDiv.innerHTML = ''; ゲームスコア = 0; Game.ifEnd = false; var oH = document.createElement('h1'); oH.innerHTML = '航空機戦争 v1.0'; oH.style.cssText = 'color:#555555;フォントサイズ:30px;パディングトップ:50px;'; oDiv.appendChild(oH); (var i=0;i<4;i++) の場合 { var oP = document.createElement('p'); oP.インデックス = i; oP.style.cssText = 'font-size:18px;color:white;width:180px;height:50px;margin:40px auto;text-align:center;background:#999;line-height:40px;font-family:"Microsoft yahei";font-weight:bold;cursor:pointer;' var html = ''; oP.onmouseenter = 関数(){ this.style.background = '#ff9933'; this.style.color = '##ff6600' }; oP.onmouseleave = 関数(){ this.style.background = '#999'; this.style.color = '白' }; oP.onclick = 関数(e){ e = e || ウィンドウイベント; this.start( this.index 、 oDiv 、 e ); }; スイッチ(i){ ケース0: html = '難易度簡単'; 壊す; ケース1: html = '中程度の難易度'; 壊す; ケース2: html = '難易度'; 壊す; ケース3: html = '小さな天才に取り憑かれた'; 壊す; } oP.innerHTML = html; oDiv.appendChild(oP); }; }, //ゲームを開始する start: function(index, oGameBox, e){ oGameBox.innerHTML = ''; var oS = document.createElement('span'); oS.innerHTML = this.score; oS.style.cssText = '位置:絶対;左:20px;上:20px;フォントサイズ:14px;色:黒;'; oGameBox.appendChild(oS); this.plane( oGameBox , e ,index ); this.enemy( oGameBox ,oS ,インデックス ); }, //平面について plane: function(oGameBox, e, index){ var x = e.pageX; y = e.pageY; var oPlane = 新しい Image(); oPlane.src = 'images/plane.png'; 平面の幅 = 60; oPlane.高さ = 36; oPlane.id = '飛行機'; var tY = oGameBox.offsetTop+parseInt(oGameBox.style.borderWidth)+oPlane.height/2; var lX = oGameBox.offsetLeft+parseInt(oGameBox.style.borderWidth)+oPlane.width/2; window.onresize = 関数(){ lX = oGameBox.offsetLeft+parseInt(oGameBox.style.borderWidth)+oPlane.width/2; }; var top = y- tY; var 左 = x- lX; oPlane.style.cssText = 'display:block;position:absolute;top:'+top+'px;left:'+left+'px;'; oGameBox.appendChild(oPlane); var leftMin = - oPlane.width/2; var leftMax = oGameBox.clientWidth - oPlane.width/2; var topMin = 0; var topMax = oGameBox.clientHeight - oPlane.height; document.onmousemove = function(e){ if( !Game.ifEnd ) { e = e || ウィンドウイベント; var top = e.pageY -tY; var left = e.pageX -lX; top = Math.min( top , topMax ); // 最小のパラメータを取る if( top > topMax )top = topMax; top = Math.max( top ,topMin );// 最大のパラメータを取得します left = Math.min( left , leftMax );// 最小のパラメータを取得します if( top > topMax )top = topMax; 左 = Math.max( 左 、 左最小 ); oPlane.style.left = 左 + 'px'; oPlane.style.top = top + 'px'; } }; this.biu( oPlane 、 oGameBox 、インデックス ); }, biu: 関数(oPlane,oGameBox,インデックス){ 変数速度; スイッチ ( インデックス ) { ケース0: 速度 = 30; 壊す; ケース1: 速度 = 40; 壊す; ケース2: 速度 = 50; 壊す; ケース3: 速度 = 10; 壊す; } this.BiuTimer = setInterval(function(){ var oBiu = 新しいイメージ(); oBiu.src = 'images/bullet.png'; oBiu.幅 = 6; oBiu.高さ = 22; oBiu.className = '弾丸'; var top = oPlane.offsetTop - oBiu.height + 3; var left = oPlane.offsetLeft + oPlane.width/2 - oBiu.width/2; oBiu.style.cssText = 'position:absolute;top:'+top+'px;left:'+left+'px;'; oGameBox.appendChild(oBiu); oBiu.timer = setInterval( 関数(){ if( !oBiu.parentNode){ クリア間隔(oBiu.timer); } oBiu.style.top = oBiu.offsetTop - 10 + 'px'; if(oBiu.offsetTop < -oBiu.height){ クリア間隔(oBiu.timer); oBiu.parentNode.removeChild(oBiu); } }, 13 ); } 、スピード ); }, 敵: 関数(oGameBox,oS,インデックス){ var a, x; スイッチ ( インデックス ) { ケース0: 1 = 1; 500; 壊す; ケース1: a = 2; 300 です 壊す; ケース2: a = 3; x = 200; 壊す; ケース3: a = 5; 100 です 壊す; } this.EnemyTimer = setInterval( 関数(){ var oEnemy = 新しい Image(); oEnemy.src = 'images/enemy.png'; 敵の幅 = 23; 敵の高さ = 30; var lMin = 0; var lMax = oGameBox.clientWidth - oEnemy.width; var left = Math.random()*(lMax-lMin) + lMin; oEnemy.style.cssText = 'position:absolute;top: -'+(-oEnemy.height)+'px; left:'+left+'px;'; oGameBox.appendChild( oEnemy ); var b = Math.random() * a + 1; oEnemy.timer = setInterval(function(){ oEnemy.style.top = oEnemy.offsetTop + b + 'px'; //敵の落下速度 if( oEnemy.offsetTop >= oGameBox.clientHeight ){ clearInterval( oEnemy.timer ); oEnemy.parentNode.removeChild(oEnemy); } },13); //弾丸による衝突監視 var allBiu = Game.getClass('bullet'); oEnemy.pzBiu = setInterval(function(){ (var i = 0;i < allBiu.length;i++) の場合 { if(Game.boom(oEnemy,allBiu[i])) { ゲームスコア++; oS.innerHTML = Game.score; oEnemy.src = 'images/boom.png'; クリア間隔(oEnemy.pzBiu); クリア間隔(oEnemy.pzPlane); allBiu[i].parentNode.removeChild( allBiu[i] ); setTimeout(関数(){ if( oEnemy.parentNode ){ oEnemy.parentNode.removeChild(oEnemy); }; },300); 壊す; } } },50); //戦闘機との衝突監視 var oPlane = document.getElementById('plane'); oEnemy.pzPlane = setInterval(function(){ if(Game.ifEnd){ クリア間隔(oEnemy.pzPlane); } if( Game.boom( oEnemy , oPlane )) { ゲーム終了時にtrueを返します。 クリア間隔(oEnemy.pzPlane); 間隔をクリアします( Game.BiuTimer); 間隔をクリアします( Game.EnemyTimer ); oEnemy.src = 'images/boom.png'; oPlane.src = 'images/boom2.png'; setTimeout(関数(){ ゲームオーバー(oGameBox); },300); } },50); }, x); //敵生成速度}, //衝突検出ブーム: function(obj1, obj2){ var T1 = obj1.offsetTop; var B1 = T1 + obj1.clientHeight; var L1 = obj1.offsetLeft; var R1 = L1 + obj1.clientWidth; var T2 = obj2.offsetTop; var B2 = T2 + obj2.clientHeight; var L2 = obj2.offsetLeft; var R2 = L2 + obj2.clientWidth; ( R2 < L1 || L2 > R1 || B2 < T1 || T2 > B1 ) の場合 { falseを返します; // 衝突なし} それ以外 { true を返す; // ヒット } }, //ゲームオーバー: function (oGameBox) { oGameBox.innerHTML = ''; var oDiv = document.createElement('div'); oDiv.style.cssText = '幅:300px;高さ:200px;余白:100px 自動;背景:#e0e0e0;境界線:5px 実線 #858585'; var oT = document.createElement('h3'); oT.innerHTML = 'ゲームオーバー'; oT.style.cssText = 'padding-top:50px;font-size:25px;'; var oP1 = document.createElement('p'); oP1.innerHTML = 'あなたのスコアは:' + '<span style="color:#ffffff;font-weight:bold;">' + this.score + '</span>'; oP1.style.cssText = 'フォントサイズ:16px;色:#fff;'; var oRestart = document.createElement('div'); oRestart.style.cssText = '幅:100px;高さ:40px;フォントサイズ:14px;テキスト配置:center;行の高さ:40px;色:白;背景:#999;余白:20px auto;カーソル:ポインター;'; oRestart.innerHTML = '再起動'; oRestart.onclick = 関数(){ ゲームを初期化します。 }; oDiv.appendChild(oT); oDiv.appendChild(oP1); oDiv.appendChild(oRestart); oGameBox.appendChild(oDiv); }, //getclass メソッド getClass : function( cName , parent ) { 親 = 親 || ドキュメント; if(ドキュメント.getElementsByClassName){ 親を返します。getElementsByClassName(cName); } それ以外 { var all = parent.getElementsByTagName('*'); var arr = []; ( var i = 0; i<all.length; i++ ) の場合 { var arrClass = all.className.split(' '); for( var j = 0; j < arrClass.length; j++ ){ もしarrClass[j]がcNameならば { arr.push(すべて[i]); 壊す; } } } arr を返します。 } }, }; </スクリプト> </本文> </html> レンダリング 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: プライベートイメージウェアハウスを構築するためのDockerレジストリの実装方法
>>: CentOS7 インストール Zabbix 4.0 チュートリアル (イラストとテキスト)
ポート80も設定されています。まずファイアウォール設定ファイルを入力しますシェル># vim ...
mysql-5.7.17-winx64 は MySQL の最新バージョンです。インストールは無料で...
今日は Docker でのネットワーク設定を試し、後で忘れないようにプロセスを記録しました。 (シス...
UI カットのプロセスでは、ページはヘッダー、コンテンツ、フッターの 3 つの部分で構成されることが...
1. 動的コンポーネント <!DOCTYPE html> <html> &l...
この記事では、虫眼鏡効果を実現するためのJavaScriptの具体的なコードを参考までに紹介します。...
目次背景成し遂げるvue-cli2.0での設定方法の補足要約する背景プロジェクトにはローカル構成ファ...
マイクロサービスのイメージは、保存用に Docker リポジトリにアップロードされます。一般的に使用...
序文注: テストデータベースのバージョンはMySQL 8.0ですテストデータ: テーブルzqs(id...
次のサンプル コードでは、Tomcat が XML を解析し、リフレクションを通じてオブジェクトを作...
テーブル作成コマンドには以下が必要です。 テーブルの名前フィールド名各フィールドを定義します(タイ...
ヒント:配列変更メソッドによりv-forが更新され、ページが更新されます。配列を変更しないメソッド:...
簡単な説明以前 Centos7 で構築し、その後個人開発環境として Ubuntu 20.04 を使っ...
目次1. 環境整備2. イメージを実行する問題を解決するRedis のインストールNginx のイン...
この記事では、マウスドラッグ効果を実現するためのJavaScriptの具体的なコードを参考までに紹介...