0

В произвольном месте 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)

    }
}
4
  • 1
    let imgData = ctx.getImageData(132, 36, 1, 1).data - эту штуку перенесите в exlode(), эта функция перерисовывает холст каждую секунду. Там и будут все актуальные данные.
    – Leonid
    15 дек 2021 в 17:02
  • Спасибо большое. Можно еще вопрос, как у setTimeout()'а узнать сколько секунд прошло? 15 дек 2021 в 17:05
  • 1
    Никак, добавьте внешнюю переменную со счетчиком и прибавляйте на каждом шаге единицу. Ей место рядом с is_exploding. Например, time_passed = 0, а в теле explode - time_passed++. А в setBomb() обнулять счетчик time_passed = 0.
    – Leonid
    15 дек 2021 в 17:12
  • Еще раз большое спасибо 15 дек 2021 в 17:15

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Посмотрите другие вопросы с метками или задайте свой вопрос.