私が先週学んだこと:Vanillajsを使っているバウンスオブジェクトを作る方法

10435 ワード

今週のブログエントリへようこそ!Flatiron学校のフェーズ4は、それがプロジェクト時間であることを意味する終わりまで来ています.フロントエンドとRuby on Railsのバニラジャを使って2 Dゲームを作ることにしました.ゲームのクローンですFlappy Bird そして、プレーヤーはspacebar “フライ”と敵を避けるために.最後に、このブログはplayer オブジェクトとオブジェクトの描画方法.
まず最初にすべきことはインデックスを作成することです.HTML .このファイルの中でcanvas 画像が描画されるページの領域を定義するために使用する要素です.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css"></link>
    <title>Angry Borg</title>
</head>
<body>
    <canvas></canvas>
<script src="index.js"></script>
</body>
</html>

注:私は私のインデックスを確認しました.jsファイルは、インデックスにスクリプト要素を追加することによって適切に読まれました.ソースを持つHTMLindex.js . インデックス.HTMLファイルを設定し、インデックスを作成します.我々のコードを収容するJSファイル.まず最初にやることはcanvas 要素.要素の選択それはよく聞こえるね.

const canvas = document.querySelector('canvas');

上記では、私はconst canvas を選択し、canvas QuerySelectorメソッドを使用したHTML要素.覚えておいてくださいquerySelector() 要素インターフェイスのメソッドは、指定したグループのセレクタに一致する要素が呼び出される要素の子孫である最初の要素を返します.
次に、選択したキャンバスに描画するにはconst ctx キャンバスコンテキストを保存します.キャンバスAPIは、キャンバスAPIは、JavaScriptとHTML要素を介してグラフィックスを描画するための手段を提供します.きちんとした?このプロジェクトの前にCanvas それの後ろの力だけを聞かせられました!

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

私がプレーヤーを表すオブジェクトを作成したいならば、私がする必要がある最初のものは何ですか?あなたが「クラスをつくってください」と言ったならば、あなたは正しいです.思い出してください.classes オブジェクトを作成するためのテンプレートです.これらのデータに対してデータをカプセル化してデータをカプセル化します.

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

Class Player {

}

次に、新しいバージョンを生成するたびに呼び出されるコンストラクタを作成する必要がありますPlayer クラス.覚えておいてくださいconstructor メソッドはクラスのオブジェクトを作成して初期化するためのクラスの特別なメソッドです.

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

Class Player {
  constructor(x, y, radius, color) { 

  }

// constructor allows for class properties to be unique for each object that is created

}

上で、コンストラクタを定義し、それぞれのプロパティを表す複数の引数を渡しましたPlayer . x のx座標を表しますPlayer ブラウザ内のオブジェクトy y座標Player ブラウザ内のオブジェクトradius の半径を表しますPlayer オブジェクトcolor の色を表しますPlayer オブジェクト

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

Class Player {
  constructor(x, y, radius, color) { 
        this.x = x // x coordinate
        this.y = y // y coordinate
        this.radius = radius // radius of player object
        this.color = color // color of player object

  // note we set the players properties as the arguments 
     we passed in the constructor method. 

  }
}

When JavaScriptのコンストラクタ関数をインスタンス化し、オブジェクトを返します.JavaScript“this”キーワードはそのオブジェクトの中で特別な意味を持ちます.言い換えると、コンストラクター関数を作成するときに、コンストラクターがインスタンス化されたときに作成されるオブジェクトを参照するために、この“”キーワードを使用できます.引数を渡すと、コンストラクターメソッドの内部にプロパティを定義します.毎回新しいPlayer オブジェクトを作成し、新しいプロパティをPlayer .

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

Class Player {
  constructor(x, y, radius, color) { 
        this.x = x
        this.y = y
        this.radius = radius 
        this.color = color 
  }
}

const player = new Player()

私たちのクラスをセットアップした今、我々は我々のインスタンスをつくることができますPlayer . 上記のコードを見れば、私が作成したことがわかるでしょうconst player そして、Player クラスへ.次に、このプロパティに渡す必要がありますPlayer インスタンス

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

Class Player {
  constructor(x, y, radius, color) { 
        this.x = x
        this.y = y
        this.radius = radius 
        this.color = color 
  }
}

const player = new Player(100, 100, 30, 'blue');

上記の100のx座標、y座標、半径30、最終的に青となりますplayer . 新しいオブジェクトを使用して作成したことを確認しますconsole.log

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

Class Player {
  constructor(x, y, radius, color) { 
        this.x = x
        this.y = y
        this.radius = radius 
        this.color = color 
  }
}

