jsを使って小さなゲームプラットフォームを作る(1)_javascriptスキル

仕事でコードを書いていたとき、テクニカルディレクターがいつも「最初にデザインしなければいけないから、最初にデザインしましょう」と言っていたのを思い出します。
追伸: 私は初心者です、許してください。

。Web ゲームエリア。つまり、次のように Web ページ上のゲームの領域を知る必要があります:
Web ページに div を挿入し、幅、高さ、ID を設定します。

次に、js でオブジェクトを取得します。
var _GameFrame = document.getElementById("GameFrame");

。キーボード パラメーター オブジェクト: ゲームは多くの場合、キーボードの値を取得し、キーの値に対応するオブジェクトを設定します:
var _KeyParameters = { KeyEnter: 13, KeySpace: 32, KeyLeft: 37 、KeyUp: 38、KeyRight: 39、KeyDown: 40、KeyESC : 27 };


。タグ コントロール オブジェクト: HTML タグの制御と生成に使用され、対応するスタイル「コントロール」の生成を支援します。

コードをコピーします コードは次のとおりです。

var _HtmlControl =
{
//Web ゲーム領域をクリア
_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.select = function() {
//変更選択時
};
div.unselect = function() {
//選択されていない場合の表示
};
return
}
//続行...
};

.Animation クラス: ゲームのジャンプ アニメーションの再生に使用されます:

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

var Anime = function(endFn) {

//アニメーションを再生
this._play = function() {
//置き方は考えていない。
};
// 再生終了イベント
this._palyEnd = endFn || function() {
alert("アニメーションの再生が終了します");


。ゲームの種類: ゲーム名が必要です。
a. コントロール: 1. ロジック コントロール、2. キーボード コントロール
b. メイン インターフェイス: 1. タイトル、2. ゲームエリア、3. ステータス表示エリア、4. コントロールエリア

c. アニメーション: 1. オープニングアニメーション、2. クリアアニメーション、3. クリアアニメーション
d: イベント: 1. 開始、2. 終了。
コードはおおよそ次のとおりです:
コード




コードをコピー

コードは次のとおりです: var Game = function(name,logicalFn, keyFn) { //ゲーム名

this._name = name || "名前なし";

this._LControl =logicalFn || ) {
// 単純なゲーム ロジック コントロール
};
this._KControl = keyFn || function(event) {
// 単純なキーボード ロジック
};アニメーション
this ._AnmLoad = newアニメーション(null);
//アニメーションを渡す
this._AnmNext = newアニメーション(null)
//アニメーションを渡す
this._AnmEnd = newアニメーション(null);
};



。 ゲーム クラス オブジェクトのリストです。

。ゲーム セレクター: ゲーム クラス オブジェクトにすることができます。

var _GameChoose = new Game("selector", null, null);
。ページ コントロール: ページ イベントを登録し、ユーザーの応答を受け取り、
コード
に渡すために使用されます。 🎜>


コードをコピー

コードは次のとおりです: var _PageControl = { //8.a:スレッド制御 _ThreadControl: function() { _GameChoose._LControl();

},

//8.b: キーボード制御
_KeyControl: function(event) {
_GameChoose ._KControl (event);
},
//8.cc.Event 登録
_StartRegedit: function() {
//this._ThreadControl をループ スレッドに追加します
//追加これで、_KeyControl がドキュメントのキーボードに登録されます。
}
}



ようやく、この段階で「デザイン」が完成した感じですかね？これがデザインであるかどうかは別として、コードを入力しながらデザインされたデザインであると言えます。しかし、それは可能のようです。もちろん今は機能しません。まず全体のコードを投稿して見てみましょう:
全体のコード

コードをコピーします

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

とりあえずこれを実行して、明日実行して、最初のゲームである Snake をデザインしましょう。
同僚からの一文を使ってスローガンを叫びます: 許可設計をするな、国内で一番貪欲な蛇になれ、汗を流せ...