Issue
I know, the title is pretty vague. I am trying to make a canvas, when you click on the canvas once, a bunch of rectangles with a width of 100 and height of 50 and a random color is made all around it (the entire canvas should end up being covered).
Currently, I am trying to make the bricks get drawn to the right and upward of wherever you click. But what happens is that a rectangle gets drawn, but no more gets drawn until you click again, it just sits there and changes color (which looks cool, so if anyone can solve this problem and keep the colors, I'd be a happy lad).
Question: How can I debug my code to make this work?
Clarifying edit: When I said that I want to draw rectangles to the right and up, what is happening right now is not what I want. I want the entire canvas to get filled by rectangles, I don't want them to get drawn over each other.
Jeez, I can't explain anything. Clarifying edit 2: What I wish to do is click somewhere on the canvas. The first rectangle gets made. Then, I want another rectangle to get made directly to its right. Then I want another rectangle to get made to that ones right. I want this to happen until one of the rectangles would off of the canvas. When this happens, the next rectangle gets drawn above the original ones (the x point is 0 and the y point is y-brickHeight), and the previous process is repeated until y-brickHeight < 0.
What is happening right now, is that the positions are not changing, they just get drawn on each other and juat overlap.
const canvas = document.querySelector('#canvas');
const ctx = canvas.getContext("2d");
canvas.width = 1000;
canvas.height = 500;
let timerId;
const brickWidth = 100;
const brickHeight = 50;
function lineMessage(msg) {
document.querySelector('#myMessage').textContent += msg;
}
function groupMessage(msg) {
document.querySelector('#myMessage').innerHTML += msg + '<br/>';
}
canvas.addEventListener('click', createWall, true);
function createWall(event) {
let xClick = event.x;
let yClick = event.y;
xClick -= canvas.offsetLeft;
yClick -= canvas.offsetTop;
timerId = setInterval(addBrick, 100, xClick, yClick);
}
function addBrick(x, y) {
let randomColor = Math.floor(Math.random() * 16777215).toString(16);
let color = "#" + randomColor;
ctx.beginPath();
ctx.rect(x, y, brickWidth, -1 * brickHeight);
ctx.fillStyle = color;
ctx.fill();
ctx.lineWidth = 1;
ctx.strokeStyle = "black";
ctx.stroke();
if (x + brickWidth > canvas.width) {
x = 0;
if (y - brickHeight >= 0) {
y -= brickHeight;
}
} else if (x + brickWidth <= canvas.width && x >= 0) {
x += brickWidth;
if (y - brickHeight >= 0) {
y -= brickHeight;
}
}
}#canvas {
width: 1000px;
height: 500px;
border: solid black 1px;
}
#myConsole {
background-color: black;
color: white;
min-height: 100px;
}<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport", content="width=device-width, initial-scale=1.0">
<meta name="author" content="Christian Davis">
<link rel="stylesheet" href="styles.css">
<title>Brick Layer</title>
</head>
<body>
<canvas id="canvas"></canvas>
<p id="myConsole">> <span id="myMessage"></span></p>
<script src="app.js"></script>
</body>
</html>Solution
Simply wrap your code into a for loop to draw the bricks, in each iteration draw the brick at the next position, and stop when it hits the top of the canvas. Pass 0, canvas.height as the starting position if you want the bricks to start drawing from bottom left.
To change color you can separate the actual drawing and the progress of building the wall into two intervals. (Or merge them together as needed, but this will lose the flexibility to give them different delays.)
const canvas = document.querySelector('#canvas');
const ctx = canvas.getContext("2d");
canvas.width = 1000;
canvas.height = 500;
let intvChangeColor;
let intvBuildBrick;
const changeColorDelay = 200;
const buildBrickDelay = 100;
const brickWidth = 100;
const brickHeight = 50;
function lineMessage(msg) {
document.querySelector('#myMessage').textContent += msg;
}
function groupMessage(msg) {
document.querySelector('#myMessage').innerHTML += msg + '<br/>';
}
canvas.addEventListener('click', createWall, true);
var brickCount = 0;
function createWall(event) {
let xClick = event.x;
let yClick = event.y;
xClick -= canvas.offsetLeft;
yClick -= canvas.offsetTop;
brickCount = 0;
clearInterval(intvChangeColor);
clearInterval(intvBuildBrick);
intvChangeColor = setInterval(addBrick, changeColorDelay, xClick, yClick);
intvBuildBrick = setInterval(() => {
brickCount++;
}, buildBrickDelay);
}
function addBrick(x, y) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
const currentBrickCount = brickCount;
for (let i = 0; i < currentBrickCount; i++) {
let randomColor = Math.floor(Math.random() * 16777215).toString(16);
let color = "#" + randomColor;
ctx.beginPath();
ctx.rect(x, y, brickWidth, -1 * brickHeight);
ctx.fillStyle = color;
ctx.fill();
ctx.lineWidth = 1;
ctx.strokeStyle = "black";
ctx.stroke();
if (x + brickWidth > canvas.width) {
x = 0;
y -= brickHeight;
} else {
x += brickWidth;
}
if (y <= 0) {
clearInterval(intvBuildBrick);
brickCount = i + 1;
break;
}
}
}#canvas {
width: 1000px;
height: 500px;
border: solid black 1px;
}
#myConsole {
background-color: black;
color: white;
min-height: 100px;
}<canvas id="canvas"></canvas>
<p id="myConsole">> <span id="myMessage"></span></p>Answered By - SyndRain
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.