canvas+js实现初级五子棋AI

最新推荐文章于 2023-10-01 08:37:18 发布
最新推荐文章于 2023-10-01 08:37:18 发布
阅读量304 收藏 1
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lwjangwyj/article/details/80372807
版权
<!DOCTYPE html>
<html>
<head>
<title>chess</title>
<style type="text/css">
*{
padding: 0;
margin:0;
}
#box{
width: 450px;
height: 450px;
border: 1px solid #000;
margin: 60px auto;
}
</style>
</head>
<body>
<div id="box">
<canvas id="chess" width="450" height="450"></canvas>
</div>
<script type="text/javascript">
var _me =true;
var data =[];
//赢法数组
var wins = [];
var over = false;
// 赢法统计数组
var myWin = [];
var computerWin = [];
var chess = document.getElementById('chess');
var box = document.getElementById('box');
var ctx = chess.getContext('2d');
ctx.strokeStyle = '#BFBFBF';

for(let i=0;i<15;i++){
data[i]=[];
for(let j=0;j<15;j++){
data[i][j]=0;
}
}
for(let i=0;i<15;i++){
wins[i]=[];
for(let j=0;j<15;j++){
wins[i][j]=[];
}
}
var count = 0;
//横线赢法
for(let i = 0;i<15;i++){
for(let j = 0;j<11;j++){
for(let k=0;k<5;k++){
wins[i][j+k][count] = true;
}
count++; 165
}
}
//竖线赢法
for(let i = 0;i<11;i++){
for(let j = 0;j<15;j++){
for(let k=0;k<5;k++){
wins[i+k][j][count] = true;
}
count++;//165
}
}
//斜线赢法
for(let i = 4;i<15;i++){
for(let j = 0;j<11;j++){
for(let k=0;k<5;k++){
wins[i-k][j+k][count] = true;
}
count++;//110
}
}
//反斜线
for(let i = 10;i>-1;i--){
for(let j = 0;j<11;j++){
for(let k=0;k<5;k++){
wins[i+k][j+k][count] = true;
}
count++;//110
}
}
// alert(count);
for(let i=0;i<count;i++){
myWin[i] = 0;
computerWin[i] = 0;
}
function play(){
drowBord();

}
function drowBord(){
for(let i = 0;i<15;i++){
ctx.moveTo(15+i*30 , 15);
ctx.lineTo(15+i*30 , 435);
ctx.stroke();
ctx.moveTo(15 , 15 + i*30 );
ctx.lineTo(435, 15 + i*30 );
ctx.stroke();
}
}
function oneStep(i,j,me){
ctx.beginPath();
ctx.arc(15+i*30,15+j*30,13,0,2*Math.PI);
ctx.closePath();
var gradient = ctx.createLinearGradient(15+i*30+2,15+j*30-2, 13, 15+i*30+2, 15+j*30-2, 0);
if(me){
gradient.addColorStop(0,'#0A0A0A');
gradient.addColorStop(1,'#636766');
data[i][j] = 1;
}else{
gradient.addColorStop(0,'#D1D1D1');
gradient.addColorStop(1,'#F9F9F9');
data[i][j] = 2;
}
ctx.fillStyle=gradient;
ctx.fill();
}
box.onclick = function(event){
if(over) return
if(!_me) return
var e = event || window.event;
let i = Math.floor(e.offsetX/30);
let j = Math.floor(e.offsetY/30);
if(data[i][j]>0) return
oneStep(i,j,_me);
for(let k=0;k<count;k++){
if(wins[i][j][k]){
myWin[k]++;
computerWin[k]=6;
if(myWin[k] == 5){
window.alert("你赢了");
over = true;
}
}
}
if(!over){
   _me = !_me;
   computerAI();
}
} 
function computerAI(){
var myScore = [];
var computerScore = [];
var max = 0;
var u=0,v=0;
for(let i=0; i<15; i++){
myScore[i] = [];
computerScore[i] = [];
for(let j=0; j<15; j++){
myScore[i][j] = 0;
computerScore[i][j] = 0;
}
}
for(let i=0;i<15;i++){
for(var j=0;j<15;j++){
if(data[i][j] == 0){
for(var k=0;k<count;k++){
if(wins[i][j][k]){
if(myWin[k] == 1){
myScore[i][j] += 200;
}else if(myWin[k] == 2){
myScore[i][j] += 400;
}else if(myWin[k] == 3){
myScore[i][j] += 2000;
}else if(myWin[k] == 4){
myScore[i][j] += 4500;
}
if(computerWin[k] == 1){
    computerScore[i][j] += 220;
}else if(computerWin[k] == 2){
computerScore[i][j] += 420;
}else if(computerWin[k] == 3){
computerScore[i][j] += 2200;
}else if(computerWin[k] == 4){
console.log('k:'+ k+'computerWin[k]:::'+computerWin[k])
computerScore[i][j] += 4322500;
}
}
}
if(myScore[i][j]>max){
max = myScore[i][j];
u = i;
v = j;
}else if(myScore[i][j] = max){
if(computerScore[i][j] > computerScore[u][v]){
u = i;
v = j; 
}
}
if(computerScore[i][j]>max){
max = computerScore[i][j];
u = i;
v = j;
}else if(computerScore[i][j] = max){
if(myScore[i][j] > myScore[u][v]){
u = i;
v = j; 
}
}
}
}
}
oneStep(u,v,false);
for(let k=0;k<count;k++){
if(wins[u][v][k]){
computerWin[k]++;
myWin[k]=6;
if(computerWin[k] == 5){
window.alert("计算机赢了");
over = true;
}
}
}
if(!over){
   _me = !_me;
}
}
play();
</script>
</body>
</html>
Hopelwj
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
原生Javascript实现五子棋
qq_41961383的博客
08-26 3543
原生Javascript实现五子棋
canvas入门——线段绘制
astak3的博客
09-08 954
moveTo、lineTo 使用canvas绘制一条线段，默认已经拿到canvas的上下文context 绘制一条直线需要使用context提供的moveTo、lineTo方法 moveTo是线段的起点，lineTo是线段下一个点，最后使用stroke进行描边。如下代码 context.moveTo(100,100) context.lineTo(200,200) context.stroke()...
JavaScript应用：五子棋游戏实战开发
黑夜开发者的博客
08-10 3223
本篇文章介绍了如何使用JavaScript开发一个简单的五子棋游戏。通过绘制棋盘、实现开始按钮和游戏逻辑、处理用户交互、判断胜负和游戏结束等功能，我们完成了一个基本的五子棋游戏。当然，我们还可以对游戏进行优化和扩展，例如增加悔棋功能、提示下一步最佳落子位置等。JavaScript是一种非常强大和灵活的编程语言，可以用于开发各种类型的应用程序和游戏。希望通过这篇文章，你对使用JavaScript开发游戏有了更深入的了解。如果你对五子棋游戏开发还有任何问题或建议，欢迎在评论区留言讨论。
HTML5
FIRE的博客
09-13 457
HTML5
五子棋AI算法和开局定式（斜指13式）破解
最新发布
baidu_41801770的博客
10-01 6990
五子棋AI算法和开局定式（ 斜指13式 ）破解 先前发了几篇五子棋游戏程序设计的博文，设计了游戏程序，也设计了AI智能奕棋的算法，运行程序检测算法的可行性，完成人机模式游戏功能的设置。这还不够，还要提高算法的实战水平。 对于人机对战的电脑智能应子算法，参阅很多五子棋书籍棋谱和五子棋竞赛的对抗棋谱。我感到白棋的后手防御算法很难取胜，棋界有黑棋高手先手必胜一说。算法么想了很多，既然是人工智能下棋就得按人的思路来算计。棋书阐述有许多思路和棋局解说。如活四冲四，嵌五，活三嵌四，活二嵌三。这些是高级棋手的总结。我
JS+canvas实现的五子棋游戏【人机大战版】
10-19
JS+canvas实现的五子棋游戏人机大战版结合了HTML5的Canvas API、JavaScript和人工智能技术。通过Canvas进行图形绘制，实现棋盘的界面展示；通过JavaScript处理游戏逻辑，包括棋子的放置、游戏状态的更新以及AI的决策...
H5+canvas+js实现连线题
05-09
本项目"**H5+canvas+js实现连线题**"就是利用这些技术来创建一种互动式的在线连线题目，这在教育、测试或游戏场景中非常实用。 连线题是一种常见的认知测试形式，通常要求用户将两个相关的项目通过线条连接起来。在...
js+canvas实现五子棋小游戏
11-19
本文实例为大家分享了js+canvas实现五子棋小游戏的具体代码，供大家参考，具体内容如下 效果展示： 源码展示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <...
原生JS+Canvas实现五子棋游戏实例
10-19
以上是原生JS+Canvas实现五子棋游戏的基本思路和关键代码。在实际开发中，还需要考虑用户交互、错误处理、游戏规则的完善等其他细节。通过不断优化和迭代，我们可以创建一个功能完整、用户体验良好的五子棋游戏。
五子棋（canvas+js）
11-26
用h5的画布绘制棋盘与棋子，用js根据五子棋规则也判断语句
Node.js联机游戏——gobang五子棋（客户端+服务端+websocket的双人游戏）
LYXtosee的博客
08-05 2949
这里先给一下五子棋的基本内容思想 c#winform——Gobang五子棋简易版双人对战制作（基本结构+代码） 虽然语言不一样，但是思路是一样的 在这里我们先把五子棋的基础功能给做好 客户端和服务端的代码以及演示视频放在最后首先在这里需要用到canvas（用来画图），这里会用到一个arc来实现画圆○，接着再用full来填充，这样一个基本画图是完成了，接着再来判断一下鼠标点击的位置，根据间隔40px（自适应后为）来计算是点在哪个点上便能实现了！ 在这里我们会用到一个大的数组来装下整个棋盘（1515），这样我们
HTML5 Canvas基础概念（一）
读心悦
02-15 752
Canvas基础知识：Canvas属于行内元素，使用Canvas绘制图形步骤： 1、获取Canvas对象 2、获取上下文环境对象context。 3、开始绘制图形 在Canvas对象中常用属性 属性 说明 width Canvas的宽度 height Canvas的高度 Canvas常用的方法 属性 说明 getContext("2d") ...
五子棋游戏AI智能算法设计
baidu_41801770的博客
12-04 7689
五子棋游戏C语言AI智能算法设计 近来发现编制五子棋游戏很有趣，尤其是AI智能算法很烧脑。网上介绍有什么贪心算法，剪枝算法，博弈树算法等等，不一而足。 对于人机对战的电脑智能应子算法，参阅很多五子棋书籍棋谱和五子棋竞赛的对抗棋谱。我感到白棋的后手防御算法很难取胜，棋界有黑棋高手先手必胜一说。算法么想了很多，既然是人工智能下棋就得按人的思路来算计。棋书阐述有许多思路和棋局解说。如活四冲四，嵌五，活三嵌四，活二嵌二。这些是高级棋手的总结。我就按此思路用加权计权方法来表现此类各种情况。 下面程序代码写出了
JS五子棋（AI）
whrjxyygx的专栏
07-24 781
JS五子棋的简单AI实现
五子棋简易AI算法
quarkx的博客
10-11 6945
Java实现简易五子棋人机算法
五子棋AI设计
热门推荐
pi9nc的专栏
09-01 4万+
五子棋AI设计——从门外到门内不得不说的事儿1 分类： 人工智能 AI 五子棋 Naive2012-06-08 09:48 278人阅读 评论(0) 收藏 举报 mfc测试 这学期选了人工智能原理，上课的时候完全没搞懂老师要讲什么，所以听课听得云里雾里的，幸好有几个小实验，可以帮助理解人工智能的精髓。 第一个实验就是基于带alpha-beta剪枝的MinMax搜索的五子
用JS编写一个简单的五子棋游戏
boolbirdm的博客
09-05 414
简单五子棋游戏，就像小时候课间在纸上玩的一样，我用的是js进行实现
网格画法：原生 Canvas 画网格，可拖动、可放大缩小、并带有坐标系 0 0 位置辅助线
guoqkmiss的博客
08-19 2852
使用原生 Canvas 画网格，可拖动、放大缩小、并带有坐标系辅助线
使用Canvas+JavaScript FileAPI实现图片剪切与滤镜功能
- CSS和JavaScript结合用于实现选择框的拖动和缩放效果，以及Canvas的边界检测，确保图片不会超出画布范围。 - 添加适当的事件监听器，例如`addEventListener()`，以响应用户的操作。 7. **兼容性考虑** - 考虑...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值