JSFiddle - React, Tailwind, and code Playground

by Ruslan Alikberov

HTML

<body onload='main()'>
<canvas width='640' height='480'></canvas>
<textarea cols=40 rows=12 id='ChatArea'>
Василий Пупкин:
!стоит !избегает И.И.И. !быстрее !быстрее
1
!обратно
!прыгает 12:40
Иди за мной!...
:)
!прыгает 13:15
"Прогулки"
Будь рядом!
!прыгает9
2
Не отставай!
"по "Млечному путю""
!прыгает9
3
:-D
!обратно
3
""
Иван Иваныч Иванов:
!ждет В.П. !догоняет В.П. !быстрее !быстрее !быстрее !быстрее
!слушает В.П. !стоит
!ждёт В.П. !догоняет В.П.
!прыгает
15
!догоняет В.П. !быстрее
5
</textarea>
<span id='ChatAreas'></span>
</body>body>

JavaScript

var	clouds	= [];/*{
		x	:320,	// cloud position
		y	:25,	// cloud position
		z	:0,	// cloud farness
		w	:20,	// cloud width
		h	:5,	// cloud height
		n	:7,	// cottons number
		r1	:2,	// noise factor
		r2	:10,	// fitness factor
		r3	:20,	// fatness factor
		x1	:0,	// drugness factor
		y1	:0,	// drugness factor
	}];*/

function actor_cloud_new(w, h, rainy) {
	return {
		x	:(Math.random() + 1) * w * 1,
		y	:(Math.random() + 1) * h / 10,
		z	:Math.random() * 5,
		w	:w / 6,
		h	:h / 48,
		n	:7,
		d	:rainy,
		r1	:5,
		r2	:10,
		r3	:20,
		x1	:0,
		y1	:0
	};
};
CanvasRenderingContext2D.prototype.cloud_create =
function(rainy, lighting) {
	return {
		x	:Math.random() * this.canvas.width,
		y	:Math.random() * this.canvas.height / 10,
		z	:Math.random() * 0+1,
		sailing	:1,
		leaving	:.1,
		obese	:(Math.random() + 1) * this.canvas.width / 12,
		curls	:Math.floor(Math.random() * 5) + 7,
		stormy	:rainy,
		lighting:lighting,
		tender	:5,
		dimple	:10,
		bubble	:20,
		text	:""//\tСегодня утром идёт дождь\tи дети прыгают по лужам"
	};
};
//////////////////////////////////////////////////////////////////////////////
// 
CanvasRenderingContext2D.prototype.ellipse =
function(x, y, radiusX, radiusY, rotation, startAngle, endAngle, antiClockwise) {
	this.save(); this.translate(x, y); this.rotate(rotation); this.scale(radiusX, radiusY);
	this.arc(0, 0, 1, startAngle, endAngle, antiClockwise);
	this.restore();
};
//////////////////////////////////////////////////////////////////////////////
//
CanvasRenderingContext2D.prototype.clouds =
function(cloud, blobs) {
	var	width, height, curls, faraway;
	var	font, rows, size, tail, text, author;
	var	tender, dimple, bubble;
	var	angle, turning, sprain;
	var	knot, knots = [];
	var	cx, cy, ascend;
	var	x1, y1;
	var	i, n;
	var	tmp;
	faraway = 1;
	text = cloud.text.length > 0 ? cloud.text.split(/\t+/) : [];
	tail = 0;
	this.save();
	if(text.length > 0) {
		author = text.shift().replace(/((?:\s*)[A-ZА-ЯЁ])/g, " $1").trim();
		text =...