В своем финальном проекте я пытаюсь создать что-то вроде Guitar Hero на основе JavaScript.
Как вы знаете, в Guitar Hero кружками обозначены ноты, которые вы должны набрать в определенное время.Я пытаюсь сделать то же самое, но мои заметки будут представлены квадратами.
В моем коде выше квадраты сдвигаются вниз, но я не могу заставить их двигаться в определенное время.Я имею в виду, что все они перемещаются одновременно, но я хочу, чтобы они перемещались каждый раз, когда я хочу.
Наиболее важными частями кода является массив vectorSquares, в котором есть все квадраты, которые я хочуdraw.
Класс Square.
Функции draw () и update ().
Я надеюсь, что кто-нибудь может мне помочь, мне нужно закончить свой окончательный проект, и ячувствую себя действительно потерянным прямо сейчас.
c = document.getElementById("canvas");
ctx = c.getContext("2d");
c.width = 1000;
c.height = 600;
//Clases utilizadas para dibujar los cuadrados
//function Start(){
class CanLine {
constructor(x1, y1, x2, y2){
this.x1 = x1;
this.y1 = y1;
this.x2 = x2;
this.y2 = y2;
this.strokeStyle = "black";
}
DrawingLines() {
ctx.beginPath();
ctx.lineWidth="2";
ctx.strokeStyle="black";
ctx.moveTo(this.x1,this.y1);
ctx.lineTo(this.x2,this.y2);
ctx.stroke();
ctx.closePath();
}
}
class FinalLine {
constructor(x, y, color) {
this.x = x;
this.y = y;
this.color = color;
this.height = 20;
this.width = 800;
}
draw() {
ctx.fillStyle = this.color;
ctx.fillRect(this.x, this.y, this.width, this.height);
ctx.fill();
}
}
class FixedSquare {
constructor(x, y, color) {
this.x = x;
this.y = y;
this.color = color;
this.size = 80;
}
draw() {
ctx.fillStyle = this.color;
ctx.fillRect(this.x, this.y, this.size, this.size);
ctx.fill();
}
}
class Square {
constructor(x, y, color, speed) {
this.x = x;
this.y = y;
this.color = color;
this.size = 60;
this.speed = speed
}
draw() {
ctx.fillStyle = this.color;
ctx.fillRect(this.x, this.y, this.size, this.size);
ctx.fill();
}
update() {
this.y += this.speed;
if (this.y == 480) {
this.y = 0 - this.size;
}
}
}
//Arrays en los que serán almacenados los objetos para ser dibujados
let Lines = [
new CanLine(200, 0, 200, c.height),
new CanLine(360, 0, 360, c.height),
new CanLine(500, 0, 500, c.height),
new CanLine(650, 0, 650, c.height),
new CanLine(800, 0, 800, c.height)
];
let Final_Line = [
new FinalLine(100, 500, "purple")
];
let Fixed_squares = [
new FixedSquare(160, 465, "green"),
new FixedSquare(321, 465, "gray"),
new FixedSquare(460, 465, "blue"),
new FixedSquare(610, 465, "yellow"),
new FixedSquare(760, 465, "red")
];
//Array Importante, donde van los cuadrados que se van a mover
let squares = [
new Square(170, 0, "green", 3),
new Square(170, 0, "green", 3),
new Square(331, 0, "gray", 3),
new Square(470, 0, "blue", 3),
new Square(620, 0, "yellow", 3),
new Square(770, 0, "red", 3)
];
//Funciónes
//Aquí se añadirán todos los objetos que sean necesarios dibujar
function DrawingLines() {
ctx.beginPath();
ctx.lineWidth="2";
ctx.strokeStyle="black";
ctx.moveTo(0,0);
ctx.lineTo(0,0);
ctx.stroke();
ctx.closePath();
Lines.forEach(CanLine => CanLine.DrawingLines());
}
//var counter = 0;
var currentTime = 0;
var startTime = Date.now();
function countUp (milisegundos){ //Valor que hay en el vector
var TiempoActual = Date.now() - startTime;
for(i=TiempoActual;i>=milisegundos;){
i = Date.now() - startTime;
}
return true;
}
let tiempos = [3000, 7000 , 10000, 12000, 15000];
function draw() {
ctx.fillStyle = "white";
ctx.fillRect(0, 0, c.width, c.height);
ctx.fill();
squares.forEach(square => square.draw());
Final_Line.forEach(FinalLine => FinalLine.draw());
Fixed_squares.forEach(FixedSquare => FixedSquare.draw());
}
//Función que actualiza cada frame
function update() {
squares.forEach(square => square.update());
draw();
DrawingLines();
requestAnimationFrame(update);
}
requestAnimationFrame(update);
<style>
canvas {
border: 3px solid #000000;
padding-left: 0;
padding-right: 0;
margin-left: auto;
margin-right: auto;
display: block;
border-radius: 5px;
}
.button {
background-color: #f4511e;
border: none;
color: white;
padding: 16px 32px;
text-align: center;
font-size: 16px;
margin: 4px 2px;
opacity: 0.6;
transition: 0.3s;
display: inline-block;
text-decoration: none;
cursor: pointer;
}
.button:hover {opacity: 1}
</style>
<!DOCTYPE HTML>
<html>
<body>
<center>
</center>
<canvas id="canvas"></canvas>
</body>
</html>