Прыгающий шариковый код вызывает дрожание на холсте HTML5 - PullRequest
Новая
       58

Прыгающий шариковый код вызывает дрожание на холсте HTML5

0 голосов
/ 13 января 2020

РЕДАКТИРОВАТЬ : Это все еще не решенная проблема, и это может быть проблема, указанная c для сайта, на котором она размещена, поскольку я не могу ее реплицировать, если она не размещена. Если вы хотели бы увидеть его, вы также можете немного помочь мне, найдя его в google ... Маркетинговом агентстве Google B2B и найдите результат для Move Marketing, он должен быть ближе к началу! Раздел, который вы ищете, имеет заголовок «Технический стек». Вы видите ошибку? Можете ли вы подумать, что может быть причиной этого?

У меня есть HTML Холст на моем веб-сайте, который я использую, чтобы содержать шарики, которые падают на холст, они подпрыгивают и действительно хорошо проводят время, устраиваясь на дно разными способами.

У меня сложилось впечатление, что это работает отлично. Тем не менее, теперь мне стало известно, что эти шары дрожат и бесятся на компьютерах других людей. Я проверил браузер, который они используют, и он такой же, как мой (Chrome V79). Так что просто для пояснения - у меня никогда не было этой ошибки на моем компьютере, но он постоянно имел этот джиттер на компьютерах других людей, некоторые с более мощными компьютерами, а также с компьютерами с более низкой скоростью c.

Вот оно ( этот CodePen не имеет джиттера на своих компьютерах, поэтому вы можете его и не видеть): https://codepen.io/jason-is-my-name/pen/gObKGRg

Это видео об ошибке: https://streamable.com/vtg0g 

$(document).ready(function () {
	$.ajaxSetup({
		cache: true
	});
	$.when(
		$.getScript("https://code.createjs.com/easeljs-0.6.0.min.js"),
		$.getScript("https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.10.0/matter.min.js"),
		$.Deferred(function (deferred) {
			$(deferred.resolve);
		})
	).done(function () {
		new App();
	});
});

