Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.01.2020, 17:08
Новичок на форуме
Отправить личное сообщение для AndrewMaximum Посмотреть профиль Найти все сообщения от AndrewMaximum
 
Регистрация: 10.01.2020
Сообщений: 2

Тормозит requestAnimationFrame
Пишу что-то вроде движка для игры.
При использовании (30 и более секунд), анимация начинает тормозить.
Это можно увидеть если перемещать стрелками один из объектов.
Сам код:

--------Движок-----------
var D = document;
	var full;
	var cnv = D.createElement('canvas');
	var ctx = cnv.getContext("2d");
	
	cnv.style.padding = 0;
	cnv.style.margin = 0;
	cnv.style.position = "fixed";
	D.getElementsByTagName('html')[0].style.width = '100%';
	D.getElementsByTagName('html')[0].style.height = '100%';
	D.getElementsByTagName('html')[0].style.overflow = 'hidden';

	D.body.style.width = "100%";
	D.body.style.height = "100%";
	



function Game (){
'use strict'

this.setMap = function(posx,posy,width,height,color,texture){

this.HEIGHT = height;
this.WIDTH = width;
cnv.style.top = posy+"px";
cnv.style.left = posx+"px";	
this.keys = {};
	


	

	if(width == full){cnv.setAttribute('width',innerWidth)}else{cnv.setAttribute('width',this.WIDTH)};
	if(height == full){cnv.setAttribute('height',innerHeight)}else{cnv.setAttribute('height',this.HEIGHT)}

	if(texture && !color){cnv.style.backgroundImage = "url('"+texture+"')"}
	else if(!texture && color){cnv.style.backgroundColor = color};
	cnv.style.background = color;
	D.body.appendChild(cnv);
};


var _Game = this;
this.clear = true;


var engine = function(){
	
if(_Game.clear == true){if(_Game.WIDTH == full && _Game.HEIGHT != full){ctx.clearRect(0,0,innerWidth,_Game.HEIGHT)} 
		else if(_Game.WIDTH != full && _Game.HEIGHT == full){ctx.clearRect(0,0,_Game.WIDTH,innerHeight)}
		else{ctx.clearRect(0,0,innerWidth,innerHeight)}};
	

	_Game.update();
	
	requestAnimationFrame(engine);
};

this.start = function(){
	engine();
};

this.Rect = function(param){
	this.width = param.width;
	this.height = param.height;
	this.x = param.x;
	this.y = param.y;
	this.color = param.color;

	
};

this.Rect.prototype = {
	draw:function(){
		ctx.beginPath();
		ctx.fillStyle = this.color;
		ctx.fillRect(this.x,this.y,this.width,this.height);
			
	}

};







this.delKey = function(name){
	delete _Game.keys[name];
};

this.newKey = function(param,param2){
		this.code = param;
		this.name = param2;

	_Game.keys[this.name] = this.code;
	_Game.keys[this.name + "_isPressed"] = false;

							};

this.isDown = function(name){
addEventListener('keydown',function(e){if(_Game.keys[name] == e.keyCode){_Game.keys[name+"_isPressed"] = true}},false);
addEventListener('keyup',function(e){if(_Game.keys[name] == e.keyCode){_Game.keys[name+"_isPressed"] = false}},false);
	if(_Game.keys[name+"_isPressed"]==true){return true};

};
};



