ピンボール ゲームのサンプル コードの js バージョンの非 html5 実装_javascript スキル

開始前の HTML ページ

開始後の HTML ゲーム インターフェイス

HTML ページのレイアウト、つまり、index.html ファイルのソース コードは次のとおりです。 🎜>

コードをコピー コードは次のとおりです:

< meta http-equiv="Content-Type" content ="text/html; charset=utf-8"/>

スコア:
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;

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( );

}

},

関連ラベル：

html5 js

ソース：php.cn

前の記事：JavaScript 拡張カスタム イベントevent_javascript スキル 次の記事：JavaScript で強化されたカスタム コールバック example_javascript スキル

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

著者別の最新記事

• NullPointerException とは何ですか?どのように修正すればよいですか?
  2024-10-22 09:46:29
• 初心者からプログラマーへ: 旅は C の基礎から始まります
  2024-10-13 13:53:41
• PHP による Web 開発のロックを解除する: 初心者ガイド
  2024-10-12 12:15:51
• C の謎を解く: 新人プログラマーのための明確でシンプルな道
  2024-10-11 22:47:31
• コーディングの可能性を解き放つ: まったくの初心者のための C プログラミング
  2024-10-11 19:36:51
• 内なるプログラマーを解き放つ: まったくの初心者のための C
  2024-10-11 15:50:41
• C で生活を自動化する: 初心者向けのスクリプトとツール
  2024-10-11 15:07:41
• PHP を簡単に: Web 開発の最初のステップ
  2024-10-11 14:21:21
• Python で何でも構築: 創造性を解き放つための初心者ガイド
  2024-10-11 12:59:11
• コーディングの鍵: 初心者のための Python の力を解き放つ
  2024-10-11 12:17:31

最新の問題

ページのメインディスプレイに画像を表示するにはどうすればよいですか? 私がやりたいのは、NASAAPI を使用して写真を受信することです。これらの写真は、マイページのサムネイルとメインディスプレイに表示されます。コードがサムネイルから画像を取得してペ...

から 2024-04-06 15:33:12

0

1

433

PDF ファイルは HTML5 と JavaScript を実行できますか? PDF に埋め込まれるため、どのコンピュータでもブロックされないプログラムを作成してみようという愚かな考えがあります (JavaScript は PDF 内で実行できると聞きました...

から 2024-04-05 12:57:00

0

1

456

HTML5 の enctype と formenctype の違いは何ですか? HTMLLivingStandard (別名、新しい HTML5 仕様) の属性 enctype と formenctype の違いは何でしょうか?私は HTML Standard...

から 2024-04-02 11:47:56

0

1

275

ページをモバイル対応にしますか? たくさんの Web ページといくつかの Web サイトがあります。問題は、私は初心者だということです。基本的な html5 と css3 を使用していますが、それらをスケールアップ...

から 2024-04-01 20:42:38

0

1

259

関連トピック

詳細>

• js正規表現
• jsは現在時刻を取得します
• js文字列を配列に変換
• jsはどういう意味ですか
• ノードを削除するjsメソッド
• 文字列をインターセプトするjsメソッド
• JSのconcatとpushの違い
• jsで文字列をインターセプトする方法の紹介