JS 五子棋帶成績排名

前往游戲：http://wx0725.top/index.php/181.html

在這里插入圖片描述

自己看著重新寫吧，下面代碼只是一個思路，也有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;
        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;
                        }
                    }

                }
            }
        }
        _compi = u;
        _compj = v;
        oneStep(u, v, false);
        chressBord[u][v] = 2; //計算機占據位置
        for (var k = 0; k < count; k++) {
            if (wins[u][v][k]) {
                computerWin[k]++;
                _myWin[k] = myWin[k];
                myWin[k] = 6; //這個位置對方不可能贏了
                if (computerWin[k] == 5) {
                    fail_f();
                }
            }
        }
        able_back(); // 確保我下棋并且計算機也下棋，才能允許悔棋
        unable_return();
        if (!over) { // 如果沒有結束，換棋手
            me = !me;
        } else { // 如果結束了
            if (winner == "computer") unable_back();
        }
    }
    //繪畫棋盤
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();
    }
}
drawChessBoard(); // 畫棋盤

//畫棋子
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();
    }
    //銷毀棋子
var minusStep = function(i, j) {
    //擦除該圓
    context.clearRect((i) * 30, (j) * 30, 30, 30);
    // 重畫該圓周圍的格子
    context.beginPath();
    context.moveTo(15 + i * 30, j * 30);
    context.lineTo(15 + i * 30, j * 30 + 30);
    context.moveTo(i * 30, j * 30 + 15);
    context.lineTo((i + 1) * 30, j * 30 + 15);

    context.stroke();
}

php 保存成績

gobangSave.php

function gobangSave()
{ // 五子棋
    if ($_POST['base64'] != "" && $_POST['city'] != "" && $_POST['ip'] != "") {
        //接收base64資料
        $image = $_POST['base64'];
        if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $image, $result)) {
            $name = $_POST["city"] . "-" . $_POST["ip"] .  "-" . time() . '.png';
            $imageName = "./wuziqi/" . $name;
            is_file($imageName) or fclose(fopen($imageName, 'w'));
            if (file_put_contents($imageName, base64_decode(str_replace($result[1], '', $image)))) {
                echo "成績有效👍, 您的成績已經展示在下方，重繪頁面查看，";
            } else {
                echo "抱歉，檔案寫入有誤，請聯系管理員！";
            }
        } else {
            echo "抱歉，檔案格式有誤！";
        }
    } else {
        echo "抱歉，成績無效，如有疑問請聯系管理員或留言反饋！";
    }
}
$function = $_POST["function"];
if ($function == "gobangSave") {
    gobangSave();
}

前往游戲：http://wx0725.top/index.php/181.html

推薦：公眾號能干嗎？http://wx0725.top/index.php/archives/224/

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/375044.html

標籤：其他

上一篇：Java猜數字游戲

下一篇：12月4日學習總結

五子棋 原始碼

JS 五子棋 帶成績排名

1. 原始碼

HTML

Javascript

php 保存成績

推薦：公眾號能干嗎？http://wx0725.top/index.php/archives/224/

五子棋原始碼

JS 五子棋帶成績排名