js五子棋

最新推荐文章于 2023-08-10 18:40:44 发布
最新推荐文章于 2023-08-10 18:40:44 发布
阅读量228 收藏 1
点赞数
分类专栏： js特效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
    /**{padding: 0px;margin: 0px;}*/
    body{background-color: #0E0001;}
canvas{
display: block;
margin: 50px auto;
box-shadow: -2px -2px 2px #efefef, 5px 5px 5px #b9b9b9;
}
.restart{
    text-align: center;
}
.restart>span{
    display: inline-block;
    padding: 10px 20px;
    color: #fff;
    background-color: #45c01a;
    border-radius: 5px;
    cursor: pointer;
}
</style>
</head>
<body>
    <canvas id="chess" width="450px" height="450px"></canvas>
    <div id='restart' class="restart">
        <span>重新开始</span>
    </div>




<script type="text/javascript">
var over = false;
var me = true; //我


var chressBord = [];//棋盘
for(var i = 0; i < 15; i++){
    chressBord[i] = [];
    for(var j = 0; j < 15; j++){
        chressBord[i][j] = 0;
    }
}


//赢法的统计数组
var myWin = [];
var computerWin = [];


//赢法数组
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++;
    }
}


for(var i = 0; i < count; i++){
    myWin[i] = 0;
    computerWin[i] = 0;
}
var chess = document.getElementById("chess");
var context = chess.getContext('2d');


context.strokeStyle = '#bfbfbf'; //边框颜色


var logo = new Image();
logo.src = 'img/logo.png';  //背景图片（一张纯白图片）
logo.onload  = function(){
    context.drawImage(logo,0,0,450,450);
    drawChessBoard();
}


document.getElementById("restart").onclick = function(){
    window.location.reload();
}
chess.onclick = function(e){
    if(over){
        return;
    }


    if(!me){
        return;
    }
    var x = e.offsetX;
    var y = e.offsetY;
    var i = Math.floor(x / 30);
    var j = Math.floor(y / 30);
    if(chressBord[i][j] == 0){
        oneStep(i,j,me);
        chressBord[i][j] = 1;//我        
                    
        for(var 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();
        }
    }
    
}
//计算机下棋
//获取计算机所有棋子的数组。
//获取计算机棋子所走路线的空数组
var computerAI = function (){
    var myScore = [];
    var computerScore = [];
    var max = 0;
    var u = 0, 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(chressBord[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);
    chressBord[u][v] = 2;
    for(var 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;
    }
}


//绘画棋盘
var drawChessBoard = 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();
    }
}
//画旗子
//获取坐标进行算法计数开始绘制对应棋子
//结束绘制之后再设置棋子的渐变色彩效果。
var oneStep = function(i,j,me){
    context.beginPath();
    context.arc(15 + i * 30, 15 + j * 30, 13, 0, 2 * Math.PI);//画圆
    context.closePath();
    //渐变
    var gradient = context.createRadialGradient(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');
    }else{
        gradient.addColorStop(0,'#d1d1d1');
        gradient.addColorStop(1,'#f9f9f9');
    }
    context.fillStyle = gradient;
    context.fill();
}
</script>
</body>
</html>



