battleship/demo/onshipgrid/main.js

const grid = document.querySelector('.grid')
const ships = document.querySelectorAll('.ship')
const carrier = document.querySelector('.carrier')          // 航空母舰
const battleship = document.querySelector('.battleship')    // 战列舰
const cruiser = document.querySelector('.cruiser')          // 巡洋舰
const submarine = document.querySelector('.submarine')      // 潜艇
const destroyer = document.querySelector('.destroyer')      // 驱逐舰
const testButton = document.querySelector('#testButton')

let playing = false
let dragingItem = null

function mod(n, w) {
    const x = n % w
    const y = (n - x) / w
    return { x, y }
}

function checkIfCollision(ox, oy, currentShip) {
    for (let ship of ships) {
        if (ship != currentShip) {
            const cell = ship.parentNode
            const index = parseInt(cell.id.slice(5))
            let { x, y } = mod(index, 10)
            const vertical = ship.classList.contains('vertical')
            const length = ship.children.length
            if (vertical) {
                const tail = y + length
                for (; y < tail; y++) {
                    if (ox === x && oy === y) return true
                }
            } else {
                const tail = x + length
                for (; x < tail; x++) {
                    if (ox === x && oy === y) return true
                }
            }
        }
    }
    return false
}

function shipRotate(e) {
    if (playing) return
    const currentShip = e.target.parentNode
    const length = currentShip.children.length
    const cell = currentShip.parentNode
    const index = parseInt(cell.id.slice(5))
    let { x, y } = mod(index, 10)
    const vertical = currentShip.classList.contains('vertical')
    // TODO 检查碰撞
    if (vertical) {
        // 判断转为横向时是否碰撞
        const tail = x + length - 1
        if (tail >= 10) return  // 船尾越界
        for (x = x + 1; x <= tail; x++) {
            if (checkIfCollision(x, y, currentShip)) return
        }
    } else {
        // 判断转为竖向时是否碰撞
        const tail = y + length - 1
        if (tail >= 10) return  // 船尾越界
        for (y = y + 1; y <= tail; y++) {
            if (checkIfCollision(x, y, currentShip)) return
        }
    }

    currentShip.classList.toggle('vertical')
}

function shipMove(ship, x, y) {
    const index = 10 * y + x
    const vertical = ship.classList.contains('vertical')
    // TODO 检查碰撞
    if (vertical) { } else { }
    const cell = document.getElementById(`cell-${index}`)
    cell.appendChild(ship)
}

for (let ship of ships) ship.addEventListener('dblclick', shipRotate)

testButton.addEventListener('click', e => {
    playing = !playing
    e.target.innerHTML = playing ? 'playing' : 'planning'
})

document.addEventListener('dragstart', e => {
    if (playing || e.target.classList && !e.target.classList.contains('ship')) {
        e.preventDefault()
        return
    }
    dragingItem = e.target
    // document.body.append(dragingItem)
})
document.addEventListener('dragover', e => {
    e.preventDefault()
    dragingItem.style.display = 'none'
    // document.body.append(dragingItem);
    // dragingItem.style.position = 'absolute'
    // dragingItem.style.left = e.pageX + 'px'
    // dragingItem.style.top = e.pageY + 'px'
})
function toggleCellHightlight(e) { if (e.target.classList && e.target.classList.contains('cell')) e.target.classList.toggle('hot') }
document.addEventListener('dragenter', toggleCellHightlight)
document.addEventListener('dragleave', toggleCellHightlight)
document.addEventListener('drop', e => {
    e.preventDefault()
    if (e.target.classList.contains('cell')) {
        e.target.classList.remove('hot')
        e.target.appendChild(dragingItem)
    }
    dragingItem.style.display = 'flex'
    // dragingItem.style.position = 'relative'
    // dragingItem.style.left = '0px'
    // dragingItem.style.top = '0px'
    dragingItem = null
})

// Init the game
for (let i = 0; i < 100; i++) {
    const cell = document.createElement('span')
    cell.id = `cell-${i}`
    cell.classList.add('cell')
    grid.appendChild(cell)
}
shipMove(carrier, 0, 0)
shipMove(battleship, 0, 1)
shipMove(cruiser, 0, 2)
shipMove(submarine, 0, 3)
shipMove(destroyer, 0, 4)