原生JS+Canvas实现五子棋游戏
时间:2019-03-31
本文章向大家介绍原生JS+Canvas实现五子棋游戏,主要包括原生JS+Canvas实现五子棋游戏使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
本文实例为大家分享了JS Canvas实现五子棋游戏的具体代码,供大家参考,具体内容如下
<!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: #fff; 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 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> <script type="text/javascript" charset="utf-8"> 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 = '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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- C++ 隐式类型转换
- IE漏洞调试之CVE-2013-3893
- C++ STL之迭代器注意事项
- 设计3D标签为什么要有一个字符间隙tracking?为什么要重写getPrefferedSize()?画三遍的顺序有讲究
- C++STL之整理算法
- Offset2lib攻击测试:看我如何全面绕过64位Linux的内核防护
- C++ STL之查找算法
- 教你一招 | Python3新特性(一) :字符串
- C++ STL之set的基本操作
- Android ClassLoader详解
- 揭秘银行木马Chthonic:网银大盗ZeuS的最新变种
- C++STL之map的基本操作
- android EventBus 3.0使用指南
- C++ STL之deque的基本操作
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android开发之实现手势滑动的功能
- Android编程实现带有单选按钮和复选按钮的dialog功能示例
- Android中Retrofit 2.0直接使用JSON进行数据交互
- Android自定义Drawable实现圆形和圆角
- Android jni调试打印char阵列的实例详解
- 写JavaScript函数不得不知的高级技巧
- Android编程视频播放API之MediaPlayer用法示例
- Android实现点击缩略图放大效果
- Android 应用签名的两种方法
- Android 关闭多个Activity的实现方法
- 我从Vue源码中学到的一些JS编程技巧
- 组复制升级 | 全方位认识 MySQL 8.0 Group Replication
- 浅谈关于Android WebView上传文件的解决方案
- Android对图片Drawable实现变色示例代码
- 排序|优先队列不知道,先看看堆排序吧