本文例項為大家分享了JS+Canvas實現五子棋遊戲的具體程式碼，供大家參考，具體內容如下

佈局+樣式部分程式碼 ：

<style type='text/css'>
 canvas {
  display: block;
  margin: 50px auto;
  box-shadow: -2px -2px 2px #efefef,5px 5px 5px #b9b9b9;
  cursor: pointer;
 }

 .btn-wrap {
  display: flex;
  flex-direction: row;
  justify-content: center;
 }

 .btn-wrap div {
  margin: 0 10px;
 }

 div>span {
  display: inline-block;
  padding: 10px 20px;
  color: #fff;
  background-color: #EE82EE;
  border-radius: 5px;
  cursor: pointer;
 }
 
 div.unable span {
  background: #D6D6D4;
  color: #adacaa;
 }
 
 #result-wrap {
  text-align: center;
 }
 </style>
 
 <h3 id="result-wrap">--五子棋--</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>

js部分程式碼：

<script>
 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");
 window.onload = function () {
  drawChessBoard(); // 畫棋盤 
 }
 document.getElementById("restart").onclick = function () {
  window.location.reload();
 }
 // 我，下棋 
 chess.onclick = function (e) {
  if (over) {
  return;
  }
  if (!me) {
  return;
  }
  // 悔棋功能可用 
  backbtn.className = backbtn.className.replace(new RegExp("(\\s|^)unable(\\s|$)")," ");
  var x = e.offsetX;
  var y = e.offsetY;
  var i = Math.floor(x / 30);
  var j = Math.floor(y / 30);
  _nowi = i;
  _nowj = j;
  if (chressBord[i][j] == 0) {
  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) {
    // window.alert('你贏了'); 
    resultTxt.innerHTML = '恭喜，你贏了！';
    over = true;
   }
   }
  }
  if (!over) {
   me = !me;
   computerAI();
  }
  }
 }
 // 悔棋 
 backbtn.onclick = function (e) {
  if (!backAble) { return; }
  over = false;
  me = true;
  // resultTxt.innerHTML = 'o(╯□╰)o，悔棋中'; 
  // 撤銷悔棋功能可用 
  returnbtn.className = returnbtn.className.replace(new RegExp("(\\s|^)unable(\\s|$)")," ");
  // 我，悔棋 
  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]--;
   myWin[k] = _myWin[i];//這個位置對方可能贏 
  }
  }
  resultTxt.innerHTML = '益智五子棋';
  returnAble = true;
  backAble = false;
 }
 // 撤銷悔棋 
 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;//這個位置對方不可能贏 
  }
  if (myWin[k] == 5) {
   resultTxt.innerHTML = '恭喜，你贏了！';
   over = true;
  }
  }
  // 計算機撤銷相應的悔棋 
  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;//這個位置對方不可能贏 
  }
  if (computerWin[k] == 5) {
   resultTxt.innerHTML = '計算機贏了，繼續加油哦！';
   over = true;
  }
  }
  returnbtn.className += ' ' + 'unable';
  returnAble = false;
  backAble = true;
 }
 // 計算機下棋 
 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) {
   resultTxt.innerHTML = '計算機贏了，繼續加油哦！';
   over = true;
   }
  }
  }
  if (!over) {
  me = !me;
  }
  backAble = true;
  returnAble = false;
  var hasClass = new RegExp('unable').test(' ' + returnbtn.className + ' ');
  if (!hasClass) {
  returnbtn.className += ' ' + 'unable';
  }
 }
 //繪畫棋盤 
 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,me) {
  context.beginPath();
  context.arc(15 + i * 30,15 + j * 30,13,2 * Math.PI);// 畫圓 
  context.closePath();
  //漸變 
  var gradient = context.createRadialGradient(15 + i * 30 + 2,15 + j * 30 - 2,15 + i * 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();
 } 
</script>

更多有趣的經典小遊戲實現專題，分享給大家：

C++經典小遊戲彙總

python經典小遊戲彙總

python俄羅斯方塊遊戲集合

JavaScript經典遊戲 玩不停

javascript經典小遊戲彙總

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。