德清建设银行网站,兰州工程建设信息网站,wordpress china,网站建设(信科网络)HTML5CSSJavaScript剪子石头布游戏 用HTML5CSSJavaScript剪子石头布游戏实现剪子石头布游戏#xff0c;游戏有成绩计数#xff0c;人、机输赢情况#xff0c;及平局情况。
✂代表剪刀#xff0c;▉代表石头#xff0c;▓ 代表布#xff0c;给出人机双方的出拳情况
游戏…HTML5CSSJavaScript剪子石头布游戏 用HTML5CSSJavaScript剪子石头布游戏实现剪子石头布游戏游戏有成绩计数人、机输赢情况及平局情况。
✂代表剪刀▉代表石头▓ 代表布给出人机双方的出拳情况
游戏规则
剪刀胜布剪刀可以剪断布。
石头胜剪刀石头可以砸坏剪刀。
布胜石头布可以包住石头。 先看运行效果图 源码如下
!DOCTYPE html
html langzh
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title剪子石头布游戏/titlestylebody {font-family: Arial, sans-serif;text-align: center;background-color: #f0f0f0;}.container {margin-top: 50px;}.choices button {width: 80px; /* 设置按钮宽度 */ height: 50px; /* 设置按钮高度 */ font-size: 20px;padding: 10px 20px;margin: 10px;cursor: pointer;}.result {font-size: 24px;margin-top: 20px;}.scoreboard {margin-top: 30px;font-size: 20px;}/style
/head
bodydiv classcontainerh1剪子石头布游戏/h1div classchoicesbutton onclickplayGame(✂️)✂️/buttonbutton onclickplayGame(▉)▉/buttonbutton onclickplayGame(▓)▓/button/divdiv classresultp idresultText请选择您的出拳/pp idChoice出拳情况: /p/divdiv classscoreboardp玩家胜利: span idplayerWins0/span 电脑胜利: span idcomputerWins0/span 平局: span idties0/span /p/div/divscriptlet playerWins 0;let computerWins 0;let ties 0;function playGame(playerChoice) {const choices [✂️, ▉, ▓];const computerChoice choices[Math.floor(Math.random() * choices.length)];document.getElementById(Choice).textContent 玩家出拳: ${playerChoice} 电脑出拳: ${computerChoice};let result ;if (playerChoice computerChoice) {result 平局!;ties;} else if ((playerChoice ✂️ computerChoice ▓) ||(playerChoice ▉ computerChoice ✂️) ||(playerChoice ▓ computerChoice ▉)) {result 你赢了!;playerWins;} else {result 电脑赢了!;computerWins;}document.getElementById(resultText).textContent result;document.getElementById(playerWins).textContent playerWins;document.getElementById(computerWins).textContent computerWins;document.getElementById(ties).textContent ties;}/script
/body
/html