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

学習日

2025年02月17日

名前

河西恵太

練習問題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('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('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;  
    y += dy;
  if (y < 0 || 300 < y)
    dy = -dy;
}

感想

練習問題としてはそこまで難しくなかったです。特に、xをyにするだけだったりyを追加するだけだったりでそこまで複雑ではありませんでした。

久しぶりに出てきた忍者動かせてよかったです。

コメントする