五子棋源码

Posted 2022-12-16 流星蝴蝶没有剑

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了五子棋源码相关的知识，希望对你有一定的参考价值。

JS 五子棋带成绩排名

游戏：http://wx0725.top/index.php/181.html

主程序学习：https://blog.csdn.net/qq_44731019/article/details/109586730

改了几个 BUG
添加了成绩截图功能
去掉了悔棋

自己看着重新写吧，下面代码只是一个思路，也有bug。。。

1. 源码

html

 <div class="row">
     <h3 id="result-wrap" style="color: red;"><img src="http://wx0725.top/image/black_qizi.png" alt=""></h3>
     <canvas id="chess" width="450px" height="450px"></canvas>
     <div class="btn-wrap">
         <div id='restart' class="restart">
             <span>重新开始</span>
         </div>
         <div id='goback' class="goback unable">
             <!-- <span>悔棋</span> -->
         </div>
         <div id='return' class="return unable">
             <!-- <span>撤销悔棋</span> -->
         </div>
     </div>
 </div>

javascript

代码中有注释啊啊啊

var fail_text = '👏，计算机赢了，继续加油哦！';
var win_text = '恭喜，你赢了！😱';
var back_text = '只能撤销一步哦😂';
var winner = ""; // 假设胜利者是计算机
var over = false;
var me = true; //我
var _nowi = 0,
    _nowj = 0; //记录自己下棋的坐标
var _compi = 0,
    _compj = 0; //记录计算机当前下棋的坐标
var _myWin = [],
    _compWin = []; //记录我，计算机赢的情况
var backAble = false,
    returnAble = false;
var resultTxt = document.getElementById('result-wrap');
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++;
    

// debugger;
for (var i = 0; i <= count; i++) 
    myWin[i] = 0;
    _myWin[i] = 0;
    computerWin[i] = 0;
    _compWin[i] = 0;


var chess = document.getElementById("chess");
var context = chess.getContext('2d');
context.strokeStyle = '#bfbfbf'; //边框颜色
var backbtn = document.getElementById("goback");
var returnbtn = document.getElementById("return");

document.getElementById("restart").onclick = function() 
    window.location.reload();


function save_chess()  // 发送棋谱截图
    // 截图发送
    var chessSrc = chess.toDataURL("image/png");
    var data = 
        function: "gobangSave",
        base64: chessSrc,
        city: address, // 地址和IP自己找，不需要可以去掉，记得后台代码做对应的修改，可以使用时间戳命名保存的图片名称
        ip: ip,
    ;
    $.ajax( // 提交截图
        url: "gobangSave.php", // 填写后台php的链接
        type: "post",
        data: data,
        async: true,
        success: function(e) 
        ,
        error: function(e) 
        
    )


function win_f()  // 我赢了
    resultTxt.innerHTML = win_text;
    over = true;
    var me_com = [0, 0, 0]; // 地图中 默认、我、计算机 分别占位的个数
    for (var i = 0; i < 15; i++) 
        for (var j = 0; j < 15; j++) 
            me_com[chressBord[i][j]]++;
        
    
    if (me_com[1] != me_com[2] + 1) 
        setTimeout(function() 
            alert("下棋成绩异常，如有问题请联系管理员或留言");
        , 500);
        return;
    
    winner = "me";
    setTimeout(function() 
        alert(win_text + " 您可以选择【重新开始】继续游戏！");
    , 1000)


function fail_f()  // 计算机赢了
    resultTxt.innerHTML = fail_text;
    over = true;
    winner = "computer";
    setTimeout(function() 
        alert(fail_text + " 您可以选择【重新开始】继续游戏！");
    , 1000)


function able_back()  // 允许悔棋
    backAble = true;
    backbtn.className = backbtn.className.replace(new RegExp("(\\\\s|^)unable(\\\\s|$)"), " ");


function unable_back()  // 不允许悔棋
    backAble = false;
    var hasClass = new RegExp('unable').test(' ' + backbtn.className + ' ');
    if (!hasClass) 
        backbtn.className += ' ' + 'unable';
    


