recherche

Maison >interface Web >js tutoriel >js implémente le partage de code de backgammon

js implémente le partage de code de backgammon

小云云
小云云original
2018-02-27 13:54:243488parcourir

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>

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;}

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();
}

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!

JavaScript html5 css html JS canvas 算法
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：js implémente le défilement de la souris pour charger les donnéesArticle suivant：js implémente le défilement de la souris pour charger les données

Articles Liés

Voir plus