一：游戏实现显示输赢的弹窗
二：应该有两个部分，ai和自己
三：整个环境在vscode下运行
四：页面无法展示石头剪刀布的照片，可能是所选中的石头剪刀布的图片没下载，有问题可以评论，我给你们解决！
五：代码区展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>石头剪刀布</title>
</head>
<body>
<h1>石头剪刀布</h1>
<div class="main">
<div id="ai">
<img id="ai_img"src="./新建文件夹/剪刀.jpg" alt="./">
<!--../ 进到当前目录的上一级-->
</div>
<div id="user">
<img id="user_img" src="./新建文件夹/剪刀.jpg" alt="">
<input type="radio" name="user_choose" value="0" οnclick="change(this.value)"checked>剪刀
<input type="radio" name="user_choose" value="1" οnclick="change(this.value)">石头
<input type="radio" name="user_choose" value="2" οnclick="change(this.value)">布
<button oncliCk="check()">确定选择</button>
<button oncliCk="reset()">重新开始</button>
</div>
</div>
</body>
<script>
var ai_choose = 0
var user_choose = 0
//选择单选按钮时更改
function change(select){
if(select==0){
user_img.setAttribute("src","./新建文件夹/剪刀.jpg")
user_choose=0
}else if(select==1){
user_img.setAttribute("src","./新建文件夹/石头.jpg")
user_choose=1
}else if(select==2){
user_img.setAttribute("src","./新建文件夹/布.jpg")
user_choose=2
}
}
var imgs=["./新建文件夹/剪刀.jpg","./新建文件夹/石头.jpg","./新建文件夹/布.jpg"]
var radomNum = 0
function changeImg(){
radomNum = parseInt(Math.random()*3)
ai_choose=radomNum
ai_img.setAttribute("src",imgs[radomNum])
}
var IntervalID=setInterval(changeImg,500)
function check(){
clearInterval(IntervalID)
if(ai_choose==user_choose){
alert("平局")
}else if(Math.abs(ai_choose-user_choose)==1){
if(ai_choose>user_choose){
alert("你输了")
}else{
alert("恭喜你，赢了")
}
}else if(Math.abs(ai_choose-user_choose)==2){
if(ai_choose<user_choose){
alert("你输了")
}else{
alert("恭喜你，赢了")
}
}
}
function reset(){
IntervalID=setInterval(changeImg,500)
}
</script>
</html>
六：效果页面展示：
1644
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
