zhaoxin/rock-paper-scissors
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

添加音效和灰色失败特效

Browse Source
This commit is contained in:
赵鑫 2022-08-21 11:01:52 +08:00
parent 127045ef4f
commit 62f3871cdc
4 changed files with 5 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
public/client.js
View File

@ -28,4 +28,7 @@ player.on('status', (status) => {
document.querySelector('#player2 .score').innerText = status.player2.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('#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('#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()
}) })

1
public/index.html
View File

@ -23,6 +23,7 @@
<div class="name">玩家乙</div> <div class="name">玩家乙</div>
</div> </div>
</div> </div>
<audio src="rock-paper-scissors.wav"></audio>
<p><kbd>S</kbd>出剪刀 <kbd>D</kbd>出石头 <kbd>F</kbd>出布 点击自己的名字可以改名</p> <p><kbd>S</kbd>出剪刀 <kbd>D</kbd>出石头 <kbd>F</kbd>出布 点击自己的名字可以改名</p>
<script src="socket.io/socket.io.js"></script> <script src="socket.io/socket.io.js"></script>
<script src="client.js"></script> <script src="client.js"></script>

BIN
public/rock-paper-scissors.wav Normal file
View File

Binary file not shown.

2
public/style.css
View File

@ -59,7 +59,7 @@ body {
border: 1px solid #777; border: 1px solid #777;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 200px 200px; background-size: 200px 200px;
transition: background-image 1s; /* 为什么没有作用？ */ transition: filter 1s;
} }
#player2 .shape { #player2 .shape {