JSFiddle - React, Tailwind, and code Playground

by Станислав Некрасов

JavaScript

/* Сам уровень */
let level0 = {
	startPower: 1,
  targets: [
  	{x: 1, y: 1}
  ],
  dangers: [
  	{x: 1, y: 0}
  ],
  powers: [
  	{x: 0, y: 1}
  ]
};

((body, cnv, size, level) => {
	let [width, height] = [window.innerWidth, window.innerHeight];
	[body.style.margin, body.style.overflow, cnv.style.background] = [0, 'hidden', '#8e72e8'];
  let ctx = cnv.getContext('2d'), _ = body.append(cnv);
	[cnv.width, cnv.height] = [width, height];
  let player = {x: 0, y: 0, power: level.startPower};
  let draw = (x, y, color) => {
  	ctx.fillStyle = color;
  	ctx.fillRect(
    	x * size + width / 2 - player.x * size - size / 2, 
      y * size + height / 2 - player.y * size - size / 2, 
      size, size
    );
  };
  window.onkeydown = event => {
  	if (!player.power) return;
  	let res = event.key == 'w' 
      ? player.y -= 1 : event.key == 'a' ? player.x -= 1 : event.key == 's'
      ? player.y += 1 : event.key == 'd' ? player.x += 1 : null;
    if (res !== null) player.power--;
  }
  setInterval(() => {
  	ctx.clearRect(0, 0, width, height);
    level.targets.forEach(target => draw(target.x, target.y, '#27ae60'));
    level.dangers.forEach(danger => draw(danger.x, danger.y, '#e74c3c'));
    level.powers.forEach(power => draw(power.x, power.y, '#f1c40f'));
  	draw(player.x, player.y, '#2c3e50');
  }, 1000 / 60);
})(document.body, document.createElement('canvas'), 40, level0);