表示ができたら次は動かします。矢印キーで動かします。

矢印キーは上下左右あるので

if(kb.presses("left")){
   // 左に進む処理
}
if(kb.presses("right")){
    // 右に進む処理
}
if(kb.presses("up")){
    // 上に進む処理
}
if(kb.presses("down")){
    // 下に進む処理
}

キーボードを認識させる

上記サイトでキーボードの"スペース"押せばいろんな動作を見ることができます。押す動作では、"presses(押した瞬間)"、"pressing(押している間)"、"released(話した瞬間)"などのタイミングで動作させることができます。

今回はpressesを使います。

そして処理の内容ですが、

velocity 

"vel"を使うと、一回押すと動き続けます。以下はx軸の動作を指定しています。

は"-2"なので画面左方向に動く動作となります。上下左右全て入れると

    if(kb.presses("left")){
  		sprite.vel.x = -2;
		sprite.vel.y = 0;
	}
	if(kb.presses("right")){
		sprite.vel.x = 2;
		sprite.vel.y = 0;
	}
	if(kb.presses("up")){
		sprite.vel.x = 0;
		sprite.vel.y = -2;
	}
	if(kb.presses("down")){
		sprite.vel.x = 0;
		sprite.vel.y = 2;
	}

全コードは

let sprite;

function setup(){
    new Canvas(500, 500);
  
    sprite = new Sprite();
    sprite.width = 50;
    sprite.height = 50;
    sprite.color = 'orange';
}

function draw(){
	background("silver");

    if(kb.presses("left")){
		sprite.vel.x = -2;
		sprite.vel.y = 0;
	}
	if(kb.presses("right")){
		sprite.vel.x = 2;
		sprite.vel.y = 0;
	}
	if(kb.presses("up")){
		sprite.vel.x = 0;
		sprite.vel.y = -2;
	}
	if(kb.presses("down")){
		sprite.vel.x = 0;
		sprite.vel.y = 2;
	}
}

move 

"move"を使います。一回押すと一定量動きます。

となっています。

let sprite;

function setup(){
    new Canvas(500, 500);
  
    sprite = new Sprite();
    sprite.width = 50;
    sprite.height = 50;
    sprite.color = 'orange';
}

function draw(){
	background("silver");

    if(kb.presses("left")){
	　sprite.move(30, 'left', 1);
	}
	if(kb.presses("right")){
      sprite.move(30, 'right', 1);
	}
	if(kb.presses("up")){
	  sprite.move(30, 'up', 1);
	}
	if(kb.presses("down")){
	  sprite.move(30, 'down', 1);
	}
}

キーボードを押すことで指定の物体が動くようになりました。