Heim > Artikel > Web-Frontend > js implementiert die gemeinsame Nutzung von Backgammon-Code
js implementiert die gemeinsame Nutzung von Backgammon-Code
- 小云云Original
- 2018-02-27 13:54:243408Durchsuche
Dieser Artikel teilt Ihnen hauptsächlich den JS-Code mit, um Backgammon zu implementieren, das Schachbrett und die Schachfiguren durch die Leinwand zu zeichnen und die Logik durch JS-Code zu implementieren.
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;}Skript .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();
}Verwandte Empfehlungen:
Implementierung des Backgammon-Spiels basierend auf JavaScript
HTML5-Webversion von Black and White Beispielcode-Sharing für das Backgammon-Spiel
Das obige ist der detaillierte Inhalt vonjs implementiert die gemeinsame Nutzung von Backgammon-Code. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：js implementiert eine scrollende Maus zum Laden von DatenNächster Artikel：js implementiert eine scrollende Maus zum Laden von Daten