35 lines
1.7 KiB
JavaScript
35 lines
1.7 KiB
JavaScript
const player = io()
|
|
|
|
document.body.addEventListener('keyup', (event) => {
|
|
const shape = { 68: 'rock', 70: 'paper', 83: 'scissors' }[event.keyCode]
|
|
if (shape) player.emit('shape', shape)
|
|
})
|
|
|
|
function rename() {
|
|
const name = prompt('请输入您的名字')
|
|
if (name) player.emit('rename', name)
|
|
}
|
|
|
|
player.on('status', (status) => {
|
|
const player1 = document.querySelector('#player1 .name')
|
|
const player2 = document.querySelector('#player2 .name')
|
|
player1.innerText = status.player1.name
|
|
player2.innerText = status.player2.name
|
|
if (status.player1.id == player.id || status.player2.id == player.id) {
|
|
const isPlayer1 = status.player1.id == player.id
|
|
player1.style.color = isPlayer1 ? 'blue' : 'red'
|
|
player1.style.cursor = isPlayer1 ? 'pointer' : ''
|
|
player1.onclick = isPlayer1 ? rename : null
|
|
player2.style.color = isPlayer1 ? 'red' : 'blue'
|
|
player2.style.cursor = isPlayer1 ? '' : 'pointer'
|
|
player2.onclick = isPlayer1 ? null : rename
|
|
}
|
|
document.querySelector('#player1 .score').innerText = status.player1.score
|
|
document.querySelector('#player2 .score').innerText = status.player2.score
|
|
document.querySelector('#player1 .shape').style.backgroundImage = status.player1.shape ? `url(${status.player1.shape}.png)` : ''
|
|
document.querySelector('#player2 .shape').style.backgroundImage = status.player2.shape ? `url(${status.player2.shape}.png)` : ''
|
|
document.querySelector('#player1 .shape').style.filter = status.player1.result == 'defeated' ? 'grayscale(75%)' : ''
|
|
document.querySelector('#player2 .shape').style.filter = status.player2.result == 'defeated' ? 'grayscale(75%)' : ''
|
|
document.querySelector('audio').play()
|
|
})
|