どのように私は銀河系の戦争ゲームを構築する

こんにちは、約1ヶ月前に知っていますか?何?あなたはまだそれを試していない?試合をするhere .

面白い、右?実際、このゲームのコードはここで説明するのがとても難しいです.したがって、私はコードを議論しません、しかし、アルゴリズムだけ.

アルゴリズム

コーディネイト
このゲームのために、私はしばしば私たちが学校で学ぶデカルト座標系を使用しました.しかし、JavaScriptで変数の使用方法を保存するには、座標データを格納するために配列(vector)形式を使用します.宇宙船の座標データを配列に格納したposs そして、UFOと呼ばれる配列のデータを調整するposu .

コントローラ
まず第一に、私は4つの異なる動きのための4つのボタン、左、右、上、下を作成しました.このボタンは、右、上、下、左に宇宙船を移動するために便利です.宇宙船の位置を設定するには、CSSを使用します.

.spaceship {
  position: absolute;
  left: __px;
  top: __px;
}

JavaScriptを使用すると、top and left . 使用するspaceship.style.left x座標を設定し、spaceship.style.top y座標を設定し、setInterval . さて、これはかなり簡単だと思います.我々は宇宙船のコントローラで完了です.

シュート
このゲームでは、fliconからイメージを使用します.弾丸としてのcom.

我々が弾丸を撃つならば、我々は弾丸の最初の座標が我々の体(宇宙船)の初期の座標と同じであるということを知っています.したがって、shot ボタンを押すと、このゲームで実行する必要があります最初のコマンドは、宇宙船の座標は何かを調べることです.宇宙船の座標が知られている後、これらの座標を設定し、弾丸の最初の座標としてbullet.style.top .

衝突
宇宙船がUFOと衝突するならば、プレーヤーの生命(宇宙船)は25 %減らされます.さて、我々が学校(数学的なジオメトリー)で学んだように、各々のオブジェクトの座標が同じであるならば、2つのオブジェクトは衝突します.したがって、第1のオブジェクトと第2のオブジェクトが衝突するならば、それはx 1 = x 2とy 1 = y 2(x 1 =位置xオブジェクト1)でなければなりません.これは簡単です.しかしここではわずかな問題がある.この規則は衝突物体がポイントオブジェクト(物理学を勉強しているのではないか)に適用されます.一方、我々のオブジェクト(宇宙船とUFO)は剛体です.したがって、少し変更が必要です.CSSでは、CSSボックスモデルの概念を知っています.簡単に言えば、このコンセプトは、HTMLの各要素がボックスに“ラップ”されていることを説明します.この概念で、前の規則を変更することができます.

宇宙船のXS = XHIGH位置とUFOのXU = YLINE位置
上記のグラフに注意することによって、我々はUFOと衝突するとき、宇宙船の状態を変更することができます.宇宙船はUFOと衝突xu<xs+spaceship_width and xu>xs and yu<ys and yu>ys-spaceship_height . 我々はまた、宇宙船の問題を解決するためにUFOと衝突している.この概念は、UFOを打つ弾丸のイベントにも適用されます.

UFO運動
あなたがゲームに注意を払うならば、あなたはUFOが実際にランダムに動くということを知っています.UFOの動きをするためにsetInterval また、動きをランダムにするためにMath.random .それは簡単です、右?

どうやって動くの?
ゲームプレイは以下のようなものです.

at first the UFO moves randomly while the spaceship (player) doesn't move. The spaceship will only move if the controller button (right, left, up, down) is pressed. The UFO moves from left to right, and if the UFO has reached the edge of the screen, the UFO will return to the left side. We call this 1 cycle. In each cycle, the UFO will fire 1 bullet at random. If the bullet hits the player, the player's life will be reduced by 25%. Otherwise, the game will continue without reducing the player's life. Players can also fire at UFO. If the bullet hits the UFO, then the player will get a score +1. Every time you reach score which is the multiple of 5, the bullet speed of the UFO will increase and also increasing your chances of losing. Simple, right?

githubリポジトリ
あなたがこのゲームのコードを見たいならば、下記のGithubリポジトリに飛び込んでくださいjavascriptproject-menu/IntergalacticWar .

fikrinotes / fikrinotes.github.io
ウェブサイト
または、あなたもこれに行くことができますlink . この記事を読んでくれてありがとう.

更新
私はちょうどゲーム銀河間戦争を更新しました.今、スマートフォンやPCを介してスムーズにゲームをプレイすることができますし、私はないバグがないと思います.