一梦醉殇
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用javascript实现五子棋(一)
从零开始的博客
10-04 2万+
大学毕业进了公司学了几个月的web开发,只会用jquery做事,但是又不甘心,又想要深入的学习一下js,但是无论怎么学都感觉自己抓不到要领。于是决定通过写js游戏来锻炼一下自己。 一、游戏背景画面 既然是锻炼js能力，用图片当背景怎么行，这里我选择了html5的canvas标签来绘制五子的整个背景，html代码如下 五子棋游戏 后台的绘制背
javascript 五子棋
xidianyueyong的博客
09-29 846
html： 无标题文档 play.js: // JavaScript Document var black=new Image(); var white=new Image(); black.src='2.gif'; white.src='1.gif'; var timer=null; var i=0; var map=[]; for(var j=0;j<14;
JS实现五子棋源码全
05-07
搜索算法实现五子棋，是学习JS算法，JS游戏入门的好素材
JS五子棋（AI）
whrjxyygx的专栏
07-24 777
JS五子棋的简单AI实现
js数组案例---五子棋
赵佳敏的博客
10-02 401
js数组案例---五子棋一、效果图二、设计思路三、核心代码 一、效果图 二、设计思路 第一步：创建棋盘，生成棋盘所对应的数组坐标。 第二步：鼠标点击当前位置返回当前点的坐标。 第三步：生成对应的棋子。 第四步：添加悔棋、重新开始事件。 第五步：设置棋子输赢，若某个棋子五个连成一条线，则该棋子赢。 三、核心代码 //1.创建棋盘 var item = document.querySelector(".item-map"); var itemchild = docum.
JavaScript五子棋
12-27
JavaScript五子棋是一款利用JavaScript语言和HTML5的canvas元素实现的双人对战游戏。在这个游戏中，两位玩家可以通过网络或在同一设备上轮流在棋盘上下棋，目标是先连成五子的一方获胜。下面我们将深入探讨这个项目...
纯JS五子棋
08-31
【纯JS五子棋】是一款完全使用JavaScript编程语言开发的在线小游戏，专为五子棋爱好者设计。在这款游戏中，玩家可以通过浏览器直接进行对弈，无需安装任何客户端或插件，体现了Web技术的便捷性。JavaScript是前端...
js五子棋js五子棋
04-27
非常好的游戏源代码js五子棋
js五子棋小游戏
10-30
【js五子棋小游戏】是一款基于JavaScript和HTML技术开发的小型在线游戏，旨在提供一个轻松娱乐的环境，同时也为编程爱好者提供了一个学习实践JavaScript和HTML交互的实例。在这个项目中，我们将探讨如何利用这两种...
js五子棋（带AI）
源计划猿的专栏
04-08 1336
照着视频自己敲的，200多行，注释写的很多。 csdn的git链接 请在链接看完整的。主要js代码 var chessBoard = []; var me = true; var over = false;//赢法数组,三维 var wins = [];//赢法的统计数组，一维 var myWin = []; var computerWin = [];//定义棋盘 for(var i = 0;
JS之五子棋游戏
秀玉轩晨的博客
06-08 1099
JS代码var obox = document.getElementById("box"), arr = Array.apply(null,{length:20}), divWid = obox.offsetWidth / arr.length, oposi = obox.querySelector(".kuang .show"), pieces = obox.qu...
js 五子棋
tcnight的博客
11-16 347
Day 01   Canvas 01: var chess=document.getElementById('chess') var context=chess.getContext('2d') 取对象，赋值给chess，再通过getContext方法把一个2d 画板赋给变量context 02: 划线 context.moveTo(x1,y1);    context.line
JavaScript五子棋简单
u010217654的博客
06-27 574
JavaScript五子棋简单demo html 代码 <body> <main class="gobang-box"> <h2>五子棋</h2> <div id="gobang" class="gobang"></div> <p id="orderHint" c...
JavaScript应用：五子棋游戏实战开发
最新发布
黑夜开发者的博客
08-10 3222
本篇文章介绍了如何使用JavaScript开发一个简单的五子棋游戏。通过绘制棋盘、实现开始按钮和游戏逻辑、处理用户交互、判断胜负和游戏结束等功能，我们完成了一个基本的五子棋游戏。当然，我们还可以对游戏进行优化和扩展，例如增加悔棋功能、提示下一步最佳落子位置等。JavaScript是一种非常强大和灵活的编程语言，可以用于开发各种类型的应用程序和游戏。希望通过这篇文章，你对使用JavaScript开发游戏有了更深入的了解。如果你对五子棋游戏开发还有任何问题或建议，欢迎在评论区留言讨论。
五子棋AI智能算法设计和测试方法
baidu_41801770的博客
06-26 1884
我对算法的思路是：黑棋的进攻点就是白棋的防守点，反之，白棋的进攻点就是黑棋的防守点。我的算法思路就这样。必杀局有双活三，双冲四，冲四加活三，嵌五加活三，嵌五加冲四，这些必杀局就是必胜法宝。if(pn[k-2]==0&&pn[k-1]==0&&pn[k]==1&&pn[k+1]==1&&pn[k+2]==1&&pn[k+3]==0&&pn[k+4]==0){ //左右。先前发了几篇五子棋游戏程序设计的博文，设计了游戏程序，也设计了AI智能奕棋的算法，运行程序检测算法的可行性，完成人机模式游戏功能的设置。
原生Javascript实现五子棋
qq_41961383的博客
08-26 3541
原生Javascript实现五子棋
五子棋AI算法第七篇-Zobrist
热门推荐
言川的博客
03-07 1万+
关于本博客这个博客不是把五子棋算法研究透彻之后再写的，而是一边研究算法一边写代码，同时一边写博客，所以有些博文的顺序不太对，比如 Zobrist 其实应该放在算杀之前就讲的。不过这并没有大的影响，总体上的顺序是OK的。另外，这一系列博客讲的五子棋代码其实是一个开源的项目，源码地址： https://github.com/lihongxun945/gobang由于是边写代码边写博客，所以博客中的代码不
用javascript实现五子棋(二)
从零开始的博客
10-04 3064
前面已经实现了整个游戏流程，现在讲五子棋AI的实现，五子棋AI的实现方法主要是以下几种： 1.查表法，保存一些棋谱，电脑下棋的时候自动匹配 2.分值法：对棋盘上的每一个空位进行检索，假设这个空位放某种棋子，然后根据不同的情况给出不同的分值，在分值最高的地方下棋 3.博弈树：列出所有情况，用极大极小值搜索选出最佳路径 4.电脑每次输掉棋局后，保存记录，以后不再重复 这里只说分值法：我的想法
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值