演示网站 五子棋小游戏
编写代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="./css/main.css">
<link rel="stylesheet" type="text/css" href="./css/board.css">
<link rel="stylesheet" type="text/css" href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/element-ui/2.12.0/theme-chalk/index.css">
<script src="jses.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function loadScript() {
var fileTime = new Date().getTime();
var jses = JS || [];
for (var i = 0, len = jses.length; i < len; i += 1) {
var jsHtml = `<script type="text/javascript" src="ai/${jses[i]}.js?t=${fileTime}"><\/script>`;
document.write(jsHtml);
}
}
loadScript();
</script>
<script src="https://www.jq22.com/jquery/vue2.6.10.min.js"></script>
<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/element-ui/2.12.0/index.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<div class="boardbox">
<canvas ref="canvas" id="canvas"></canvas>
</div>
<div class="controls">
<el-alert :title="tips" type="success" close-text="知道了"></el-alert>
<div>ai状态：{{ aiStatus }}</div>
<div>ai思考时间：{{ aithinktime }}</div>
<div>当前棋手：{{ currectRole }}</div>
<div>赢家：{{winner}}</div>
<div id="bts">
<div>
<span>先手：</span>
<el-radio v-model="first" label="2">玩家</el-radio>
<el-radio v-model="first" label="1">AI</el-radio>
<el-checkbox v-show="first==1" v-model="isRandom">AI随机开局</el-checkbox>
</div>
<div>
<span>难度：</span>
<el-radio v-model="level" label="2">简单</el-radio>
<el-radio v-model="level" label="4">普通</el-radio>
<el-radio v-model="level" label="8">困难</el-radio>
</div>
<el-button type="warning" round @click="start()">开始</el-button>
</div>
</div>
</div>
<script type="text/javascript">
// var canvas = document.getElementById("canvas");
// var ctx = canvas.getContext("2d");
var vm = new Vue({
el: "#app",
data: {
tips: "提示:点击开始进行游戏。",
aiStatus: "未开始",
aithinktime: "0ms",
role: 0,
ctx: null,
winner: "",
isbegin: false,
lastPoint: null,
first: "2",
level: '2',
isRandom: false
},
computed: {
currectRole() {
switch (this.role) {
case 0:
return '未开始'
case 1:
return "ai"
case 2:
return "玩家"
}
}
},
mounted() {
var that = this;
this.canvas = this.$refs.canvas;
this.ctx = this.canvas.getContext("2d");
this.draw = new Draw({
ctx: this.ctx,
canvas: this.canvas
});
this.ai = new AI();
this.lock = false;
this.player = new Player({
canvas: this.canvas,
draw: this.draw,
ai: this.ai,
click: function(context, e) {
if (that.isbegin) {
if (!that.lock) {
var point = context.getPoint(e.offsetX, e.offsetY);
if (!context.isEmpty(point[0], point[1])) {
return console.log('不是空位')
}
if (point != null) {
that.lock = true;
context.draw.drawCurrectPoint(that.lastPoint, point, 2);
context.board[point[0]][point[1]] = 2;
that.lastPoint = {
point: point,
user: 2
};
if (context.isWin(point, 2)) {
that.winner = "玩家";
that.isbegin = false;
return console.log("你赢了");
}
that.aiStatus = "ai思考中...";
that.role = 1;
setTimeout(function() {
var t = Date.now();
var ai_point = context.ai.turn(point[0], point[1]);
context.draw.drawCurrectPoint(that.lastPoint,
ai_point, 1);
that.aithinktime = (Date.now() - t) + "ms";
context.board[ai_point[0]][ai_point[1]] = 1;
that.lastPoint = {
point: [ai_point[0], ai_point[1]],
user: 1
};
that.aiStatus =
`ai思考出位置[${ai_point[0]},${ai_point[1]}]`;
that.role = 2;
if (context.isWin([ai_point[0], ai_point[1]], 1)) {
that.winner = "ai";
that.isbegin = false;
return console.log("ai赢了")
}
that.lock = false;
}, 1000);
}
} else {
that.aiStatus = "ai思考中...";
console.log('ai思考中...')
}
}
}
});
this.init();
},
methods: {
init() {
this.aithinktime = "0ms";
this.winner = "";
this.isbegin = false;
this.lastPoint = null;
this.role = 0;
this.draw.restart();
},
start() {
this.init();
this.player.init();
this.isbegin = true;
this.lock = false;
var that = this;
var level = Number(this.level);
switch (level) {
case 2:
config.searchDeep = 2;
break;
case 4:
config.searchDeep = 4;
break;
case 8:
config.searchDeep = 8;
break;
}
if (Number(this.first) == 1) { //AI开局
this.draw.setColor(1);
var res = this.ai.start(true, this.isRandom);
var board = res.board;
var second, third;
var first = [7, 7]; //ai第一步棋
this.player.board[7][7] = 1;
this.draw.drawCurrectPoint(that.lastPoint, first, 1);
that.aiStatus =
`ai思考出位置[7,7]`;
that.lastPoint = {
point: first,
user: 1
};
that.role = 2;
for (var i = 0; i < board.length; i++) {
for (var j = 0; j < board.length; j++) {
if (i == 7 && j == 7) continue
if (board[i][j] == 1) {
third = {
point: [i, j],
role: 1
};
}
if (board[i][j] == 2) {
second = {
point: [i, j],
role: 2
};
}
}
}
if (second) {
var point = second.point;
this.player.board[point[0]][point[1]] = second.role;
this.draw.drawCurrectPoint(that.lastPoint, point, 2);
that.lastPoint = {
point: point,
user: 2
};
that.role = 1;
}
if (third) {
var point = third.point;
this.player.board[point[0]][point[1]] = third.role;
this.draw.drawCurrectPoint(that.lastPoint, point, 2);
that.lastPoint = {
point: point,
user: 1
};
that.aiStatus =
`ai思考出位置[${point[0]},${point[1]}]`;
that.role = 2;
}
} else if (Number(this.first) == 2) {
that.role = 2;
that.aiStatus = "未开始";
this.draw.setColor(2);
this.ai.start(false, false);
}
}
}
});
</script>
</body>
</html>
注册免费下载
抱歉，隐藏内容须成功 评论本文 后刷新可见！
