Проблема очистки canvas

218

14 августа 2018, 05:00

Пытаюсь создать некоторое подобие игры на 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;
};

Answer 1

Скорее всего это будет выглядеть примерно так:
1) Сначала рисуете делаете clearRect()
2) Рисуете персонажа
3) Рисуете препятсвия

Answer 2

Вот, как должен выглядить код

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var ctxW = 2000;
var ctxH = 2000;
canvas.width = ctxW;
canvas.height = ctxH;

var obsts = [];
var oSquare;
function Obstacle(){
    this.x = 0;
    this.y = 0;
    this.w = 0;
    this.h = 0;
};

for (var i = 0; i < 50; i++){
    var oSquare = new Obstacle();
    oSquare.x = Math.random() * (2000 - 5) + 5;
    oSquare.y = Math.random() * (2000 - 5) + 5;
    oSquare.w = Math.random() * (100 - 5) + 5;
    oSquare.h = Math.random() * (100 - 5) + 5;
    obsts.push(oSquare);
};   

var drawObst = function(){
    for(var i = 0; i < obsts.length; i++){
        ctx.fillStyle = 'red';
        ctx.fillRect(obsts[i].x, obsts[i].y, obsts[i].w, obsts[i].h);
    };
};