<html>
<head>
<style>
.a>button,.b>button,.c>button{display:inline-block;border:2px solid black;
width:50px;height:50px;margin:2px;padding:22px;font-size:30px}
*{box-sizing: border-box}
</style>
</head>
<body>
<div class="a">
<button id="x-1" onclick="xo.do(this)">
</button>
<button id="x-2" onclick="xo.do(this)">
</button>
<button id="x-3" onclick="xo.do(this)">
</button>
</div>
<div class="b">
<button id="x-4" onclick="xo.do(this)">
</button>
<button id="x-5" onclick="xo.do(this)"></button>
<button id="x-6" onclick="xo.do(this)">
</button>
</div>
<div class="c">
<button id="x-7" onclick="xo.do(this)">
</button>
<button id="x-8" onclick="xo.do(this)">
</button>
<button id="x-9" onclick="xo.do(this)">
</button>
</div>
<div class="d">
</div>
<script>
var xo={
get(query){
if(document.getElementById(query).innerHTML=="o"||document.getElementById(query).innerHTML=="x"){
return document.getElementById(query).innerHTML}else{
return Math.random()
}
},
do(self){
if(self.innerHTML!="x" && self.innerHTML!="o"){
if(xo.step%2==0){
self.innerHTML="x"
}else{
self.innerHTML="o"
}
xo.step++;
if(xo.verify())xo.win()
}
},
verify(){
if(xo.get("x-1")===xo.get("x-2") && xo.get("x-2")===xo.get("x-3"))return true;
if(xo.get("x-4")===xo.get("x-5") && xo.get("x-5")===xo.get("x-6"))return true;
if(xo.get("x-7")===xo.get("x-8") && xo.get("x-8")===xo.get("x-9"))return true;
if(xo.get("x-1")===xo.get("x-4") && xo.get("x-4")===xo.get("x-7"))return true;
if(xo.get("x-2")===xo.get("x-5") && xo.get("x-5")===xo.get("x-8"))return true;
if(xo.get("x-3")===xo.get("x-6") && xo.get("x-6")===xo.get("x-9"))return true;
if(xo.get("x-1")===xo.get("x-5") && xo.get("x-5")===xo.get("x-9"))return true;
if(xo.get("x-3")===xo.get("x-5") && xo.get("x-5")===xo.get("x-7"))return true;
if(xo.step===9)return false;
},
win(){
document.querySelector(".d").innerHTML=xo.step%2==0?"o赢了":"x赢了"
},
step: 0
}
</script>
</body>
</html>
----Comments(2)----
@yucho | at 2020-02-28 03:12:
这纯粹是靠运气吧。。。。。。
@yucho | at 2020-02-27 23:37:
好像没有反应呢