js implémente le partage de code de backgammon-js tutoriel-php.cn

js implémente le partage de code de backgammon

小云云

Libérer： 2018-02-27 13:54:24

original

3487 Les gens l'ont consulté

Cet article partage principalement avec vous le code js pour implémenter le backgammon, dessiner l'échiquier et les pièces d'échecs à travers le canevas et implémenter la logique via le code js.

code index.html :

<!DOCTYPE html><html><head>
    <meta charset="utf-8">
    <title>五子棋</title>
    <link rel="stylesheet" type="text/css" href="css/style.css"></head><body>
    <canvas id="chess" width="450px" height="450px"></canvas>
    <p id=&#39;restart&#39; class="restart">
            <span>重新开始</span>
        </p>
    <script type="text/javascript" src="js/script.js"></script></body></html>

Copier après la connexion

code style.css :

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: #C92027;    border-radius: 5px;}

Copier après la connexion

script Code .js :

//判断是否结束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;
}//获得canvas对象var chess = document.getElementById("chess");var context = chess.getContext(&#39;2d&#39;);

context.strokeStyle = &#39;#bfbfbf&#39;; //边框颜色var logo = new Image();
logo.src = &#39;images/logo.jpg&#39;;
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(&#39;你赢了&#39;);
                    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(&#39;计算机赢了&#39;);
                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,&#39;#0a0a0a&#39;);
        gradient.addColorStop(1,&#39;#636766&#39;);
    }else{
        gradient.addColorStop(0,&#39;#d1d1d1&#39;);
        gradient.addColorStop(1,&#39;#f9f9f9&#39;);
    }
    context.fillStyle = gradient;
    context.fill();
}

Copier après la connexion

Recommandations associées :

Implémentation d'un jeu de backgammon basé sur JavaScript

Version web HTML5 de Exemple de partage de code en noir et blanc pour le jeu de backgammon

Javascript et HTML5 utilisent Canvas pour créer un algorithme de mise en œuvre d'un jeu de backgammon Web_compétences javascript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!