ФорумЦикличное перемещение нескольких рядов квадратов вправо-влево, requestAnimationFrame
Участников: 3
Страница 1 из 1
Цикличное перемещение нескольких рядов квадратов вправо-влево, 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
Сорри, твой код не смотрел, ненавижу в чужом коде ковыряться))
https://codepen.io/gooodwin67/pen/ZRVoZw
Сорри, твой код не смотрел, ненавижу в чужом коде ковыряться))
GooodWin67- Сообщения : 94
Дата регистрации : 2017-12-27
Re: Цикличное перемещение нескольких рядов квадратов вправо-влево, requestAnimationFrame
автор Dessan Пт Июн 29, 2018 8:12 pm
как всё просто-то до гениальности. Пара строчек и всё готово, спасибо.
Это у тебя была игра где 2 замка стояло и можно было войска строить для захвата?
Это у тебя была игра где 2 замка стояло и можно было войска строить для захвата?
Dessan- Юный падаван
- Сообщения : 426
Дата регистрации : 2017-12-25
Re: Цикличное перемещение нескольких рядов квадратов вправо-влево, requestAnimationFrame
автор GooodWin67 Пт Июн 29, 2018 9:00 pm
Помню такую, но нет, не мое
GooodWin67- Сообщения : 94
Дата регистрации : 2017-12-27
Re: Цикличное перемещение нескольких рядов квадратов вправо-влево, requestAnimationFrame
автор raingo Чт Июл 05, 2018 12:49 pm
это костямакс был.
raingo- Отдел прокрастинации
- Сообщения : 756
Дата регистрации : 2017-12-25
Страница 1 из 1
Права доступа к этому форуму:
Вы не можете отвечать на сообщения|
|
|