48 lines
1.1 KiB
JavaScript
48 lines
1.1 KiB
JavaScript
var square;
|
|
var coordsx;
|
|
var coordsx2;
|
|
var coordsy;
|
|
var canvas;
|
|
var context;
|
|
var size;
|
|
var change;
|
|
|
|
window.onload = function() {
|
|
console.log("JS Loaded");
|
|
square = new Square();
|
|
canvas = document.getElementById("sqrcontainer");
|
|
canvas.width = document.documentElement.clientWidth;
|
|
context = canvas.getContext('2d');
|
|
coordsx = canvas.width / 2;
|
|
coordsx2 = coordsx;
|
|
coordsy = 50;
|
|
size = 50;
|
|
change = 1;
|
|
setInterval(frame, 1000.0 / 60.0);
|
|
};
|
|
|
|
class Square {
|
|
constructor() {}
|
|
static draw(x, y, color) {
|
|
context.fillStyle = color;
|
|
context.fillRect(x, y, size, size);
|
|
}
|
|
}
|
|
|
|
function frame() {
|
|
canvas.width = document.documentElement.clientWidth;
|
|
coordsx += 1;
|
|
coordsx2 += change;
|
|
Square.draw(coordsx, coordsy, '#f00');
|
|
Square.draw(coordsx2, coordsy + 50, '#0f0');
|
|
if (coordsx2 > canvas.width - size || coordsx2 <= 1) {
|
|
change = -change;
|
|
}
|
|
if (coordsx > canvas.width - size) {
|
|
Square.draw(coordsx - (canvas.width - size), coordsy, '#f00');
|
|
}
|
|
if (coordsx > canvas.width + size) {
|
|
coordsx -= (canvas.width - size);
|
|
}
|
|
}
|