function able_return()  // 允许撤销悔棋
    returnAble = true;
    returnbtn.className = returnbtn.className.replace(new RegExp("(\\\\s|^)unable(\\\\s|$)"), " ");


function unable_return()  // 不允许撤销悔棋
    returnAble = false;
    var hasClass = new RegExp('unable').test(' ' + returnbtn.className + ' ');
    if (!hasClass) 
        returnbtn.className += ' ' + 'unable';
    



// 我，下棋
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) 
            _nowi = i; // 源码中的BUG，这两行更新现在的位置需要放在if中，否则会在撤销的时候出现问题
            _nowj = j;
            oneStep(i, j, me);
            chressBord[i][j] = 1; //我，已占位置   

            for (var k = 0; k < count; k++)  // 将可能赢的情况都加1
                if (wins[i][j][k]) 
                    // debugger;
                    myWin[k]++;
                    _compWin[k] = computerWin[k];
                    computerWin[k] = 6; //这个位置对方不可能赢了
                    if (myWin[k] == 5) 
                        win_f();
                    
                
            
            if (!over)  // 没结束计算机下棋
                me = !me;
                computerAI();
             else 
                if (winner == "me") 
                    unable_back();
                    save_chess();
                
            
        
    
    // 悔棋
backbtn.onclick = function(e) 
        if (!backAble) 
            return;
        
        over = false;
        me = true;
        // 我，悔棋
        chressBord[_nowi][_nowj] = 0; //我，已占位置 还原
        minusStep(_nowi, _nowj); //销毁棋子                                  
        for (var k = 0; k < count; k++)  // 将可能赢的情况都减1
            if (wins[_nowi][_nowj][k]) 
                myWin[k]--;
                computerWin[k] = _compWin[k]; //这个位置对方可能赢
            
        
        // 计算机相应的悔棋
        chressBord[_compi][_compj] = 0; //计算机，已占位置 还原
        minusStep(_compi, _compj); //销毁棋子                                  
        for (var k = 0; k < count; k++)  // 将可能赢的情况都减1
            if (wins[_compi][_compj][k]) 
                computerWin[k]--;
                // 源代码中的BUG **** _myWin[k]中 i 改为 k
                myWin[k] = _myWin[k]; //这个位置对方可能赢
            
        
        resultTxt.innerHTML = back_text;
        able_return(); // 允许撤销悔棋
        unable_back(); // 不允许悔棋
    
    // 撤销悔棋
returnbtn.onclick = function(e) 
        if (!returnAble) 
            return;
        
        // 我，撤销悔棋
        chressBord[_nowi][_nowj] = 1; //我，已占位置 
        oneStep(_nowi, _nowj, me);
        for (var k = 0; k < count; k++) 
            if (wins[_nowi][_nowj][k]) 
                myWin[k]++;
                _compWin[k] = computerWin[k];
                computerWin[k] = 6; //这个位置对方不可能赢
            
        
        // 计算机撤销相应的悔棋
        chressBord[_compi][_compj] = 2; //计算机，已占位置   
        oneStep(_compi, _compj, false);
        for (var k = 0; k < count; k++)  // 将可能赢的情况都减1
            if (wins[_compi][_compj][k]) 
                computerWin[k]++;
                _myWin[k] = myWin[k];
                myWin[k] = 6; //这个位置对方不可能赢
            
        
        able_back(); // 允许悔棋
        unable_return(); // 不允许撤销悔棋
    
    // 计算机下棋
var computerAI = function() 
        var myScore = [];
        var computerScore = [];
        var max = 0;
        var u = 0,
            v = 0<以上是关于五子棋 源码的主要内容，如果未能解决你的问题，请参考以下文章 
 MaOC五子棋源码
 五子棋 源码
 五子棋 源码
 源码分享iOS-OC版五子棋
 关于五子棋的java源码
 C#五子棋小游戏源码（人机对战）

五子棋 源码

JS 五子棋 带成绩排名

1. 源码

html

javascript

五子棋源码

JS 五子棋带成绩排名