js实现简单的猜拳小游戏
代码语言:html
所属分类:游戏
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { display: grid; place-content: center; height: 100vh; font-size: 80px; background: #333; overflow: hidden; min-width: 300px; user-select: none; } #player span { cursor: pointer; transition: opacity 0.5s; opacity: 1; } #player span.hidden { opacity: 0; } #pc { position: absolute; top: 40px; left: calc(50vw - 40px); transform: rotate(180deg); transition: top 0.5s; } #pc.hidden { top: -120px; } p { position: absolute; width: 100vw; text-align: center; bottom: 40px; margin: 0; color: #fff; transition: bottom 0.5s; } p.hidden { bottom: -200px; } </style> </head> <body translate="no"> <span id="pc" class="hidden">✊</span> <div id="player"> <span id="rock">✊</span> <span id="paper">🤚</span> <span id="scissor">✌️</span> </div> <p class="hidden">You Win!</p> <script> const spans = document.querySelectorAll('#player span'); const pc = document.querySelector('#pc'); const msg = document.querySelector('p'); var target; const clicked = function (event) { if (!document.body.classList.contains('noclick')) { document.body.classList.add('noclick'); target = event.target; for (var sp.........完整代码请登录后点击上方下载按钮下载查看
网友评论0