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 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: 2,
		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 && this.y_vec == 0) {
				this.angle = Math.PI/2;
			}

			// строго влево
			if (this.x_vec == -1 && this.y_vec == 0) {
				this.angle = Math.PI*1.5;
			}

			//...