简单的五子棋小游戏(html+css+js)

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>五子棋</title><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: #FFFFFF;background-color: #EE82EE;border-radius: 5px;cursor: pointer;}div.unable span {background: #D6D6D4;color: #ADACAA;}#result-wrap {text-align: center;}</style></head><body><h3 id="result-wrap">--益智五子棋--</h3><canvas id="chess" width="450px" height="450px"></canvas><div id="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><script type="text/javascript">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(newRegExp("(\\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++) { // 将可能赢的情况都加1if(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( newRegExp("(\\s|^)unable(\\s|$)")," ");// 我，悔chressBord[_nowi][_nowj] = 0; //我，已占位置 还原minusStep(_nowi, _nowj); //销毁棋子for (var k = 0; k < count; k++) { // 将可能赢的情况都减1if(wins[_nowi][_nowj][k]){myWin[k]--;computerWin[k] = _compWin[k]; //这个位置对方可能赢}}// 计算机相应的悔棋chressBord[_compi][_compj] = 0; //计算机，已占位置 还原minusStep(_compi, _compj);//销毁棋子 for (var k = 0; k < count; k++) {// 将可能赢的情况都减1if(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++) {// 将可能赢的情况都减1if(wins[_compi][_compj][k]){computerWin[k]++;_myWin[k] = myWin[k];myWin[k] = 6;//这个位置对方不可能赢}if(computerWin[k] == 5){resultTxt.innerHTML = 'o(╯□╰)o，计算机赢了，继续加油哦！';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 = 'o(╯□╰)o，计算机赢了，继续加油哦！';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,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();}//销毁棋子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></body>
</html>

简单的五子棋小游戏(html+css+js)相关推荐

“限时分享“ 本地80个小游戏 HTML+CSS+JS源码分享
开源项目集合 1. "限时分享" 本地80个小游戏 HTML+CSS+JS源码分享 2. "限时分享" 别错过了,最全的微信小程序源码收集分享里面有80款小游 ...
教你怎么用c++基本语法实现一个简单的五子棋小游戏
这个小游戏是在2020年5月份无聊写的,代码量不大,权当娱乐哈基本思路: 1.创建一个15*15棋盘类,并设计相关函数(输出棋盘,下黑棋,下白棋等) 2.编写judge()函数,判断胜负条件 3.主 ...
canvas画图实现一个简单的五子棋小游戏
原生js+canvas写一个五子棋 HTML <div id="pox"><canvas style="border:5px solid rgb(43, ...
C语言——简单的五子棋小游戏开发设计
下面展示一些功能实现一.菜单功能模块设计 int Menu() {system("color 3F");printf("-----------------亲,欢迎来到 ...
一个简单的五子棋小游戏
利用c语言编写,在vs2017上编译运行废话不多说直接上完整代码 #include <stdio.h> //基本输入输出头文件 #include "graphics.h&quo ...
基于 Blazor 开发五子棋小游戏
今天是农历五月初五,端午节.在此,祝大家端午安康! 端午节是中华民族古老的传统节日之一.端午也称端五,端阳.此外,端午节还有许多别称,如:午日节.重五节.五月节.浴兰节.女儿节.天中节.地腊.诗人节. ...
前端实现五子棋小游戏1（本地双人对战）
运用canvas写一个本地五子棋小游戏 HTML部分 JS 部分 CSS 部分实现效果 HTML部分 <!DOCTYPE html> <html lang="en&quo ...
五子棋聊天java_Java如何实现五子棋小游戏(1)
1. 前言该项目为经典版本的五子棋游戏和自创的毁灭玩法所结合,总体而言是一个休闲的小游戏.其中的规则不难,主要是为了丰富大家的文娱生活,让大家在忙碌的学习课后可以轻松一小下.这就是本程序的编写初衷. ...
Android Studio实现五子棋小游戏
项目目录一.项目概述二.开发环境三.详细设计 1.布局设计 2.验证码 3.AI人机 4.背景音乐四.运行演示五.项目总结六.源码获取一.项目概述五子棋是一种两人对弈的策略型棋类游戏, ...

简单的五子棋小游戏(html+css+js)

简单的五子棋小游戏(html+css+js)相关推荐

最新文章

热门文章