学習日
2025年8月19日
名前
樋口桜大
自分で作った図形（コードと画像）
✅ 例題 4-8-1
忍者を横に移動させる。attack00.png～attack06.pngまでの７つのロボットのコスチュームを0.1秒置きに切り替えて表示させる。
frameRate(10)と設定することで、draw関数は１秒に10回呼び出されることになるので、0.1秒置きの描画にすることができる。
コード
let ninja = [];
let n = 0;
let x = 0, dx = 10;
let y = 0, dy = 10;
function preload() {
for (let i = 0; i <= 6; i++) {
ninja.push(loadImage('img/attack0' + i + '.png'));
}
}
function setup() {
createCanvas(400, 400);
noSmooth();
frameRate(10);
}
function draw() {
background(255);
image(ninja[n], x, y, 128, 128);
n = (n + 1) % ninja.length; // length = 配列の長さを表している！
x += dx;
if (x < 0 || 300 < x)
dx = -dx;
}📷 実行結果
https://pg.pasocafe.jp/wp-content/uploads/2024/11/%E5%BF%8D%E8%80%85%E5%8B%95%E7%94%BB-1.mov
✅ 練習問題 4-8-1
さっきの忍者を縦方向（上下）に移動させよう。
上下の端で跳ね返るように動きを制御しよう。
コード
let ninja = [];
let n = 0;
let x = 0, dx = 10;
let y = 0, dy = 10;
function preload() {
for (let i = 0; i <= 6; i++) {
ninja.push(loadImage('img/attack0' + i + '.png'));
}
}
function setup() {
createCanvas(400, 400);
noSmooth();
frameRate(10);
}
function draw() {
background(255);
image(ninja[n], x, y, 128, 128);
n = (n + 1) % ninja.length;
y += dy;
if (y < 0 || 300 < y)
dy = -dy;
}📷 実行結果
✅ 練習問題 4-8-2
さっきの忍者を斜め方向に移動させなさい。
画面の端にぶつかったら、X方向とY方向の両方の動きを反転させて跳ね返すようにする。
コード
let ninja = [];
let n = 0;
let x = 0, dx = 10;
let y = 0, dy = 10;
function preload() {
for (let i = 0; i <= 6; i++) {
ninja.push(loadImage('img/attack0' + i + '.png'));
}
}
function setup() {
createCanvas(400, 400);
noSmooth();
frameRate(10);
}
function draw() {
background(255);
image(ninja[n], x, y, 128, 128);
n = (n + 1) % ninja.length;
x += dx;
y += dy;
if (x < 0 || 300 < x)
dx = -dx;
if (y < 0 || 300 < y)
dy = -dy;
}📷 実行結果
まとめ・感想
・04-07 球の移動の時と同じように、文字を使うときにいろいろな文字が入り混じらないようにしっかりと理解することが大切だと思った。
・移動の範囲にちゃんと制御をつけることを忘れてはいけない！
・忍者のアニメーションは一番最初の例題と同じのままで様々な方向に動かすようにする。