Develop Reference

Adding images by combining cells with Javascript canvas

First of all, I have difficulty in explaining because my English is not very good. But I will try to explain as best I can.
I add random photos to the canvasta cells fields with Javascript.
Each plot is equivalent to 20pixels. What I want to do is:
if i and y in the map data are equal to 4;
I want to add the photo I want to a 4x4 area.
In other words, while adding a photo to 20 pixels;
I want to add a photo to a 320pixel area when it is 4x4.
As in the sample photo.
Check Photo
var map = [
[1, 0, 1, 0, 1, 0, 0, 0, 1, 1, 1, 0, 1, 1, 1],
[1, 0, 1, 0, 1, 0, 0, 0, 1, 0, 1, 0, 1, 0, 0],
[1, 0, 1, 0, 1, 0, 0, 0, 1, 0, 1, 0, 1, 0, 0],
[1, 0, 1, 0, 1, 0, 0, 0, 1, 0, 1, 0, 1, 0, 0],
[1, 0, 1, 0, 1, 0, 0, 0, 1, 0, 1, 0, 1, 0, 0],
[1, 0, 1, 0, 1, 0, 0, 0, 1, 1, 1, 0, 1, 1, 1],
[1, 0, 1, 0, 1, 0, 0, 0, 1, 0, 1, 0, 0, 0, 1],
[1, 0, 1, 0, 1, 0, 0, 0, 1, 0, 1, 0, 0, 0, 1],
[1, 0, 1, 0, 1, 0, 0, 0, 1, 0, 1, 0, 0, 0, 1],
[1, 0, 1, 0, 1, 1, 1, 0, 1, 0, 1, 0, 1, 1, 1],
[4, 4, 4, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[4, 4, 4, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[4, 4, 4, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[4, 4, 4, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
];
window.onload = function() {
const canvas = document.getElementById("main");
const ctx = canvas.getContext("2d");
ctx.strokeStyle = "transparent";
ctx.lineWidth = 0;
//draw grid
for (let i = 0; i <= 300; i++) {
const x = i*20;
ctx.moveTo(x, 0);
ctx.lineTo(x, canvas.height);
ctx.stroke();
const y = i*20;
ctx.moveTo(0, y);
ctx.lineTo(canvas.width, y);
ctx.stroke();
}
//draw images
const p = ctx.lineWidth / 1; //padding
for (let xCell = 0; xCell < map.length; xCell++) {
for (let yCell = 0; yCell < map[xCell].length; yCell++) {
const x = xCell * 20;
const y = yCell * 20;
const img = new Image();
if (map[xCell][yCell] === 1) {
img.onload = function() {
ctx.drawImage(img, y+p, x+p, 20-p*2, 20-p*2);
};
//TODO: set img.src to your api url instead of the dummyimage url.
img.src = `https://picsum.photos/id/${Math.floor(Math.random() * 10)}${Math.floor(Math.random() * 10)}/200/300`;
}else if(map[xCell][yCell] == 4){
img.onload = function() {
ctx.drawImage(img, y+p, x+p, 20-p*2, 20-p*2);
};
//TODO: set img.src to your api url instead of the dummyimage url.
img.src = `https://picsum.photos/id/${Math.floor(Math.random() * 12)}${Math.floor(Math.random() * 12)}/200/300`;
}
}
}
};
<canvas id="main" width="600" height="630"></canvas>
</canvas>

I solved the problem as below. There are positional errors but I will completely fix them.
Thanks to Lajos Arpad for trying to help.
var defaultMap = [
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 1, 1],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 1, 0, 0, 1, 1],
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 1, 1],
[0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
[0, 0, 1, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
[0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0],
[0, 0, 0, 0, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0],
[0, 0, 0, 0, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1],
[0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1],
[1, 1, 1, 1, 1, 0, 1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1],
[1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1],
[1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1],
[1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1],
[1, 1, 1, 1, 1, 1, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1],
];
var images = [
{
name: "player 1",
position: [
{
x: [0,4],
y: [4,4]
}
]
},
{
name: "player 2",
position: [
{
x: [5,7],
y: [5,2]
}
]
}
];
window.onload = function() {
const canvas = document.getElementById("main");
const ctx = canvas.getContext("2d");
ctx.strokeStyle = "transparent";
ctx.lineWidth = 0;
//draw grid
for (let i = 0; i <= 300; i++) {
const x = i*40;
ctx.moveTo(x, 0);
ctx.lineTo(x, canvas.height);
ctx.stroke();
const y = i*40;
ctx.moveTo(0, y);
ctx.lineTo(canvas.width, y);
ctx.stroke();
}
const p = ctx.lineWidth / 1;
for (let xCell = 0; xCell < defaultMap.length; xCell++) {
for (let yCell = 0; yCell < defaultMap[xCell].length; yCell++) {
const x = xCell * 20;
const y = yCell * 20;
const img = new Image();
if (defaultMap[xCell][yCell] === 1) {
img.onload = function() {
ctx.drawImage(img, y+p, x+p, 20-p*2, 20-p*2);
};
img.src = `https://besthqwallpapers.com/Uploads/5-6-2020/134999/thumb-black-ground-texture-macro-grunge-textures-black-backgrounds-ground-textures.jpg`;
}
}
}
for (let i = 0; i < images.length; i++) {
var width = 1, height = 1, x = images[i].position[0].x[0], y = images[i].position[0].y[0];
console.log(images[i].name + " x => " + images[i].position[0].x[0])
for(let w = images[i].position[0].x[0]; w < images[i].position[0].x[1]; w++){
width++
}
for(let h = 1; h < images[i].position[0].y[1]; h++){
height++
}
const img = new Image();
img.src = `https://picsum.photos/id/${Math.floor(Math.random() * 12)}${Math.floor(Math.random() * 12)}/200/300`;
img.onload = function() {
console.log(20*images[i].position[0].x[0]+p)
/* ctx.rect(20*i, 20*i, 20*width-p*2, 20*height-p*2)
ctx.fillStyle = "blue";
ctx.fill(); */
ctx.drawImage(img, 20*images[i].position[0].y[0]+p, 20*images[i].position[0].x[0]+p, 20*width-p*2, 20*height-p*2);
};
}
};
<canvas id="main" width="600" height="630"></canvas>
</canvas>

You can compute the value of a multiplier and use that to determine the picture size.
var map = [
[1, 0, 1, 0, 1, 0, 0, 0, 1, 1, 1, 0, 1, 1, 1],
[1, 0, 1, 0, 1, 0, 0, 0, 1, 0, 1, 0, 1, 0, 0],
[1, 0, 1, 0, 1, 0, 0, 0, 1, 0, 1, 0, 1, 0, 0],
[1, 0, 1, 0, 1, 0, 0, 0, 1, 0, 1, 0, 1, 0, 0],
[1, 0, 1, 0, 1, 0, 0, 0, 1, 0, 1, 0, 1, 0, 0],
[1, 0, 1, 0, 1, 0, 0, 0, 1, 1, 1, 0, 1, 1, 1],
[1, 0, 1, 0, 1, 0, 0, 0, 1, 0, 1, 0, 0, 0, 1],
[1, 0, 1, 0, 1, 0, 0, 0, 1, 0, 1, 0, 0, 0, 1],
[1, 0, 1, 0, 1, 0, 0, 0, 1, 0, 1, 0, 0, 0, 1],
[1, 0, 1, 0, 1, 1, 1, 0, 1, 0, 1, 0, 1, 1, 1],
[4, 4, 4, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[4, 4, 4, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[4, 4, 4, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[4, 4, 4, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
];
window.onload = function() {
const canvas = document.getElementById("main");
const ctx = canvas.getContext("2d");
ctx.strokeStyle = "transparent";
ctx.lineWidth = 0;
//draw grid
for (let i = 0; i <= 300; i++) {
const x = i*20;
ctx.moveTo(x, 0);
ctx.lineTo(x, canvas.height);
ctx.stroke();
const y = i*20;
ctx.moveTo(0, y);
ctx.lineTo(canvas.width, y);
ctx.stroke();
}
//draw images
const p = ctx.lineWidth / 1; //padding
for (let xCell = 0; xCell < map.length; xCell++) {
for (let yCell = 0; yCell < map[xCell].length; yCell++) {
let multiplier = ((map[xCell][yCell] % 4) ? 1 : 4);
const x = xCell * 20;
const y = yCell * 20;
const img = new Image();
if (map[xCell][yCell] === 1) {
img.onload = function() {
ctx.drawImage(img, y+p, x+p, multiplier * 20-p*2, multiplier * 20-p*2);
};
//TODO: set img.src to your api url instead of the dummyimage url.
img.src = `https://picsum.photos/id/${Math.floor(Math.random() * 10)}${Math.floor(Math.random() * 10)}/200/300`;
}else if(map[xCell][yCell] == 4){
img.onload = function() {
ctx.drawImage(img, y+p, x+p, multiplier * 20-p*2, multiplier * 20-p*2);
};
//TODO: set img.src to your api url instead of the dummyimage url.
img.src = `https://picsum.photos/id/${Math.floor(Math.random() * 12)}${Math.floor(Math.random() * 12)}/200/300`;
}
}
}
};
<canvas id="main" width="600" height="630"></canvas>
</canvas>

Canvas game slows down after a while. What could have caused this?

I'm making a breakout game with html canvas and javascript. I'm working on this project for a while.
Yesterday i realized that game started the slow down after hours of playing. I checked my code but everything was fine. Then i restarted chrome and the game back to normal. What could have caused this?
Is chrome collecting objects or something on the background and it gets heavy after hours? is that a thing?
Here is the all the js code:
document.addEventListener("DOMContentLoaded", function(){
canvas = document.getElementById("ctx").getContext("2d");
document.addEventListener("keydown", keyDown, false);
document.addEventListener("keyup", keyUp, false);
document.querySelector("#newGame").addEventListener("click", newGame, false);
document.querySelector("#pickLevel").addEventListener("click", pickLevel, false);
document.querySelector("#restart").addEventListener("click", restart, false);
document.querySelector("#toMainMenu").addEventListener("click", mainMenu, false);
levels = {
map01 : [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 6, 8, 10, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 7, 13, 15, 17, 10, 1, 0, 0, 0, 0, 0, 0, 0, 19, 14, 20, 2, 4, 17, 8, 17, 0, 0, 0, 0, 0, 0, 0, 21, 2, 9, 11, 9, 15, 0, 0, 0, 0, 0, 0, 4, 0, 0, 10, 11, 18, 16, 0, 0, 4, 0, 0, 0, 3, 11, 3, 0, 0, 19, 20, 0, 0, 3, 11, 3, 0, 2, 10, 18, 10, 2, 0, 0, 0, 0, 2, 10, 18, 10, 1, 0, 17, 13, 17, 9, 1, 0, 0, 1, 9, 17, 5, 17, 0, 0, 0, 20, 12, 16, 8, 7, 6, 8, 3, 4, 12, 0, 0, 0, 0, 0, 19, 11, 15, 14, 13, 15, 10, 11, 0, 0, 0, 0, 0, 0, 0, 18, 10, 21, 20, 2, 10, 0, 0, 0, 0, 0, 0, 0, 0, 0, 17, 9, 1, 9, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 16, 8, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
map02 : [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 4, 10, 11, 12, 0, 0, 17, 18, 19, 4, 5, 0, 0, 8, 11, 14, 10, 13, 0, 0, 15, 16, 17, 18, 19, 0, 0, 15, 18, 21, 17, 20, 0, 0, 8, 9, 10, 11, 12, 0, 0, 8, 9, 10, 11, 12, 0, 0, 21, 14, 7, 6, 13, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 5, 1, 4, 7, 0, 0, 7, 20, 7, 13, 14, 0, 0, 9, 12, 8, 11, 14, 0, 0, 14, 6, 12, 4, 10, 0, 0, 16, 19, 15, 18, 21, 0, 0, 21, 13, 19, 11, 17, 0, 0, 15, 16, 17, 18, 19, 0, 0, 8, 20, 15, 18, 16, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 12, 13, 14, 5, 1, 0, 0, 7, 9, 13, 14, 14, 0, 0, 10, 13, 9, 12, 8, 0, 0, 14, 6, 12, 4, 10, 0, 0, 17, 20, 16, 19, 15, 0, 0, 21, 13, 19, 11, 17, 0, 0, 10, 11, 12, 13, 14, 0, 0, 15, 20, 11, 18, 21, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
map03 : [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 8, 9, 10, 11, 12, 13, 14, 1, 2, 3, 4, 5, 6, 7, 15, 16, 17, 18, 19, 20, 21, 8, 9, 10, 11, 12, 13, 14, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 8, 9, 10, 11, 12, 13, 14, 1, 1, 2, 3, 4, 5, 6, 15, 16, 17, 18, 19, 20, 21, 8, 8, 9, 10, 11, 12, 13, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
map04 : [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 10, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 17, 3, 11, 8, 0, 0, 0, 0, 0, 0, 0, 0, 0, 18, 17, 16, 18, 4, 20, 0, 0, 0, 0, 0, 0, 0, 20, 10, 17, 18, 19, 13, 14, 6, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 8, 4, 19, 8, 9, 10, 11, 12, 13, 10, 17, 7, 0, 6, 1, 16, 15, 16, 17, 18, 19, 20, 21, 6, 7, 1, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 15, 16, 17, 18, 19, 20, 21, 8, 9, 10, 11, 12, 13, 14, 0, 9, 10, 11, 12, 13, 14, 2, 3, 4, 5, 6, 7, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 15, 16, 17, 18, 19, 20, 21, 1, 0, 0, 0, 0, 0, 0, 0, 1, 2, 3, 4, 5, 6, 0, 0, 0, 0, 0, 0, 0, 0, 0, 8, 9, 10, 11, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
map05 : [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 8, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 9, 15, 8, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 10, 16, 0, 0, 9, 3, 0, 0, 0, 0, 0, 0, 0, 11, 17, 0, 13, 7, 0, 10, 4, 0, 0, 0, 0, 0, 12, 18, 0, 5, 20, 14, 6, 0, 11, 5, 0, 0, 0, 13, 19, 0, 4, 12, 20, 21, 13, 20, 0, 12, 6, 0, 14, 20, 0, 3, 11, 19, 0, 0, 20, 12, 4, 0, 13, 7, 21, 0, 2, 10, 18, 0, 3, 4, 0, 19, 11, 3, 0, 14, 0, 1, 9, 17, 0, 7, 10, 11, 1, 0, 18, 10, 2, 0, 7, 8, 16, 0, 10, 14, 17, 18, 8, 7, 0, 17, 9, 1, 14, 15, 0, 1, 17, 21, 0, 0, 15, 14, 3, 0, 16, 8, 0, 0, 1, 8, 19, 0, 17, 18, 0, 21, 10, 7, 0, 0, 0, 0, 8, 15, 0, 2, 8, 9, 10, 0, 17, 14, 0, 0, 0, 0, 0, 0, 16, 11, 0, 0, 14, 15, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
map06 : [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 18, 1, 8, 16, 11, 0, 6, 7, 0, 0, 0, 0, 0, 3, 2, 8, 15, 4, 0, 13, 6, 14, 0, 0, 0, 0, 10, 3, 9, 15, 19, 0, 20, 5, 13, 21, 0, 0, 0, 17, 4, 10, 16, 12, 0, 7, 4, 12, 20, 19, 0, 0, 2, 5, 11, 17, 5, 0, 21, 3, 11, 19, 12, 0, 0, 9, 6, 12, 18, 20, 0, 1, 2, 10, 18, 18, 0, 0, 16, 17, 13, 19, 13, 0, 8, 1, 9, 17, 11, 0, 0, 0, 1, 15, 20, 6, 0, 2, 7, 8, 16, 4, 0, 0, 0, 0, 8, 17, 21, 0, 9, 6, 14, 15, 17, 0, 0, 0, 0, 0, 15, 14, 0, 16, 5, 13, 21, 10, 0, 0, 0, 0, 0, 0, 7, 0, 4, 4, 12, 20, 3, 0, 0, 0, 0, 0, 0, 0, 0, 11, 3, 11, 19, 16, 0, 0, 0, 0, 0, 0, 0, 0, 17, 10, 10, 18, 9, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 15, 17, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 8, 17, 15, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 15, 8, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
map07 : [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 6, 20, 0, 0, 0, 20, 5, 0, 0, 0, 0, 0, 0, 5, 13, 18, 14, 0, 8, 2, 12, 4, 0, 0, 0, 0, 0, 12, 2, 5, 21, 3, 15, 3, 4, 11, 0, 0, 0, 0, 3, 19, 9, 12, 7, 10, 6, 10, 11, 1, 1, 0, 0, 0, 10, 21, 16, 19, 14, 17, 13, 17, 18, 1, 8, 0, 0, 0, 17, 1, 2, 3, 4, 5, 6, 7, 1, 2, 15, 0, 0, 0, 4, 8, 9, 10, 11, 12, 13, 14, 8, 9, 2, 0, 0, 0, 11, 15, 16, 17, 18, 19, 20, 21, 15, 16, 9, 0, 0, 0, 18, 20, 1, 2, 3, 4, 5, 6, 7, 3, 16, 0, 0, 0, 0, 1, 8, 9, 10, 11, 12, 13, 14, 10, 0, 0, 0, 0, 0, 8, 15, 16, 17, 18, 19, 20, 21, 17, 0, 0, 0, 0, 0, 15, 7, 1, 3, 4, 5, 6, 4, 20, 0, 0, 0, 0, 0, 0, 14, 8, 10, 11, 12, 13, 11, 0, 0, 0, 0, 0, 0, 0, 21, 16, 17, 18, 19, 16, 18, 0, 0, 0, 0, 0, 0, 0, 0, 20, 6, 7, 5, 20, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 13, 14, 12, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 20, 20, 19, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 16, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
map08 : [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 8, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 15, 12, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 19, 9, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 9, 6, 16, 12, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 16, 13, 3, 19, 8, 3, 0, 0, 0, 0, 0, 0, 0, 0, 3, 20, 10, 6, 15, 10, 5, 0, 0, 0, 0, 0, 0, 0, 10, 7, 17, 13, 2, 17, 12, 6, 0, 0, 0, 0, 0, 0, 17, 14, 4, 20, 9, 4, 19, 13, 7, 0, 0, 0, 0, 0, 4, 1, 11, 7, 16, 11, 8, 20, 14, 1, 0, 0, 0, 0, 11, 8, 18, 14, 17, 18, 15, 16, 21, 8, 2, 0, 0, 0, 18, 15, 18, 21, 19, 20, 21, 8, 9, 10, 11, 10, 0, 0, 8, 9, 10, 11, 12, 13, 14, 1, 2, 3, 4, 5, 12, 0, 1, 2, 3, 4, 5, 6, 7, 15, 16, 17, 18, 19, 20, 21, 15, 16, 17, 18, 19, 20, 21, 8, 9, 10, 11, 12, 13, 14, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
map09 : [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 7, 0, 3, 6, 17, 18, 11, 17, 18, 19, 20, 21, 8, 0, 14, 0, 10, 13, 0, 0, 0, 0, 0, 0, 0, 3, 15, 0, 21, 0, 17, 20, 20, 21, 8, 9, 10, 11, 0, 10, 2, 0, 6, 0, 2, 5, 0, 0, 0, 0, 0, 6, 0, 17, 9, 0, 13, 0, 9, 12, 0, 0, 2, 3, 0, 13, 0, 1, 16, 0, 20, 0, 16, 19, 0, 0, 9, 10, 0, 20, 0, 4, 3, 0, 5, 0, 1, 4, 0, 0, 16, 17, 0, 7, 0, 11, 10, 0, 12, 0, 8, 11, 0, 0, 1, 1, 0, 14, 0, 18, 17, 0, 19, 0, 15, 18, 0, 0, 8, 4, 0, 21, 0, 5, 4, 0, 4, 0, 7, 3, 0, 0, 15, 11, 0, 1, 0, 12, 11, 0, 11, 0, 14, 10, 0, 0, 2, 18, 0, 8, 0, 19, 18, 0, 18, 0, 21, 17, 0, 0, 9, 5, 0, 15, 0, 6, 5, 0, 1, 0, 0, 0, 0, 0, 16, 12, 0, 2, 0, 13, 12, 0, 8, 9, 10, 11, 12, 13, 14, 19, 0, 9, 0, 20, 19, 0, 0, 0, 0, 0, 0, 0, 8, 9, 0, 16, 0, 12, 15, 16, 17, 18, 19, 20, 21, 15, 16, 17, 0, 18, 0, 19, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
};
let map_col = 14;
let map_row = 34;
let secondPassed = 0;
let oldTimeStamp = 0;
let WIDTH = canvas.canvas.width;
let HEIGHT = canvas.canvas.height;
let right_arrow_keycode = 39;
let left_arrow_keycode = 37;
let a_keycode = 65;
let d_keycode = 68;
let pressLeft;
let pressRight;
let game_over;
let islevelUp;
let dt = 1/60.0;
let brickList;
let tilesets = {
tileset1: {
image: new Image(),
columns: 7,
rows: 3,
tile_width: 32,
tile_height: 16
}
};
tilesets.tileset1.image.src = "img/tileset/brick_tileset.png";
let heart_sprite_sheet = {
spin: {
frame_set : [0,1,2,3],
image : new Image()
}
}
heart_sprite_sheet.spin.image.src = "img/heart/heart_sprite.png";
let delay = 0;
let frame_set;
let level;
function newGame(){
document.querySelector(".mainMenu").style.display="none";
level = 0;
score = 0;
levelUp();
}
function restart(){
document.querySelector(".gameOver").style.display="none";
level -= 1;
levelUp();
}
function mainMenu(){
document.querySelector(".gameOver").style.display="none";
document.querySelector(".mainMenu").style.display="block";
}
function pickLevel(){
score = 0;
document.querySelector(".pickLevel").style.display="block";
document.querySelector(".mainMenu").style.display="none";
}
function loop(timeStamp){
getDeltaTime(timeStamp);
ballCollision();
ballMovement();
paddleMovement();
heartMovement();
heartAnimUpdate();
// document.getElementById("output").innerHTML = "gameover: " + game_over + ", islevelup: " + islevelUp;
draw();
if(!game_over && !islevelUp){
window.requestAnimationFrame(loop);
}
else if(game_over){
gameOver();
}
else if(islevelUp){
levelUp();
}
}
function Animation(){
this.count = 0
this.delay = delay;
this.frame = 0;
this.frame_index = 0;
this.frame_set = frame_set;
}
Animation.prototype.change = function(frame_set, delay){
if(this.frame_set != frame_set){
this.count = 0;
this.delay = delay;
this.frame_index = 0;
this.frame_set = frame_set;
this.frame = this.frame_set[this.frame_index];
}
}
Animation.prototype.update = function(){
this.count ++;
if(this.count >= this.delay){
this.count = 0;
this.frame_index =(this.frame_index == this.frame_set.length -1)?0: this.frame_index + 1;
this.frame = this.frame_set[this.frame_index];
}
}
function Ball(){
this.image = new Image(),
this.x = 250,
this.y = 450,
this.velocity = 150,
this.radius = 8,
this.dx = 1,
this.dy = -1
}
function ballReset(){
ball.x = paddle.x + paddle.width/2;
ball.y = 450;
ball.dx = 1;
ball.dy = -1;
ball.velocity = 150;
}
function drawBall(){
canvas.drawImage(ball.image, Math.floor(ball.x), Math.floor(ball.y), ball.radius*2, ball.radius*2);
}
function ballMovement(){
ball.x += (ball.velocity * deltaTime ) * ball.dx * 0.999;
ball.y += (ball.velocity * deltaTime ) * ball.dy * 0.999;
}
function ballCollision(){
//borders for ball
if(ball.y - ball.radius <= 0 && ball.y < 0){
ball.dy = ball.dy * -1;
ball.y = ball.radius;
}
if(ball.y > HEIGHT){
heartList.pop();
if(heartList.length == 0){
game_over = true;
}else{
ballReset();
}
}
if(ball.x + ball.radius > WIDTH && ball.x > 0){
ball.dx = ball.dx * -1;
ball.x = WIDTH-ball.radius;
}
if(ball.x - ball.radius < 0 && ball.x < 0){
ball.dx = ball.dx * -1;
ball.x = ball.radius;
}
// ball and paddle collision detection
let testX = ball.x;
let testY = ball.y;
if(ball.x < paddle.x){
testX = paddle.x;
//left
}
else if(ball.x > paddle.x+paddle.width){
testX = paddle.x + paddle.width;
//right
}
if(ball.y < paddle.y){
testY = paddle.y;
//top
}
else if(ball.y > paddle.y+ paddle.height){
testY = paddle.y + paddle.height;
//bottom
}
let distX = ball.x - testX;
let distY = ball.y - testY;
let distance = Math.sqrt((distX*distX)+(distY*distY));
if(distance <= ball.radius){
let collidePoint = ball.x - (paddle.x + paddle.width/2);
collidePoint = collidePoint / (paddle.width/2);
let angle = collidePoint * Math.atan2(ball.y, ball.x);
ball.dx = ball.velocity * deltaTime * Math.sin(angle);
ball.dy = -ball.velocity * deltaTime * Math.cos(angle);
}
//brick collision
for (let i = 0; i < brickList.length; i++){
let b = brickList[i];
if(b.status){
let bottom = false;
let top = false;
let b_testX = ball.x;
let b_testY = ball.y;
if(ball.x < b.x){
b_testX = b.x;
}
else if(ball.x > b.x + b.width){
b_testX = b.x + b.width;
}
if(ball.y < b.y){
b_testY = b.y;
top = true;
}
else if(ball.y > b.y + b.height){
b_testY = b.y + b.height;
bottom = true;
}
let distX_fromBrick = ball.x - b_testX;
let distY_fromBrick = ball.y - b_testY;
let distance = Math.sqrt((distX_fromBrick * distX_fromBrick) + (distY_fromBrick * distY_fromBrick));
if(distance < ball.radius){
let collidePoint = ball.x - (b.x + b.width/2);
collidePoint = collidePoint / (b.width/2);
let angle = collidePoint * Math.atan2(ball.y, ball.x);
if(top){
ball.dx = ball.velocity * deltaTime * Math.sin(angle);
ball.dy = -ball.velocity * deltaTime * Math.cos(angle);
}
if(bottom){
ball.dx = -ball.velocity * deltaTime * Math.sin(angle);
ball.dy = ball.velocity * deltaTime * Math.cos(angle);
}
b.status = false;
brokenBricks ++;
scoreUp();
if(brokenBricks == brickList.length){
islevelUp = true;
}
}
}
}
}
function Paddle(){
this.image = new Image(),
this.x = 200,
this.y = 490,
this.width = 64,
this.height = 20,
this.velocity = 500
}
function drawPaddle(){
canvas.drawImage(paddle.image, Math.floor(paddle.x), Math.floor(paddle.y),paddle.width,paddle.height);
}
function paddleMovement(){
if(pressRight&&paddle.x+paddle.width<WIDTH){
paddle.x += (paddle.velocity * deltaTime )*0.999;
}
if(pressLeft&&paddle.x>0){
paddle.x -= (paddle.velocity * deltaTime )*0.999;
}
}
function Brick(x,y){
this.image = new Image(),
this.x = x,
this.y = y,
this.width = 32,
this.height = 16,
this.status = true
}
function drawMap (){
for(let i = 0; i < map.length; i++){
let value = map[i]-1;
let source_x = (value%tilesets.tileset1.columns) * tilesets.tileset1.tile_width;
let source_y = Math.floor(value/tilesets.tileset1.columns) * tilesets.tileset1.tile_height;
let destination_x = (i%map_col) * tilesets.tileset1.tile_width;
let destination_y = Math.floor(i/map_col) * tilesets.tileset1.tile_height;
if(map[i] != 0){
if(!isBrickAlive(destination_x, destination_y)){continue;}
}
canvas.drawImage(tilesets.tileset1.image, source_x, source_y, tilesets.tileset1.tile_width, tilesets.tileset1.tile_height, destination_x, destination_y, tilesets.tileset1.tile_width, tilesets.tileset1.tile_height );
}
}
function createBrick(){
for(let i = 0; i<map.length; i++){
if(map[i] != 0){
let x = (i%map_col)*tilesets.tileset1.tile_width;
let y = Math.floor(i/map_col)*tilesets.tileset1.tile_height;
let brick = new Brick(x, y);
brickList.push(brick);
}
}
}
function isBrickAlive(x,y){
for(let i = 0; i < brickList.length; i++){
let brick = brickList[i];
if(brick.status && brick.x == x && brick.y == y){
return true;
}
}
}
function scoreUp(){
score += 1;
}
function scoreText(){
canvas.font = `15px gameFont`;
canvas.fillStyle = "white";
canvas.fillText("SCORE:"+ score, 8, 30);
}
function Heart(x,y){
this.image = new Image(),
this.animation = new Animation(),
this.x = x,
this.y = y,
this.width = 7,
this.height = 7
}
function heartCreate(){
let heart1 = new Heart(350,8);
heartList.push(heart1);
let heart2 = new Heart(375,8);
heartList.push(heart2);
let heart3 = new Heart(400,8);
heartList.push(heart3);
let heart4 = new Heart(425,8);
heartList.push(heart4);
}
function heartDraw(){
for(let i = 0; i < heartList.length; i++){
let heart = heartList[i];
canvas.drawImage(heart_sprite_sheet.spin.image, heart.width * heart.animation.frame, 0, heart.width, heart.height, heart.x, heart.y, heart.width*3, heart.height*3);
}
}
function heartMovement(){
for(let i = 0; i < heartList.length; i++){
let heart = heartList[i];
heart.image = heart_sprite_sheet.spin.image;
heart.animation.change(heart_sprite_sheet.spin.frame_set, 12);
}
}
function heartAnimUpdate(){
for(let i = 0; i < heartList.length; i++){
let heart = heartList[i];
heart.animation.update();
}
}
function draw(){
canvas.clearRect(0,0,WIDTH,HEIGHT);
canvas.imageSmoothingEnabled = false;
canvas.save();
drawBg();
drawMap();
drawPaddle();
scoreText();
heartDraw();
drawBall();
canvas.restore();
}
function keyDown(event){
if(event.keyCode === right_arrow_keycode || event.keyCode === d_keycode){
pressRight = true;
}
if(event.keyCode === left_arrow_keycode || event.keyCode === a_keycode){
pressLeft = true;
}
}
function keyUp(event){
if(event.keyCode === right_arrow_keycode || event.keyCode === d_keycode){
pressRight = false;
}
if(event.keyCode === left_arrow_keycode || event.keyCode === a_keycode){
pressLeft = false;
}
}
function drawBg(){
switch(level){
case 1:
canvas.beginPath();
canvas.fillStyle = "#76428A";
canvas.fillRect(0,0,WIDTH,HEIGHT);
canvas.closePath();
break;
case 2:
canvas.beginPath();
canvas.fillStyle = "#8C2929";
canvas.fillRect(0,0,WIDTH,HEIGHT);
canvas.closePath();
break;
case 3:
canvas.beginPath();
canvas.fillStyle = "#639BFF";
canvas.fillRect(0,0,WIDTH,HEIGHT);
canvas.closePath();
break;
case 4:
canvas.beginPath();
canvas.fillStyle = "#4B692F";
canvas.fillRect(0,0,WIDTH,HEIGHT);
canvas.closePath();
break;
case 5:
canvas.beginPath();
canvas.fillStyle = "#9BADB7";
canvas.fillRect(0,0,WIDTH,HEIGHT);
canvas.closePath();
break;
case 6:
canvas.beginPath();
canvas.fillStyle = "#D95763";
canvas.fillRect(0,0,WIDTH,HEIGHT);
canvas.closePath();
break;
case 7:
canvas.beginPath();
canvas.fillStyle = "#3F3F74";
canvas.fillRect(0,0,WIDTH,HEIGHT);
canvas.closePath();
break;
case 8:
canvas.beginPath();
canvas.fillStyle = "#663931";
canvas.fillRect(0,0,WIDTH,HEIGHT);
canvas.closePath();
break;
case 9:
canvas.beginPath();
canvas.fillStyle = "#DF7126";
canvas.fillRect(0,0,WIDTH,HEIGHT);
canvas.closePath();
break;
default:
canvas.beginPath();
canvas.fillStyle = "#639BFF";
canvas.fillRect(0,0,WIDTH,HEIGHT);
canvas.closePath();
break;
}
//açık mavi: 639BFF
//mor: 76428A
//yeşil: 4B692F
//pembe: D77BBA
//turuncu: DF7126
//koyu mavi: 3F3F74
//pembe-kırmızı: D95763
//koyu mor: 45283C
//baby-blue: 9BADB7
//mavi: 5B6EE1
//koyu kırmızı: 8C2929
}
function getDeltaTime(timeStamp){
secondPassed = (timeStamp - oldTimeStamp) / 1000;
oldTimeStamp = timeStamp;
deltaTime = Math.min(secondPassed , dt);
return deltaTime;
}
function startGame(){
secondPassed = 0;
oldTimeStamp = 0;
brokenBricks = 0;
game_over = false;
pressLeft = false;
pressRight = false;
islevelUp = false;
brickList = new Array();
heartList = new Array();
createBrick();
heartCreate();
draw();
startEngine();
}
function startEngine(){
window.requestAnimationFrame(loop);
}
function gameOver(){
document.querySelector(".gameOver").style.display="block";
document.getElementById("score").innerHTML = score;
score = 0;
}
function levelUp(){
ball = new Ball();
paddle = new Paddle();
level++;
switch(level){
case 1:
map = levels.map01;
ball.image.src = "img/ball/blue_ball.png";
paddle.image.src = "img/paddle/black_paddle.png";
break;
case 2:
map = levels.map02;
ball.image.src = "img/ball/green_ball.png";
paddle.image.src = "img/paddle/blue_paddle.png";
break;
case 3:
map = levels.map03;
ball.image.src = "img/ball/purple_ball.png";
paddle.image.src = "img/paddle/brown_paddle.png";
break;
case 4:
map = levels.map04;
ball.image.src = "img/ball/red_ball.png";
paddle.image.src = "img/paddle/golden_paddle.png";
break;
case 5:
map = levels.map05;
ball.image.src = "img/ball/yellow_ball.png";
paddle.image.src = "img/paddle/green_paddle.png";
break;
case 6:
map = levels.map06;
ball.image.src = "img/ball/blue_ball.png";
paddle.image.src = "img/paddle/purple_paddle.png";
break;
case 7:
map = levels.map07;
ball.image.src = "img/ball/red_ball.png";
paddle.image.src = "img/paddle/red_paddle.png";
break;
case 8:
map = levels.map08;
ball.image.src = "img/ball/yellow_ball.png";
paddle.image.src = "img/paddle/black_paddle.png";
break;
case 9:
map = levels.map09;
ball.image.src = "img/ball/purple_ball.png";
paddle.image.src = "img/paddle/blue_paddle.png";
break;
default:
game_over = true;
break;
}
startGame();
}});

Why is this recursive function that is supposed to make every element in a matrix 1 (used for maze generation) not working?

function generator(x, y) {
matrix[x][y] = 1;
var arr = [1,2,3,4]; //randomizes the generator
arr = shuffle(arr);
for (i = 0; i < 4; i++) {
if (arr[i] === 1 && matrix[x - 1] && matrix[x - 1][y] === 0) {
generator(x - 1, y);
}
if (arr[i] === 2 && matrix[x + 1] && matrix[x + 1][y] === 0) {
generator(x + 1, y);
}
if (arr[i] === 3 && matrix[x][y - 1] === 0) {
generator(x, y - 1);
}
if (arr[i] === 4 && matrix[x][y + 1] === 0) {
generator(x, y + 1);
}
}
return 0;
}
The results are bad. After execution most of the time on a 3x3 matrix gives back a 0 in the right or left corner up or even a row of zeroes.
As the matrix grows in size it is even worse.
Here is the result for a 15x15 matrix:
[1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
[1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
[1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
[1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
[1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
The matrix is initialized using this code
for (var i = 0; i < h; i++) {
matrix[i] = [];
for (var j = 0; j < w; j++) {
matrix[i][j] = 0;
}
}
And the first call is generate(0,0);

Displaying an 11x11 Matrix on a Canvas

I've been trying to create a canvas that displays an 11x11 matrix.
const canvas = document.getElementById('canvasGame');
const context = canvas.getContext('2d');
context.scale(10, 10);
context.fillstyle = '#000';
context.fillstyle(0,0, canvas.width, canvas.height);
const matrix = [
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
];
Depending on the number inside the matrix it will create a rectangle of a certain colour.
I've created a basic function that goes through every entry.
if = 0, white rectangle.
else, black rectangle.
function drawMatrix(matrix){
matrix.forEach((row, y) =>{
row.forEach((value, x) => {
if(value === 0) {
context.fillStyle = 'white';
context.fillRect(x, y, 1, 1);
}
else
{
context.fillStyle = 'black';
context.fillRect(x, y, 1, 1);
}
});
});
}
drawMatrix(matrix);
However when I load my html file with my .js file and my canvas set-up it doesnt load anything apart from the styling I've applied to my canvas.
Screenshot: What it loads.
My HTML, if that matters.
<html>
<head>
<title>Testing Grounds</title>
<style>
body {
background: #345;
color: #fff;
font-family: sans-serif;
font-size: 2em;
text-align: center;
}
canvas {
border: dashed .2em #fff;
height: 90vh;
}
</style>
</head>
<body>
<h1>Test Zone</h1>
<p>Using a canvas to display 11x11 matrix</p>
<canvas id="canvasGame" width="350" height="350"/>
<script src="app.js"></script>
</body>
</html>

Here is also another way...
const canvas1 = document.getElementById('canvas1');
const context1 = canvas1.getContext('2d');
const canvas2 = document.getElementById('canvas2');
const context2 = canvas2.getContext('2d');
//context.scale(canvas.height / 16, canvas.height / 16);
matrix = [
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 1],
[1, 0, 1, 0, 0, 0, 0, 0, 0, 1, 0, 1],
[1, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1],
[1, 0, 1, 0, 0, 0, 0, 0, 0, 1, 0, 1],
[1, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1],
[1, 0, 1, 0, 0, 1, 1, 0, 0, 1, 0, 1],
[1, 0, 1, 0, 0, 0, 0, 0, 0, 1, 0, 1],
[1, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
];
function drawMatrix(matrix) {
z = matrix.map((c) => c.map((c) => c == 0 ? [255, 255, 255, 255] : [0, 0, 0, 255]));
i = new ImageData(Uint8ClampedArray.from(z.flat(2)), 12)
context1.putImageData(i, 0, 0);
context2.scale(16, 16);
context2.webkitImageSmoothingEnabled = false;
context2.mozImageSmoothingEnabled = false;
context2.imageSmoothingEnabled = false;
context2.drawImage(canvas1, 0, 0);
}
drawMatrix(matrix);
<center><canvas hidden id="canvas1" width=12 height=12></canvas></center>
<center><canvas id="canvas2" width=192 height=192></canvas></center>

const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
// every drawn pixel will be 16 times bigger
context.scale(canvas.height / 16, canvas.height / 16);
const matrix = [
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 1],
[1, 0, 1, 0, 0, 0, 0, 0, 0, 1, 0, 1],
[1, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1],
[1, 0, 1, 0, 0, 0, 0, 0, 0, 1, 0, 1],
[1, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1],
[1, 0, 1, 0, 0, 1, 1, 0, 0, 1, 0, 1],
[1, 0, 1, 0, 0, 0, 0, 0, 0, 1, 0, 1],
[1, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
];
function drawMatrix(matrix) {
// write all pixels cycling thru rows and columns
matrix.forEach((row, y) => {
row.forEach((value, x) => {
context.fillStyle = value && "black" || "white";
context.fillRect(x, y, 1, 1);
});
});
}
drawMatrix(matrix); // draw the matrix
<center><canvas id="canvas" width=192 height=192></canvas></center>

The rectangles you're creating are 1 by 1 pixel and always in the upper-left. You should calculate the width/height of the rectangle (width / 11, height / 11). Then translate the x and width using those values. Something like the following should work:
function drawMatrix(matrix){
var cellWidth = canvas.width / 11.0;
var cellHeight = vanvas.height / 11.0;
matrix.forEach((row, y) =>{
row.forEach((value, x) => {
context.fillStyle = cellColor(value);
context.fillRect(x * cellWidth, y * cellHeight, cellWidth, cellHeight);
});
});
}
function cellColor(val) {
if(value == 0)
{
return 'white';
}
return 'black';
}
drawMatrix(matrix);
This will calculate the width and height of the cell, loop through each element, and draw the rectangle with either white or black depending on the value.
You should also make sure that the drawMatrix function is called after the body is loaded.

detecting for off bounded squares on grid

I'm going through a tutorial, and apparently I'm suppose to be getting this. But I can't find wrong in the coding part, I'm going step by step as well. I'm geting nothing, but before I had a block falling from above. Apparently I'm suppose to be getting something like
var WIDTH = 300,
HEIGHT = 400,
c = document.getElementById('canvas'),
ctx = c.getContext('2d');
setInterval(function() {
clearCanvas();
generateNextSquare();
updatePosition();
drawOnCanvas();
}, 1000 / 50);
var clearCanvas = function() {
ctx.fillStyle = 'White';
ctx.beginPath();
ctx.rect(0, 0, WIDTH, HEIGHT);
ctx.closePath();
ctx.fill();
}
var drawLine = function() {
ctx.beginPath();
ctx.moveTo(200, 0);
ctx.lineTo(200, 400);
ctx.stroke();
}
var updatePosition = function() {
_square.fall();
}
var drawOnCanvas = function() {
drawLine();
_square.draw();
}
var squareLength = 20;
var speedLevels = [20, 16, 12, 10, 8],
currSpeed = speedLevels[0];
var gameGrid = [
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
];
var Square = function(speed) {
var self = this;
self.color = "Black";
self.vPosition = 0;
self.hPosition = 4;
self.speed = speed;
self.current = 0 ;
self.temp = 0;
self.fall = function() {
if (self.counter >= self.speed) {
if (self.checkFalling()) {
self.vPosition++;
} else {
gameGrid[self.vPosition][self.hPosition] = 1;
self.active = false;
}
self.counter = 0;
}
self.counter++;
}
self.checkFalling = function() {
if (gameGrid[self.vPosition + 1][self.hPosition] == 1)
return false;
else
return true;
}
}
return self;
}
var drawFixedSquares = function() {
for (var i = 0; i < 20; i++) {
for (var j = 0; j < 10; j++) {
if (gameGrid[i][j] == 1) {
ctx.fillStyle = "Black";
ctx.fillRect(j * squareLength, i * squareLength, squareLength, squareLength);
}
}
}
}
var generateNextSquare = function() {
if (!_square.active)
_square = new Square(currSpeed);
}
var _square = new Square(currSpeed);