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

데모 주소: http://demo.jb51.net/js/mouse/index.html
패키지 다운로드 주소http://www.jb51.net/jiaoben/32434.html
심심할 때 쓴 글입니다. 먼저 효과를 살펴보겠습니다(UI가 상대적으로 보기 흉합니다):

설명: 빨간색 클릭은 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 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 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();
}

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