ホームページ > 記事 > ウェブフロントエンド > JavaScriptのもぐらたたきゲームコード説明_ゲーム・エンターテイメント

JavaScriptのもぐらたたきゲームコード説明_ゲーム・エンターテイメント

WBOYオリジナル: 2016-05-16 18:18:512109ブラウズ

デモのアドレス: http://demo.jb51.net/js/mouse/index.html
パッケージのダウンロードアドレスhttp://www.jb51.net/jiaoben/32434.html
これは私が退屈していたときに書いたものです。まず効果を見てみましょう (UI は比較的見苦しいです):
JavaScriptのもぐらたたきゲームコード説明_ゲーム・エンターテイメント
説明: 赤のクリックは 100 ポイントを獲得し、青はスコアを獲得します。クリックすると 100 ポイント減点されます。

js を使用して小さなゲームを作成し、js コードを練習したいだけです。
最初に HTML 部分を見てください:
html

コードをコピーしますコードは次のとおりです:

 注: 赤クリックのスコアは 100 、青色のクリックは 100 100 ポイント減点されます。

スコア: /span>
 ;カウントダウン: 60

🎜>

js 部分: Gopher クラス

コードをコピー

コードは次のとおりです:

 
var Mouse = function(type){ 
//ページに追加されるほくろの特定の dom 要素 
this.mouse = null 
//ほくろの番号
this.num = -1; 
//穴の番号 (ほくろが隠れる穴) 
this.hole = -1; 
//初期化、型はほくろのタイプです、使いやすい Bad
this.init(type); 
} 
Mouse.prototype = { 
//マウスのタイプ、良い、悪い、良いものは殺され、悪いものは殺されます
マウスタイプ: { 
"良い": "img/good.gif", 
"悪い": "img/bad.gif", 
"goodkill":"img/goodkill.gif", 
" badkill":"img/badkill.gif" 
}, 
//gopher を初期化します
init: function(type){ 
type = type var _this = this; 
//モールの DOM 要素を作成します
this.mouse = document.createElement("div"); 
//拡張属性 - モールのタイプ
this .mouse.mousetype = type; 
//拡張タイプ - 生きているかどうか 
this.mouse.islive = true; 
this.mouse.style.cssText = 'width:75px;height: 100px;background:url( ' this.mousetype[type] ');left:0;top:20px; 
position:relative;margin:auto;cursor:pointer;' 
//マウスクリックをバインドしますevent
 this.mouse.onclick = function(e){_this.beat(e);}; 
}, 
//ほくろがクリックされました
beat : function(e){ 
if( this.mouse.islive){ 
this.mouse.islive = false; 
this.mouse.style.background = "url(" this.mousetype[this .mouse.mousetype "kill"] ")"; 
} 
}, 
//ゴーファーのアニメーション
アニメーション: function(speed){ 
speed = Speed == 'fast '?20 :speed == 'normal'?30:50; 
var obj = this.mouse,ost = obj.style,oTop = parseInt(ost.top,10),cut=5,_this = this; 
 //ほくろを穴から出させます 
var show = function(top){ 
top = top-cut; 
if(top >= -40){ 
ost.トップ = トップ 'px'; 
setTimeout(function(){show(top);},speed); 
} 
else 
{ 
setTimeout(function(){hide(- 40) ;},speed*10); 
} 
} 
//ゴーファーを非表示にする
var hide = function(top){ 
top = トップカット; top < ;= oTop){ 
ost.top = トップ 'px' 
setTimeout(function(){hide(top);},speed); 
else { 
 _this.reset(); 
} 
} 
show(oTop) 
}, 
//ゴーファーがホールにロールバックしたときにリセット: 関数( ){ 
this.mouse.islive =true; 
this.mouse.style.background = "url(" this.mousetype[this.mouse.mousetype] ")"; 
this.onend( ) ; 
}, 
//拡張メソッド: ほくろをクリック
onbeat: function(){}, 
// 拡張メソッド: ほくろアニメーション終了後
onend: function( ){} 
} 

 
次に、ゲームのロジックを制御するゲーム コントロール クラスがあります: 

コードをコピー

コードは次のとおりです:

 
//ゲーム コントロール クラス
var Game = { 
//ゲーム時間、1 分
time: 61, 
//Gopher マップ、合計 10 個あります。どちらが悪いですか
mouseMap: { 
1:'良い', 
2:'悪い', 
3:'良い', 
4:'良い', 
5 :'悪い'、
6:'良い'、
7:'悪い'、
8:'良い'、
9:'良い'、
10:'良い' 
}, 
//すべてのハムスター dom 要素
allMouse: [], 
//現在のスコア
nowScore: 0, 
//現在占有されている巣穴の数 
 hasHole : {}, 
//現在アクティブなモールはいくつありますか?
hasMouse: {}, 
//ページの巣穴コレクション
lis: null, 
 //ホリネズミと巣穴
init: function(){ 
//ページの巣穴コレクションを取得します
this.lis = document.getElementById('panel').getElementsByTagName('li'); _this = this; 
//10 モルを初期化します
for(var i=1;i var Mouse = new Mouse(this.mouseMap[i] ; Good'? 1:-1)); 
} 
//ホリネズミのアニメーション終了イベントを展開します
mouse.onend = function(){ 
//巣穴内のホリネズミを削除します
var li = _this.lis[this.hole]; 
li.removeChild(li.mouse.mouse); 
li.mouse = null; 
//対応する巣穴とモグラをクリアします
_this.hasHole[ this.hole] = null; 
_this.hasMouse[this.num] = null; 
} 
} , 
/ /ゲームスコアを変更します
changeScore: function(score){ 
this.nowScore = core; 
document.getElementById('score').innerHTML = 
} , 
 // ゲーム開始
start: function(){ 
if(this.time <= 0)return; 
var _this = this;//ランダムなホール番号
varrandom = parseInt(Math.random()*9,10); 
while(this.hasHole[random]){ 
random = parseInt(Math.random()*9,10); 🎜>//ランダムなマウス番号
varrandomMouse = parseInt(Math.random()*10,10); 
while(this.hasMouse[randomMouse]){ 
randomMouse = parseInt( Math.random( )*10,10); 
} 
// ほくろをホールに追加します 
this.allMouse[randomMouse].hole = random; 
this.allMouse[randomMouse]; 
this.lis[ランダム].appendChild(this.allMouse[ランダムマウス].mouse); 
this.lis[ランダム].mouse = this.allMouse[ランダムマウス]; .mouse.animation('normal'); 
//ゴーファーと巣穴の数を記録します
this.hasHole[random] = 'true'; 
this.hasMouse[randomMouse] = ' true'; 🎜>setTimeout(function(){_this.start();},250); 
}, 
//カウントダウン
startTime : function(){ 
this.time - = 1; 🎜>var _this = this; 
document.getElementById('time').innerHTML = this.time; 
if(this.time > 0){ 
setTimeout(function() {_this.startTime) ()},1000); 
} 
}, 
//ゲーム設定をリセット
reset : function(){ 
this.time = 61; this.allMouse = [ ]; 
this.nowScore = {}; 
this.lis = null; 
} 
} 
//ゲーム開始関数 
function GameStart(){ 
if(Game.time > 0 && Game.time != 61){ 
alert("ゲームはまだ終わっていないので、再開することはできません。 "); 
return; 
} 
Game.reset(); 
Game.init(); 
Game.start(); 
Game.startTime(); 
} 

関数はまだ非常に単純です。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

JavaScriptのもぐらたたきゲームコード説明_ゲーム・エンターテイメント

関連記事