canvas+javaScript+css+html——五子棋

最新推荐文章于 2019-06-27 17:02:57 发布
最新推荐文章于 2019-06-27 17:02:57 发布
阅读量547 收藏 6
点赞数

效果如图：


代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>五子棋</title>
    <style type="text/css">
        #chess{
            display: block;
            box-shadow: -2px -2px 2px #EFEFEF,5px 5px 5px #B9B9B9;
            margin: 50px auto;
        }
    </style>

    <script type="text/javascript">

        window.onload = function () {
            /*定义赢法数组*/
            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++){
                    //wins[0][0][0]=true;
                    //wins[0][1][0]=true;
                    //wins[0][2][0]=true;
                    //wins[0][3][0]=true;
                    //wins[0][4][0]=true;

                    //wins[0][1][1]=true;
                    //wins[0][2][1]=true;
                    //wins[0][3][1]=true;
                    //wins[0][4][1]=true;
                    //wins[0][5][1]=true;
                    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++;
                }
            }
            console.log(count);
            //定义赢法的统计数组
            var myWin = [];
            var computerWin = [];
            for(var i=0;i<count;i++){
                myWin[i]=0;
                computerWin[i]=0;
            }
            var over = false;
            
            var chess = document.getElementById("chess");
            var context = chess.getContext("2d");
            var me = true;//定义该谁走
            var chessBoard = [];//存储是否有棋子
            /*初始化chessBoard*/
            for(var i=0;i<15;i++){
                chessBoard[i]=[];
                for(var j=0;j<15;j++){
                    chessBoard[i][j]=0;//没有棋子
                }
            }

            context.strokeStyle = "#dda0dd";//定义颜色

            /*设置logo*/
            var logo = new Image();
            logo.src = "img/moon.png";
            logo.onload = function () {
                context.drawImage(logo,0,0,450,450);//加载logo
                drawChess();
                // oneStep(0,0,true);
                // oneStep(14,1,false);

                /*
                //画圆
                context.beginPath();
                context.arc(15,15,13,0,2*Math.PI);
                var grd = context.createRadialGradient(15,15,13,15,15,0);//圆渐变
                // grd.addColorStop(0,"yellow");
                // grd.addColorStop(1,"white");

                grd.addColorStop(0,"#D1D1D1");
                grd.addColorStop(1,"#F9F9F9");
                content.fillStyle = grd;

                context.fill();
                context.closePath();
                */

            }
            chess.onclick = function (event) {
                if(over){
                    return;
                }
                if(!me){
                    return;
                }
                var x = event.offsetX;
                var y = event.clientY;
                var i = Math.floor(x/30);
                var j = Math.floor((y-50)/30);
                if (chessBoard[i][j]==0){//判断落子地方是否有棋
                    oneStep(i,j,me);
                    chessBoard[i][j]=1;


                    //赢法统计
                    for(var k=0;k<count;k++){
                        if(wins[i][j][k]){
                            myWin[k]++;
                            computerWin[k]=6;
                            if(myWin[k]==5){
                                alert("你赢了");
                                over = true;
                            }
                        }
                    }

                    //电脑走
                    if(!over){
                        me = !me;
                        computerAI();
                    }
                }
                // alert(x+","+y);
                // alert(i+","+j);

            }

            //电脑走
            var computerAI = function () {
                var myScore = [];
                var computerScore = [];
                var max = 0;
                var u = 0;
                var v = 0;
                for (var i = 0;i<15;i++){
                    myScore[i]=[];
                    computerScore[i]=[];
                    for(var j=0;j<15;j++ ){
                        myScore[i][j]=0;
                        computerScore[i][j]=0;
                    }
                }

                for(var i=0;i<15;i++){
                    for(var j=0;j<15;j++){
                        if(chessBoard[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]+=10000;
                                    }

                                    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]+=2100;
                                    }else if(computerWin[k]==4){
                                        computerScore[i][j]+=20000;
                                    }
                                }
                            }
                            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);
                chessBoard[u][v] = 2;

                //赢法统计
                for(var k=0;k<count;k++){
                    if (wins[u][v][k]){
                        computerWin[k]++;
                        myWin[k]=6;
                        if(computerWin[k]==5){
                            alert("你输了，电脑获胜");
                            over = true;
                        }
                    }
                }

                //人走
                if(!over){
                    me = !me;
                }

            }
            
            /*画棋子*/
            var oneStep = function (i,j,me) {
                context.beginPath();
                context.arc(15+i*30,15+j*30,13,0,2*Math.PI);
                var grd = context.createRadialGradient(15+i*30,15+j*30,13,15+i*30,15+j*30,0);
                if(me){
                    grd.addColorStop(0,"#0A0A0A");
                    grd.addColorStop(1,"#636766");
                }else{
                    grd.addColorStop(0,"#D1D1D1");
                    grd.addColorStop(1,"#F9F9F9");
                }
                context.fillStyle = grd;
                context.fill();
                context.closePath();
            }

            /*画棋盘方法*/
            var drawChess = function(){
                for(var i = 0;i < 15;i++){
                    /*画竖线*/
                    context.moveTo(15+i*30,15);
                    context.lineTo(15+i*30,435);
                    context.stroke();

                    /*画横线*/
                    context.moveTo(15,15+i*30);
                    context.lineTo(435,15+i*30);
                    context.stroke();
                }
            }
        }
    </script>
