p5.js p5.jsをローカル環境で動かす
今回はパソコンのローカル環境で動かす方法を教えます。割と簡単です。
まず、p5.jsのwebエディターのファイルからダウンロードをクリックします。これで今までwebエディターで作ってたものをダウンロードできます。これでファイ...
p5.js p5.js 時間制限(p5.js)
今回はゲームに時間制限を実装します。これを利用すればゲージみたいな時間制限を実装することができます。
let timeLimit = 60000; // 60秒（ミリ秒）
let startTime;
function setup...
p5.js 自機の当たり判定(p5.js)
今回は自機の当たり判定を作ります。正直、敵の当たり判定とほぼ同じですが、今のままのコードでは不都合な部分があるので、大分書き換えます。
sprite.js
class Mine {
constructor(x, y, gr...
p5.js 敵の攻撃(p5.js)
今回は敵の攻撃を実装します。ただ、かなり難しいと思います。
sketch.js
// プレイヤーの座標
let x, y;
// 四角のサイズ
let gridSize = 40;
let bullets = [...
p5.js スコア表示(p5.js)
今回は敵を倒すたびに点数が増えるスコアを表記させます。基本的に敵を倒して、倒すごとに特典が入る仕組みです。
// プレイヤーの座標
let x, y;
// 四角のサイズ
let gridSize = 40;
let bul...
p5.js 当たり判定(p5.js)
今回は発射した弾と敵が当たったら消滅させるあたり判定を作ります。
まずは書き換えたコードを見せます。
//描画
function draw() {
background(220);
let shouldReverse...
p5.js p5.jsの会員登録方法と画像表示
今回はp5.jsの会員登録方法を教えます。会員登録をするとコードをWeb上で保存できて、別のパソコンで作業することができます。（ログインする必要がありますが）あとついでに画像を表示させる方法も教えます。
会員登録方法
最初に赤...
p5.js コンストラクタの解説(p5.js)
前回で敵の描写をしましたが、コンストラクタの解説を忘れていました。これはオブジェクトを複数扱うのにとても便利です。そのため、今回は敵オブジェクトでコンストラクタについて説明します。実は弾オブジェクトもコンストラクタを使っています。今回の学...
p5.js 敵描写(p5.js)
今回は敵を沢山描写します。ですが今回はとりあえず描写するところまで行きます。今後、あたり判定でもしかしたら移動の部分が変わるかもしれません。その辺、ご了承ください。まず、敵のクラス。sprite.jsの弾クラスに続く感じで書いてください。...
p5.js 弾発射(p5.js)
今回は弾を発射できるようにします。前回のコードを書き換える形でやります。でも今回はファイルを別々に分けてやります。まず、webエディターの上の「Sketch」を選んで、「sprite.js」ファイルを作成します。中身を以下のように書きます...