<!DOCTYPE html>
<html>
<body onload="press(event)">
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;" onclick="press(event)">
</canvas>
<div id="mytext"> </div>
<script>
let c = document.getElementById("myCanvas");
let ctx = c.getContext("2d");
let color_1 = '#' + Math.floor(Math.random()*16777215).toString(16);
let color_2 = '#' + Math.floor(Math.random()*16777215).toString(16);
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function press(event){
ctx.clearRect(0,0,500,500);
ctx.beginPath();
for (let y = 0; y <= 500; y += 50) {
for (let x = 0; x <= 500; x += 50) {
ctx.moveTo(0, y);
ctx.lineTo(500, y);
ctx.moveTo(x, 0);
ctx.lineTo(x, 500);
}
ctx.stroke();
}
let objarray = [0,1,2,3,4,5,6,7,8,9];
for (let i = 0 ; i < 10; i++){
let elem = objarray[i];
let indexrandom = getRandomInt(0,9);
objarray[i] = objarray[indexrandom];
objarray[indexrandom] = elem;
}
for (let i = 0 ; i < 10; i++){
let elem = document.getElementById("mytext");
elem.innerHTML += objarray[i] + " ";
}
let verticalobj1 = getRandomInt(0,5);
let verticalobj2 = getRandomInt(0,5);
let verticalobj3 = getRandomInt(0,5);
let verticalobj4 = getRandomInt(0,5);
ctx.fillStyle = color_1;
for (let i = 0; i < 200;i+=50){
ctx.fillRect(objarray[0]*50,verticalobj1*50+i, 49, 49);
ctx.fillRect(objarray[1]*50,verticalobj2*50+i, 49, 49);
ctx.fillRect(objarray[2]*50,verticalobj3*50+i, 49, 49);
ctx.fillRect(objarray[3]*50,verticalobj4*50+i, 49, 49);
}
}
</script>
</body>
</html>
| 