0

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

2 ответа 2

0

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

2
  • Дело в том, что значения длины, ширины и координат каждый раз случайные. Если действовать по этой схеме, то препятствия мигают в разных местах. Мне же нужно, чтобы после запуска препятствия появились с рандомными значениями и зафиксировали их.
    – Crunch
    30 июн 2018 в 17:23
  • 2
    измените порядок/логику рандомизации.
    – Dmytro
    30 июн 2018 в 17:52
0

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

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);

    };
};

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.