ホームページ > 記事 > ウェブフロントエンド > ピンボール ゲームのサンプル コードの js バージョンの非 html5 実装_javascript スキル
ピンボール ゲームのサンプル コードの js バージョンの非 html5 実装_javascript スキル
- WBOYオリジナル
- 2016-05-16 17:21:551257ブラウズ
開始前の HTML ページ 
開始後の HTML ゲーム インターフェイス 
HTML ページのレイアウト、つまり、index.html ファイルのソース コードは次のとおりです。 🎜>
コードをコピー コードは次のとおりです:
< meta http-equiv="Content-Type" content ="text/html; charset=utf-8"/>
スコア:
0 >
0 >
index.css ファイルのソース コードは次のとおりです:
コードをコピーします
コードは次のとおりです:
#gamePanel{ width:504px; height:504px; 🎜>位置:相対; #gamePanel .score{
フォントサイズ:20px;
色:白;
左:0;
上:0;
z-index:9999;
#gamePanel .bullet{
幅:5px ;
高さ:15px;
背景:url(../img/bullet.png);
}
#gamePanel .stick{
幅:80px;
位置:絶対;
}
#gamePanel .ball{
幅:15px;
位置:絶対;
}
#gamePanel .brick {
幅 : 28px;
高さ : 28px;
位置 : url(../img) /brick.gif);
float : left;
#gamePanel .hideBrick {
高さ : 28px; >位置 : 相対;
浮動小数点数 : 左;
#gamePanel .magic {
幅 :
高さ : 11px;
背景 : 緑;
#gamePanel {
幅 :
; : 12px;
背景: 黄色;
#gamePanel .bingo{
幅:18px; 18px;
位置:絶対;
背景:url(../img/bingo2.png)
#startBtn{
幅:20px;
境界線:黒黒緑;
左:240px; :pointer;
width:0px;
height:0px;
}
JavaScript 部分は 5 つのソース ファイルに分かれています。つまり、ball.js (ボール タイプ)、brick.js (レンガ タイプ)、game.js (ゲーム クラス)、magic.js (魔法の杖クラス)、stick.js (Baffle クラス)
ボール コード
コードをコピー
コードは次のとおりです:
// Ball
var Ball = function() {
// ピンボール dom 要素
this.dom = null;
// アクティブにするかどうか
this.isFirst = true;
// ピンボールの移動方向
this.init();
Ball.prototype = {
// ピンボールの横方向の移動速度
movepx: 3,
// ピンボールの縦方向の移動速度
movepy: 2 ,
// ピンボールの移動頻度
movesp : 20,
// ピンボールの移動頻度マップ
movespMap : {
1 : 75,
2 : 65 ,
3 : 50,
4 : 40
},
// 初期化
init : function() {
this.dom = document.createElement("div");
this.dom.className = "ball";
},
// ピンボールの初期位置、x および y 座標を設定します。
setPosition: function(x, y) {
this.dom.style.left = x "px";
this.dom.style.top = y "px" ;
},
// ピンボール アニメーションは動きを意味します。
animation: function(gameWidth, gameHeight, Stick) {
var _this = this;
// 実際の横方向の移動速度、左または右
var _movepx = this.dom.offsetLeft > -1*this.movepx : this.movepx;
var _movepy = this.dom.offsetTop > this.movepy : -1*this.movepy;// プロセス移動関数
var process = function () 🎜>
// ピンボールの x、y 座標
var left = _this.dom.offsetLeft;
var top = _this.dom.offsetTop;
// 方向を反転するかどうか
if (left <= 0 || left >= gameWidth - _this.dom.clientWidth) {
_movepx *= -1;
var isCrashStick = _this.OnCheckCrashStick();
var isCrashBall = _this.OnCheckCrashBrick();
// 方向を上に変更するかどうかを決定します
if (top < 0 || isCrashStick || isCrashBall) {
_movepy *= -1;
}
// 下に移動
top = top _movepy;
//ピンボールの位置を設定します
_this.dom.style.top = top "px";
_this.dom.style.left = left "px"; (top > gameHeight) {
_this.onend();
alert("あなたは負けます")
} else {
setTimeout( process, _this) .movesp);
}
// ピンボールの移動方向を決定します
if (_movepx > 0 && _movepy < 0) {
_this .方向 = "右上";
}
if (_movepx > 0 && _movepy > 0) {
_this.direction = "右下";
return;
if (_movepx
_this.direction = " ";
return;
}
if (_movepx < 0 && _movepy > 0) {
_this.direction = "LeftDown" ;
return;
}
// 移動開始
}; >
// 外部インターフェース、魔法の杖に当たったかどうかを検出します
OnCheckCrashStick: function() {},
// 外部インターフェース、レンガに当たったかどうかを検出します
OnCheckCrashBrick: function () {},
// ピンボール終了イベント
onend : function() {},
// ゲームオーバー
gameover : function() {}
}
ブリックコードは次のとおりですrick.js ソースファイル:
コードをコピー
コードは次のとおりです:
// ブリック クラス
var Brick = function(gamePanel) {
// ブリックの dom 要素
this.dom = null ;
// レンガが配置されているキャンバス
this.gamePanel = gamePanel;
//
this.isLive = true; // 魔法の杖を使用するかどうか
this.magic = null;
色:白;
左:0;
上:0;
z-index:9999;
#gamePanel .bullet{
幅:5px ;
高さ:15px;
背景:url(../img/bullet.png);
}
#gamePanel .stick{
幅:80px;
位置:絶対;
}
#gamePanel .ball{
幅:15px;
位置:絶対;
}
#gamePanel .brick {
幅 : 28px;
高さ : 28px;
位置 : url(../img) /brick.gif);
float : left;
#gamePanel .hideBrick {
高さ : 28px; >位置 : 相対;
浮動小数点数 : 左;
#gamePanel .magic {
幅 :
高さ : 11px;
背景 : 緑;
#gamePanel {
幅 :
; : 12px;
背景: 黄色;
#gamePanel .bingo{
幅:18px; 18px;
位置:絶対;
背景:url(../img/bingo2.png)
#startBtn{
幅:20px;
境界線:黒黒緑;
左:240px; :pointer;
width:0px;
height:0px;
}
JavaScript 部分は 5 つのソース ファイルに分かれています。つまり、ball.js (ボール タイプ)、brick.js (レンガ タイプ)、game.js (ゲーム クラス)、magic.js (魔法の杖クラス)、stick.js (Baffle クラス)
ボール コード
コードをコピー
コードは次のとおりです:
// Ball
var Ball = function() {
// ピンボール dom 要素
this.dom = null;
// アクティブにするかどうか
this.isFirst = true;
// ピンボールの移動方向
this.init();
Ball.prototype = {
// ピンボールの横方向の移動速度
movepx: 3,
// ピンボールの縦方向の移動速度
movepy: 2 ,
// ピンボールの移動頻度
movesp : 20,
// ピンボールの移動頻度マップ
movespMap : {
1 : 75,
2 : 65 ,
3 : 50,
4 : 40
},
// 初期化
init : function() {
this.dom = document.createElement("div");
this.dom.className = "ball";
},
// ピンボールの初期位置、x および y 座標を設定します。
setPosition: function(x, y) {
this.dom.style.left = x "px";
this.dom.style.top = y "px" ;
},
// ピンボール アニメーションは動きを意味します。
animation: function(gameWidth, gameHeight, Stick) {
var _this = this;
// 実際の横方向の移動速度、左または右
var _movepx = this.dom.offsetLeft > -1*this.movepx : this.movepx;
var _movepy = this.dom.offsetTop > this.movepy : -1*this.movepy;// プロセス移動関数
var process = function () 🎜>
// ピンボールの x、y 座標
var left = _this.dom.offsetLeft;
var top = _this.dom.offsetTop;
// 方向を反転するかどうか
if (left <= 0 || left >= gameWidth - _this.dom.clientWidth) {
_movepx *= -1;
var isCrashStick = _this.OnCheckCrashStick();
var isCrashBall = _this.OnCheckCrashBrick();
// 方向を上に変更するかどうかを決定します
if (top < 0 || isCrashStick || isCrashBall) {
_movepy *= -1;
}
// 下に移動
top = top _movepy;
//ピンボールの位置を設定します
_this.dom.style.top = top "px";
_this.dom.style.left = left "px"; (top > gameHeight) {
_this.onend();
alert("あなたは負けます")
} else {
setTimeout( process, _this) .movesp);
}
// ピンボールの移動方向を決定します
if (_movepx > 0 && _movepy < 0) {
_this .方向 = "右上";
}
if (_movepx > 0 && _movepy > 0) {
_this.direction = "右下";
return;
if (_movepx
_this.direction = " ";
return;
}
if (_movepx < 0 && _movepy > 0) {
_this.direction = "LeftDown" ;
return;
}
// 移動開始
}; >
// 外部インターフェース、魔法の杖に当たったかどうかを検出します
OnCheckCrashStick: function() {},
// 外部インターフェース、レンガに当たったかどうかを検出します
OnCheckCrashBrick: function () {},
// ピンボール終了イベント
onend : function() {},
// ゲームオーバー
gameover : function() {}
}
ブリックコードは次のとおりですrick.js ソースファイル:
コードをコピー
コードは次のとおりです:
// ブリック クラス
var Brick = function(gamePanel) {
// ブリックの dom 要素
this.dom = null ;
// レンガが配置されているキャンバス
this.gamePanel = gamePanel;
this.isLive = true; // 魔法の杖を使用するかどうか
this.magic = null;
this.height = 28; this.left = 0; 🎜>this.top = 0; this.init(); Brick.prototype = {
// 初期化
init : function() {
this.dom = document.createElement("div");
this.dom.className = "brick"; 🎜>// 位置: 相対ブリック初期化位置
setPosition: function(x, y) {
this.left = x;
},
//位置のブリックのサイズを初期化します:相対
setSize: function(width, height) {
this.width = width
this.height =; height;
},
//魔法の杖を初期化します
initMagic: function() {
var _this = this;// 乱数
var ランダム = parseInt(Math.random()*1000 1, 10);
var type = ランダム % 5 == 0 ? "良い" : ランダム % 4 == 0 ? "none";
//新しい魔法の杖オブジェクトを作成します
var magic = new Magic(type);
magic; initPosition(this);
// 魔法の杖をレンガに追加します
this.gamePanel.appendChild(magic.dom);
magic.onEnd = function() {
_this .gamePanel.removeChild(magic.dom);
magic.animation(this.gamePanel.clientHeight); >
/ / ヒット後のアクション
onEnd : function() {
this.isLive = false;
this.dom.className = "hideBrick"; );
}
}
魔法の杖のクラス コード、つまり、magic.js ソース ファイルは次のように実装されます:
//魔法の杖クラス
var Magic = function(type) {
// 魔法の dom 要素
this.dom = null;
// マジック DOM 情報
this.left = 0;
this.width = 0;
this.height = 0; 🎜>
this.type = 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 = " none";
this.width = parseInt(this.dom.style.width, 10);
this.height = parseInt(this.dom.style) .height, 10);
},
//魔法の杖の初期化位置
initPosition: function(brick) {
this.left = bull.left;
this.top = bull.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";
},
// 魔法の杖のアニメーション、高さはゲームの背景の高さです
animation: function (高さ) {
if (this .type == "none") {
return
}
var _this = this; >
// 関数を下に移動します
var downMove = function() {
_this.top = _this.top _this.movepy;
// 魔法の杖が境界を超えて下に移動するかどうか、スティックをヒットするかどうかを決定します。
if (_this.top < height && !_this.isBeatStick()) {
setTimeout(downMove, _this.movespeed );
} else {
//アニメーション終了トリガーイベント
}
};
downMove();
} ,
//アニメーション終了トリガーイベント、外部カバレッジ
onEnd : function() {},
//魔法の杖がバッフルに当たり、当たった後にイベントを処理します。外部オーバーライド
isBeatStick: function() {}
}
ベゼルのクラス コードはスティックです。 js ソース ファイルは次のようになります:
コードをコピー
コードは次のとおりです:
// 新しいスティック クラスを作成します
var Stick = function() {
// 航空機に対応する DOM 要素
this.dom = null; 🎜>// ボールが動いているかどうか
this.isMove = false;
// 動きの ID
this.moveId = null;
// ピンボールかどうか
this. isSend = false;
// マークを大きくします
this.bigCount = 0;
// マークを小さくします
this.smallCount = 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);
},
// キーボードリリース Event
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
// 移動方向を決定します
switch(this.keyCodeAndDirection[keyCode]) {
case "left" : {
this.moveId = setInterval(function() {_this.moveLeft();},
break
;
}
ケース "正しい" : {
this.moveId = setInterval(function() {_this.moveRight();}, _this.movesp);
}
default : Break;
}
},
// 左に移動
moveLeft: function() {
var left = this.dom[ "offsetLeft"];
left = left - this.movepx >= 0 ? left - this.dom.style : 0; ["left"] = left "px";
if (left == 0) {
this.stopMove();
},
// 右に移動
moveRight : function() {
var left = this.dom["offsetLeft"]
var maxDistance = this.gameWidth - this; .dom.clientWidth;
left = left this.movepx <= maxDistance;
this.dom.style["left"] = left "px"; >if (left == maxDistance) {
this.stopMove();
},
// 小さくする
changeSmall : function() {
if (this.smallCount >= 1) {
return;
} else {
this.dom.style .width = 80 "px";
this.smallCount ;
this.bigCount -- : this.bigCount 0;
this.dom.style.left = parseInt(this.dom.style.left, 10) 20 "ピクセル";
this.dom.style.width = 40 "ピクセル"; },
// 大きくなります
changeBig : function() {
if (this.bigCount >= 1) {
return; 🎜>} else {
this.dom.style.width = 80 "px";
this.smallCount -- : this.smallCount 0;
}
if (parseInt(this.dom.style.left, 10)
this.dom.style .width = parseInt(this.dom.style.width, 10) 75 parseInt(this.dom.style.left, 10) "px";
this.dom.style.left = 0 "px"; >
return;
} else if (this.dom.style.width 150 parseInt(this.dom.style.left, 10) >= this.gamePanel.clientWidth) {
this.dom.style.left = parseInt(this .dom.style.left, 10) - 150 "ピクセル";
this.dom.style.width = this.dom.style.width 150 "ピクセル" ;
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() {}
}
いくつかの難しい技術の実装
キーボードの左右の矢印キーを使用してベゼルを移動するコードの実装:
// キーボード押下イベント
keydown : function(e) {
var keyCode = e.keyCode;
if ( !this.isMove) {
this.move(keyCode)
}
},
//キーボードリリースイベント
keyup: function(e) {
// キーボードがリリースされたかどうかを判断します
if (this.keyCodeAndDirection[e.keyCode]) {
//移動を停止
this.stopMove( ;
},
// 移動
move : function(keyCode) {
// 移動に設定
this.isMove = true;
var _this = this;
// 移動方向を決定します
switch(this.keyCodeAndDirection[keyCode]) {
case "left" : {
this.moveId = setInterval(function() {_this.moveLeft();}, _this.movesp);
}
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;
this.dom.style["left"] = left "px";
if (left == 0) {
this.stopMove();
}
},
// 移動right
moveRight : function( ) {
var left = this.dom["offsetLeft"];
var maxDistance = this.gameWidth - this.dom.clientWidth
left = left; this.movepx <= maxDistance ? left this.movepx: maxDistance;
if (left == maxDistance) >
this.stopMove( );
}
},
init : function() {
this.dom = document.createElement("div");
this.dom.className = "brick"; 🎜>// 位置: 相対ブリック初期化位置
setPosition: function(x, y) {
this.left = x;
},
//位置のブリックのサイズを初期化します:相対
setSize: function(width, height) {
this.width = width
this.height =; height;
},
//魔法の杖を初期化します
initMagic: function() {
var _this = this;// 乱数
var ランダム = parseInt(Math.random()*1000 1, 10);
var type = ランダム % 5 == 0 ? "良い" : ランダム % 4 == 0 ? "none";
//新しい魔法の杖オブジェクトを作成します
var magic = new Magic(type);
magic; initPosition(this);
// 魔法の杖をレンガに追加します
this.gamePanel.appendChild(magic.dom);
magic.onEnd = function() {
_this .gamePanel.removeChild(magic.dom);
magic.animation(this.gamePanel.clientHeight); >
/ / ヒット後のアクション
onEnd : function() {
this.isLive = false;
this.dom.className = "hideBrick"; );
}
}
魔法の杖のクラス コード、つまり、magic.js ソース ファイルは次のように実装されます:
コードをコピーします コードは次のとおりです:
//魔法の杖クラス
var Magic = function(type) {
// 魔法の dom 要素
this.dom = null;
// マジック DOM 情報
this.left = 0;
this.width = 0;
this.height = 0; 🎜>
this.type = 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 = " none";
this.width = parseInt(this.dom.style.width, 10);
this.height = parseInt(this.dom.style) .height, 10);
},
//魔法の杖の初期化位置
initPosition: function(brick) {
this.left = bull.left;
this.top = bull.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";
},
// 魔法の杖のアニメーション、高さはゲームの背景の高さです
animation: function (高さ) {
if (this .type == "none") {
return
}
var _this = this; >
// 関数を下に移動します
var downMove = function() {
_this.top = _this.top _this.movepy;
// 魔法の杖が境界を超えて下に移動するかどうか、スティックをヒットするかどうかを決定します。
if (_this.top < height && !_this.isBeatStick()) {
setTimeout(downMove, _this.movespeed );
} else {
//アニメーション終了トリガーイベント
}
};
downMove();
} ,
//アニメーション終了トリガーイベント、外部カバレッジ
onEnd : function() {},
//魔法の杖がバッフルに当たり、当たった後にイベントを処理します。外部オーバーライド
isBeatStick: function() {}
}
ベゼルのクラス コードはスティックです。 js ソース ファイルは次のようになります:
コードをコピー
コードは次のとおりです:
// 新しいスティック クラスを作成します
var Stick = function() {
// 航空機に対応する DOM 要素
this.dom = null; 🎜>// ボールが動いているかどうか
this.isMove = false;
// 動きの ID
this.moveId = null;
// ピンボールかどうか
this. isSend = false;
// マークを大きくします
this.bigCount = 0;
// マークを小さくします
this.smallCount = 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);
},
// キーボードリリース Event
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
// 移動方向を決定します
switch(this.keyCodeAndDirection[keyCode]) {
case "left" : {
this.moveId = setInterval(function() {_this.moveLeft();},
break
;
}
ケース "正しい" : {
this.moveId = setInterval(function() {_this.moveRight();}, _this.movesp);
}
default : Break;
}
},
// 左に移動
moveLeft: function() {
var left = this.dom[ "offsetLeft"];
left = left - this.movepx >= 0 ? left - this.dom.style : 0; ["left"] = left "px";
if (left == 0) {
this.stopMove();
},
// 右に移動
moveRight : function() {
var left = this.dom["offsetLeft"]
var maxDistance = this.gameWidth - this; .dom.clientWidth;
left = left this.movepx <= maxDistance;
this.dom.style["left"] = left "px"; >if (left == maxDistance) {
this.stopMove();
},
// 小さくする
changeSmall : function() {
if (this.smallCount >= 1) {
return;
} else {
this.dom.style .width = 80 "px";
this.smallCount ;
this.bigCount -- : this.bigCount 0;
this.dom.style.left = parseInt(this.dom.style.left, 10) 20 "ピクセル";
this.dom.style.width = 40 "ピクセル"; },
// 大きくなります
changeBig : function() {
if (this.bigCount >= 1) {
return; 🎜>} else {
this.dom.style.width = 80 "px";
this.smallCount -- : this.smallCount 0;
}
if (parseInt(this.dom.style.left, 10)
this.dom.style .width = parseInt(this.dom.style.width, 10) 75 parseInt(this.dom.style.left, 10) "px";
this.dom.style.left = 0 "px"; >
return;
} else if (this.dom.style.width 150 parseInt(this.dom.style.left, 10) >= this.gamePanel.clientWidth) {
this.dom.style.left = parseInt(this .dom.style.left, 10) - 150 "ピクセル";
this.dom.style.width = this.dom.style.width 150 "ピクセル" ;
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() {}
}
いくつかの難しい技術の実装
キーボードの左右の矢印キーを使用してベゼルを移動するコードの実装:
コードをコピー コードは次のとおりです。
// キーボード押下イベント
keydown : function(e) {
var keyCode = e.keyCode;
if ( !this.isMove) {
this.move(keyCode)
}
},
//キーボードリリースイベント
keyup: function(e) {
// キーボードがリリースされたかどうかを判断します
if (this.keyCodeAndDirection[e.keyCode]) {
//移動を停止
this.stopMove( ;
},
// 移動
move : function(keyCode) {
// 移動に設定
this.isMove = true;
var _this = this;
// 移動方向を決定します
switch(this.keyCodeAndDirection[keyCode]) {
case "left" : {
this.moveId = setInterval(function() {_this.moveLeft();}, _this.movesp);
}
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;
this.dom.style["left"] = left "px";
if (left == 0) {
this.stopMove();
}
},
// 移動right
moveRight : function( ) {
var left = this.dom["offsetLeft"];
var maxDistance = this.gameWidth - this.dom.clientWidth
left = left; this.movepx <= maxDistance ? left this.movepx: maxDistance;
if (left == maxDistance) >
this.stopMove( );
}
},
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。