关闭

石头剪刀布小游戏

标签: html中软国际
89人阅读 评论(0) 收藏 举报

提前班,小游戏1:石头剪刀布(CODE为HTML编写,IDE为HBuilder)。

<!DOCTYPE html>
<html>


<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">

//定义一个playgame的方法。
function PlayGame(yourNumber) {

//电脑随机产生一个1-3的数字,代表电脑随机出石头剪刀布。
var comNumber = parseInt(Math.random()*3)+1;
//给变量赋值的时候,不能加上.innerHTML 也不能用phaseInt()来转换类型,直接赋值
var MyMoney = document.getElementById("MyMoney");
var ComMoney = document.getElementById("ComMoney");
//逻辑判断谁大谁小
if(yourNumber == 1){
if(comNumber == 1){

//更换所显示的图片为对应所出的石头剪刀布
document.getElementById("MyPicture").src = "img2/石头.png";
document.getElementById("ComPicture").src = "img2/石头.png";

//更换电脑的出拳内容对应的文字
document.getElementById("ComReady").innerHTML = "<font color='red'>石头</font>";
alert("平局");
}else if(comNumber == 2){
document.getElementById("MyPicture").src = "img2/石头.png";
document.getElementById("ComPicture").src = "img2/剪刀.png";
document.getElementById("ComReady").innerHTML = "<font color='red'>剪刀</font>"

alert("你贏了");

//对应的积分值
MyMoney.innerHTML = parseInt(MyMoney.innerHTML) + 100;
ComMoney.innerHTML = parseInt(ComMoney.innerHTML) - 100;

//对所剩积分进行查询,是否仍然大于0以继续进行游戏
CheckMoney();
}else{
document.getElementById("MyPicture").src = "img2/石头.png";
document.getElementById("ComPicture").src = "img2/布.png";
document.getElementById("ComReady").innerHTML = "<font color='red'>布</font>";
alert("你輸了");
MyMoney.innerHTML = parseInt(MyMoney.innerHTML) - 100;
ComMoney.innerHTML = parseInt(ComMoney.innerHTML) + 100;
CheckMoney();
}
} else if(yourNumber == 2){
if(comNumber == 1){
document.getElementById("MyPicture").src = "img2/剪刀.png";
document.getElementById("ComPicture").src = "img2/石头.png";
document.getElementById("ComReady").innerHTML = "<font color='red'>石头</font>";
alert("你輸了");
MyMoney.innerHTML = parseInt(MyMoney.innerHTML) - 100;
ComMoney.innerHTML = parseInt(ComMoney.innerHTML) + 100;
CheckMoney();
}else if(comNumber == 2){
document.getElementById("MyPicture").src = "img2/剪刀.png";
document.getElementById("ComPicture").src = "img2/剪刀.png";
document.getElementById("ComReady").innerHTML = "<font color='red'>剪刀</font>";
alert("平局");

}else{
document.getElementById("MyPicture").src = "img2/剪刀.png";
document.getElementById("ComPicture").src = "img2/布.png";
document.getElementById("ComReady").innerHTML = "<font color='red'>布</font>";
alert("你贏了");
MyMoney.innerHTML = parseInt(MyMoney.innerHTML) + 100;
CheckMoney();
}
}else {
if(comNumber == 1){
document.getElementById("MyPicture").src = "img2/布.png";
document.getElementById("ComPicture").src = "img2/石头.png";
document.getElementById("ComReady").innerHTML = "<font color='red'>石头</font>";
alert("你贏了");
MyMoney.innerHTML = parseInt(MyMoney.innerHTML) + 100;
ComMoney.innerHTML = parseInt(ComMoney.innerHTML) - 100;
CheckMoney();
}else if(comNumber == 2){
document.getElementById("MyPicture").src = "img2/布.png";
document.getElementById("ComPicture").src = "img2/剪刀.png";
document.getElementById("ComReady").innerHTML = "<font color='red'>剪刀</font>";
alert("你輸了");
MyMoney.innerHTML = parseInt(MyMoney.innerHTML) - 100;
ComMoney.innerHTML = parseInt(ComMoney.innerHTML) + 100;
CheckMoney();
}else{
document.getElementById("MyPicture").src = "img2布.png";
document.getElementById("ComPicture").src = "img2/布.png";
document.getElementById("ComReady").innerHTML = "<font color='red'>布</font>";
alert("平局");
CheckMoney();
}
}

}


//查询功能
function CheckMoney(){

var MyMoney = document.getElementById("MyMoney").innerHTML;
var ComMoney = document.getElementById("ComMoney").innerHTML;
if(MyMoney == 0){
alert("你输光了");
alert("");

//如果小于0,则初始化电脑和玩家的最初的状态
InnitalLogin();

}
if(ComMoney == 0){
alert("电脑输光了");
InnitalLogin();

}
}
//初始化功能,调用其对应的内容来初始化
function InnitalLogin(){
document.getElementById("MyPicture").src = "img2/电脑.png";
document.getElementById("ComPicture").src = "img2/用户.png";
document.getElementById("MyMoney").innerHTML = 200;
document.getElementById("ComMoney").innerHTML = 200;
document.getElementById("ComReady").innerHTML = "准备";




}


</script>
</head>


<body>

//用table来搭建基础的框架(只学了table)
<table width="1000px" align="center">
<tr>
<td colspan="2" align="center">
<font size="5" color="brown">石头剪刀布小游戏</font>
</td>
</tr>
<tr>

//用span来给需要改变的内容赋id以调用
<td> 独孤求败的分数:<span id = "MyMoney">200</span></td>
<td align="right">电脑的分数<span id = "ComMoney">200</span></td>
</tr>
<tr>
<td>我出拳:

//把不同的石头剪刀布对应成不同的数值
<input type="button" value="石头" onclick="PlayGame(1)" />
<input type="button" value="剪刀" onclick="PlayGame(2)" />
<input type="button" value="布" onclick="PlayGame(3)" />
</td>
<td align="right">电脑出拳:<span id = "ComReady">准备</span></td>


</tr>
<tr>
<td><img id = "MyPicture"src="img2/电脑.png" /></td>
<td align="right"><img id ="ComPicture" src="img2/用户.png" /></td>


</tr>
</table>
</body>


</html>

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:724次
    • 积分:84
    • 等级:
    • 排名:千里之外
    • 原创:8篇
    • 转载:1篇
    • 译文:0篇
    • 评论:0条