const player = new Player(100, 100, 30, 'blue');
console.log(player);

コンソールで我々のオブジェクトを見るためにplayer コンソールに.ログメソッド.あなたのブラウザコンソールに向かうならば、あなたは以下のイメージに類似した何かを見なければなりません.

ものすごい、これまで、私はAをつくりましたPlayer クラスとコンストラクターメソッドでクラスのインスタンスを作成する能力.新しいインスタンスを使用して作成されていることを確認しましたconsole.log() パスconst player メソッドに.これまでのところ我々はブラウザでオブジェクトを実際に引き出すことができます.これをContractorメソッド内のプロパティを使用して行います.

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

Class Player {
  constructor(x, y, radius, color) { 
        this.x = x
        this.y = y
        this.radius = radius 
        this.color = color 
  }

  draw() {

  }

}

const player = new Player(100, 100, 30, 'blue');

まず、内部Player クラス私は新しい関数を作成しましたdraw また、渡されたプロパティを使用してオブジェクトを描画する責任があります.

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

Class Player {
  constructor(x, y, radius, color) { 
        this.x = x
        this.y = y
        this.radius = radius 
        this.color = color 
  }

  draw() {
        ctx.beginPath()
  }

}

const player = new Player(100, 100, 30, 'blue');

第2に、キャンバスコンテクストをctx 変数.それから私はbeginPath() to ctx これは私たちのブラウザは、我々が描画を開始するつもり知っている..

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

Class Player {
  constructor(x, y, radius, color) { 
        this.x = x
        this.y = y
        this.radius = radius 
        this.color = color 
  }

  draw() {
        ctx.beginPath()
        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false)
      //ctx.arc(x, y, radius, startAngle, endAngle [, counterclockwise])
  }

}

const player = new Player(100, 100, 30, 'blue');

第三に、キャンバスコンテクストをctx 変数.それから私はarc() to ctx which 半径の半径(x、y)を中心とする円弧を作成します.上記のように、コンストラクタからプロパティの中にdraw 関数を使用するThis キーワード

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

Class Player {
  constructor(x, y, radius, color) { 
        this.x = x
        this.y = y
        this.radius = radius 
        this.color = color 
  }

  draw() {
        ctx.beginPath()
        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false)
        ctx.fillStyle = this.color

  }

}

const player = new Player(100, 100, 30, 'blue');

番目に、キャンバスコンテクストをctx 変数.それから、fillstyleがThis.color . これを行うと、JavaScriptはplayer オブジェクトの色は、コンストラクタがインスタンス化されたときに渡されるものです.

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

Class Player {
  constructor(x, y, radius, color) { 
        this.x = x
        this.y = y
        this.radius = radius 
        this.color = color 
  }

  draw() {
        ctx.beginPath()
        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false)
        ctx.fillStyle = this.color
        ctx.fill()
  }

}

const player = new Player(100, 100, 30, 'blue');

最後に、キャンバスコンテクストをctx 変数.それから私はfill()

素晴らしい、私は正常に作成しましたplayer オブジェクトは、HTML要素のキャンバスとJavaScriptを使用して私のブラウザにそれを描いた.今、我々はオブジェクトを我々のブラウザーに配置する必要があります.このゲームのために、私は私のプレーヤーが左側とブラウザーの中央と右側の敵であることを望みます.我々の最終的なオブジェクト位置は上記のイメージの何かのように見えるべきです.

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const x = canvas.width / 2;
const y = canvas.height / 2;

Class Player {
  constructor(x, y, radius, color) { 
        this.x = x
        this.y = y
        this.radius = radius 
        this.color = color 
  }

  draw() {
        ctx.beginPath()
        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false)
        ctx.fillStyle = this.color
        ctx.fill()
  }

}

const player = new Player(100, 100, 30, 'blue');

ウィンドウサイズに関係なく、私のイメージが常にその位置にあることを保証するためには、canvas 高さと幅.
スティーブンキング小説のように、私は少しのサスペンスで終わるつもりです.次のエントリで私は私のゲームの中で物理学をモデル化し、インタラクティブなオブジェクトを作る.

Reference

この問題について(私が先週学んだこと:Vanillajsを使っているバウンスオブジェクトを作る方法), 我々は、より多くの情報をここで見つけました https://dev.to/reyes2981/what-i-learned-last-week-how-to-make-a-bouncing-object-using-vanillajs-part-1-drawing-the-object-5eea

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

JavaWeb日記-共通のRedis構成

ASP.NET&C#学習メモ4(<br>)