Цикличное перемещение нескольких рядов квадратов вправо-влево, requestAnimationFrame

Перейти вниз

Цикличное перемещение нескольких рядов квадратов вправо-влево, requestAnimationFrame

Сообщение автор Dessan в Ср Июн 27, 2018 8:41 pm

Решил вспомнить основы javascript и повторить игру pyro, где он создал 3 ряда квадратов, которые перемещались вправо-влево , а внизу был квадратик, который стрелял в эти верхние перемещающиеся квадраты и они исчезали при попадании. Думал справлюсь за час и скину потом сюда, чтоб мне подсказали как мой нюбский, но рабочий код, оптимизировать, чтоб он приобрёл достойный вид , pyro даже исходник дал, правда исходник мне показался сложноватым для меня и я решил делать с нуля всё сам, тем более задача уж очень просто звучит. Короче говоря, нихрена у меня не получилось - квадраты мои после первого цикла начали ускоряться до зависания компьютера, а мои попытки всё исправить привели вообще непонятно к чему. Два дня сидел мучал, все дела отложил, перечитывал всё, смотрел в консоль...в общем, помогите)

До создания управляемого квадратика, который будет стрелять я даже не дошёл, так и остановился на цикличности вправо-влево.
Стыдно показывать, но вот:

Хуже чем лапша-код:

Код:
var log = function(logged){
  console.log(logged);
}

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

//// Это условие и начальные данные квадратов
var x1=50,
    x2=50,
    x3=50,
    y,
    w=10,
    h=10,
    counter=1;   // это количество квадратов в каждом ряду, я ставил 1, чтоб в консоли быстрей всё отрабатывалось
console.log(x1, x2, x3);
var m = []; // для первого ряда квадратов
var n = []; // для второго ряда
var p = []; // для третьего ряда

function drawRect (){
context.fillStyle = 'black'; //цвет для рисования
context.clearRect(0,0,800,300);//очистка экрана
console.log ("длина массива проверка = " + n.length);
console.log("massives " , m, n, p, "px"); // через console.log("massives " +m, n, p + "px");  почему-то не работает?
for (var i = 0; i < m.length; i++){ // так как массивы одинаковые то беру длину любого из них
context.fillRect(m[i].x,m[i].y,w,h); // рисование квадрата
context.fillRect(n[i].x,n[i].y,w,h); // рисование квадрата
context.fillRect(p[i].x,p[i].y,w,h); // рисование квадрата
 console.log("x = "+m[i].x, n[i].x, p[i].x);  
}
}

function drawGrid(){
 for (var i = 0; i < counter; i++) {  // перебрали количество наших квадратов в ряду

           y = 10;
  var rect = {      //создали объект квадрат с параметрами x и y
              x: x1,
       y: y,
              };
  m.push(rect);  // записали в массив m
 console.log ("длина массива1 = " + m.length);


  }

 for (var i = 0; i < counter; i++) {

    y = 30;

  rect1 = {
              x: x2,
  y: y,
              };
  n.push(rect1);    // записали в массив n
 console.log ("длина массива2 = " + n.length);

  }

  for (var i = 0; i < counter; i++) {

    y = 50;

  rect2 = {
                          x: x3,
  y: y,
              };
  p.push(rect2);     // записали в массив p
 console.log ("длина массива3 = " + p.length);


  }
       drawRect(); // запускаем отрисовку квадратов

};


var nextGameStep = (function(){                                            // это я у сканера взял
           return requestAnimationFrame       ||
               mozRequestAnimationFrame    ||
               webkitRequestAnimationFrame ||
               oRequestAnimationFrame      ||
               msRequestAnimationFrame     ||
function (callback){
 setTimeout(callback, 1000/60);
};

})();

nextGameStep(GameStart);  // начало

function GameStart(){
 drawGrid();   // здесь мы создаём объекты и координаты для будущих квадратов
 requestAnimationFrame(gameLoopRight); // а вот эта строка как я понял показывает результат отрисовывания сразу всех наших квадратов только после выполнения drawGrid(); и переходит в gameLoopRight();
}

  function gameLoopRight(){
 
  for (var i = 0; i < m.length; i++){ // перебрали длину массива
    m[i].x = m[i].x + 150;          // присвоили новые координаты x в каждый из массивов
 n[i].x = n[i].x + 150;
 p[i].x = p[i].x + 150;
 //~ console.log("новые x "+x1, x2, x3);
  console.log("новая длина массив1 = "+m.length);
  console.log("m[i].x = "+m[i].x);

 if (m[i].x>=700){
      gameLoopLeft();

 }

  }
 drawRect();
  requestAnimationFrame(gameLoopRight);


};

function gameLoopLeft(){

  for (var i = 0; i < m.length; i++){
    m[i].x = m[i].x - 150;
 n[i].x = n[i].x - 150;
 p[i].x = p[i].x - 150;
 //~ console.log("новые x "+x1, x2, x3);
  console.log("новая длина массив1 = "+m.length);
  console.log("m[i].x = "+m[i].x);
 if (m[i].x<30){
      gameLoopRight();

 }

  }
 drawRect();
  requestAnimationFrame(gameLoopLeft);
};

HTML:

Код:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Canvas</title>

</head>
<body>
  <canvas id="canvas" width="800" height="450"  style="border: 1px solid;"></canvas>

<script type="text/javascript" src="1.js"></script>
</body>
</html>

Dessan
Юный падаван

Сообщения : 426
Дата регистрации : 2017-12-25

Посмотреть профиль

Вернуться к началу Перейти вниз

Re: Цикличное перемещение нескольких рядов квадратов вправо-влево, requestAnimationFrame

Сообщение автор GooodWin67 в Пт Июн 29, 2018 7:55 pm

Вот набросал, это ты имеешь ввиду?
https://codepen.io/gooodwin67/pen/ZRVoZw
Сорри, твой код не смотрел, ненавижу в чужом коде ковыряться))
avatar
GooodWin67

Сообщения : 94
Дата регистрации : 2017-12-27

Посмотреть профиль

Вернуться к началу Перейти вниз

Re: Цикличное перемещение нескольких рядов квадратов вправо-влево, requestAnimationFrame

Сообщение автор Dessan в Пт Июн 29, 2018 8:12 pm

как всё просто-то до гениальности. Пара строчек и всё готово, спасибо.
Это у тебя была игра где 2 замка стояло и можно было войска строить для захвата?

Dessan
Юный падаван

Сообщения : 426
Дата регистрации : 2017-12-25

Посмотреть профиль

Вернуться к началу Перейти вниз

Re: Цикличное перемещение нескольких рядов квадратов вправо-влево, requestAnimationFrame

Сообщение автор GooodWin67 в Пт Июн 29, 2018 9:00 pm

Помню такую, но нет, не мое
avatar
GooodWin67

Сообщения : 94
Дата регистрации : 2017-12-27

Посмотреть профиль

Вернуться к началу Перейти вниз

Re: Цикличное перемещение нескольких рядов квадратов вправо-влево, requestAnimationFrame

Сообщение автор raingo в Чт Июл 05, 2018 12:49 pm

это костямакс был.

raingo
Отдел прокрастинации

Сообщения : 756
Дата регистрации : 2017-12-25

Посмотреть профиль

Вернуться к началу Перейти вниз

Re: Цикличное перемещение нескольких рядов квадратов вправо-влево, requestAnimationFrame

Сообщение автор Спонсируемый контент


Спонсируемый контент


Вернуться к началу Перейти вниз

Вернуться к началу


 
Права доступа к этому форуму:
Вы не можете отвечать на сообщения