私が先週学んだこと:Vanillajsを使っているバウンスオブジェクトを作る方法
10435 ワード
今週のブログエントリへようこそ!Flatiron学校のフェーズ4は、それがプロジェクト時間であることを意味する終わりまで来ています.フロントエンドとRuby on Railsのバニラジャを使って2 Dゲームを作ることにしました.ゲームのクローンですFlappy Bird そして、プレーヤーは
まず最初にすべきことはインデックスを作成することです.HTML .このファイルの中でcanvas 画像が描画されるページの領域を定義するために使用する要素です.
次に、選択したキャンバスに描画するには
ものすごい、これまで、私はAをつくりました
素晴らしい、私は正常に作成しました
スティーブンキング小説のように、私は少しのサスペンスで終わるつもりです.次のエントリで私は私のゲームの中で物理学をモデル化し、インタラクティブなオブジェクトを作る.
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