结合JavaScript和html写一个简单的猜拳游戏

最新推荐文章于 2024-05-17 16:11:06 发布

qq_36019891

最新推荐文章于 2024-05-17 16:11:06 发布

阅读量1.9k

点赞数 3

CC 4.0 BY-SA版权

文章标签： javascript html 游戏

本文链接：https://blog.youkuaiyun.com/qq_36019891/article/details/52842148

本文介绍了一个简单的网页版石头剪刀布游戏实现方法。通过JavaScript进行逻辑处理，包括随机生成电脑选择、判断输赢并更新显示结果。玩家可以通过点击按钮进行游戏。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>石头剪刀布游戏</title>
</head>
<script type="text/javascript">
function Game(type){
var mth=parseInt(Math.random()*3+1);
comimg(type,mth);
var ss=document.getElementById("play");
switch (type){
case 1:
ss.src="img/石头.jpg";
break;
case 2:
ss.src=" img/剪刀.png"
break;
case 3:
ss.src=" img/布.jpg"
break;
}

if(type==mth){
document.getElementById("text").value="平局！！！！！！！"
}else if(type==1 && mth==2){
document.getElementById("text").value="你赢了！！！！"
}else if(type==1 && mth==3){
document.getElementById("text").value="你输了！！！！！1"
}else if(type==2 && mth==1){
document.getElementById("text").value="你输了！！！！！1"
}else if(type==2 && mth==3){
document.getElementById("text").value="你赢了！！！！1"
}else if(type==3 && mth==1){
document.getElementById("text").value="你赢了！！！！！！！1"
}else if(type==3 && mth==2){
document.getElementById("text").value="你输了！！！！！！"
}

}

function comimg (type,mth) {
var ss1=document.getElementById("playy");
switch (mth){
case 1:
ss1.src="img/石头.jpg";
break;
case 2:
ss1.src="img/剪刀.png";
break;
case 3:
ss1.src="img/布.jpg";
break;
}
}
</script>
<body>
<div style="width: 400px;height: 400px;display: inline;"><img src="img/石头.jpg" id="play" style="width: 350px;height: 350px;" ></div>
<div style="width: 400px;height: 400px;display: inline;"><img src="img/石头.jpg" id="playy" style="width: 350px;height: 350px;" ></div>

<input type="button" value="石头" onclick="Game(1)" />
<input type="button" value="剪刀" onclick="Game(2)" />
<input type="button" value="布" onclick="Game(3)" />
<input type="text" id="text" style="width: 100px; height: 20px; font-family: '新宋体';" />
</body>
</html>