자바스크립트를 활용해 작은 게임 플랫폼 만들기 (2) 게임 선택기_javascript 스킬

오늘은 오늘 밤의 결과를 다음과 같이 미리 보여드리겠습니다.(불안하시면 벽돌을 던지지 마세요.)

오늘은 게임 진입 시 게임 목록을 표시하는 선택기를 주로 디자인했는데, 그런 다음 이를 사용하여 게임을 선택합니다. 바보의 기능.

선택기는 어제의 게임 클래스를 기반으로 했습니다. 어제의 코드를 일부 수정했습니다.

코드 복사 코드는 다음과 같습니다:

//5. 게임 카테고리: 이름, 논리 방법, 키보드 방법, 시작 방법, 시작 레벨 방법, 종료 방법
var Game = function(name, logicFn , keyFn, startFn, loadFn, endFn) {
//게임 이름
this._name = name || "이름 없음";
//5.a.1: 논리 제어
_LControl = logicFn || function(date) {
//간단한 게임 로직 제어
if (this._FrameMain) {
var innHTML = "게임 시간:" date.getSeconds() "초" getMilliseconds( );
innHTML = "
Esc를 눌러 게임을 종료할 수 있습니다.";
this._FrameMain.innerHTML = innHTML; } ;
//5.a.2: 키보드 제어
this._KControl = keyFn || function(event) {
//간단한 키보드 논리
alert("탭했습니다" event.keyCode "key");
//5.b.1:제목 영역
this._FrameTitle = null
//5.b.2:게임 영역
_FrameMain = null;
//5.b.3: 상태 표시 영역
this._FrameState = null
//5.b.4: 제어 영역
this._FrameControl = null; 🎜>//5.c.1: 애니메이션 열기
this._AnmLoad = new Animation("Enter the game",null)
//5.c.2: 애니메이션 통과
this._AnmNext = new Animation("Loading",null);
//5.c.3: 애니메이션 종료
this._AnmEnd = new Animation("End",null)
//5.d . 1: 시작: 시작 애니메이션 호출, 처리 메서드 시작, 게임 로드
this._Start = function() {
this._AnmLoad = this._AnmLoad || new Animation(null)
var temp = this; //현재 개체 가져오기
this._AnmLoad._palyEnd = this._AnmLoad._palyEnd || function() {
startFn && startFn()
temp._Load(); };
this._AnmLoad._play();
//5.d.2: End
this._End = endFn || function() 게임이 끝났습니다.");
};
//5.d.3: 로딩: 게임을 시작할 때마다(레벨 시작)
this._Load = function() {
this. _AnmNext = this. _AnmNext || new Animation(null);
var temp = this; //현재 객체 가져오기
this._AnmNext._palyEnd = this._AnmNext._palyEnd || if (!loadFn) {
temp._FrameTitle = _HtmlControl._newPanel(0, 0, 400, 30);
temp._FrameTitle.innerHTML = temp._name || "이름이 지정되지 않은 게임"; _FrameMain = _HtmlControl.(0, 30, 350, 370);
temp._FrameState = _HtmlControl._newPanel(350, 30, 50, 180)
temp._FrameControl = _HtmlControl._newPanel(350, 210, 50, 190) ;
_HtmlControl._ClearArea();
_HtmlControl._AddControl(temp._FrameTitle)
_HtmlControl._AddControl(temp._FrameMain)
_HtmlControl._AddControl(temp._FrameState); ._AddControl(temp._FrameControl);
} else {
loadFn()
}
}
this._AnmNext && this._AnmNext._play()
//5.e Map
this._Map = [];
mapIndex = -1;
};


즉, 선택자도 객체입니다. 게임 클래스에는 애니메이션 로딩, 키보드 처리 등이 있습니다.




코드 복사


코드는 다음과 같습니다.

//게임 만들기
var game1 = new Game("Snake", null, null)
var game2 = new Game("Tetris", null, null); var game3 = new Game("푸시박스", null, null);
var game4 = new Game("레이싱", null, null)
var game5 = new Game("탱크 전투", null, null )
//------------------ ----- ------------
//6. 게임 목록
var _GameList = [game1, game2, game3, game4, game5]//- ----- ------------------- --
/ /7. 게임 선택기
var _GameChoose = new Game("selector", null, null)
{
_GameChoose._Map =
_GameChoose._Load = 함수 () {
this._FrameTitle = _HtmlControl._newPanel(0, 0, 400, 30);
this._FrameTitle.innerHTML = "게임을 선택하세요."
this._FrameMain = _HtmlControl._newPanel( 0, 30, 240, 370);
this._FrameState = _HtmlControl._newPanel(240, 30, 160, 180);
this._FrameState.innerHTML = "
아래쪽 키
this._FrameControl = _HtmlControl._newPanel(240, 210, 160, 190);
this._FrameControl.innerHTML = "Enter를 누르세요
게임 시작";
this._tempButtons = [];
this._tempButtonsIndex = 0;
//this._FrameMain.style.scrollbar//
if (this._Map.length > 0) {
for (var i = 0; i var 버튼 = _HtmlControl._newButton(this._Map[i]._name, 200, 30); 🎜>this._FrameMain.appendChild(버튼);
this._tempButtons.push(버튼);
}
this._tempButtons[0].select();
_HtmlControl. _AddControl(this._FrameTitle);
_HtmlControl._AddControl(this._FrameMain);
_HtmlControl._AddControl(this._FrameState)
_HtmlControl._AddControl(this._FrameControl)
_GameChoose._LControl = function( date) {
if (mapIndex != -1) {
this._Map && this._Map[mapIndex]._LControl(date)
}
};
_GameChoose._KControl = function(event) {
if (mapIndex == -1) {
switch (event.keyCode) {
case _KeyParameters.KeyUp:
{
/ /alert("상위 t" );
if (this._tempButtonsIndex > 0) {
this._tempButtonsIndex--
for (var i = 0; i this ._tempButtons[i].unselect();
}
this._tempButtons[this._tempButtonsIndex].select()
}
}
break;
case _KeyParameters.KeyDown :
{
//alert("下")
if (this._tempButtonsIndex this._tempButtonsIndex;
for (var i = 0; i this._tempButtons[i].unselect()
}
this._tempButtons[this._tempButtonsIndex ].select();
}
}
break;
case _KeyParameters.KeyEnter:
{
mapIndex = this._Map && this._Map [mapIndex]._Start() ;
}
break;
default:
{
} break
}
} else {
if == _KeyParameters.KeyESC) {
mapIndex = -1;
this._Start();
return;
}
this._Map && this._Map[mapIndex]._KControl(event );
}
}
}


시간 관계상 스네이크는 어제도 마지막 슬로건을 하지 못했습니다. 회사에서 누군가가 회사에 업무를 맡겼다고 하더군요.

오늘은 첫 번째 게임을 쉽게 완성할 수 있도록 슬로건을 바꾸고 싶습니다. 낮에는 권위, 밤에는 욕심쟁이 뱀, 극한의 욕심을 부리고 싶어요, ㅎㅎ...

<title> </title> <style type="text/css"> .button { } </style> <div id="GameFrame" style="width:400;height:400; "></div> [Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다.
] 글은 분명 매우 답답하지만, 여러 면에서 실력을 향상시키기 위해 글을 올렸습니다.