js 버전의 핀볼 게임 샘플 code_javascript 기술의 비html5 구현

//Magic wand class
var Magic = function(type) {

// Magic의 dom 요소
this.dom = null;

// 매직 DOM 정보
this.left = 0;
this.width = 0; 🎜>
this.type = 유형 ;

this.init();

}

Magic.prototype = {

// 매직 지팡이 유형
magicType : {

"good" : "magic",
"bad" : "shortMagic",
"none" : ""

},

// 매번 이동 변위
movepy: 3,

// 이동 ​​속도
movespeed: 20,

// 초기화 마술 지팡이
init: function() {

this.dom = document.createElement("div");

this.dom.className = this.magicType[this.type]
/ /this.dom.style.display = " 없음";

this.width =parseInt(this.dom.style.width, 10)
this.height =parseInt(this.dom.style .height, 10);

},

//마법봉 초기화 위치
initPosition: function(brick) {

this.left = brick.left;
this.top = brick.top ;

this.dom.style.left = this.left "px";
this.dom.style.top = this.top "px";

},

//위치 업데이트
update : function() {

this.dom.style.left = this.left "px"
this.dom.style.top = this .top "px";

},

// 마술 지팡이 애니메이션, 높이는 게임 배경의 높이
애니메이션: 기능 (높이) {

if (this .type == "none") {

return

}

var _this

// 함수를 아래로 이동
var downMove = function() {

_this.top = _this.top _this.movepy;
_this.update(); >// 마술 지팡이가 경계를 넘어 아래로 움직이는지 여부, Hit Stick
if (_this.top < height && !_this.isBeatStick()) {

setTimeout(downMove, _this.movespeed );

} else {

//애니메이션 종료 트리거 이벤트
_this.onEnd()

};
downMove();

} ,

//애니메이션 종료 트리거 이벤트, 외부 커버리지
onEnd : function() {},

// 여부 마술봉이 배플에 부딪힌 후 이벤트를 처리하는데, external Override
isBeatStick: function() {}

}


베젤 클래스 코드가 스틱입니다.




코드 복사

// 새로운 스틱 클래스 생성
var Stick = function() {

// 항공기에 해당하는 DOM 요소
this.dom = null

/ / 공이 움직이는지
this.isMove = false;

// 이동 ​​ID
this.moveId = null

//
this.isSend = false;

// 마크를 더 크게 만듭니다
this.bigCount = 0;

// 마크를 더 작게 만듭니다
= 0;

// 막대의 너비가 커지거나 작아짐에 따라 저장
this.width = 0

this.init(); }

Stick.prototype = {

// 게임 배경 Dom
gamePanel: null,

// 게임 배경 너비
gameWidth: 0,

// 게임 배경 높이
gameHeight: 0,

// 마술 지팡이 이동 속도
movepx: 10,

// 마술 지팡이 이동 주파수
movep: 30,

/ / 방향 키 값은
keyCodeAndDirection: {

37 : "left",
39 : "right"

}에 해당합니다. ,

// 초기화
init : function() {

this.dom = document.createElement("div")
this.dom.className = "stick" ;

},

//위치 설정
setPosition: function(gamePanel, width, height) {

// 게임 배경에 마술 지팡이 추가
this.gamePanel = gamePanel;
this .gamePanel.appendChild(this.dom);

// 항공기의 초기 위치 설정
this.dom.style.left = ( width - this.dom.clientWidth)/2 "px";
this.dom.style.top = height - this.dom.clientHeight "px"

// 너비와 높이를 가져옵니다. 게임 배경
this.gameWidth = width;
this .gameHeight = height;

},

// 키보드 누름 이벤트
keydown: function(e) {

var keyCode = e.keyCode;

if (!this.isMove) {

this.move(keyCode)

}

},

// 키보드 해제 이벤트
keyup: function(e) {

// 키보드 해제 여부를 확인
if (this.keyCodeAndDirection[e .keyCode]) {

// 이동 ​​중지
this.stopMove()

} else if (e.keyCode == 32) {

// 촬영하지 않음으로 설정
this.isSend = false;

}

},

// Move
move: function(keyCode) {

// 이동으로 설정
this.isMove = true;
var _this = this;

// 이동 ​​방향 결정
switch(this.keyCodeAndDirection[keyCode]) {

case "left" : {

this.moveId = setInterval(function() {_this.moveLeft();}, _this.movesp)
break;
}

case "right" : {

this.moveId = setInterval(function() {_this.moveRight();}, _this.movesp)
break;

}

default : break;

}

},

// 왼쪽으로 이동
moveLeft: function() {

var left = this.dom[ "offsetLeft"];
left = left - this.movepx >= 0 ? left - this.movepx : 0; ["왼쪽"] = 왼쪽 "px";

if (왼쪽 == 0) {

this.stopMove()

},

// 오른쪽으로 이동
moveRight : function() {

var left = this.dom["offsetLeft"]
var maxDistance = this.gameWidth - this .dom.clientWidth;
왼쪽 = 왼쪽 this.movepx <= maxDistance;
this.dom.style["left"] = 왼쪽 "px"; >if (왼쪽 == maxDistance) {

this.stopMove();

}

},

// 작게 만들기
changeSmall : function() {

if ( this.smallCount >= 1) {

return

} else {

this.dom.style .width = 80 "px";
this.smallCount

this.bigCount >= 1 ? this.bigCount

}

this.dom.style.left = parsInt( this.dom.style.left, 10) 20 "px";
this.dom.style.width = 40 "px"

},

// 더 커짐
changeBig : function() {

if (this.bigCount >= 1) {

return; 🎜>} else {

this.dom.style.width = 80 "px";
this.bigCount ;

this.smallCount >= 1 ? : this.smallCount 0

}

if (parseInt(this.dom.style.left, 10) <= 75 ) {

this.dom.style .width = parsInt(this.dom.style.width, 10) 75 parsInt(this.dom.style.left, 10) "px";
this.dom.style.left = 0 "px"; >
return;

} else if (this.dom.style.width 150 parsInt(this.dom.style.left, 10) >= this.gamePanel.clientWidth) {

this.dom.style.left = parsInt(this .dom.style.left, 10) - 150 "px";
this.dom.style.width = this.dom.style.width 150 "px" ;

return;

} else {

this.dom.style.left =parseInt(this.dom.style.left, 10) - 75 "px";
this.dom.style.width = 150 " px";

}

},

// 이동 ​​중지
stopMove: function() {

this.isMove = false;
clearInterval(this.moveId);

},

// 핀볼 실행, 외부 인터페이스,
onSendBall: 함수 () {},


//점수 변경 외부 인터페이스
onChangeScore: function() {}

}


몇 가지 어려운 기술의 구현

키보드의 왼쪽 및 오른쪽 화살표 키를 통해 베젤을 이동하는 코드 구현: