Вопросы новичка

Нашел статью, по которой делал я. На код c# не обращайте внимания. Суть в алгоритме.

thanks

Как мне нарисовать 50 квадратов в разных местах сразу на экране?
вот код для отрисовки 1 квадрата

Код:

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

var x=10,
    y=10;

function drawRect (){
context.fillStyle = 'black'; //цвет для рисования
context.clearRect(10,10,300,50);//очистка экрана
context.fillRect(x,y,50,50); // рисование квадрата
}
drawRect ();


есть у нас такой Math.floor((Math.random() * (to - from + 1)) + from);

Первая мысль отдельно генерировать координату Х и отдельно Y, но это как-то глупо. А как задать количество квадратов я вообще что-то сообразить не могу. Гугл не очень помог как-то

Не нужно её рисовать. Нужно создать её модель, массив клеток.

Вот мой черновой код. Разжевывать не буду.

Код:

var cnv = document.getElementById("canvas");
var ctx = cnv.getContext("2d");

function blank(){
   ctx.fillStyle = "rgb(100,100,200)";
   ctx.fillRect (0, 0, ctx.canvas.width, ctx.canvas.height);
}

function drawRect(reactX, reactY, reactW, reactH){
   /*reactW=50;
   reactH=50;
   reactX -= reactW; //убираем за экран
   reactY = ctx.canvas.height/2 - reactH/2; //точно на середину*/

   ctx.fillStyle = "rgb(255,0,0)";
   ctx.fillRect (reactX, reactY, reactW, reactH);
}

function strokeRect(reactX, reactY, reactW, reactH){
   ctx.fillStyle = "rgb(255,0,0)";
   ctx.strokeRect (reactX, reactY, reactW, reactH);
}

//проверка нахождения мыши в boundingBox
function collides(mX, mY, x, y, r, b) {
   if (r >= mX && x < mX && b >= mY && y < mY){
      var nX = mX - x;
      var nY = mY - y;
      return [nX, nY];
   }
   else return false;
}

cnv.addEventListener('click', function(e) {
   var mX = e.pageX - e.target.offsetLeft;
   var mY = e.pageY - e.target.offsetTop;

   var pick = collides (mX, mY, 0, 0, ctx.canvas.width, ctx.canvas.height);
   if (pick) {

      Grid.setID ( Grid.getXY(pick[0],pick[1])[0], Grid.getXY(pick[0],pick[1])[1], 1);


      console.log( Grid.getXY(pick[0],pick[1]) );
      //console.log( Grid.getID(Grid.getXY(pick[0],pick[1])[0] , Grid.getXY(pick[0],pick[1])[1] )) ;
      //console.log(pick);
   }
});

//сетка
function GridClass(x,y){
   this.x = x;
   this.y = y;

   this.array = [];

   this.initialization = function(){
      for (var n = 0; n < y; n++) {
          
         this.array[n] = [];

         for (var m = 0; m < x; m++) {
            this.array[n][m] = false;
         }
      }
   };

   this.getID = function(xx, yy){
      return this.array[yy-1][xx-1];
   };

   this.setID = function(xx, yy, ID){
      this.array[yy-1][xx-1] = ID;
   };

   //получение ячейки
   this.getXY = function(x,y){
      var xx = Math.ceil( x/50 );   //вот здесь чутка напортачил
      var yy = Math.ceil( y/50 );

      return [xx, yy];
      //return this.getID(xx, yy);
   };

   this.update = function(){

      for (var i = 0; i < Grid.y; i++) {
         for (var y = 0; y < Grid.x; y++) {

            if (this.getID(i+1,y+1) == 1){

               var xv = i*50;
               var yv = y*50;

               drawRect(xv , yv, 50,50);
            }

         }
      }

   };
}

var Grid = new GridClass(11,17);
Grid.initialization();
http://console.log(Grid);
http://console.log(Grid.getID(5,5));

//рисуем сетку
function drawGrid(){
   for (var i = 0; i < Grid.y; i++) {
       
      for (var y = 0; y < Grid.x; y++) {
         strokeRect(i*50, y*50, 50, 50);
      }

   }
}

//это в цикл
function update(){
   drawGrid();
   //drawRect(50, 50, 50, 50);
   Grid.update();

}

Вот эта часть - создание двумерного массива.

Код:

  this.array = [];

   this.initialization = function(){
      for (var n = 0; n < y; n++) {
          
         this.array[n] = [];

         for (var m = 0; m < x; m++) {
            this.array[n][m] = false;
         }
      }
   };

Вот рисование. В цикле смещаем x и y.

Код:

//рисуем сетку
function drawGrid(){
  for (var i = 0; i < Grid.y; i++) {
     
      for (var y = 0; y < Grid.x; y++) {
        strokeRect(i*50, y*50, 50, 50);
      }

  }
}

Uncaught ReferenceError: cnv is not defined

Вообще это слишком крутой код, вот это всё только чтоб нарисовать 50 квадратов в разных координатах?

Нет, это массив клеток с функционалом получения x и y координат каждой ячейки. И еще какая-то бадяга. Черновой вариант, потом еще сто раз переделывал.

Чисто рисование - это вот этот маленький код. Тебе нужно его переделать самостоятельно.

Код:

//рисуем сетку
function drawGrid(){
  for (var i = 0; i < gridY; i++) {
     
      for (var y = 0; y < gridX; y++) {
        strokeRect(i*50, y*50, 50, 50); //здесь рисуем клетку 50 на 50 пикселей с i и y смещением
      }

  }
}

Не знаю так или нет, но получилось что-то типа этого:

Код:

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

function drawRect (x,y){
context.fillStyle = 'black'; //цвет для рисования
context.fillRect(x,y,50,50); // рисование квадрата
}

function drawGrid(){
  for (var i = 0; i < 50; i++) {
  var x = Math.floor((Math.random() * (canvas.width - 0 + 1)) + 0);
  var y = Math.floor((Math.random() * (canvas.height - 0 + 1)) + 0);
  drawRect (x, y);
  }
}

drawGrid();

1)замени строку context.fillRect(x,y,50,50); на context.strokeRect(x,y,50,50); Так будет удобнее.
2)Черный - это базовый цвет. Цвет по умолчанию, его не обязательно указывать.
3)Math.floor((Math.random() * (canvas.width - 0 + 1)) + 0); - это чья-то шутка.

4)Не придумывай. Я показал как нужно сделать. Тебе осталось переварить код, исправить и вписать в свой:

Код:

function drawGrid(){
  for (var i = 0; i < gridY; i++) {
      
      for (var y = 0; y < gridX; y++) {
        strokeRect(i*50, y*50, 50, 50); //здесь рисуем клетку 50 на 50 пикселей с i и y смещением
      }

  }
}

1. Math.floor((Math.random() * (canvas.width - 0 + 1)) + 0); - это чья-то шутка. -Это не шутка, это я нули для наглядности оставил
2. gridY; не знаю что это, поэтому пусть будет как оно есть у меня раз работает
3. Как мне у всех квадратов найти Х и сделать Х++ , чтоб они все уехали вправо?

гм.. только что понял, что тебе не нужна сетка? А просто 50 случайно разбросанных квадратов?

Дико извиняюсь, что запутал. Тогда значит ты сам справился с задачей, красачег!

нет, просто 50 рендом квадратов, спасибо. Но у меня ещё миллион вопросов. Например, как сделать, чтоб квадраты не накладывались друг на друга

был неправ. буду уточнять условия задачи. Сказывается то, что я сам некоторое время не кодил и не отвечал на вопросы.

Если квадраты создаются по сетке, то просто задавать в массиве булеву переменную о занятости ячейки.

Если без сетки то надо сохранять все координаты созданных квадаратов. И при создании нового проверять на пересечение с сохраненными. Это почти что проверка столкновений. Функция проверки пересечения квадратов не очень сложная.

Но тут возникает сложность. Если у тебя 50 квадратов, то новый должен проверяться со всеми 50. А если их тысяча? Нужно каким-то образом отсекать ненужные проверки. Если данные хранятся в массиве можно сортировать массив по координатам нового квадрата. И сравнивать только с первыми. Вроде бы должно проканать.

Еще больше оптимизировать процесс можно разбив карту на несколько больших участков: левый верхний, левый нижний, правый нижний, правый верхний. Т.е. будет 4 маленьких массивов вместо 1 большого. Дело в том, что процедура сортировки массива дорогостоящая.

Пока только такой алгоритм приходит в ум, возможно кто нить подправит

а еще можно после проверки на свободное место, если квадраты пересекаются и там место занято, тупо повторить операцию заново с другими значениями. Пока случайно не найдется свободное место. Но тут я тоже вижу возможные минусы.

Да, ладно тебе, главное, что код работает. Как их всех двигать вправо/влево? Что читать? isPress же тут не прокатит раз point.js нет . И другой вариант , чтоб они сами двигались все вправо или влево

мне бы спать лечь конечно, но я еще способ придумал. Если известны цвета квадратов. То при создании квадрата можно проверять пиксели холста в углах создаваемого квадрата на наличие в них цвета существующих квадратов. Но это менее практичный способ

на счет движения: тебе нужен игровой цикл. Нужны игровые обьекты - обьекты, которые хранят позицию. Нужен пул или менеджер обьектов, чтобы удобно обращяться к ним. Нужна функция апдейта.

И это уже интересно, уже пахнет созданием игры. Завтра расскажум. Если никто не опередит.

ты себе представляешь как трудоёмко попиксельно проверять экран?

нет. Проверять только 4 пикселя в углах квадрата.
В зависимости от игры это может оказаться самый практичный способ, либо абсолютно бесполезный

да какая там игра)фон хочу создать в виде падающих артефактов. Пока что это квадраты, потом заменю их на картинки чего-то яркого

артефакты движутся синхронно? Можно сделать все по-другому, но это будет совсем не игра. А просто анимация. И в дальнейшим этот скрипт никак не превратить в игру.

Поэтому ты сразу скажи для каких целей: анимация или все таки устройство игры, а то я опять начну отвечать не на тот вопрос

пусть будет анимация , но я вообще хотел трёхслойную анимацию. Более крупные объекты на переднем плане, мельче на заднем и медленней двигаются и ещё мельче на третьем слое и они самые медленные, типа дождь, снег и т.д.
я даже не знаю как их этого игру сделать...типа уворачиваться от объектов?или кликать на падающие объекты и набивать очки?это срань а не игра

Еще больше оптимизировать процесс можно разбив карту на несколько больших участков: левый верхний, левый нижний, правый нижний, правый верхний. Т.е. будет 4 маленьких массивов вместо 1 большого.

это называется двоичное дерево

Как их всех двигать вправо/влево? Что читать? isPress же тут не прокатит раз point.js нет

Код:

var Keyboarder = function(){
  var KeyState = {

  }
  window.onkeydown = function(e){
    KeyState[e.keyCode] = true;
  }
  window.onkeyup = function(e){
    KeyState[e.keyCode] = false;
  }
  this.isDown = function(keyCode){
    return KeyState[keyCode];
  }
  this.KEYS = {
    LEFT: 37,
    RIGHT: 39,
  }
}

потом в функции update игрока

Код:

if(this.keyboarder.isDown(this.keyboarder.KEYS.LEFT)){
      if(this.position.x > 0){
        this.position.x -= 2;
      }
    }
    if(this.keyboarder.isDown(this.keyboarder.KEYS.RIGHT)){
      if(this.position.x < this.gameSize.x-this.size.width){
        this.position.x += 2;
      }
    }

https://ru.wikipedia.org/wiki/%D0%94%D0%B2%D0%BE%D0%B8%D1%87%D0%BD%D0%BE%D0%B5_%D0%B4%D0%B5%D1%80%D0%B5%D0%B2%D0%BE

или оно же - бинарное дерево https://habrahabr.ru/post/65617/

вообще - это наиболее часто используемый подход (ввиду высокой скорости) - рекурсивно разбивать пространство пополам до тех пор, пока не получим результат с заданной точностью