</head>
<body>
    <canvas id="chess" width="450px" height="450px"></canvas>
</body>
</html>

不要图片的版本如下：


代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>五子棋（无图）</title>
    <style type="text/css">
        #chess{
            display: block;
            box-shadow: -2px -2px 2px #EFEFEF,5px 5px 5px #B9B9B9;
            margin: 50px auto;
            background: #EFEFEF;
        }
    </style>
    <script type="text/javascript">

        window.onload = function () {
            /*定义赢法数组*/
            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++;
                }
            }
            console.log(count);
            //定义赢法的统计数组
            var myWin = [];
            var computerWin = [];
            for(var i=0;i<count;i++){
                myWin[i]=0;
                computerWin[i]=0;
            }
            var over = false;



            var chess = document.getElementById("chess");
            var context = chess.getContext("2d");
            var me = true;//定义该谁走
            var chessBoard = [];//存储是否有棋子
            /*初始化chessBoard*/
            for(var i=0;i<15;i++){
                chessBoard[i]=[];
                for(var j=0;j<15;j++){
                    chessBoard[i][j]=0;//没有棋子
                }
            }


            /*画棋盘方法*/

            for(var i = 0;i < 15;i++){
                /*画竖线*/
                context.moveTo(15+i*30,15);
                context.lineTo(15+i*30,435);
                context.stroke();

                /*画横线*/
                context.moveTo(15,15+i*30);
                context.lineTo(435,15+i*30);
                context.stroke();

                context.strokeStyle = "#dda0dd";//定义颜色
            }
            
            chess.onclick = function (event) {
                if(over){
                    return;
                }
                if(!me){
                    return;
                }
                var x = event.offsetX;
                var y = event.clientY;
                var i = Math.floor(x/30);
                var j = Math.floor((y-50)/30);
                if (chessBoard[i][j]==0){//判断落子地方是否有棋
                    oneStep(i,j,me);
                    chessBoard[i][j]=1;
                    //赢法统计
                    for(var k=0;k<count;k++){
                        if(wins[i][j][k]){
                            myWin[k]++;
                            computerWin[k]=6;
                            if(myWin[k]==5){
                                alert("你赢了");
                                over = true;
                            }
                        }
                    }

                    //电脑走
                    if(!over){
                        me = !me;
                        computerAI();
                    }
                }
                // alert(x+","+y);
                // alert(i+","+j);

            }

            //电脑走
            var computerAI = function () {
                var myScore = [];
                var computerScore = [];
                var max = 0;
                var u = 0;
                var v = 0;
                for (var i = 0;i<15;i++){
                    myScore[i]=[];
                    computerScore[i]=[];
                    for(var j=0;j<15;j++ ){
                        myScore[i][j]=0;
                        computerScore[i][j]=0;
                    }
                }

                for(var i=0;i<15;i++){
                    for(var j=0;j<15;j++){
                        if(chessBoard[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]+=10000;
                                    }

                                    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]+=2100;
                                    }else if(computerWin[k]==4){
                                        computerScore[i][j]+=20000;
                                    }
                                }
                            }
                            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);
                chessBoard[u][v] = 2;

                //赢法统计
                for(var k=0;k<count;k++){
                    if (wins[u][v][k]){
                        computerWin[k]++;
                        myWin[k]=6;
                        if(computerWin[k]==5){
                            alert("你输了，电脑获胜");
                            over = true;
                        }
                    }
                }

                //人走
                if(!over){
                    me = !me;
                }

            }

            /*画棋子*/
            var oneStep = function (i,j,me) {
                context.beginPath();
                context.arc(15+i*30,15+j*30,13,0,2*Math.PI);
                var grd = context.createRadialGradient(15+i*30,15+j*30,13,15+i*30,15+j*30,0);
                if(me){
                    grd.addColorStop(0,"#0A0A0A");
                    grd.addColorStop(1,"#636766");
                }else{
                    grd.addColorStop(0,"#D1D1D1");
                    grd.addColorStop(1,"#F9F9F9");
                }
                context.fillStyle = grd;
                context.fill();
                context.closePath();
            }
        }
    </script>
