Monkey game platformer's game

Click here for free DL of the app version that can save data.

No:45458

←

Prev Next

→

Monkey game platformer
Developer User19598｜Date and time 24/2/20 16:31:09
Build time 11.439 sec｜Game capacity 2.177KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
<title>Monkey Game Platformer</title>
<style>
.canvas {
  width: 100%;
  height: 100vh;
  background-color: #f0f0f0;
}
</style>
</head>
<body>
<canvas class="canvas"></canvas>

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

const player = {
  x: 50,
  y: canvas.height - 100,
  width: 50,
  height: 50,
  speed: 5,
  dx: 0,
  dy: 0
};

function drawPlayer() {
  ctx.fillStyle = 'brown';
  ctx.fillRect(player.x, player.y, player.width, player.height);
}

function clear() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
}

function newPos() {
  player.x += player.dx;
  player.y += player.dy;

detectWalls();
}

function detectWalls() {
  // Left wall
  if (player.x < 0) {
    player.x = 0;
  }

// Right wall
  if (player.x + player.width > canvas.width) {
    player.x = canvas.width - player.width;
  }

// Top wall
  if (player.y < 0) {
    player.y = 0;
  }

// Bottom wall
  if (player.y + player.height > canvas.height) {
    player.y = canvas.height - player.height;
  }
}

function update() {
  clear();

drawPlayer();

newPos();

requestAnimationFrame(update);
}

function moveRight() {
  player.dx = player.speed;
}

function moveLeft() {
  player.dx = -player.speed;
}

function moveUp() {
  player.dy = -player.speed;
}

function moveDown() {
  player.dy = player.speed;
}

function keyUp(e) {
  if (
    e.key == 'Right' ||
    e.key == 'ArrowRight' ||
    e.key == 'Left' ||
    e.key == 'ArrowLeft' ||
    e.key == 'Up' ||
    e.key == 'ArrowUp' ||
    e.key == 'Down' ||
    e.key == 'ArrowDown'
  ) {
    player.dx = 0;
    player.dy = 0;
  }
}

document.addEventListener('keydown', keyDown);
document.addEventListener('keyup', keyUp);

update();
</script>
</body>
</html>