직장에서 코드를 작성할 때 우리 기술 책임자가 항상 "디자인"을 먼저 해야 하므로 먼저 "디자인"을 하자고 말했던 기억이 납니다.
ps: 초보인데 양해 부탁드립니다.
웹게임 영역. 즉, 다음과 같이 웹 페이지에서 게임의 영역을 알아야 합니다.
웹 페이지에 div를 삽입하고 너비, 높이 및 ID를 설정하고,
그런 다음 js에서 개체를 가져옵니다.
var _GameFrame = document.getElementById("GameFrame")
. 키보드 매개변수 객체: in 게임은 종종 키보드의 값을 획득하고 키 값에 해당하는 객체를 설정합니다:
var _KeyParameters = { KeyEnter: 13, KeySpace: 32, KeyLeft: 37 , KeyUp: 38, KeyRight: 39, KeyDown: 40, KeyESC : 27 }
태그 제어 개체: html 태그를 제어 및 생성하고 해당 스타일 "컨트롤" 생성을 지원하는 데 사용됩니다.
var _HtmlControl =
{
//웹 게임 영역 지우기
_ClearArea: function() {
},
//div 만들기
newDiv: function() {
var div = document.createElement( "div");
return div;
},
/ /지정된 너비와 높이로 버튼 스타일 라벨 만들기
newButton: function(w, h) {
var div = this .newDiv();
div.style.width = w "px";
div.style.height = h "px";
div.select = function() {
//변경 선택 시
};
div.unselect = function() {
//선택되지 않은 경우의 모습
}
return div; ...
};
.Animation 클래스: 일부 게임 점프 애니메이션을 재생하는 데 사용됩니다.
var Animation = function(endFn) {
//Play animation
this._play = function() {
//어떻게 넣을지 생각해본 적이 없어요.
};
//재생 종료 이벤트
this._palyEnd = endFn || function() {
alert("애니메이션 재생 종료")
}; 🎜>
. 게임 이름이 있어야 합니다.
a. 컨트롤: 1. 로직 컨트롤, 2. 키보드 컨트롤
b. 영역 , 3. 상태 표시 영역, 4. 제어 영역
c.애니메이션: 1. 오프닝 애니메이션, 2. 클리어런스 애니메이션, 3. 클리어런스 애니메이션
d: 이벤트: 1. 시작, 2. 종료.
코드는 대략 다음과 같습니다.
코드
코드 복사
코드는 다음과 같습니다. var Game = function(name, logicFn, keyFn) { //게임 이름
this._name = name || "Unnamed";
this._LControl = logicFn || ) {
//간단한 게임 로직 제어
};
this._KControl = keyFn || function(event) {
//간단한 키보드 로직
//열기 animation
this ._AnmLoad = new Animation(null);
//애니메이션 전달
this._AnmNext = new Animation(null)
//애니메이션 전달
this._AnmEnd = 새로운 애니메이션 (null);
};
게임 목록입니다.
. 게임 선택기: 게임 클래스 개체일 수 있습니다.
var _GameChoose = new Game("selector", null, null)
. 페이지 제어: 페이지 이벤트를 등록하고, 사용자 응답을 수락하고,
코드
에 전달하는 데 사용됩니다. 🎜>
코드 복사
},
//8.b: 키보드 제어
_KeyControl: function(event) {
_GameChoose ._KControl (이벤트);
},
//8.cc.이벤트 등록
_StartRegedit: function() {
//루프 스레드에 this._ThreadControl 추가
//추가 _KeyControl이 문서의 키보드 클릭에 등록됩니다.
}
}
드디어 이 단계에서 "디자인"이 완성된 것 같죠? 이것이 디자인인지 아닌지를 떠나 그냥 코드를 입력하면서 디자인한 디자인이라고 치자. 하지만 가능할 것 같습니다. 물론 지금은 작동하지 않습니다. 먼저 전체 코드를 올려서 살펴보겠습니다.
전체 코드
코드 복사
코드는 다음과 같습니다. 🎜>
지금은 이 작업을 수행하고 내일 실행해 보고 첫 번째 게임인 Snake를 디자인해 보겠습니다.
동료의 문장을 사용하여 슬로건을 외칩니다. 허가 디자인을 하지 마세요. 국내 최고의 욕심쟁이 뱀이 되어 땀을 흘리세요...
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
