Пишу что-то вроде движка для игры.
При использовании (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 - стрелки;
подскажите пожалуйста, в чем может быть проблема.