102 lines
3.8 KiB
JavaScript
102 lines
3.8 KiB
JavaScript
|
let 游戏已开始 = false
|
|||
|
|
|
|||
|
|
const 我方舰队 = document.querySelectorAll('.战舰')
|
|||
|
|
|
|||
|
|
我方舰队.forEach((ship) => {
|
|||
|
|
// 拖拽开始记录拖拽位置
|
|||
|
|
ship.addEventListener('dragstart', (event) => {
|
|||
|
|
ship.classList.add('拖拽中')
|
|||
|
|
const rect = ship.getBoundingClientRect()
|
|||
|
|
ship.dataset.drag_left = event.clientX - rect.left
|
|||
|
|
ship.dataset.drag_top = event.clientY - rect.top
|
|||
|
|
event.dataTransfer.setData('mouse_x', event.layerX)
|
|||
|
|
event.dataTransfer.setData('mouse_y', event.layerY)
|
|||
|
|
|
|||
|
|
// DEBUG
|
|||
|
|
console.log(`拖动了${ship.id},拖动点位于船上(${ship.dataset.drag_left},${ship.dataset.drag_top})`)
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 拖拽结束更新战舰位置
|
|||
|
|
ship.addEventListener('dragend', (event) => {
|
|||
|
|
// const 其它战舰 = [...我方海域.querySelectorAll('.战舰:not(.拖拽中)')]
|
|||
|
|
|
|||
|
|
// event.dataTransfer.setData('a', event.clientX)
|
|||
|
|
// event.dataTransfer.setData('b', event.clientY)
|
|||
|
|
|
|||
|
|
let mouse_x = event.dataTransfer.getData('mouse_x')
|
|||
|
|
let mouse_y = event.dataTransfer.getData('mouse_y')
|
|||
|
|
let x = event.layerX
|
|||
|
|
let y = event.layerY
|
|||
|
|
console.log(parseInt(Math.ceil((x - mouse_x) / 60)), parseInt(Math.ceil((y - mouse_y) / 60)))
|
|||
|
|
|
|||
|
|
// 判断移动是否合法
|
|||
|
|
|
|||
|
|
// 更新战舰显示位置
|
|||
|
|
ship.style.left = `${ship.dataset.drop_left}px`
|
|||
|
|
ship.style.top = `${ship.dataset.drop_top}px`
|
|||
|
|
|
|||
|
|
ship.classList.remove('拖拽中')
|
|||
|
|
delete ship.dataset.drag_left
|
|||
|
|
delete ship.dataset.drag_top
|
|||
|
|
delete ship.dataset.drop_left
|
|||
|
|
delete ship.dataset.drop_top
|
|||
|
|
|
|||
|
|
// DEBUG
|
|||
|
|
// console.log(我方海域状态)
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 左键点击旋转战舰
|
|||
|
|
ship.addEventListener('click', (event) => {
|
|||
|
|
// TODO: 检查旋转是否合法：1游戏未开始，2没有碰撞其它战舰，3没有出边界
|
|||
|
|
if (游戏已开始) return
|
|||
|
|
ship.classList.toggle('水平放置')
|
|||
|
|
|
|||
|
|
// DEGUB
|
|||
|
|
console.log(`点击了[ ${ship.id} ]的[ ${event.target.id} ]甲板`)
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
我方海域.addEventListener('dragover', (event) => {
|
|||
|
|
event.preventDefault()
|
|||
|
|
const dragging_ship = document.querySelector('.拖拽中')
|
|||
|
|
if (event.target === 我方海域) {
|
|||
|
|
const 拖拽中的战舰 = document.querySelector('.拖拽中')
|
|||
|
|
拖拽中的战舰.dataset.drop_left = parseInt(Math.ceil(event.layerX - 拖拽中的战舰.dataset.drag_left + 30) / 60) * 60
|
|||
|
|
拖拽中的战舰.dataset.drop_top = parseInt(Math.ceil(event.layerY - 拖拽中的战舰.dataset.drag_top + 30) / 60) * 60
|
|||
|
|
|
|||
|
|
// DEBUG
|
|||
|
|
console.log(`拖拽到了(${拖拽中的战舰.dataset.drop_left}, ${拖拽中的战舰.dataset.drop_top})`)
|
|||
|
|
}
|
|||
|
|
// const 拖拽中的战舰 = document.querySelector('.拖拽中')
|
|||
|
|
// const other_ships = [...我方海域.querySelectorAll('.ship:not(.拖拽中)')]
|
|||
|
|
// let leading_ship = null
|
|||
|
|
// for (let ship of other_ships) {
|
|||
|
|
// const ship_rect = ship.getBoundingClientRect()
|
|||
|
|
// const mouse_offset = mouse_x - ship_rect.left - ship_rect.width / 2
|
|||
|
|
// if (mouse_offset > 0) leading_ship = ship
|
|||
|
|
// }
|
|||
|
|
// if (leading_ship) leading_ship.after(拖拽中的战舰)
|
|||
|
|
// else 我方海域.prepend(拖拽中的战舰)
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
我方海域.addEventListener('dragend', (event) => {
|
|||
|
|
// console.log(event)
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
敌方海域.addEventListener('click', (event) => {
|
|||
|
|
if (event.target !== 敌方海域) return
|
|||
|
|
|
|||
|
|
// 展开迷雾
|
|||
|
|
const area = document.createElement('div')
|
|||
|
|
if (Math.random() > 0.5) area.classList.add('平静海面')
|
|||
|
|
else area.classList.add('爆炸海面')
|
|||
|
|
const col = parseInt(event.layerX / 60)
|
|||
|
|
const row = parseInt(event.layerY / 60)
|
|||
|
|
area.style.left = `${col * 60}px`
|
|||
|
|
area.style.top = `${row * 60}px`
|
|||
|
|
敌方海域.append(area)
|
|||
|
|
|
|||
|
|
// DEBUG
|
|||
|
|
console.log(`炮击地方海域(${col}, ${row})`)
|
|||
|
|
})
|