この記事の例では、参考のために航空機戦争ゲームを実装するための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 チュートリアル (イラストとテキスト)
CSS を使ってさまざまなグラフィックを実現できるのは素晴らしいことです。画像を切り取る必要はなく、...
目次1. Dockerはリモートアクセスを可能にする2. Intellij IDEAにDockerプ...
1. データベースを作成します。 データ data _name を作成します。 PHP でデータベー...
mysql explain コマンドは、MySQL がインデックスを使用して選択ステートメントを処理...
123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...
基本概念絶対配置: 絶対配置に設定された要素ボックスはドキュメント フローから完全に削除され、その包...
この記事では、タグイベントを動的に追加するためのjQueryの具体的なコードを参考までに紹介します。...
Safari (Technology Preview 106) および Firefox (バージョン...
序文3 列レイアウトは、その名前が示すように、両側が固定され、中央が適応します。実際の開発では、3 ...
1. 単一の矢印への複数の呼び出し単一の矢印を実装したら、二重矢印を実装するのは簡単です。上では、単...
この記事では、マウス フリップナビゲーションの制作についてまだ疑問を持っている友人の役に立つことを期...
序文これまでインターネットでMySQLジョイントインデックスの最左接頭辞マッチングに関する記事をたく...
について最近、Vue を学習する過程で、基本的な知識の練習と強化を目的として、Qunar.com の...
質問コードにはプロンプトがありません: RN 開発に不慣れな、フロントエンド以外の学生の多くは、「ど...
目次1. SELinux の紹介2. SELinuxの基本概念2.1 仕事の種類2.2. セキュリテ...