五子棋.html

二维数组的定义， canvas对象的使用

二维数组：以下用new，其实简化 [] 即可，

var tArray = new Array();  //先声明一维

for(var k=0;k<i;k++){    //一维长度为i,i为变量，可以根据实际情况改变

  tArray[k]=new Array();  //声明二维，每一个一维数组里面的一个元素都是一个数组；

    for(var j=0;j<p;j++){   //一维数组里面每个元素数组可以包含的数量p，p也是一个变量；

     tArray[k][j]="";    //这里将变量初始化，我这边统一初始化为空，后面在用所需的值覆盖里面的值

 }

}

  
--------
for(var a=0;a<i;a++){

tArray[a]=[ matArray[a],addArray[a] ]; 两个组成一个二维数组

};

var tArray = new Array();  //先声明一维

for(var k=0;k<i;k++){    //一维长度为i,i为变量，可以根据实际情况改变

  tArray[k]=new Array();  //声明二维，每一个一维数组里面的一个元素都是一个数组；

    for(var j=0;j<p;j++){   //一维数组里面每个元素数组可以包含的数量p，p也是一个变量；

     tArray[k][j]="";    //这里将变量初始化，我这边统一初始化为空，后面在用所需的值覆盖里面的值

 }

}

五子棋代码如下：曾经把它看懂，现在再看感觉又有点忘了，尴尬 2018-11-26 16:57:07

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>人工智能五子棋</title>

    <meta charset="UTF-8" />

    <meta name="author" content="张" />

    <meta name="keywords" content="五子棋" />

    <meta name="description" content="五子棋" />

    <style>

        *{margin:0;}

        canvas{

            background:#fff;margin:120px auto;display:block;border-radius:4px;box-shadow:0px 0px 10px #000;

        }

    </style>

</head>

<body>

    <canvas width="450" height="450" id="canvas"></canvas>

    <script>

        var over = false;

        var chess = document.getElementById("canvas");

        //拿到权限 上下文 2d平面

        var context = chess.getContext("2d");

        context.strokeStyle="#a8a8a8";

        //定义方法

        var drawChessboard = function(){

            //线条 起点终点坐标（x，y）

            /*

            context.moveTo(0,0);//起点坐标

            context.lineTo(450,450);//终点坐标

            context.stroke();//两点坐标相连

            */

            for (var i=0; i<15; i++) {

                context.moveTo((15+30*i),15);

                context.lineTo((15+30*i),435);

                context.stroke();

                context.moveTo(15,(15+30*i));

                context.lineTo(435,(15+30*i));

                context.stroke();

            }

        }

        drawChessboard();

        //绘制棋子

        var onStep = function(i,j,me) {

            //绘制棋子 圆形 圆心（x，y） 半径

            //开始路径 区分大小写

            context.beginPath();

            context.arc(15+i*30,15+j*30,13,0,Math.PI*2);

            //结束路径

            context.closePath();

            //渐变色 看文档，两个圆心 半径，

            var gradient = context.createRadialGradient(15+i*30,15+j*30,0,15+i*30,15+j*30,13);

            if (me) {

                gradient.addColorStop(0,"#0a0a0a");

                gradient.addColorStop(1,"#636363");

            } else {

                gradient.addColorStop(0,"#d1d1d1");

                gradient.addColorStop(1,"#f9f9f9");

            }

            //填充颜色

            context.fillStyle=gradient;

            context.fill();

            context.stroke();

        }

        //建立一个二维数组判断棋盘上的落子情况

        var chessBoard = [];

        //把棋盘上面所有的点全部存进去

        for (var i=0; i<15; i++) {

            chessBoard[i] = []; //一维中存入还是数组

            for (var j=0; j<15; j++) {

                chessBoard[i][j] = 0;//等于0的地方没有下棋

            }

        }

        //下棋

        var me = true;

        chess.onclick = function(e) {

            if(over) {

                return false;

            }

            if(!me) {

                return false;

            }

            //获取鼠标坐标

            var x = e.offsetX;

            var y = e.offsetY;

            //点击范围30都可以下棋 向下取整

            var i = Math.floor(x/30);

            var j = Math.floor(y/30);

            //把落的子放到数组中存储

            if (chessBoard[i][j] == 0) {

                onStep(i,j,me);

                chessBoard[i][j] = 1;

                for (var k=0; k<count; k++)    {

                    if (wins[i][j][k]) {

                    //* 这里应该加多一个判断myWin[k]等于或大于6了，直接不用往下操作了。

                    if(myWin[k]!=6){

                        myWin[k]++;

                        computerWin[k] = 6;

                        if (myWin[k] == 5) {

                            alert("恭喜你赢了！");

                            over = true;

                        }

                    }

                    }

                }

                if (!over) {

                    me = !me;

                    computerAI();

                }

            }

        }

        //统计赢法的种类

        var wins = [];

        //遍历棋盘

        for (var i=0;i<15;i++) {

            wins[i] = [];

            for (var j=0; j<15; j++) {

                wins[i][j] = [];

            }

        }

        //赢法的索引

        var count = 0;

        //横线赢

        for (var i=0; i<15; i++) {

            for (var j=0; j<11; j++) {

                for (var k=0; k<5; k++)    {

                    wins[i][j+k][count] = true;

                }

                count++;

            }

        }

        //竖线赢

        for (var i=0; i<15; i++) {

            for (var j=0; j<11; j++) {

                for (var k=0; k<5; k++)    {

                    wins[j+k][i][count] = true;

                }

                count++;

            }

        }

        //斜线赢

        for (var i=0; i<11; i++) {

            for (var j=0; j<11; j++) {

                for (var k=0; k<5; k++)    {

                    wins[i+k][j+k][count] = true;

                }

                count++;

            }

        }

        //反斜线赢

        for (var i=0; i<11; i++) {

            for (var j=14; j>3; j--) {

                for (var k=0; k<5; k++)    {

                    wins[i+k][j-k][count] = true;

                }

                count++;

            }

        }

