シンプルなhtmlゲームとタッチスクリーンコントロール

フラッシュまたはhtml 5でゲームを作成するのが流行になりました。しかし、通常のhtml 4とjavascriptを使用してシンプルな2Dゲームを作成し、楽しむために便利です。

JavaScriptロボットを容易にするために、jQueryライブラリを使用します。

まず、次のようにフィールド（ゲームが進むブロック）を作成しましょう。

<div id="game_arena" style="width: 500px; height: 800px; background: #000">   </div> 

次に、ブロックとプレーヤーを作成します。

 <div id="player" style="height: 30px; width: 20px; background:   ; position: absolute"></div> 

さらに、競技場では、プレーヤーが移動するプラットフォームを作成します。 私はこれが好きでした：

 <div id="1" class="platform"></div> 

プラットフォーム識別子とスタイリング用のクラスを持つブロックがあります。
CSS：

 .lplatform { height: 20px; background: #eee; border: 3px solid #dbdbdb; margin-bottom: 45px; } 

プレーヤーで最初のプラットフォームにブロックを追加します（div id = "player"）。5番目のプラットフォームにプレーヤーを表示する場合は、5番目にブロックを追加します。
このようなプラットフォームをいくつか（少なくとも50）作成して、2Dマップを作成します。
現在、私たちには競技場といくつかのプラットフォームがあり、これらのプラットフォームのいずれかにプレイヤーがいます。

しかし、私たちにはコントロールがありませんか？！ -JavaScriptを追加し、プレーヤーに命を吹き込みます。

プレーヤーのあるブロックには絶対配置があるため、プラットフォームの端を基準とした座標を持ついくつかの変数と、「ヒーロー」が位置するプラットフォームの変数と番号を導入します。

 var left; //   var topm; //   var pln; //  left = 0; //        ,   0 topm = 35; //  35 -   pln = 0; //     

次に、キーボードウィンドウでキーストロークを処理します。onkeyup= function（e）{}
そして、押されたキーの番号を処理します。以下に例を示します。

 window.onkeyup = function(e) { if ( event.keyCode == 37 ) { //   37() left = left-30; //      . $('#player').animate({ marginLeft: left }); //   } } 

他のキーも同じ方法で処理できます（右側の39、cntrlの17）。
プレーヤーが撮影できるように、CNTRLを押すためのハンドラー（または、撮影に便利なキーボードの別のボタン）を配置し、プレーヤーのブロックにレーザー（表示されていない）のブロックを追加します。ボタンを押すと、レーザーのブロックが表示されます
レーザーを使用したブロックをプレーヤーを使用したブロックに追加すると、次のようになります。

 <div id="player"><div id="lazer" style="width: 0px; display: none"></div></div> 

 if ( event.keyCode == 17 ) { //  cntrl $('#lazer').fadeIn(50); // ,      0px,    $('#lazer').animate({ width: '400px' }, 'slow'); //, -       $('#lazer').animate({ width: '0px' }, '0'); //  } 

射撃による簡単なコントロールが準備できました。


プラットフォーム間で移行を行います。 ロジックは次のとおりです。左端からのインデントがXより大きい場合、上からのインデントは30（実際のピクセル）増加し、左からのインデントは0になります。
コードでは、次のようになります。

 if(left>450) { pln = pln+1; $('#pn').text('Platform: '+pln); $('#player').animate({ marginLeft: '0px' }, 0); topm = topm+70; left=0; 

同様に、他のさまざまなハンドラーを作成したり、ジャンプ（スペース番号32）したり、宙返り（css3から回転）したりすることもできます。

タッチスクリーンに調整する

ゲームプロセスを制御するという私の考えは、画面のさまざまな部分をタップすることです。 右に移動するには、画面の右側、左側-左側をクリックする必要があります。
左側に1つ、右側にもう1つ、同一のブロックを2つ作成しました。 両方とも背景がなく、透明です。 私は皆に行動を起こしました。 以下に例を示します。

 <div id="goLeft" style="height: 100%; width: 200px; position: absolute;" onclick="left = left-30; $('#player').animate({ marginLeft: left });"></div> 

ここではすべてが明確だと思います。 ここに右：

 <div id="goRight" style="height: 100%; width: 250px; margin-left: 300px; position: absolute;" onclick="left = left+60; $('#player').animate({ marginLeft: left });"> 

また、タッチスクリーンでの撮影とジャンプのために、上部に固定位置のボタンを追加しました。 クリックは、キーボードのクリックと同じアクションを実行します。 すべてが画面に合わせて調整されます。
Nokia 5800とHTC Desire、およびiPadで試しました。

これは、シンプルなコントロールを備えたシンプルなゲームです。 ある種のゲームプレイで敵を作りたいなら、熱心になり、やりたいことをやりましょう。 少し基本を説明しました。

簡単な作業例： こちら