<!DOCTYPE html>
<html>
<body onload="press(event)">
<canvas id="myCanvas" width="400" height="400" 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);
let objs = ['0', '50','100','150','200','250','300','350','400'];
let fplay = [1,1,1,1,1,1,1,1,1];
let globalX = 0;
let GlobalY = 0;
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function press(event){
for (let y = 0;y <= 400;y+=50){
for (let x = 0;x <= 400;x+=50){
if ((x >= event.pageX-10 && x <= event.pageX+40) && (y >= event.pageY-10
&& y <= event.pageY+40))
{
globalX = x-50;
if (fplay[x/50] == 6) fplay[x/50] = 7;
if (fplay[x/50] == 5) fplay[x/50] = 6;
if (fplay[x/50] == 4) fplay[x/50] = 5;
if (fplay[x/50] == 3) fplay[x/50] = 4;
if (fplay[x/50] == 2) fplay[x/50] = 3;
if (fplay[x/50] == 1) fplay[x/50] = 2;
let elem = document.getElementById("mytext");
elem.innerHTML = x + " " + y;
}
}
}
//очистка холста
ctx.clearRect(0,0,400,400);
ctx.beginPath();
for (let y = 0; y <= 400; y += 50) {
for (let x = 0; x <= 400; x += 50) {
ctx.moveTo(0, y);
ctx.lineTo(400, y);
ctx.moveTo(x, 0);
ctx.lineTo(x, 400);
}
ctx.stroke();
}
//Рисовка квадратов
for (let x = 0;x <= 400;x+=50){
ctx.fillStyle = 'red';
ctx.fillRect(x-50,fplay[x/50]*50, 49, 49);
}
}
</script>
</body>
</html>
| 