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

デモのアドレス: http://demo.jb51.net/js/mouse/index.html
パッケージのダウンロード アドレスhttp://www.jb51.net/jiaoben/32434.html
これは私が退屈していたときに書いたものです。まず効果を見てみましょう (UI は比較的見苦しいです):

説明: 赤のクリックは 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 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();
}

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