EDIT: working jsfiddle: https://jsfiddle.net/Harry999/xy9uq7ed/56/
I am making an HTML canvas game.
https://jsfiddle.net/Harry999/xy9uq7ed/53/
My goal is to rotate multiple shapes around a center point.
The shapes x and y coordinates must change as the shape rotates for collision detection purposes.
How can I make the shapes rotate around the center point? (centerX, centerY)
How can I set the speed at which the shape rotates? (speed)
How can I set the radius from the center point at which the shape rotates? (radius)
var rotationAmount = 10;
var rect = new rectangle(20, 20, 200, 200, 10, 2);
var gameArea = {
canvas: document.createElement("canvas"),
create: function() {
this.canvas.width = 400;
this.canvas.height = 400;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
},
start: function() {
this.interval = setInterval(redraw, 20);
},
clear: function() {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}
// runs every 20ms
function redraw() {
gameArea.clear();
rect.update();
}
function rectangle(width, height, x, y, radius, speed) {
this.gamearea = gameArea;
this.width = width;
this.height = height;
this.x = x;
this.y = y;
this.radians = Math.PI;
// I want these to be the center points of the rotation
this.centerX = x;
this.centerY = y;
// I want this to be the distance at which the rect rotates from the center
this.radius = radius;
// I want this to be the speed at which the rect rotates
this.speed = speed;
this.update = function() {
// iterate rotation amount through 10 - 360 degrees
if (rotationAmount < 360) {
rotationAmount += 10;
} else {
rotationAmount = 10;
}
// update radians
this.radians = rotationAmount * (Math.PI / 180);
// adjust x and y coordinates
this.x = this.x + this.width * Math.sin(this.radians);
this.y = this.y + this.width * Math.cos(this.radians);
// draw rectangle
gameArea.context.fillStyle = "red";
gameArea.context.fillRect(this.x-this.width/2, this.y-this.height/2, this.width, this.height);
// draw center point
gameArea.context.fillStyle = "black";
gameArea.context.fillRect(this.centerX-2, this.centerY-2, 4, 4);
}
}
// run game
gameArea.create();
gameArea.start();