JSFiddle - React, Tailwind, and code Playground

by magneto903

HTML

<!DOCTYPE html>
<html>
<head>
    <title>шлейф</title>
    <meta charset="utf-8">
</head>
<body>
<canvas id="canvas" width="200" height="200"></canvas>
</body>
</html>

CSS

canvas {
            border: 2px solid grey;
        }

JavaScript

var game_status = 'active';

var x_cam = 0;
var y_cam = 0;

var direction = {
  "37": "left",
  "38": "up",
  "39": "right",
  "40": "down",
  "65": "left",
  "87": "up",
  "68": "right",
  "83": "down",
};


var ctx = document.getElementById('canvas').getContext('2d');
var prev_canvas = []

for (var i=0; i < 5; i++) {
	prev_canvas.push(ctx.getImageData(-x_cam, -y_cam, 200, 200))
}


var map = {
  ctx: ctx,
  width: 200,
  height: 200,
  particles: [],
  circle: function (x, y, radius, color, fillCircle=true) {
    this.ctx.beginPath();
    this.ctx.arc(x, y, radius, 0, Math.PI * 2, false);
    if (fillCircle) {
      this.ctx.fillStyle = color; 
      this.ctx.fill();
    } else {
      this.ctx.strokeStyle = color;
      this.ctx.stroke();
    }
  },
  clear: function() {
    this.ctx.clearRect(0, 0, this.width, this.height)
  },
  alpha_clear: function(alpha) {
    this.ctx.fillStyle = "rgba(255, 255, 255,"+alpha+")"
    this.ctx.fillRect(0, 0, this.width, this.height);
  }
}

var player = {
  x: 100,
  y: 100,
  speed: 3,
  x_vec: 0,
  y_vec: 0,
  angle: 0,
  direction: {
    "up": false,
    "down": false,
    "right": false,
    "left": false
  },
  setDirection: function(dir, status) {
    if (dir == 'up' || dir == 'down' || dir == 'right' || dir == 'left') {
      this.direction[dir] = status;
    }
  },
  setVecs: function() {
    this.x_vec = 0;
    this.y_vec = 0;

    if (this.direction.up) {
      this.y_vec--;
    }

    if (this.direction.down) {
      this.y_vec++;
    }

    if (this.direction.right) {
      this.x_vec++;
    }

    if (this.direction.left) {
      this.x_vec--;
    }

    if (Math.abs(this.x_vec) > 0 && Math.abs(this.y_vec) > 0) {
      this.x_vec *= 0.7;
      this.y_vec *= 0.7;
    }

    // строго наверх
    if (this.x_vec == 0 && this.y_vec == -1) {
      this.angle = 0
    }

    // строго вниз
    if (this.x_vec == 0 && this.y_vec == 1) {
      this.angle = Math.PI;
    }

    // строго вправо
    if (this.x_vec == 1 &&...