JavaScript 두더지 잡기 게임 코드 설명_Game Entertainment-JS 튜토리얼-php.cn

JavaScript 두더지 잡기 게임 코드 설명_Game Entertainment

WBOY

풀어 주다： 2016-05-16 18:18:51

원래의

2135명이 탐색했습니다.

데모 주소: http://demo.jb51.net/js/mouse/index.html
패키지 다운로드 주소http://www.jb51.net/jiaoben/32434.html
심심할 때 쓴 글입니다. 먼저 효과를 살펴보겠습니다(UI가 상대적으로 보기 흉합니다):
JavaScript 두더지 잡기 게임 코드 설명_Game Entertainment
설명: 빨간색 클릭은 100점, 파란색은 클릭합니다. 클릭하면 100점이 차감됩니다.

js를 사용하여 작은 게임을 작성하고 js 코드를 연습하고 싶습니다.
html 부분을 먼저 보세요:
html

코드를 복사하세요 코드는 다음과 같습니다.

<스타일>
#panel{높이:300px;너비:300px;배경:#ccc;margin:50px 0 0 200px;}
#panel ul{list-style:none; 디스플레이:블록;플로트: 왼쪽;마진:0;패딩:0;}
#panel li{display:block;float:left;width:100px;height:100px
overflow:hidden;position:relative ;text-align:center ;}
#panel lispan{display:block;position:relative;left:0;top:60px;
width:100px;height:40px; background:url(img/hole .gif) 0 -60px ;z-index:100;}

참고: 빨간색 클릭 점수 100 , 파란색 클릭수는 100점 100점 차감됩니다.

<스팬>

<스팬>

점수: 0

;카운트다운: 60

🎜>

js 부분: Gopher 클래스

코드 복사

코드는 다음과 같습니다

 
var Mouse = function(type){ 
//페이지에 추가된 두더지의 특정 dom 요소 
this.mouse = null 
//두더지의 수 
this.num = -1; 
//두더지가 숨어 있는 구멍의 번호 
this.hole = -1 
//초기화, 유형은 두더지 유형입니다. , 사용하기 쉬움 Bad
this.init(type); 
} 
Mouse.prototype = { 
//마우스 유형, 좋음, 나쁨, 좋은 것, 나쁜 것 죽임
mousetype: { 
"good": "img/good.gif", 
"bad": "img/bad.gif", 
"goodkill":"img/goodkill.gif", 
" badkill":"img/badkill.gif" 
}, 
//고퍼 초기화
init: function(type){ 
type = type || >var _this = this;//두더지의 DOM 요소 생성
this.mouse = document.createElement("div") 
//두더지 유형
this .mouse.mousetype = type; 
//확장형 - 살아 있는지 여부 
this.mouse.islive = 
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.onbeat() 
this.mouse.style.Background = "url(" this.mousetype[this .mouse.mousetype "kill"] ")"; 
} 
}, 
//고퍼 애니메이션
animation: 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. top = top 'px'; 
setTimeout(function(){show(top);},speed) 
} 
else 
{ 
setTimeout(function(){hide(- 40) ;},speed*10); 
} 
} 
//고퍼 숨기기
var hide = function(top){ 
top = top cut; top < ;= oTop){ 
ost.top = top 'px' 
setTimeout(function(){hide(top);},speed) 
} 
else { 
 _this.reset(); 
} 
} 
show(oTop); 
}, 
//고퍼가 구멍으로 돌아갈 때 재설정
reset: 함수 ( ){ 
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:'좋음' 
}, 
//모든 햄스터 돔 요소
allMouse: [], 
//현재 점수
nowScore: 0, 
//현재 몇 개의 굴이 사용되고 있습니까? hasHole : {}, 
//현재 활성 상태인 두더지는 몇 개입니까?
hasMouse: {}, 
//페이지의 Burrow 컬렉션
lis: null, 
 //초기화 고퍼 및 굴
init: function(){ 
//페이지의 굴 컬렉션 가져오기
this.lis = document.getElementById('panel').getElementsByTagName('li'); _this = this;//10몰 초기화
for(var i=1;i <=10;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 
} 
this.allMouse.push(mouse); 
} , 
/ /게임 점수 수정
changeScore: function(score){ 
this.nowScore = Score; 
document.getElementById('score').innerHTML = this.nowScore; //게임 시작
start: function(){ 
if(this.time <= 0)return 
var _this = this 
//랜덤 홀 번호
var ran; = parsInt(Math.random()*9,10); 
while(this.hasHole[random]){ 
random = parsInt(Math.random()*9,10) 
} 
//임의의 마우스 번호
var randomMouse =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[random].appendChild(this.allMouse[randomMouse].mouse); 
this.lis[random].mouse = this.allMouse[randomMouse] 
this. .mouse.animation('normal'); 
//고퍼와 버로우 숫자를 기록합니다
this.hasHole[random] = 'true' 
this.hasMouse[randomMouse] = ' true'; 🎜>setTimeout(function(){_this.start();},250); 
}, 
//Countdown
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 = 0; 
this.hasMouse = {}; 
this.lis = null; 
} 
} 
//게임 시작 함수 
function GameStart(){ 
if(Game.time > 0 && Game.time != 61){ 
alert(" 게임은 아직 끝나지 않았으며 다시 시작할 수 없습니다! "); 
return; 
} 
Game.reset(); 
Game.init(); 
Game.start(); 
Game.startTime(); 
} 

그렇습니다. 여전히 기능은 매우 간단합니다.