В произвольном месте canvas создаётся эпицентр бомбы (красный квадрат), который увеличивается каждую секунду на 3 клетки во все стороны. Зеленые квадраты - датчики, необходимо получить время от каждого датчика, когда они попадают в зону поражения. Я пытался это сделать через изменение цвета, но getImageData() почему-то всегда возвращает черный цвет.
let canvas = document.querySelector('canvas')
let ctx = canvas.getContext('2d')
let w = canvas.width = 400
let h = canvas.height = 400
let col_num = 50
let row_num = 50
let cell_w = w / col_num
let cell_h = h / row_num
let is_exploding = false
/*drawNet()*/
canvas.addEventListener('click', setBomb)
let imgData = ctx.getImageData(132, 36, 1, 1).data
function drawNet() {
let net_path = ''
for (let i = 0; i < col_num + 1; i++) {
net_path += `M ${i*cell_w} 0 V ${h} `
}
for (let i = 0; i < row_num + 1 ;i++) {
net_path += `M 0 ${i*cell_h} H ${w} `
}
ctx.stroke(new Path2D(net_path))
}
function explode(c_x, c_y, blow_radius) {
is_exploding = true
/*ctx.clearRect(0, 0, w, h)*/
let x = (c_x - blow_radius) * cell_w
let y = (c_y - blow_radius) * cell_h
let blow_w = (blow_radius * 2 + 1) * cell_w
let blow_h = (blow_radius * 2 + 1) * cell_h
detectDistance()
/* ctx.save()*/
ctx.fillStyle = 'red'
ctx.fillRect(x, y, blow_w, blow_h)
/*ctx.restore()*/
/*drawNet()*/
let max_dist_to_edge = Math.max((c_x - blow_radius),
(col_num - c_x - blow_radius - 1),
(c_y - blow_radius),
(row_num - c_y - blow_radius - 1))
if (max_dist_to_edge > 0) {
blow_radius += 3
setTimeout(() => explode(c_x, c_y, blow_radius), 1000)
console.log(imgData[0] + ' ' + imgData[1] + ' ' + imgData[2]);
} else {
is_exploding = false
setTimeout(() => {
ctx.clearRect(0, 0, w, h)
/*drawNet()*/
}, 2000)
}
}
function detectDistance(){
/*ctx.save()*/
ctx.fillStyle = 'green'
ctx.fillRect(128, 32, 8, 8)
ctx.fillRect(80, 336, 8, 8)
ctx.fillRect(344, 296, 8, 8)
}
function setBomb(e) {
if (!is_exploding) {
let x = e.offsetX
let y = e.offsetY
console.log(x)
console.log(y)
let c_x = Math.floor(x / cell_w)
let c_y = Math.floor(y / cell_h)
explode(c_x, c_y, 0)
}
}
let imgData = ctx.getImageData(132, 36, 1, 1).data
- эту штуку перенесите вexlode()
, эта функция перерисовывает холст каждую секунду. Там и будут все актуальные данные.is_exploding
. Например,time_passed = 0
, а в телеexplode
-time_passed++
. А вsetBomb()
обнулять счетчикtime_passed = 0
.