Пытаюсь создать некоторое подобие игры на JS. Сделал объект (игрока) и препятствия (их координаты и размеры рандомизируются) на канвасе. Однако они не способны работать совместно, поскольку для анимации персонажа необходимо очищать канвас, что стирает препятствия.
Как заставить эти два объекта работать совместно?
Код для препятствий:
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var ctxW = 2000;
var ctxH = 2000;
canvas.width = ctxW;
canvas.height = ctxH;
var sq = {
x : 0,
y : 0,
w : 0,
h : 0,
};
var redRects = function (){
ctx.fillStyle = "red";
ctx.fillRect(sq.x, sq.y, sq.w, sq.h);
};
for (var i = 0; i < 50; i++){
this.sq.x = Math.random() * (2000 - 5) + 5;
this.sq.y = Math.random() * (2000 - 5) + 5;
this.sq.w = Math.random() * (100 - 5) + 5;
this.sq.h = Math.random() * (100 - 5) + 5;
redRects();
};
Код для игрока:
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var ctxW = 2000;
var ctxH = 2000;
canvas.width = ctxW;
canvas.height = ctxH;
var plx = 20;
var ply = 30;
var plW = 20;
var plH = 20;
var rect = function(){
ctx.fillStyle = 'black';
ctx.fillRect(plx, ply, plW, plH);
};
var drawMove = function(){
ctx.clearRect(0, 0, 2000, 2000);
rect();
plx += 1;
};