//本棋盘 有572中赢发，

        //统计赢法组

        var myWin = [];//全局，用于记录 每在此赢法上下子一个即加一，判断每一种赢法是否达到了5，

        var computerWin = [];

        for (var i=0; i<count; i++) {

            myWin[i] = 0;

            computerWin[i] = 0;

        }

        //计算机AI算法

        var computerAI = function () {

            //统计分数

            var mySource = [];//局部数组，我方分数，每次计算机下棋都计算一遍

            var computerSource = [];//计算机分数

            var max = 0; //最高点分数

            var u = 0,v = 0;//最高点分数坐标

            //初始化我方和计算机分数

            for (var i=0; i<15; i++) {

                mySource[i] = [];

                computerSource[i] = [];

                for (var j=0; j<15; j++) {

                    mySource[i][j] = 0;

                    computerSource[i][j] = 0;

                }

            }

            for (var i=0; i<15; i++) {

                for (var j=0; j<15; j++) { //这里的两个for是遍历棋盘

                    if (chessBoard[i][j] == 0) {//这里对每一个没有下过子的 坐标分析，计算该落子的可能性多大

                        for (var k=0; k<count; k++)    { //遍历所有赢法 572钟

                            if (wins[i][j][k]) { //遍历和该坐标有关的赢法，有关往下执行

                                if (myWin[k] == 1) { //若该赢法上 落子为1，加一定的分数；myWin[k]这个值是在我方下棋时累加的

                                    mySource[i][j] += 200;

                                } else if (myWin[k] == 2) { //若该赢法上 落子为2，再加一定的分数

                                    mySource[i][j] += 400;

                                } else if (myWin[k] == 3) { //若该赢法上 落子为3，再加一定的分数

                                    mySource[i][j] += 2000;

                                } else if (myWin[k] == 4) {

                                    mySource[i][j] += 10000;

                                }

                                if (computerWin[k] == 1) { //同理，对计算机下的期判断，累加分数

                                    computerSource[i][j] += 420;

                                } else if (computerWin[k] == 2) {

                                    computerSource[i][j] += 820;

                                } else if (computerWin[k] == 3) {

                                    computerSource[i][j] += 4100;

                                } else if (computerWin[k] == 4) {

                                    computerSource[i][j] += 20000;

                                }

                            }

                        }

                        if (mySource[i][j] > max) { //这个坐标对于我赢的概率和之前最大的比

                            max = mySource[i][j];

                            u = i;

                            v = j;

                        } else if (mySource[i][j] == max) {//如果两个点对自己相同，那两个点对敌方哪个更有利？

                            if (computerSource[i][j]>computerSource[u][v]) {

                                u = i;

                                v = j;

                            }

                        }

                        if (computerSource[i][j] > max) { //这个坐标对于计算机的概率和之前最大的比

                            max = computerSource[i][j];

                            u = i;

                            v = j;

                        } else if (computerSource[i][j] == max) {

                            if (mySource[i][j]>mySource[u][v]) {

                                u = i;

                                v = j;

                            }

                        }

                    }

                }

            }

            onStep(u,v,false);

            chessBoard[u][v] = 2;

            for (var k=0; k<count; k++)    {

                if (wins[u][v][k]) {

                    //* 这里应该加多一个判断computerWin[k]等于或大于6了，直接不用往下操作了。

                    if(computerWin[k]!=6){

                    computerWin[k]++;

                    myWin[k] = 6;

                    if (computerWin[k] == 5) {

                        alert("计算机赢了！");

                        over = true;

                    }

                    }

                }

            }

            if (!over) {

                me = !me;

            }

        }

    </script>

</body>

</html>

五子棋.html的更多相关文章

