<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>井字棋</title>
</head>
<body>
<style>
.jian{
width: 302px;
margin: 0 auto;
margin-top:10px;
}
.jian .start{
margin-bottom: 20px;
display: block;
}
.jian .s{
width:100px;
height: 100px;
background: #f2f2f2;
font-size: 80px;
color: #666;
text-align: center;
line-height: 100px;
}
.f-l{
float:left;
}
.f-r{
float: right;
}
</style>
<div class="jian">
<a class="start" href="javascript:game_start();">开始</a>
<div class="kuai">
<div class="s f-l" onclick="game_click(0,0)" id='0-0'>
</div>
<div class="s f-l" onclick="game_click(0,1)" id='0-1' style="border-left: 1px solid #666666;border-right: 1px solid #666666;">
</div>
<div class="s f-l" onclick="game_click(0,2)" id='0-2'>
</div>
<div class="s f-l" onclick="game_click(1,0)" id='1-0' style="border-top: 1px solid #666666;border-bottom: 1px solid #666666;">
</div>
<div class="s f-l" onclick="game_click(1,1)" id='1-1' style="border: 1px solid #666666;">
</div>
<div class="s f-l" onclick="game_click(1,2)" id='1-2' style="border-top: 1px solid #666666;border-bottom: 1px solid #666666;">
</div>
<div class="s f-l" onclick="game_click(2,0)" id='2-0'>
</div>
<div class="s f-l" onclick="game_click(2,1)" id='2-1' style="border-left: 1px solid #666666;border-right: 1px solid #666666;">
</div>
<div class="s f-l" onclick="game_click(2,2)" id='2-2'>
</div>
</div>
</div>
</body>
<script type="text/javascript">
var qi_data = [[0,0,0],[0,0,0],[0,0,0]];
var quan_data = [[0,0,0],[0,0,0],[0,0,0]];
var quan_type = 1;
var is_end = false;
var msg = '';
//开始游戏
var game_start = function(){
//1.重置参数
qi_data = [[0,0,0],[0,0,0],[0,0,0]];
quan_data = [[0,0,0],[0,0,0],[0,0,0]];
quan_type = 1;
is_end = false;
msg = '';
//2.渲染棋盘
game_rendering();
}
//走棋
var game_action,T = function(y,x,type){
//1.判断棋是否对规则
if(!game_action_pan(x,y,type)){
return alert('错误:'+msg);
}
//2.应用下棋
qi_data[y][x] = quan_type;
//3.渲染棋盘
game_rendering();
//4.是否出现赢家
var gameenddata = game_end(type);
if(gameenddata==0){
is_end = true;
return alert('恭喜【'+type+'号】玩家胜利!');
}else if(gameenddata==1){
is_end = true;
return alert('【平局】,要和平相处哦~');
}
//5.AI下棋
if(quan_type==1){quan_type=2;quan_pan_list();}else{quan_type=1}//切换下棋人
}
//权值
var quan_pan_list=function(){
//1.一级权值,可以赢的走棋
for(var i=0;i<=2;i++){
if((qi_data[0][i]==2&&qi_data[1][i]==2)&&qi_data[2][i]==0){
return T(2,i,2);
}
if((qi_data[0][i]==2&&qi_data[2][i]==2)&&qi_data[1][i]==0){
return T(1,i,2);
}
if((qi_data[1][i]==2&&qi_data[2][i]==2)&&qi_data[0][i]==0){
return T(0,i,2);
}
if((qi_data[i][0]==2&&qi_data[i][1]==2)&&qi_data[i][2]==0){
return T(i,2,2);
}
if((qi_data[i][0]==2&&qi_data[i][2]==2)&&qi_data[i][1]==0){
return T(i,1,2);
}
if((qi_data[i][1]==2&&qi_data[i][2]==2)&&qi_data[i][0]==0){
return T(i,0,2);
}
}
if((qi_data[0][0]==2&&qi_data[1][1]==2)&&qi_data[2][2]==0){
return T(2,2,2);
}
if((qi_data[0][0]==2&&qi_data[2][2]==2)&&qi_data[1][1]==0){
return T(1,1,2);
}
if((qi_data[1][1]==2&&qi_data[2][2]==2)&&qi_data[0][0]==0){
return T(0,0,2);
}
if((qi_data[0][2]==2&&qi_data[1][1]==2)&&qi_data[2][0]==0){
return T(2,0,2);
}
if((qi_data[0][2]==2&&qi_data[2][0]==2)&&qi_data[1][1]==0){
return T(1,1,2);
}
if((qi_data[1][1]==2&&qi_data[2][0]==2)&&qi_data[0][2]==0){
return T(0,2,2);
}
//2.二级权值,阻止敌方获胜
for(var i=0;i<=2;i++){
if((qi_data[0][i]==1&&qi_data[1][i]==1)&&qi_data[2][i]==0){
return T(2,i,2);
}
if((qi_data[0][i]==1&&qi_data[2][i]==1)&&qi_data[1][i]==0){
return T(1,i,2);
}
if((qi_data[1][i]==1&&qi_data[2][i]==1)&&qi_data[0][i]==0){
return T(0,i,2);
}
if((qi_data[i][0]==1&&qi_data[i][1]==1)&&qi_data[i][2]==0){
return T(i,2,2);
}
if((qi_data[i][0]==1&&qi_data[i][2]==1)&&qi_data[i][1]==0){
return T(i,1,2);
}
if((qi_data[i][1]==1&&qi_data[i][2]==1)&&qi_data[i][0]==0){
return T(i,0,2);
}
}
if((qi_data[0][0]==1&&qi_data[1][1]==1)&&qi_data[2][2]==0){
return T(2,2,2);
}
if((qi_data[0][0]==1&&qi_data[2][2]==1)&&qi_data[1][1]==0){
return T(1,1,2);
}
if((qi_data[1][1]==1&&qi_data[2][2]==1)&&qi_data[0][0]==0){
return T(0,0,2);
}
if((qi_data[0][2]==1&&qi_data[1][1]==1)&&qi_data[2][0]==0){
return T(2,0,2);
}
if((qi_data[0][2]==1&&qi_data[2][0]==1)&&qi_data[1][1]==0){
return T(1,1,2);
}
if((qi_data[1][1]==1&&qi_data[2][0]==1)&&qi_data[0][2]==0){
return T(0,2,2);
}
//3.随意下棋
var suiqi =[];
for (var i = 0; i < qi_data.length; i++) {
for(var t=0; t<qi_data.length;t++){
if(qi_data[i][t]==0){
suiqi.push([i,t]);
}
}
}
var xia = suiqi[suiji_num(suiqi.length)];
return T(xia[0],xia[1],2);
}
//随机数生成
var suiji_num = function(num){
return parseInt(Math.random() * (num), (num));
}
//棋盘中是否出现赢家 或 平局
var game_end = function(type){
var list = [];
var num = 0;
//横纵斜向
for(var i=0;i<=2;i++){
var zong = [];
for(var t=0;t<=2;t++){
zong[t]=qi_data[t][i];
}
list.push(qi_data[i]);
list.push(zong);
}
list.push([qi_data[0][0],qi_data[1][1],qi_data[2][2]]);
list.push([qi_data[0][2],qi_data[1][1],qi_data[2][0]]);
//判断
var is_ping = true;
var list_ping = [];
for(var i=0;i<=list.length-1;i++){
if(list[i][0]==type&&list[i][1]==type&&list[i][2]==type){
return 0;
}
var isx = false;
var isy = false;
for(var t=0;t<=2;t++){
if(list[i][t]==1){
isx =true;
}
if(list[i][t]==2){
isy =true;
}
}
if(!(isx&&isy)){
list_ping.push([0]);
}else{
list_ping.push([1]);
}
}
//平局
for(var i=0;i<=list_ping.length-1;i++){
if(list_ping[i]==0){
is_ping = false;
}
}
if(is_ping){
return 1;
}
return 404;
}
//判断棋是否对规则
var game_action_pan = function(x,y,type){
//1.下棋人是否正确
if(type!=quan_type){
msg='下棋人不正确';
return false;
}
//2.下棋位置是否为空
if(qi_data[y][x]!=0){
msg='下棋位置已占用';
return false;
}
//3.游戏是否已经结束
if(is_end){
msg='游戏已经结束!请重新开始';
return false;
}
return true;
}
//渲染棋盘
var game_rendering = function(){
var list = '';
for(var i=0;i<=2;i++){
var jian=[' ',' ',' '];
for(var t=0;t<=2;t++){
if(qi_data[i][t]==1){
jian[t]='X';
}else if(qi_data[i][t]==2){
jian[t]='O';
}
}
list+='|'+jian[0]+'|'+jian[1]+'|'+jian[2]+'|\n';
for(var t=0;t<=2;t++){
document.getElementById(i+'-'+t).innerHTML=jian[t];
}
}
console.log(list);
}
//点击下棋
var game_click = function(y,x){
T(y,x,quan_type);
}
</script>
</html>
用JS写井字棋小游戏,带机器人
最新推荐文章于 2022-06-07 18:12:59 发布