//代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>猜拳</title>
<style>
.playgame {
width: 1200px;
margin: 0 auto;
border: 3px solid red;
display: flex;
}
ul>li {
list-style: none;
}
.middle {
width: 300px;
height: 450px;
border: 3px solid red;
border-top: transparent;
border-bottom: transparent;
font-weight: bold;
text-align: center;
}
h1 {
margin-top: 30px;
font-size: 40px;
}
p {
width: 150px;
height: 150px;
border: 3px solid red;
border-radius: 50%;
background-color: red;
color: white;
text-align: center;
line-height: 150px;
font-size: 34px;
margin: 60px auto 0;
}
.left {
width: 500px;
height: 450px;
list-style: none;
}
.right {
width: 400px;
height: 450px;
text-align: center;
line-height: 550px;
}
.player-value {
position: relative;
margin-left: 150px;
}
</style>
</head>
<body>
<div class="playgame">
<div class="left">
<div>
<span>玩家：</span>
<span>张三</span>
<span>分数</span>
<span></span>
</div>
<ul class="all">
<li data-value="0">
<img src="./images/clipper.png" alt="">
</li>
<li data-value="1">
<img src="./images/stone.png" alt="">
</li>
<li data-value="2">
<img src="./images/cloth.png" alt="">
</li>
</ul>
</div>
<div class="middle">
<h1 id="result">YOU WIN</h1>
<p class="button">出拳</p>
</div>
<div class="right" id="computer">
<img src="./images/clipper.png" alt="">
</div>
</div>
<script>
let lisArr = document.querySelectorAll('ul>li');//获取所有的li元素，返回一个伪数组
//玩家出拳绑定点击事件
for (let i = 0; i < lisArr.length; i++) {
lisArr[i].onclick = function () {
for (let j = 0; j < lisArr.length; j++) {
lisArr[j].className = "";
}
lisArr[i].className = "player-value";
}
}
//玩家对象
function Player() {
this.name;
this.score;
}
// 玩家出拳
Player.prototype.guess = function () {
let playerValue = document.querySelector('.player-value');
return playerValue.dataset.value;//获取到玩家出拳的value值并返回出去
}
//电脑出拳
let computer = document.getElementById('computer');
let button = document.getElementsByClassName('button');
button[0].onclick = function () {
judg.check();//点击时，调用裁判方法
}
//电脑
function Computer() { }
//电脑随机出拳
Computer.prototype.random = function () {
//电脑随机产生0~2的随机数
let random = parseInt(Math.random() * 3);
switch (random) {
case 0: computer.innerHTML = "<img src='./images/clipper.png'>";
break;
case 1: computer.innerHTML = "<img src='./images/stone.png'>";
break;
case 2: computer.innerHTML = "<img src='./images/cloth.png'>";
break;
}
return random;
}
//裁判
let result = document.getElementById('result');
function Judg() {
this.player = new Player();
this.computer = new Computer();
}
let judg = new Judg();//创建一个裁判对象（ 通过构造函数的方式创建），
//裁判判断赢家
Judg.prototype.check = function () {
let playerValue = this.player.guess();//调用玩家的value值
let computerValue = this.computer.random();//调用电脑的value值
//判断玩家和电脑的value值
if (playerValue - computerValue == 1 || playerValue - computerValue == -2) {
result.innerHTML = "YOU WIN";
} else if (playerValue - computerValue == -1 || playerValue - computerValue == 2) {
result.innerHTML = "YOU LOSE";
} else if (playerValue = computerValue) {
result.innerHTML = "DRAW";
}
}
</script>
</body>
</html>