代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>石头剪刀布</title>
<style type="text/css">
div{
border:3px solid red;
float: left;
margin-left: 20%;
padding: 10px;
text-align: center;
background-color: pink
}
img{
height: 100px;
margin:10px;
border:1px solid blue;
opacity: 0.4
}
ul{
list-style: none;
margin-left: 20%
}
li{
display: inline;
}
span{
width: 70px;
float: left;
background-color: teal;
padding:5px;
}
</style>
</head>
<body>
<div>
<strong>电脑玩家</strong> <br>
<img src="rock.jpg" alt="" style="opacity:1.0"> <br>
<strong>玩家</strong> <br>
<img src="scissor.jpg" alt="scissor" onm ouseover="over(this)" onm ouseout="out(this)" onclick="myClick(this)">
<img src="rock.jpg" alt="rock" onm ouseover="over(this)" onm ouseout="out(this)" onclick="myClick(this)">
<img src="paper.jpg" alt="paper" onm ouseover="over(this)" onm ouseout="out(this)" onclick="myClick(this)"> <br>
<ul>
<li><span><b>胜利</b></span></li>
<li><span><b>平手</b></span></li>
<li><span><b>失败</b></span></li>
</ul>
<ul style="clear:left">
<li><span id="win"><b>0</b></span></li>
<li><span id="sci"><b>0</b></span></li>
<li><span id="lose"><b>0</b></span></li>
</ul>
</div>
</body>
<script type="text/javascript">
var img=document.getElementsByTagName('img')[0];
/*鼠标移入移出改变图片透明度*/
function over(divDom){
divDom.style.opacity=1.0;
}
function out(divDom){
divDom.style.opacity=0.4;
}
/*页面加载，电脑玩家图片一致循环替换*/
var i=0;
function load() {
i++;
var m=i%3;
switch(m){
case 0:
img.src="scissor.jpg";
break;
case 1:
img.src="rock.jpg";
break;
case 2:
img.src="paper.jpg";
break;
}
setTimeout(load,100);
}
load();
/*封装玩家点击事件*/
var s=0;
var l=0;
var w=0;
function myClick(divDom) {
if(divDom.alt=="scissor"){
//此时玩家是剪刀
switch(i%3){
case 0://电脑为剪刀
alert("平手");
document.getElementById("sci").innerHTML=++s;
break;
case 1://电脑为石头
alert("失败");
document.getElementById("lose").innerHTML=++l;
break;
case 2://电脑为布
alert("胜利");
document.getElementById("win").innerHTML=++w;
break;
}
}else if(divDom.alt=="rock"){
//此时玩家是石头
switch(i%3){
case 0://电脑为剪刀
alert("胜利");
document.getElementById("win").innerHTML=++w;
break;
case 1://电脑为石头
alert("平手");
document.getElementById("sci").innerHTML=++s;
break;
case 2://电脑为布
alert("失败");
document.getElementById("lose").innerHTML=++l;
break;
}
}else if(divDom.alt=="paper"){
//此时玩家是布
switch(i%3){
case 0://电脑为剪刀
alert("失败");
document.getElementById("lose").innerHTML=++l;
break;
case 1://电脑为石头
alert("胜利");
document.getElementById("win").innerHTML=++w;
break;
case 2://电脑为布
alert("平手");
document.getElementById("sci").innerHTML=++s;
break;
}
}
}
</script>
</html>
最后实现的效果如下:
玩法:电脑会以较快速度随机刷新石头剪刀和布三种中的一种，玩家通过点击下方的图片来选择出石头剪刀还是布，这里面有胜利，失败和平手三种情况，出现的每种情况都会被记录在下方。
这个小游戏主要用到了JS中的鼠标点击事件以及鼠标的移入移出事件，其中涉及到的图片请自行准备。