---------тестовое поле------------
window.onload = function(){

	var game = new Game();
	game.setMap(0,0,full,full,"#2F2B2B");

	var cube = new game.Rect({
		x:20,y:20,
		width:100,
		height:100,
		color:"black",


	});


	var cube2 = new game.Rect({
		x:100,y:200,
		width:40,
		height:40,
		color:"lightblue",


	});

	var player = new game.Rect({
		x:500,y:500,
		width:30,
		height:30,
		color:"red",
	});

	var player2= new game.Rect({
		x:500,y:500,
		width:30,
		height:30,
		color:"green",
	});

	game.newKey(87,"W");
	game.newKey(65,"A");
	game.newKey(83,"S");
	game.newKey(68,"D");
	game.newKey(37,"left");
	game.newKey(39,"right");
	game.newKey(40,"down");
	game.newKey(38,"up");

	game.update = function(){

		if(game.isDown("up")){player2.y -=2};
		if(game.isDown("down")){player2.y +=2};
		if(game.isDown("right")){player2.x +=2};
		if(game.isDown("left")){player2.x -=2};
		if(game.isDown("W")){player.y -=2};
		if(game.isDown("A")){player.x -=2};
		if(game.isDown("S")){player.y +=2};
		if(game.isDown("D")){player.x +=2};
		

		cube.draw();
		cube2.draw();
		player.draw();
		player2.draw();
		

	};



	game.start();
	

console.log(game.keys["W_isPressed"]);

console.log(game.keys["A_isPressed"])







}


index.html - минимальный, вот:
<!DOCTYPE html>
<html>
<head>
	<title>Test</title>
</head>
<body>
<script type="text/javascript"src = "core.js"></script>
<script type="text/javascript"src = "test.js"></script>
</body>
</html>


управление: объект1 - W,S,A,D;
объект2 - стрелки;

подскажите пожалуйста, в чем может быть проблема.

Последний раз редактировалось AndrewMaximum, 16.01.2020 в 17:33.
Ответить с цитированием
  #2 (permalink)  
Старый 17.01.2020, 04:26
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,279

Утечка памяти. У тебя addEventListener() в бесконечном цикле находится. При том, что addEventListener() не заменяет предыдущий обработчик, а прибавляет следующий:
for (var i = 0; i < 3; i++) addEventListener('click', function(e) { alert(e.type) });
document.body.click();

requestAnimationFrame() вызывается около 60 раз в секунду, вот и считай, 60 раз вызывается game.update(), 8 раз вызывается game.isDown(), 2 раза вызывается addEventListener(), за 30 секунд это 30 * 60 * 8 * 2 = 28800 обработчиков событий добавлено.

Последний раз редактировалось Rise, 17.01.2020 в 04:39.
Ответить с цитированием
  #3 (permalink)  
Старый 17.01.2020, 07:40
Новичок на форуме
Отправить личное сообщение для AndrewMaximum Посмотреть профиль Найти все сообщения от AndrewMaximum
 
Регистрация: 10.01.2020
Сообщений: 2

Спасибо, очень помогли!
Ответить с цитированием
  #4 (permalink)  
Старый 17.01.2020, 16:12
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,279

AndrewMaximum,
Есть еще косяки.
1. строки 6-14 бессмысленны, достаточно только body margin 0.
2. full это строка наверное, значит так 'full'.
3. строки 34-35 cnv.setAttribute('width',...) можно просто так cnv.width = ....
4. строки 37-39 color и texture можно объединить в слово background и назначить его в cnv.style.background.
5. строки 50-52 надо всего лишь написать if (_Game.clear) ctx.clearRect(0,0,cnv.width,cnv.height).
6. строки 90-106 наверно не нужны кроме 104-105 которые перенести куда-нибудь, попутно можно сократить:
- addEventListener('keydown',function(e){_Game.keys[e.code] = true});
- addEventListener('keyup',function(e){_Game.keys[e.code] = false});
потом проверяется так if(game.keys.KeyW){...}, if(game.keys.ArrowLeft){...}.

Последний раз редактировалось Rise, 17.01.2020 в 16:22.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Тормозит неактивный кусок кода. kuksha Общие вопросы Javascript 6 25.03.2015 12:38
Nodejs v0.10.15 тормозит под Windows 8 devataatman AJAX и COMET 0 14.08.2013 22:24
как узнать какой скрипт тормозит Артем125 Events/DOM/Window 4 22.09.2012 02:32
JavaScript на Яндекс.Фотки - почему тормозит браузеры? ZavFirefox Javascript под браузер 23 27.09.2009 19:24
тормозит в IE olgatcpip Internet Explorer 6 08.07.2009 01:29