04-08 忍者のアニメーション

1 例題 4-8-1
- 1.1 コード
2 練習問題4-8-1
3 練習問題4-8-2

忍者のコスチュームを変えながら表示する。

例題 4-8-1

忍者を横に移動する。attack00.png～attack06.pngまでの７つのロボットのコスチュームを0.1秒置きに切り替えて表示する。frameRate(10)と設定することで、draw関数は１秒に10回呼び出されることになるので、0.1秒置きの描画となる。

img ←から画像をダウンロード

コード

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;
  if (x < 0 || 300 < x)
    dx = -dx;  
}

練習問題4-8-1

忍者を縦方向（上下）に移動させなさい。
上下の端で跳ね返るように動きを制御すること。

練習問題4-8-2

忍者を斜め方向に移動させなさい。
画面の端にぶつかったら、X方向とY方向の両方の動きを反転させて跳ね返すようにする。