学習日
９月２日 火曜日
名前
中村 結
✅ 練習問題 ４－８－１
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;
}
📷 実行結果
忍者が縦に進むようになって、上と下についたら跳ね返るようになった。
✅ 練習問題 ４－８－２
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;
} 📷 実行結果
忍者が斜めで行き来するようになって、端についたら跳ね返ってまたまどるようになった。
まとめ
・アニメーションは一秒間に１０回などたくさん変化させていくことでつながっているようにみせられる。
・そのアニメーションを動かしたいときはｘ、ｙ、ｄｘ、ｄｙなどを使うことで縦や横、斜めに動かすことができる。