Canvas Object движется по диагонали, а не по вертикали
Для школы мне нужно сделать игру, поэтому у меня возникла идея сделать игру, похожую на «волшебное прикосновение: волшебник напрокат», в которой с неба падают воздушные шары, и вам нужно рисовать, чтобы поп их, это идея, которую я собираюсь для.
Но теперь моя проблема: У меня была идея сделать так, чтобы воздушные шары появлялись случайным образом по оси x (чтобы они всегда появлялись при y = 0, а ось x была случайной), но в этом и заключается моя проблема. Я сделал для него древовидные функции: Это функция, которая создает случайное число:
function aleatorizar() {
let random= Math.floor(Math.random()*canvas.width);
return random;
}
Это функция, которая рисует воздушные шары с текстом на них:
function desenharbombas(x){
ctx.beginPath();
ctx.arc(x,posição,50,0,2*Math.PI);
ctx.stroke();
ctx.fillStyle= "#000000";
ctx.fill();
function escrever(){
ctx.font = "17px Arial Black";
ctx.fillStyle = "#ffffff";
ctx.fillText("texto",x,posição );
}
escrever()
}
А это функция, которая анимирует падающие шарики:
function animar(y){
ctx.clearRect(0,0,canvas.width,canvas.height);
posição=posição+1;
desenharbombas(y)
requestAnimationFrame(animar);
}
По моей логике (и через часы тестирования) я не могу поместить случайную функцию в мою функцию рисования бомбы, потому что она будет заставлять случайную функцию изменяться каждый раз, когда вызывается функция рисования, так что бомбы будут глючить слева и справа. на экране.
Поэтому я создал эту логику, при которой функция рисования бомбы получала бы только случайное число при вызове функции анимации, но она не работала, потому что теперь бомба падает по диагонали. Я знаю, что это действительно сложно понять, но если кто-то знает, как мне помочь, или хочет прыгнуть на дискорд, чтобы помочь мне... (caue#7600)
Как мне избавиться от этой DOMHighResTimestamp? Это единственное, что не работает, потому что после того, как функция просматривает случайное число, она просто продолжает добавлять это число бесконечное количество раз...
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Как насчет такого:
const canvas = document.getElementById("c");
const ctx = canvas.getContext("2d");
ctx.textAlign = 'center';
ctx.textBaseline = 'middle'
var bombas = []
class bomba {
constructor(name, x, y, speed, radius) {
this.name = name
this.x = x
this.y = y
this.speed = speed
this.radius = radius
}
draw() {
ctx.beginPath();
ctx.arc(this.x += this.speed, this.y, this.radius, 0, 2 * Math.PI);
ctx.stroke();
ctx.fillText(this.name, this.x, this.y);
}
}
function aleatorizar() {
return Math.floor(Math.random() * canvas.width);
}
bombas.push(new bomba("A", aleatorizar()/4, 10, 0.20, 8))
bombas.push(new bomba("B", aleatorizar()/4, 40, 0.25, 12))
bombas.push(new bomba("C", aleatorizar()/4, 70, 0.15, 10))
function animar() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
bombas.forEach(b => b.draw())
requestAnimationFrame(animar);
}
animar()<canvas id = "c"></canvas>Вы можете видеть, что у нас есть class bomba и в конструкторе мы передаем все начальные параметры, необходимые для рисования того, что нам нужно, затем в функции draw() мы увеличиваем значение x на заданную скорость, и рисуем дугу и текст.
С этим новым классом вы можете добавить больше случайных параметров, прямо сейчас случайным является только Y, но таким же образом вы можете сделать это для скорости, а также для радиуса.
И если вы действительно хотите создать игру, вы должны изучить игровые движки, есть много хороших Open Source, на github есть хорошая коллекция известных:
https://github.com/collections/javascript-игровые-движки
По мере усложнения вашей игры вы столкнетесь с проблемами, которые уже решены в игровом движке, все зависит от того, как далеко вы хотите зайти в этой игре.
Вы определяете функцию
desenharbombas(x), но называете ееdesenharbombas(y). Не знаю, откуда взялсяx, но вы, вероятно, захотите это изменить. Кроме того, во втором кадреyбудет DOMHighResTimestamp, представляющий временную метку текущего кадра анимации. Это также, скорее всего, не то, что вы хотите.