function App() {
	var self = this;

	self.running = false;
	self.initialized = false;
	var stageClicked = false;
	var stage, canvas;

	var canvasWidth = 410;
	var canvasHeight = 550;
	var ballBounce = 0.8;
	var balls = [];
	var matterJsBalls = [];
	var _gravityY = 1;
	var _gravityX = 0;
	var FPS = 60;
	var infoText, detailsText;
	var ballsInitalized = false;
	var iOS = navigator.userAgent.match(/(iPod|iPhone|iPad)/);
	var startTime = (new Date()).getTime();

	var engine = Matter.Engine.create();

	var world = engine.world;

	var floor = Matter.Bodies.rectangle(canvasWidth / 2, canvasHeight + 50, canvasWidth, 100, {
		isStatic: true,
		render: {
			visible: false
		}
	});
	var leftWall = Matter.Bodies.rectangle(-50, canvasHeight / 2, 100, canvasHeight, {
		isStatic: true,
		render: {
			visible: false
		}
	});
	var rightWall = Matter.Bodies.rectangle(canvasWidth + 50, canvasHeight / 2, 100, canvasHeight, {
		isStatic: true,
		render: {
			visible: false
		}
	});

	Matter.World.add(world, [floor, leftWall, rightWall]);

	self.initialize = function () {
		toggleListeners(true);
		self.initCanvas();
		self.initGame();
	};

	var toggleListeners = function (enable) {
		if (!enable) return;
	};

	self.refresh = function () {};

	self.initCanvas = function () {
		canvas = $("#ball-stage").get(0);
		stage = new createjs.Stage(canvas);

		window.addEventListener("resize", onStageResize, false);
		onStageResize();
		createjs.Touch.enable(stage);
		createjs.Ticker.addListener(tick);
		createjs.Ticker.setFPS(FPS);

		self.initialized = true;
	};

	self.initGame = function () {
		initBalls(canvasWidth, canvasHeight);
	};

	var onStageResize = function () {
		stage.canvas.width = canvasWidth;
		stage.canvas.height = canvasHeight;
	};

	var initBalls = function (stageX, stageY) {
		var imagesArray = [
	"https://cdn.mos.cms.futurecdn.net/vChK6pTy3vN3KbYZ7UU7k3-320-80.jpg",
	"https://cdn.mos.cms.futurecdn.net/vChK6pTy3vN3KbYZ7UU7k3-320-80.jpg",
	"https://cdn.mos.cms.futurecdn.net/vChK6pTy3vN3KbYZ7UU7k3-320-80.jpg",
	"https://cdn.mos.cms.futurecdn.net/vChK6pTy3vN3KbYZ7UU7k3-320-80.jpg",
	"https://cdn.mos.cms.futurecdn.net/vChK6pTy3vN3KbYZ7UU7k3-320-80.jpg",
	"https://cdn.mos.cms.futurecdn.net/vChK6pTy3vN3KbYZ7UU7k3-320-80.jpg",
	"https://cdn.mos.cms.futurecdn.net/vChK6pTy3vN3KbYZ7UU7k3-320-80.jpg",
	"https://cdn.mos.cms.futurecdn.net/vChK6pTy3vN3KbYZ7UU7k3-320-80.jpg",
	"https://cdn.mos.cms.futurecdn.net/vChK6pTy3vN3KbYZ7UU7k3-320-80.jpg",
   "https://cdn.mos.cms.futurecdn.net/vChK6pTy3vN3KbYZ7UU7k3-320-80.jpg"
		];

		for (var i = 0; i < imagesArray.length; i++) {
			(function (imageArray) {

				setTimeout(function () {
					var arrayImage = new Image();

					arrayImage.onload = function () {
						addBall(arrayImage, stageX / 2, 52);
					};

					arrayImage.src = imageArray;
				}, (i * 1000) + 1000);
			})(imagesArray[i]);
		}
	};

	var addBall = function (img, x, y) {
		var shape = new createjs.Shape();
		shape.id = balls.length;
		shape.radius = 51.25;
		shape.mass = shape.radius;
		shape.x = x;
		shape.y = y;
		shape.vx = rand(-3, 3);
		shape.vy = rand(-3, 3);
		shape.stuck = false;

		var transform = new createjs.Matrix2D();
		transform.appendTransform(-shape.radius, -shape.radius, 1, 1, 0);
		shape.graphics.beginBitmapFill(img, "repeat", transform).drawCircle(0, 0, shape.radius);

		stage.addChild(shape);
		balls.push(shape);

		var circle = Matter.Bodies.circle(x, y, shape.radius, {
			isStatic: false,
			restitution: ballBounce
		});

		Matter.World.add(world, circle);

		Matter.Body.applyForce(circle, {
			x: circle.position.x,
			y: circle.position.y
		}, {
			x: shape.vx * 0.05,
			y: shape.vy * 0.05
		});

		matterJsBalls.push(circle);
	};

	var tick = function () {
		Matter.Engine.update(engine, 16);
		for (var i = 0; i < matterJsBalls.length; i++) {
			var curBall = balls[i];
			var curMatterJsBall = matterJsBalls[i];
			curBall.x = curMatterJsBall.position.x;
			curBall.y = curMatterJsBall.position.y;
		}
		stage.update();
	};

	var rand = function (min, max) {
		return Math.random() * (max - min) + min;
		return Math.random() * max + min;
	};

	self.initialize();
	return self;
}

window.log = function f() {
	log.history = log.history || [];
	log.history.push(arguments);
	if (this.console) {
		var args = arguments,
			newarr;
		args.callee = args.callee.caller;
		newarr = [].slice.call(args);

		if (typeof console.log === "object")
			log.apply.call(console.log, console, newarr);
		else console.log.apply(console, newarr);
	}
};
(function (a) {
	function b() {}

	for (
		var c = "assert,count,debug,dir,dirxml,error,exception,group,groupCollapsed,groupEnd,info,log,markTimeline,profile,profileEnd,time,timeEnd,trace,warn".split(
				","
			),
			d; !!(d = c.pop());

	) {
		a[d] = a[d] || b;
	}
})(
	(function () {
		try {
			console.log();
			return window.console;
		} catch (a) {
			return (window.console = {});
		}
	})()
);
.tech-stack-icons-container{width:410px;height:100%}#ball-stage{width:100%;height:100%;background-color:pink;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tech-stack-icons-container">
	<canvas id="ball-stage"></canvas>
</div>

Как найти решение этой невидимой проблемы?

...