Home > Article > Web Front-end > js implements backgammon code sharing
This article mainly shares with you the js code to implement backgammon, draw the chessboard and chess pieces through canvas, and implement logic through js code.
index.html code:
<!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='restart' class="restart"> <span>重新开始</span> </p> <script type="text/javascript" src="js/script.js"></script></body></html>
style.css code:
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.js code:
//判断是否结束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('2d'); context.strokeStyle = '#bfbfbf'; //边框颜色var logo = new Image(); logo.src = 'images/logo.jpg'; 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(); }
Related recommendations:
Implementing a backgammon game based on JavaScript
Sample code sharing of the HTML5 web version of the black and white backgammon game
The above is the detailed content of js implements backgammon code sharing. For more information, please follow other related articles on the PHP Chinese website!