Demo p5.js game idea

game.js

// keycode constants
const SPACE     = 32
const PAGE_UP   = 33
const PAGE_DOWN = 34
const NUM_PLUS  = 107
const NUM_MINUS = 109

// UI constants
const RATIO   = { w: 4, h:3 }
const SCREEN  = { w: 0, h: 0 }
SCREEN.w = 600
SCREEN.h = SCREEN.w / RATIO.w * RATIO.h


const Text = {
  size: 16,
  x:    10,
  y:    10,
}


// Player definition
const Player = {
  x:        10,
  y:        10,
  spd:      3,
  fill:     '#f90',
  scale:    10,
  origin:   0,
  canMove:  true,
}


Player.set = function(prop, value) {

  switch(prop) {
    case 'spd':
      this.spd += value
      this.spd = constrain(this.spd, 0, 20)
      break
    case 'scale':
      this.scale += value
      this.scale = constrain(this.scale, 2, 40)
      break;
    case 'canMove':
      this.canMove = !!value
      break;
  }

}


Player.update = function() {

  // check field bound collisions
  Player.origin = Player.scale/2

  if (Player.canMove) {

    if (keyIsDown(LEFT_ARROW)) {
      Player.x -= Player.spd
    }

    if (keyIsDown(RIGHT_ARROW)) {
      Player.x += Player.spd
    }

    if (keyIsDown(UP_ARROW)) {
      Player.y -= Player.spd
    }

    if (keyIsDown(DOWN_ARROW)) {
      Player.y += Player.spd
    }

  }

  Player.x = constrain(Player.x, 0, SCREEN.w - Player.scale)
  Player.y = constrain(Player.y, 0, SCREEN.h - Player.scale)

  stroke(0)
  strokeWeight(0)
  let p = rect(Player.x, Player.y, Player.scale, Player.scale)
  p.fill(this.fill)
}


function setup() {
  createCanvas(SCREEN.w, SCREEN.h)
    
}


function keyPressed() {

  if (keyCode === SPACE)      { Player.canMove = !Player.canMove }
  if (keyCode === PAGE_UP)    { Player.set('spd',   1) }
  if (keyCode === PAGE_DOWN)  { Player.set('spd',   -1) }
  if (keyCode === NUM_PLUS)   { Player.set('scale', 5) }
  if (keyCode === NUM_MINUS)  { Player.set('scale', -5) }
  


}



function initDebug() {
  // console.debug(`Player X: ${Player.x} | Player Y: ${Player.y}`)
  // console.debug(`Screen W: ${SCREEN.w} | Screen H: ${SCREEN.h}`)

  textSize(Text.size)

  text(`Player X:       ${Player.x}`, Text.x, SCREEN.h - (Text.y * 9))
  text(`Player Y:       ${Player.y}`, Text.x, SCREEN.h - (Text.y * 7))
  text(`Player Origin:  ${Player.origin}`, Text.x, SCREEN.h - (Text.y * 5))
  text(`Player canMove: ${Player.canMove} | Speed: ${Player.spd}`, Text.x, SCREEN.h - (Text.y * 3))
  text(`Screen W: ${SCREEN.w}Screen H: ${SCREEN.h}`, Text.x, SCREEN.h - (Text.y * 1))

}








// all draw logic goes here 
function draw() {
  background(60)

  Player.update()
  

  initDebug()

}