javascript基礎-猜拳遊戲

時間  2020-04-24
標籤 javascript 基礎 猜拳 遊戲 欄目 JavaScript 简体版
原文   原文鏈接 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>分歧終端機-和諧社會</title>
	<script language="javascript" type="text/javascript">
		var time;
		var pid,tid;
		var qvan=["p_w_picpaths/石頭.jpg","p_w_picpaths/剪刀.jpg","p_w_picpaths/布.jpg"];
		var sum=0;
		var policesum=0;
		var terroristsum=0;
		var peacesum=0;
		function mystart(){
			document.getElementById("resultimg").innerHTML="";
			pid=Math.floor(Math.random()*3);
			tid=Math.floor(Math.random()*3);
			policeimg.src=qvan[pid];
			terroristimg.src=qvan[tid];
			document.getElementById("startbtn").disabled=true;
			document.getElementById("stopbtn").disabled=false;
			time=setTimeout(mystart,100);
		}
		function mystop(){
			document.getElementById("startbtn").disabled=false;
			document.getElementById("stopbtn").disabled=true;
			clearTimeout(time);
			sum+=1;
			document.getElementById("count").innerText=sum;
			if(pid==0&&tid==1||pid==1&&tid==2||pid==2&&tid==0){
				policesum+=1;
				document.getElementById("policewinimg").height+=10;
				document.getElementById("policewin").innerText=policesum;
				document.getElementById("resultimg").innerHTML="<img src='p_w_picpaths/警察.gif' width='100' height='100'>警察得到勝利";
			}else if(pid==tid){
				peacesum+=1;
				document.getElementById("peace").innerText=peacesum;
				document.getElementById("resultimg").innerHTML="<img src='p_w_picpaths/和平.jpg' width='100' height='100'>警察與恐怖分子和平共處";
			}else{
				terroristsum+=1;
				document.getElementById("terroristwinimg").height+= 10;
				document.getElementById("terroristwin").innerText=terroristsum;
				document.getElementById("resultimg").innerHTML="<img src='p_w_picpaths/恐怖分子.gif' width='100' height='100'>恐怖分子得到了勝利";
			}
		}
    </script>
</head>

<body>
<center>
<h1>讓世界和平起來</h1>
  <p>
     <b>
         <font style="color:#000; font-size:4;">第</font>
         <font style="color:red;font-size:4;" id="count">0</font>
         <font style="color:#000; font-size:4;">局、</font>
         <font style="color:#000; font-size:4;">和平：</font>
         <font style="color:blue;font-size:4;" id="peace">0</font>
         <font style="color:#000; font-size:4;">次</font>
      </b>
   </p><hr/>
   <p>
         <img src="p_w_picpaths/成績.jpg" id="policewinimg" height="1" width="20">
        <font style="color:red;font-size:4">警察</font>
       
             <font style="color:blue;font-size:4">win:</font>
             <font style="color:blue;font-size:4" id="policewin">0</font>
             <font style="color:blue;font-size:4">次</font>
         </b>
         <img src="p_w_picpaths/警察.gif" id="policeimg" width="260" height="260">
         <img src="p_w_picpaths/pk.jpg" style="width:100px;height:90px">
         <img src="p_w_picpaths/恐怖分子.gif" id="terroristimg" width="260" height="260">
         <img src="p_w_picpaths/成績.jpg" id="terroristwinimg" height="1" width="20">
         <font style="color:#FF0000;font-size:5">恐怖分子</font>
         <font style="color:blue;font-size:4">win:</font>
         <font style="color:blue;font-size:4" id="terroristwin">0</font>
         <font style="color:blue;font-size:4">次</font>
   </p>
   <p>
         <input type="button" value="開始" id="startbtn" onclick="mystart()" />
         <input type="button" value="結束" id="stopbtn" onclick="mystop()" disabled="disabled" />
   </p>
   <h2 id="resultimg"></h2>
</center>
</body>
</html>

wKioL1c5vwzw-xWHAAGAn3oKUMA772.png

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程