今回は弾を発射できるようにします。
前回のコードを書き換える形でやります。
でも今回はファイルを別々に分けてやります。
まず、webエディターの上の「Sketch」を選んで、「sprite.js」ファイルを作成します。
中身を以下のように書きます。
これは弾のクラスです。
moveでどのように動くか、displayでどのように描写するかを設定します。
class Bullet{
constructor(x,y){
this.x =x;
this.y =y;
this.speedY = 5;
this.isVisible = true;
}
move(){
this.y -= this.speedY;
if (this.y < 0) {
this.isVisible = false;
}
}
display(){
if (this.isVisible){
fill('yellow');
ellipse(this.x, this.y, 10, 10);
}
}
}「Sketch.js」ファイルの中身を以下のように書き換えましょう。
// プレイヤーの座標
let x, y;
// 四角のサイズ
let gridSize = 40;
let bullets = [];
//最初に一回だけ読み込む
function setup() {
createCanvas(400, 400);
x = width / 2;
y = height / 2;
}
//描画
function draw() {
//背景の濃さ
background(220);
for (let bullet of bullets){
bullet.display();
bullet.move();
}
//キャラクター描画関数
drawCharacter();
}
//キャラクター描画関数
function drawCharacter() {
fill('red');
square(x, y, gridSize);
}
// キーボードイベントを処理する関数
function keyPressed() {
switch(keyCode){
// 左に移動
case LEFT_ARROW:
x = max(x - gridSize, 0);
break;
// 右に移動
case RIGHT_ARROW:
x = min(x + gridSize, width - gridSize);
break;
// 上に移動
case UP_ARROW:
y = max(y - gridSize, 0);
break;
// 下に移動
case DOWN_ARROW:
y = min(y + gridSize, height - gridSize);
break;
}
if(key == ' '){
let bullet = new Bullet(x + 20, y);
bullets.push(bullet);
}
redraw(); // 描画を更新
}
index.htmlを以下のように書き換えます。
といっても「<script src=”sprite.js”></script>」を加えただけです。
これでsprite.jsファイルを読みこめれるようにします。
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.10.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.10.0/addons/p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" />
</head>
<body>
<main>
</main>
<script src="sprite.js"></script>
<script src="sketch.js"></script>
</body>
</html>
Sketch.jsの中身について説明します。
let bullets = [];で弾を宣言します。
これは動的配列といって、複数のものを画面上に描写できるようにします。
for (let bullet of bullets){～で弾をそれぞれ動かしたり表示できるようにします。
if(key == ‘ ‘){～で弾を発生させます。
if(key == ‘ ‘)そのものでスペースキーを押したらという意味です。
コメント