JavaWeb部分
猜拳小游戏
(三张图片用csdn博客作为存储服务器)
效果图
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>猜拳小游戏</title>
</head>
<body onload="timedong()">
<!--结构-->
<div id="bg" style="background-color: chocolate; width: 300px; height: 490px; ">
<!--标题-->
<h1 align="center" style="color: white">猜拳小游戏</h1>
<!--
描述：玩家选择结果显示部分
-->
<div id="1" style="float: left; border-style: double; border-width: 2px ; width: 126px; height: 155px;">
<p align="center" ><font color="white"><b>玩家</b></font></p>
<p align="center"><img src="https://img-blog.csdn.net/20180628004438406?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L290bXFpeGk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70" id="user" /></p>
</div>
<!--
描述：中框
-->
<div style="float:left; width: 40px; height: auto;">
<p align="center"><font size="5">VS</font></p>
</div>
<!--
描述：电脑随机结果显示框
-->
<div id="2" style="float: left; border-style: double ; border-width: 2px; width: 126px; height: 155px;">
<p align="center"><font color="white"><b>电脑</b></font></p>
<p align="center"><img src="https://img-blog.csdn.net/20180628004438406?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L290bXFpeGk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70" id="computer"/></p>
</div>
<!--
描述：结果显示及重来按钮位置框
-->
<div id="mid" style="float: left; border-style: double ; border-width: 2px; width: 296px; height: 100px;">
<p align="center"><font color="wheat" size="6"><span id="result"><b>你出什么呢?</b></span></font></p>
<p align="center"><button type="button" onclick="reloadweb()">重来</button></p>
</div>
<!--
描述：显示选择框
-->
<div id="3" style="float:left;border-style: double ; border-width: 2px; width: 146px; height: 155px;">
<p align="center"><font color="white"><b>您的选择</b></font></p>
<p align="center"><img src="https://img-blog.csdn.net/20180628004438406?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L290bXFpeGk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70" id="userchoose"/></p>
</div>
<!--
作者：[email protected]
时间：2018-06-27
描述：选择位置
-->
<div id="4" style="float: left;border-style: double ; border-width: 2px; width: 146px; height: 155px;">
<p align="center"><font color="white"><b>请选择</b></font></p>
<p>
<form id="choose1" action="" style="margin-left:20%;">
<select id="choose" onchange="change()">
<option>---请选择---</option>
<option value="0">锤头</option>
<option value="1">剪刀</option>
` <option value="2">布</option>
</select>
<button type="button" id="update" style="margin-top: 10%; margin-left: 20%;" onclick="show()" ><span id="end">确定</span></button>
</form>
</p>
</div>
</div>
<script type="text/javascript">
// 定义一个数组固定存储图片链接
var arr = new Array();
arr[0]="https://img-blog.csdn.net/20180628004438406?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L290bXFpeGk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70";
arr[1]="https://img-blog.csdn.net/20180628004443903?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L290bXFpeGk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70";
arr[2]="https://img-blog.csdn.net/20180628004450161?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L290bXFpeGk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70";
// 显示选项
function change(){
var chosid=document.getElementById("choose");
var displayid=document.getElementById("userchoose");
var val = chosid.value;
if(val==0){
displayid.src=arr[0];
}else if(val==1){
displayid.src=arr[1];
}else if(val==2){
displayid.src=arr[2];
}
}
// 电脑的随机选择
function cptch(){
var compid = document.getElementById("computer");
var chosid = document.getElementById("choose");
var result = document.getElementById("result");
var val = chosid.value;
var num=Math.random()*10;
num = Math.ceil(num);
num = num%3;
if(num==0){
compid.src=arr[0];
if(val==0){
result.innerHTML="平局";
}else if(val==1){
result.innerHTML="你输了";
}else if(val==2){
result.innerHTML="你赢了";
}
}else if(num==1){
compid.src=arr[1];
if(val==0){
result.innerHTML="你赢了";
}else if(val==1){
result.innerHTML="平局";
}else if(val==2){
result.innerHTML="你输了";
}
}else if(num==2){
compid.src=arr[2];
if(val==0){
result.innerHTML="你输了";
}else if(val==1){
result.innerHTML="你赢了";
}else if(val==2){
result.innerHTML="平局";
}
}
}
// 确定选项
function show(){
window.clearInterval(dongId);
var userid = document.getElementById("user");
var chosid = document.getElementById("choose");
// 根据选择进行替换图片
var val = chosid.value;
if(val==0){
userid.src=arr[0];
}else if(val==1){
userid.src=arr[1];
}else if(val==2){
userid.src=arr[2];
}
// 确定选项调用电脑出拳即判断函数
cptch();
}
// 动画部分
// 标记
var index=0;
// 定义定时切换函数的ID
var dongId;
// 定时切换图片
function timedong(){
dongId = window.setInterval(dong,100);
}
// 随机替换图片地址
function dong(){
var compid = document.getElementById("computer");
if(index==arr.length-1){
index=0;
}else{
index+=1;
}
compid.src=arr[index];
}
// 重来按钮调用的函数
function reloadweb(){
location.reload();
}
</script>
</body>
</html>