</head>
<body>
<canvas id="chess" width="450px" height="450px"></canvas>
</body>
</html>


十二Tel
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
用css画一个简易的五子棋棋牌，可以点击对战
蔷薇思绪的博客
07-15 492
<!DOCTYPE html> <html> <body> <div style="margin: 10% auto; width: 20%;"> <canvas align="center" id="myCanvas" width="475" height="575"></canvas> </div> </body> <scr...
js,css五子棋
11-02
五子棋源代码，js,css五子棋
五子棋（CSS + JavaScript + jQuery）
07-19
这是用JavaScript写的一个网页版的五子棋。
html css js五子棋
dre的博客
11-02 783
五子棋
js版五子棋,css3+js
潘敬
12-11 1310
效果图： 没有用到任何的图片，全部是js+css做的。 只是实现了界面，功能暂时没有实现。 js： var config={ row:16, //行 rank:16, //列 white:112, //白色 black:113, //黑色 overtime:1000*60,//超时时间 gameState:0, //0未开始，1.进行中，2暂停中 margin:5,
原生JS+Canvas实现五子棋游戏
10-19
3. Canvas绘图API：通过JavaScript中的Canvas API来绘制五子棋的棋盘和棋子，实现视觉上的游戏界面。Canvas API提供了一系列用于在画布上绘制图形的方法，比如绘制矩形、圆形、路径等。 4. 五子棋游戏规则的实现：...
js+canvas实现五子棋小游戏
10-15
在本文中，我们将深入探讨如何使用JavaScript和HTML5的Canvas API来实现一个五子棋小游戏。五子棋是一种双人对弈的策略游戏，目标是在棋盘上连成五个同色的棋子以获胜。通过JS和Canvas，我们可以创建一个交互式的...
HTML5+js+css写的五子棋小游戏
最新发布
11-01
在这个“HTML5+js+css写的五子棋小游戏”中，开发者利用HTML5的特性，结合JavaScript（js）和CSS（层叠样式表）来创建了一个既有趣又互动的在线五子棋游戏。以下是对这些技术在该项目中应用的详细解析： 1. HTML5：...
五子棋人机对战，div+css,canvas绘制i.rar
10-15
《五子棋人机对战：HTML、CSS与Canvas的精彩碰撞》 在现代Web开发中，HTML、CSS和Canvas是构建动态、交互性网页的重要技术。本项目“五子棋人机对战”巧妙地结合了这三种技术，为我们展示了一个实时、直观的在线...
HTML5+CSS3项目实战详解
06-20
HTML5和CSS3是现代Web开发的基石，它们极大地增强了网页的交互性和视觉表现力。在"HTML5+CSS3项目实战详解"这门课程中，讲师将引导学生逐步掌握这两种关键技术，通过一系列实践项目来深化理解。 首先，HTML5是超...
html实现五子棋
02-10
使用html和css实现五子棋 /**五子棋 * 思路： * 1.棋盘设置：使用HTML5的canvas标签绘制整个棋盘 * 2.点击事件：当页面被点击时，获取点击的x,y像素点,根据此像素点进行判断，再在合适位置绘制黑白棋子，黑子棋子均是使用canvas绘制的 * 3.保存落子记录：将数据存入一个二维数组，x和y表是落子坐标，1为白棋，2为黑棋，0代表此处无棋子，只有没有棋子的才能落子 * 4.判断输赢：每次落子后以此坐标分别向左右，上下，右下，右上进行判断，设参数count，遇到同色棋子+1，遇到空格或不同色棋子终止，当count=5时，游戏结束 * 20150930 */ /**全局参数初始化
五子棋html版（源码）
04-05
五子棋html5版，喜欢可以试试
JS实现五子棋源码全
05-07
搜索算法实现五子棋，是学习JS算法，JS游戏入门的好素材
五子棋HTML前js端实现
11-06
html中用js实现网页版五子棋,人机对战,有电脑下棋的AI算法,欢迎下载,一起图探讨.
canvas完美绘制中国象棋棋盘
11-20
canvas绘制中国象棋棋盘，简单易懂的小Demo,想学canvas的小伙伴可以自行下载学习下
H5+C3+JS实现五子棋 - UI篇
qq_27905183的博客
12-30 974
本篇文章实现的是双人对战模式，主要是实现除人机AI算法和判断输赢之外的其他功能，下一篇将会发布AI框架搭建<!Doctype html> <html> <head> <!-- 百度爬虫优化 --> <meta http-equiv="author" content="成兮，缘分五月" /> <meta http-equiv="Keywords" c
JavaScript实现简单人机五子棋
starstasts的博客
04-10 1454
稍微给自己总结一下上周做的事情： first,根据视频和资料学习了bootstrap,现在回想起来，只记得 响应式 布局 这点了，这周打算找些网页和实例来巩固一下. then, 正在学习jQuery… Last，在慕课网上按照教学视频 完成了稍有趣的一个游戏，五子棋。 主要用到和学到的知识点有： 简单的html和css；html5中的canvas; javascript和一点算法； 以
JavaScript五子棋简单
u010217654的博客
06-27 577
JavaScript五子棋简单demo html 代码 <body> <main class="gobang-box"> <h2>五子棋</h2> <div id="gobang" class="gobang"></div> <p id="orderHint" c...
【Web】HTML+ JS+ CSS 的五子棋（简单AI）
新青年1号
09-30 1754
声明 本文是在观看 慕课网channingbreeze 大神的教学视屏时编写的。文中代码非本人原创，只是在学习过程中跟随教学视频略作修改并加上了详细的注释，以便于理解。 原教学视频地址：https://www.imooc.com/video/11639 HTML代码 CSS代码 JS代码 ...
使用Canvas+JavaScript FileAPI实现图片剪切与滤镜功能
"这篇文档介绍如何使用HTML5的Canvas和JavaScript File API来创建一个功能丰富的图片处理工具，包括图片剪切、滤镜效果以及上传下载功能。文档中的代码示例展示了如何利用HTML5的新特性来实现这些功能。" 在HTML5中...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值