<!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>
.all {
width: 1000px;
border: 1px solid red;
margin: auto;
height: 500px;
overflow: hidden;
}
.player {
width: 400px;
height: 100%;
float: left;
border-right: 1px solid red;
}
.center {
width: 200px;
height: 100%;
float: left;
}
.computer {
width: 398px;
height: 100%;
float: right;
border-left: 1px solid red;
}
.center h1 {
text-align: center;
}
.center .guess-btn {
width: 150px;
height: 150px;
-webkit-border-radius: 75px;
margin: 0 auto;
margin-top: 100px;
background: red;
}
.guess-btn h3 {
text-align: center;
line-height: 150px;
vertical-align: middle;
}
ul {
width: 200px;
padding: 0;
list-style-type: none;
position: relative;
}
.player-value {
position: relative;
;
left: 150px;
}
.computer img {
margin-top: 180px;
}
</style>
</head>
<body>
<div class="all">
<div class="player">
<div>
<label>玩家</label>
<label id="name">张三</label>
<label>分数</label>
<label>90</label>
</div>
<div>
<ul>
<li data-value="2">
<img src="images/stone.png" alt="">
</li>
<li data-value="0">
<img src="images/cloth.png" alt="">
</li>
<li data-value="1">
<img src="images/clipper.png" alt="">
</li>
</ul>
</div>
</div>
<div class="center">
<h1 id="result">YOU WIN</h1>
<div class="guess-btn">
<h3>出拳</h3>
</div>
</div>
<div class="computer">
</div>
</div>
<script>
window.onload = function () {
//玩家
function Player() {
this.name;
this.score = 100;
}
// 玩家出拳
Player.prototype.guess = function () {
let playerValue = document.querySelector(".player-value");
return playerValue.dataset.value;
}
//电脑
function Computer() { }
//电脑出拳
Computer.prototype.random = function () {
let rand = parseInt(Math.random() * 3);
switch(rand){
case 0:computerNode.innerHTML = "<img src='images/cloth.png'>";break;
case 1:computerNode.innerHTML = "<img src='images/clipper.png'>";break;
case 2:computerNode.innerHTML = "<img src='images/stone.png'>";break;
}
return rand;
}
//裁判
function Judg() {
this.player = new Player();
this.computer = new Computer();
}
//裁判判断赢家
Judg.prototype.check = function () {
let playerValue = this.player.guess();
let computerValue = this.computer.random();
if (playerValue > computerValue) {
if (playerValue - computerValue == 2) {
result.innerHTML = "YOU LOSE";
} else {
result.innerHTML = "YOU WIN";
}
} else if (playerValue < computerValue) {
if (playerValue - computerValue == 2) {
result.innerHTML = "YOU WIN";
} else {
result.innerHTML = "YOU LOSE";
}
}else{
result.innerHTML = "DRAW";
}
}
let lis = document.querySelectorAll("ul>li");
let btn = document.querySelector(".guess-btn");
let result = document.getElementById("result");
let computerNode = document.querySelector(".computer");
let judg = new Judg();
btn.onclick = function () {
judg.check();
}
for (let i = 0; i < lis.length; i++) {
lis[i].onclick = function () {
for (let j = 0; j < lis.length; j++) {
lis[j].className = "";
}
this.className = "player-value";
}
}
}
</script>
</body>
</html>