​

const world = [];

W = 100;

H = 100;

M = 15;

​

const mid = 13;

​

function setup() {

  createCanvas(400, 400);

  for (var y = 0; y < 5; y ++)

    for (var x = 0; x < 5; x ++ )

      world.push({

      x:x,

      y:y,

      c:createGraphics(W, H).background(100)

    })

}

​

​

​

var x = 0;

var y = 0;

​

var px = x;

var py = y;

​

var wx = 0;

var wy = 0;

​

var spd = 0

​

function draw() {

  if (/*w*/ keyIsDown(87)) {if(spd < 3) {spd = spd +0.1}y -=spd}

  if (/*a*/ keyIsDown(65)) {if(spd < 3) {spd = spd +0.1}x -=spd}

  if (/*s*/ keyIsDown(83)) {if(spd < 3) {spd = spd +0.1}y +=spd}

  if (/*d*/ keyIsDown(68)) {if(spd < 3) {spd = spd +0.1}x +=spd}

  if( !keyIsDown(87) &&

  !keyIsDown(65) &&

  !keyIsDown(83) &&

  !keyIsDown(68)) spd=0

  point(x,y)

  translate(-W, -H)

​

  world.map(o => image(o.c,

                       o.x*W +o.x*M,

                       o.y*H +o.y*M))

  world[mid].c.push()

  world[mid].c.translate(W/2, H/2)

  world[mid].c.point(x,y)

  world[mid].c.pop()

  px = x;

  py = y

  if (spd>0) spd-=0.05;

  rect(0,0,150,25)

  text(spd, 0, 10)

}