59 lines
1.5 KiB
JavaScript
59 lines
1.5 KiB
JavaScript
const size = 10;
|
|
radius = size/2;
|
|
cirX = 500
|
|
cirY = 300;
|
|
const width = 1000;
|
|
const height = 600;
|
|
speed = 3;
|
|
squareX = 100;
|
|
squareY = 100;
|
|
const squareSize = 100;
|
|
|
|
// the function setup() is called once when the page is loaded
|
|
function setup() {
|
|
// create a canvas element and append it to the body
|
|
createCanvas(width, height);
|
|
frameRate(120);
|
|
// disable the outline of shapes
|
|
noStroke();
|
|
}
|
|
|
|
function keyPressed() {
|
|
if (keyIsDown(LEFT_ARROW) && cirX > 0+radius) {
|
|
cirX -= speed;
|
|
}
|
|
if (keyIsDown(RIGHT_ARROW) && cirX < width-radius) {
|
|
cirX += speed;
|
|
}
|
|
if (keyIsDown(UP_ARROW) && cirY > 0+radius) {
|
|
cirY -= speed;
|
|
}
|
|
if (keyIsDown(DOWN_ARROW) && cirY < height-radius) {
|
|
cirY += speed;
|
|
}
|
|
}
|
|
|
|
function object_collision() {
|
|
var squareCenterX = squareX + squareSize / 2;
|
|
var squareCenterY = squareY + squareSize / 2;
|
|
|
|
var distance = dist(cirX, cirY, squareCenterX, squareCenterY);
|
|
|
|
if (distance < squareSize / 2 + radius) {
|
|
squareX = random(0, width - squareSize);
|
|
squareY = random(0, height - squareSize);
|
|
}
|
|
}
|
|
|
|
// the function draw() is called every frame
|
|
function draw() {
|
|
keyPressed();
|
|
// clear the background with a transparent black color
|
|
background(0, 0, 0, 100);
|
|
|
|
// draw a circle at the mouse position
|
|
|
|
circle(constrain(cirX,0+radius,width-radius), constrain(cirY,0+radius,height-radius), size);
|
|
square(squareX,squareY,squareSize);
|
|
object_collision();
|
|
} |