自己写的HTML5 Canvas + Javascript五子棋
看到一些曾经只会灌水的网友,在学习了前端之后,已经能写出下载量几千几万的脚本.样式,帮助大众,成为受欢迎的人,感觉满羡慕的.我也想学会前端技术,变得受欢迎呀.于是心血来潮,开始学习前端知识,并写下了这 ...
java swing 双人五子棋源代码
import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.Toolkit; impo ...
HTML5 五子棋 - JS/Canvas 游戏
背景介绍因为之前用c#的winform中的gdi+,java图形包做过五子棋,所以做这个逻辑思路也就驾轻就熟,然而最近想温故html5的canvas绘图功能(公司一般不用这些),所以做了个五子棋,当 ...
[收藏]C++简单五子棋
#include<iostream> #include<iomanip> using namespace std; ; //棋盘行数 ; //棋盘列数 char p[X][Y] ...
jQuery网页版五子棋小游戏源码下载
体验效果:http://hovertree.com/texiao/game/4/ 网页五子棋源代码: <!DOCTYPE html> <html> <head> & ...
js+html5双人五子棋(源码下载)
代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...
jquery在线五子棋
在线五子棋试玩地址:http://keleyi.com/game/12/ 以下是完整代码,保存到html文件打开也可以玩: <!DOCTYPE html> <html> < ...
五子棋AI清月连珠开源
经过差不多两年的业余时间学习和编写,最近把清月连珠的无禁手部分完善得差不多了.这中间进行了很多思考,也有很多错误认识,到现在有一些东西还没有全面掌握,所以想通过开源于大家共同交流. 最近一直发表一些五 ...
PyQt写的五子棋
技术路线 GUI的实现使用PyQt技术作为基础.PyQt是一个支持多平台的客户端开发SDK,使用它实现的客户端可以运行在目前几乎所有主流平台之上. 使用PyQt,Qt设计器实现UI,通过pyuic4 ...
浅析基本AI五子棋算法
五子棋是所有棋类博弈中比较简单的了,这里介绍的也只是一种非常基本的AI策略.其实,包括之前的AI贪吃蛇,感觉这两个AI其实体现的都是一种建模思想,把一个现实中的问题模型化,抽象化,得到其一般特征,再设 ...

随机推荐

CF786B Legacy（线段树优化建图）
嘟嘟嘟省选Day1T2不仅考了字符串,还考了线段树优化建图.当时不会,现在赶快学一下. 线段树能优化的图就是像这道题一样,一个点像一个区间的点连边,或一个区间像一个点连边.一个个连就是\(O(n ^ ...
使用Kernel NetEm和tc模拟复杂网络环境
关键词:netem(Network Emulator).tc(Traffic Control). 大部分局域网环境良好,但是产品实际网络环境可能千差万别,为了对产品进行各种情况测试就需要模拟网络环境. ...
PS调出韩式米黄色室内婚纱照片
原图: Camera Raw打开原图. 光线调整,压暗白色,保留高光细节,少量对比黑色压暗. 降低整体饱和. 曲线调整,压暗高光明度. 减红加青(融合色彩). 中间调,靠近暗部区域加蓝,靠近亮部区域加 ...
jQuery文件分片上传
前端代码: <input type="file" id="file6" multiple> <button type="button ...
U盘安装CentOS系统、raid5制作以及nohup的使用
最近折腾服务器,用U盘安装了系统,总结了一些避坑措施: 下载UltraISO工具,用来刻盘从centos官网下载ISO镜像,然后刻盘关键是在你进入系统安装界面后,如下: 选中第一项,按tab键(看 ...
asp.net core 2.1认证
asp.net core 2.1认证这篇文章基于asp.net core的CookieAuthenticationHandler来讲述. 认证和授权很相似,他们的英文也很相似,一个是Authenti ...
简单实现计算机上多个jdk环境切换
实现多个jdk环境切换,大致有两种方式安装两个jdk,并配置相应的环境变量,在java的控制面板中修改设置非主要的jdk仅仅是用来测试,并不常用,故只要让ide配置对应的jdk位置就可以了,属于懒 ...
codeforces660C
Hard Process CodeForces - 660C You are given an array a with n elements. Each element of a is either ...
poj3436（拆点最大流）
题意:给你p和n,p代表每台计算器需要几个部分组成,n代表有几个组装机器,接下来n行,每行第一个数代表这台机器能够每小时组装几台,剩下前三个数字表示使用这台机器需要的前置条件(0代表当前组装不能有这个 ...
Luogu5283 十二省联考2019异或粽子（trie/可持久化trie+堆）
做前缀异或和,用堆维护一个五元组(x,l,r,p,v),x为区间右端点的值,l~r为区间左端点的范围,p为x在l~r中最大异或和的位置,v为该最大异或和,每次从堆中取出v最大的元素,以p为界将其切成两 ...

五子棋.html

五子棋.html的更多相关文章

随机推荐

热门专题