過去のプロジェクトを更新するために学んだことを適用する

JS 13 K(私の経験について読むことができます)に入った後に、私はFlatiron学校で私の時間の間にした私の前のプロジェクトのうちの1つを再訪することに決めました.プロジェクトは、侵略と呼ばれるゲームです!私の犬ペニースペースで戦うリスの夢について.私は以前それについて書きました.

追加したもの

リサイズゲームウィンドウサイズに基づいて

私が最初にゲームを作ったとき、私はキャンバスのために高さと幅をコード化しました.私はどのように別のウィンドウディメンションに変更する方法を知っていなかったと私はサイズに加えた変更は、ゲームのスプライトは、衝突検出と同様にどのように見えた影響を与えた.私が期限をとったので、私はそれが私が必要とされる他の面に集中することになったので、それを去りました.
私がJS 13 Kのために私のゲームを作っていたので、私はそれが多くの研究をして、それをする方法について書きました.このテクニックを使用することで、ネイティブのゲームプレイの解像度は、キャンバスの解像度から分離されているため、私はスプライトのサイズや衝突検出を変更する必要はありませんでした.

背景を作成する

初期の背景は非常に大きかった.宇宙における星のPNG私のJS 13 Kゲームのために、私はJavaScriptを使用して星空の背景を作成したので、私は同様に画像の代わりにここでその技術を使用することを決めた.
この効果を作成するには、私はすべての私のゲームプレイを含むものの背後に別のキャンバスを追加しました.私は単にウィンドウの寸法をループし、ランダムx/y点で白いピクセルを配置する関数を作成しました.私は自分のループ変数を32個星のスペースに増やしました.32は私が行ったランダムな値だった.どのように多くの星に応じて増加したり、値を減らすことができます.

function buildBackground(ctx) {
  for (let i = 0; i < window.innerWidth; i += 32) {
    for (let j = 0; j < window.innerHeight; j += 32) {
      const randX = Math.floor(Math.random() * window.innerWidth);
      const randY = Math.floor(Math.random() * window.innerHeight);
      ctx.fillStyle = 'white';
      ctx.fillRect(randX, randY, 1, 1);
    }
  }
}

この関数は起動時に一度実行され、再びキャンバスに再描画する必要はありません.

P -爆弾

これは私が本当に最初の時間を追加したかった機能ですが、時間がなくなった.私は、私の他の犬、ピクセルがペニーの夢で役割を持つならば、それがクールであると思いました.今、ペニーは3 P爆弾を展開することができます、ピクセルはすぐに画面上で敵リスで撮影に移動します.
P -爆弾を作成するには、いくつかのプロパティを追加しましたPlayer P - Bombが現在活性化されているかどうかを追跡するためのクラスBulletObject あらゆる300 ms.
全く新しいクラスをつくって、衝突を加える代わりに、私はP - Bommer自体もう一つの「プレーヤー」を作りました、しかし、その運動がユーザーによって制御される代わりにmoveLeft プロパティをtrue それで、それは単独でスクリーンの向こう側に動きます.
(ハードコードされた値は、私のspritesheetの場所に対応しており、より適切なサイズでは半分になっています).

pBombShootAction(gameWidth, gameHeight) {
    // create
    this.pBombs--;
    this.pBomb = new Player(gameWidth, gameHeight);
    this.pBomb.spriteObj.sourceX = 224;
    this.pBomb.spriteObj.sourceWidth = 219;
    this.pBomb.spriteObj.sourceHeight = 157;
    this.pBomb.spriteObj.x = gameWidth + 219;
    this.pBomb.spriteObj.y = gameHeight - 157 / 2 - 30;
    this.pBomb.spriteObj.width = 219 / 2;
    this.pBomb.spriteObj.height = 157 / 2;
    this.pBombActive = true;
    this.pBomb.moveLeft = true;
    this.pBomb.type = 'pBomb';

    // shoot
    this.pBombIntervalId = setInterval(() => {
      const { x, y, width, height } = this.pBomb.spriteObj, speed = 30;
      new BulletObject("playerBullet", speed, { x, y, width, height });
    }, 300)
}

今、プレイヤーの更新機能は、P - Bombがアクティブかどうか撮影し、それに応じて反応をチェックします.

if (this.pBombShoot) {
  this.pBombShootAction(gameWidth, gameHeight);
  this.pBombShoot = false;
}

if (this.pBombActive) {
  if (this.pBomb.spriteObj.x + this.pBomb.spriteObj.width < 0) {
    this.stopPBomb();
  }
}

クーダウン機能と流体の動き

私はプレイヤーの動きの仕方を変えることにしました.ユーザーがキーを押したままにする代わりに、左または右を繰り返しタップする前に.あなたが流動的に動くことができるならば、それが敵弾丸のまわりをかわして、敵を撃つように思えたので、私はそのようにしました.私は、シュートキーをスパムからプレーヤーを保つためにクールダウン機能を追加し、これは私のプレーヤーの動きを改善することができました.
Cooldownを作成するには、プレイヤーがスペースバーを押すと、trueに設定されたプレイヤーにBooleanプロパティを追加しました.その後、1300 msのタイムアウトを作成し、その後、CoolDownプロパティがfalseに設定され、プレーヤーは再び撃つことができます.

 if (!game.player.isBarkCooldown) {
    game.player.shoot = true;
    game.player.isBarkCooldown = true;
    setTimeout(() => {
      game.player.isBarkCooldown = false;
    }, 1300)
}

--
それらは私が作った主要な変更でした、しかし、私が加えたい若干のものがあります.私は、それが現在デスクトップで働くので、私の次のアップデートがモバイルのためにタッチ規制であると思います.