JavaScript+canvas 实现五子棋游戏

日期：2020-07-06 浏览：97 评论：0

核心提示：五子棋</div><div id="content"><div class="content" id="article"><pre><code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>五子棋</title> <style> *{ margin: 0; padding: 0; } html,body{ position: relative; background-color: #336; width: 100%; height: 100%; } p{ font-size: 20px; color: #fff; text-align: center; padding-top: 20px; } #canvas{ position: absolute; display: block; top: 0; bottom: 0; left: 0; right: 0; margin: auto; background-color: #fff; width: 480px; height: 480px; } </style> </head> <body> <p id="order">该黑棋落子了！</p> <canvas id="canvas" width="480" height="480"></canvas> </body> <script> var p = document.getElementById("order"); var canvas = document.querySelector("#canvas"); var context = canvas.getContext('2d'); var cw,ch,count=0, t = canvas.offsetTop, l = canvas.offsetLeft; var state = new Array(); ~~function setSize(){ window.onresize = arguments.callee; cw = window.innerWidth; ch = window.innerHeight; canvas.width = cw; canvas.height = ch; } function initArray(state){ for(var i=0;i<15;i++){ state[i] = new Array(); for(var j=0;j<15;j++){ state[i][j] = -1; } } } function init(){ //画棋盘 context.beginPath(); for(var i=1;i<16;i++){ context.moveTo(30*i,30); context.lineTo(30*i,450); } for(var i=1;i<16;i++){ context.moveTo(30,30*i); context.lineTo(450,30*i); } context.stroke(); //画棋点 draw(240,240,3); draw(120,120,3); draw(360,120,3); draw(120,360,3); draw(360,360,3); } //画空心圆 function draw(x,y,r){ context.beginPath(); context.arc(x,y,r,0,Math.PI*2); context.stroke(); } function Chess(){}; Chess.prototype = { //画棋子 drawChess: function(x,y,r){ this.x = x; this.y = y; this.r = r; if(count == 0){ context.fillStyle = "black"; count = 1; } else{ context.fillStyle = "white"; count = 0; } context.beginPath(); context.arc(x,y,r,0,Math.PI*2); context.fill(); }, //判断胜负 rule: function(ix,iy,s){ var hc=0,vc=0,rdc=0,luc=0; //horizontal for(var i=ix;i<15;i++){ if(state[i][iy] != s){ break; } hc++; } for(var i=ix-1;i>=0;i--){ if(state[i][iy] != s){ break; } hc++; } //vertical for(var j=iy;j<15;j++){ if(state[ix][j] != s){ break; } vc++; } for(var j=iy-1;j>=0;j--){ if(state[ix][j] != s){ break; } vc++; } //rightdown for(var i=ix,j=iy;i<15 && j<15;i++,j++){ if(state[i][j] != s){ break; } rdc++; } for(var i=ix-1,j=iy-1;i>=0 && j>=0;i--,j--){ if(state[i][j] != s){ break; } rdc++; } //leftup for(var i=ix,j=iy;i<15 && j>=0;i++,j--){ if(state[i][j] != s){ break; } luc++; } for(var i=ix-1,j=iy+1;i>=0 && j<15;i--,j++){ if(state[i][j] != s){ break; } luc++; } if(hc == 5 || vc == 5 || rdc == 5 || luc == 5){ if(s == 0){ alert("Black Win!"); } else{ alert("White Win!"); } //清空画布并初始化画布和棋子状态 context.clearRect(0,0,480,480); p.innerText = "该黑棋落子了！"; init(); initArray(state); } } } //点击事件 canvas.onclick = function(e){ var w,h; w = e.pageX - l; h = e.pageY - t; w = parseInt((w+15)/30) * 30; h = parseInt((h+15)/30) * 30; var i = w/30-1; var j = h/30-1; //棋子冲突检查 if(state[i][j] == -1){ var s = count; state[i][j] = count; var chess = new Chess(); chess.drawChess(w,h,14); draw(w,h,14); if(s == 0){ p.innerText = "该白棋落子了！"; } else{ p.innerText = "该黑棋落子了！"; } chess.rule(i,j,s); } } init(); initArray(state); </script> </html> </code></pre></div> </div> <div class="b20 c_b"> </div> <div class="award"><div onclick="Go('https://www.youqizhuangbei.com/member/award.php?mid=21&itemid=18379');">打赏</div></div> <div class="b20"> </div> 本文转载自：网络 <div class="b20"> 所有权利归属于原作者，如文章来源标示错误或侵犯了您的权利请联系微信13520258486 </div> <div class="b20"> </div> <div class="head-txt"><a href="https://www.youqizhuangbei.com/news/wulianwangwenzhang-c111-1.html">更多></a>最近资讯中心</div> <div class="related"> <table width="100%"> <tr><td width="50%"><a href="https://www.youqizhuangbei.com/news/show-18378.html" title="贪心之老鼠与猫的交易（详细分析）">• 贪心之老鼠与猫的交易（详细分析）</a></td> <td width="50%"><a href="https://www.youqizhuangbei.com/news/show-18377.html" title="来博客的第一天">• 来博客的第一天</a></td> </tr><tr><td width="50%"><a href="https://www.youqizhuangbei.com/news/show-18376.html" title="PTA 7-3 螺旋方阵（防溢出）">• PTA 7-3 螺旋方阵（防溢出）</a></td> <td width="50%"><a href="https://www.youqizhuangbei.com/news/show-18375.html" title="【纪中2020.5.06日】模拟赛题解">• 【纪中2020.5.06日】模拟赛题解</a></td> </tr><tr><td width="50%"><a href="https://www.youqizhuangbei.com/news/show-18374.html" title="LC.44. 通配符匹配(DP)">• LC.44. 通配符匹配(DP)</a></td> <td width="50%"><a href="https://www.youqizhuangbei.com/news/show-18373.html" title="算法设计分析题库五">• 算法设计分析题库五</a></td> </tr></table> <table width="100%"> <tr><td width="50%"><a href="https://www.youqizhuangbei.com/news/show-35506.html" title="Esp8266天猫精灵_RGB灯_非点灯平台">• Esp8266天猫精灵_RGB灯_非点灯平台</a></td> <td width="50%"><a href="https://www.youqizhuangbei.com/news/show-35505.html" title="STM32F103 串口1和串口3对发数据配合蓝牙模块实现手机和单片机的简单通信demo">• STM32F103 串口1和串口3对发数据配合蓝牙模块 </a></td> </tr><tr><td width="50%"><a href="https://www.youqizhuangbei.com/news/show-35504.html" title="TMS570学习【1】了解什么是TMS570">• TMS570学习【1】了解什么是TMS570</a></td> <td width="50%"><a href="https://www.youqizhuangbei.com/news/show-35503.html" title="新闻稿 | Qt公司收购froglogic公司以巩固市场领导者地位">• 新闻稿 | Qt公司收购froglogic公司以巩固市场领</a></td> </tr><tr><td width="50%"><a href="https://www.youqizhuangbei.com/news/show-35502.html" title="[Java]SpringBoot2整合mqtt服务器EMQ实现消息订阅发布入库(二)">• [Java]SpringBoot2整合mqtt服务器EMQ实现消息订</a></td> <td width="50%"><a href="https://www.youqizhuangbei.com/news/show-35501.html" title="苹果群控投屏同步操作原理及运用的平台APP分享">• 苹果群控投屏同步操作原理及运用的平台APP分享</a></td> </tr></table> </div> <div class="b20"> </div> <div class="head-txt"><a href="https://www.youqizhuangbei.com/news/wulianwangwenzhang-c111-1.html">更多></a>最新资讯中心</div> <div class="related"><table width="100%"> <tr><td width="50%"><a href="https://www.youqizhuangbei.com/news/show-35506.html" title="Esp8266天猫精灵_RGB灯_非点灯平台">• Esp8266天猫精灵_RGB灯_非点灯平台</a></td> <td width="50%"><a href="https://www.youqizhuangbei.com/news/show-35505.html" title="STM32F103 串口1和串口3对发数据配合蓝牙模块实现手机和单片机的简单通信demo">• STM32F103 串口1和串口3对发数据配合蓝牙模块 </a></td> </tr><tr><td width="50%"><a href="https://www.youqizhuangbei.com/news/show-35504.html" title="TMS570学习【1】了解什么是TMS570">• TMS570学习【1】了解什么是TMS570</a></td> <td width="50%"><a href="https://www.youqizhuangbei.com/news/show-35503.html" title="新闻稿 | Qt公司收购froglogic公司以巩固市场领导者地位">• 新闻稿 | Qt公司收购froglogic公司以巩固市场领</a></td> </tr><tr><td width="50%"><a href="https://www.youqizhuangbei.com/news/show-35502.html" title="[Java]SpringBoot2整合mqtt服务器EMQ实现消息订阅发布入库(二)">• [Java]SpringBoot2整合mqtt服务器EMQ实现消息订</a></td> <td width="50%"><a href="https://www.youqizhuangbei.com/news/show-35501.html" title="苹果群控投屏同步操作原理及运用的平台APP分享">• 苹果群控投屏同步操作原理及运用的平台APP分享</a></td> </tr><tr><td width="50%"><a href="https://www.youqizhuangbei.com/news/show-35500.html" title="STM32查询式按键输入[直接用寄存器]">• STM32查询式按键输入[直接用寄存器]</a></td> <td width="50%"><a href="https://www.youqizhuangbei.com/news/show-35499.html" title="Ubuntu系统 USB设备端口绑定">• Ubuntu系统 USB设备端口绑定</a></td> </tr><tr><td width="50%"><a href="https://www.youqizhuangbei.com/news/show-35498.html" title="2021-04-14 第四次按键输入实验">• 2021-04-14 第四次按键输入实验</a></td> <td width="50%"><a href="https://www.youqizhuangbei.com/news/show-35497.html" title="Flutter扫码功能完美实现">• Flutter扫码功能完美实现</a></td> </tr></table> </div> <div class="b20"> </div> <div id="comment_div" style="display:;"> <div class="head-txt"><a href="https://www.youqizhuangbei.com/comment/index-htm-mid-21-itemid-18379.html">0 条</a>相关评论</div> <div class="c_b" id="comment_main"><div></div></div> </div> <script type="text/javascript" src="https://www.youqizhuangbei.com/file/script/comment.js"></script> </div> <div class="m3r"> <div class="head-sub">推荐图文</div> <div class="list-thumb"><table width="100%"> </table> </div> <div class="head-sub mt20">推荐资讯中心</div> <div class="list-txt"><ul> </ul> </div> <div class="head-sub mt20">点击排行</div> <div class="list-rank"><ul> </ul></div> <div class="head-sub mt20">最新信息</div> <div class="list-rank"><ul> <li>1<a href="https://www.youqizhuangbei.com/sell/show-3.html" title="北京傲云欣欣科技公司专业提供中高压变频器维修电气设备维修">北京傲云欣欣科技公司专业提供中高压变频器维修</a></li> <li>2<a href="https://www.youqizhuangbei.com/sell/show-70.html" title="太原德力西高压变频器维修">太原德力西高压变频器维修</a></li> <li>3<a href="https://www.youqizhuangbei.com/sell/show-56.html" title="AMB安邦信高压变频器维修中降低设备故障频次的方法">AMB安邦信高压变频器维修中降低设备故障频次的</a></li> <li>4<a href="https://www.youqizhuangbei.com/sell/show-51.html" title="石家庄高压变频器维修请找北京傲云电气">石家庄高压变频器维修请找北京傲云电气</a></li> <li>5<a href="https://www.youqizhuangbei.com/sell/show-21.html" title="AMB安邦信高压变频器维修">AMB安邦信高压变频器维修</a></li> <li>6<a href="https://www.youqizhuangbei.com/sell/show-65.html" title="Samcovm三垦高压变频器维修中一些小技巧">Samcovm三垦高压变频器维修中一些小技巧</a></li> <li>7<a href="https://www.youqizhuangbei.com/sell/show-64.html" title="ABB传动ACS6000/ACS800维修中的故障分析方法">ABB传动ACS6000/ACS800维修中的故障分析方法</a></li> <li>8<a href="https://www.youqizhuangbei.com/sell/show-67.html" title="包头石家庄ABB高压变频器维修">包头石家庄ABB高压变频器维修</a></li> <li>9<a href="https://www.youqizhuangbei.com/sell/show-45.html" title="攀枝花陕西西门子罗宾康高压变频器维修厂家">攀枝花陕西西门子罗宾康高压变频器维修厂家</a></li> </ul></div> </div> </div> <div class="c_b"></div> </div> <script type="text/javascript" src="https://www.youqizhuangbei.com/file/script/content.js"></script><div class="clear"> </div> <div class="other_item"> <div class="copyrightbar"> <div class="wrapper"> <dl class="fore1"> <dt>新手指南</dt> <dd> <div><a rel="nofollow" target="_blank" href="https://www.youqizhuangbei.com/member/register.php">注册新用户</a></div> <div><a rel="nofollow" target="_blank" href="">操作指南</a></div> <div><a rel="nofollow" target="_blank" href="">常见问题</a></div> </dd> </dl> <dl class="fore2"> <dt>采购商服务</dt> <dd> <div><a rel="nofollow" target="_blank" href="https://www.youqizhuangbei.com/sell/">找产品</a></div> <div><a rel="nofollow" target="_blank" href="https://www.youqizhuangbei.com/company/">找公司</a></div> <div><a rel="nofollow" target="_blank" href="">找采购</a></div> <div><a rel="nofollow" target="_blank" href="https://www.youqizhuangbei.com/news/">看资讯</a></div> </dd> </dl> <dl class="fore3"> <dt>供应商服务</dt> <dd> <div><a rel="nofollow" target="_blank" href="https://www.youqizhuangbei.com/member//home.php">企业商铺</a></div> <div><a rel="nofollow" target="_blank" href="https://www.youqizhuangbei.com/member//grade.php">VIP服务</a></div> <div><a rel="nofollow" target="_blank" href="https://www.youqizhuangbei.com/member//validate.php">认证服务</a></div> <div><a rel="nofollow" target="_blank" href="https://www.youqizhuangbei.com/spread/">推广服务</a></div> </dd> </dl> <dl class="fore4"> <dt>交易安全</dt> <dd> <div><a target="_blank" href="">买家防骗</a></div> <div><a target="_blank" href="">卖家防骗</a></div> <div><a rel="nofollow" href="javascript:SendReport();">投诉举报</a></div> </dd> </dl> <dl class="fore5"> <dt>关注我们</dt> <dd> <div>手机网站: <a target="_blank" href="https://www.youqizhuangbei.com/mobile/mobile.php"></a></div> <div>新浪微博: <a target="_blank" href="http://" rel="nofollow"></a></div> <div>微信关注: </div> <div style="margin-top: 5px;"> <a target="_blank" href="//shang.qq.com/wpa/qunwpa?idkey=5fd78221597e88a4af3e2c8512a61d5f1f8dc535171ea7773562452f9042dafd"><img border="0" src="//pub.idqqimg.com/wpa/images/group.png" alt="" title=""></a> </div> </dd> </dl> <div class="hotline"> 13520258486 周一至周五 9:00-18:00 （其他时间联系在线客服） <a rel="nofollow" class="btn-line-primary" href="https://www.youqizhuangbei.com/about/contact.html" target="_blank">24小时在线客服</a> </div> </div> <div class="wrapper mt20" id="other_item"> <div id="footer"> <div class="links" style="font-size: 14px;margin-bottom: 10px;"> 产品按字母分类： <a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=a" target="_blank">a</a><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=b" target="_blank">b</a><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=c" target="_blank">c</a><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=d" target="_blank">d</a><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=e" target="_blank">e</a><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=f" target="_blank">f</a><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=g" target="_blank">g</a><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=h" target="_blank">h</a><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=i" target="_blank">i</a><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=j" target="_blank">j</a><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=k" target="_blank">k</a><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=l" target="_blank">l</a><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=m" target="_blank">m</a><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=n" target="_blank">n</a><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=o" target="_blank">o</a><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=p" target="_blank">p</a><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=q" target="_blank">q</a><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=r" target="_blank">r</a><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=s" target="_blank">s</a><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=t" target="_blank">t</a><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=u" target="_blank">u</a><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=v" target="_blank">v</a><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=w" target="_blank">w</a><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=x" target="_blank">x</a><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=y" target="_blank">y</a><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=z" target="_blank">z</a> </div> <div class="links"> <a href="https://www.youqizhuangbei.com/about/index.html">关于我们</a> | <a href="https://www.youqizhuangbei.com/about/contact.html">联系方式</a> | <a href="https://www.youqizhuangbei.com/about/agreement.html">使用协议</a> | <a href="https://www.youqizhuangbei.com/about/copyright.html">版权隐私</a> | <a href="https://www.youqizhuangbei.com/sitemap/">网站地图</a> | <a href="https://www.youqizhuangbei.com/spread/">排名推广</a> | <a href="https://www.youqizhuangbei.com/ad/">广告服务</a> | <a href="https://www.youqizhuangbei.com/gift/" target="_blank" rel="nofollow">积分商城</a> | <a href="javascript:SendReport();" rel="nofollow">违规举报</a> </div> <div class="copyright"> <div id="copyright">(c)2008-2023 湖北傲云电气有限公司 All Rights Reserved<script>var _hmt = _hmt || [];(function() {var hm = document.createElement("script");hm.src = "https://hm.baidu.com/hm.js?20195b23529f03df5cb2789a744df859";var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s);})();</script></div> <div><a href="http://www.miibeian.gov.cn" target="_blank" rel="nofollow">鄂ICP备2020021666号-11</a></div></div> <div class="authentication"> <div class="authentication_bg"> <a rel="nofollow" target="_blank" class="cert-1" href="#" title="网络警察"></a> <a rel="nofollow" target="_blank" class="cert-2" href="#" title="网警备案"></a> <a rel="nofollow" target="_blank" class="cert-3" href="#" title="网络工商"></a> <a rel="nofollow" target="_blank" class="cert-4" href="#" title="浙江省网站信用联盟"></a> <a rel="nofollow" target="_blank" class="cert-5" href="#" title="可信网站"></a> <a rel="nofollow" target="_blank" class="cert-6" href="/" title="违法和不良信息举报中心"></a> <a rel="nofollow" target="_blank" class="cert-7" href="/" title="违法和不良信息举报中心APP下载"></a> </div> </div> </div> </div> </div> </div> <div class="feedBackWidget"> <div class="ronline"><a href="//wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes" target="_blank" title=""></a></div> <div class="rweixin"><a href="javascript:Dqrcode();"></a></div> <div class="feedback"><a href="javascript:SendReport();"></a></div> <div class="back2top" style="display: none;"><a href="javascript:void(0);" title="返回顶部"> </a></div> </div><script type="text/javascript"> //全站悬浮右侧 $('.guess').scrollToFixed({ marginTop: $('.small-goods').outerHeight(true) - 345, limit: function() { var limit = $('.other_item').offset().top ; return limit; }, minWidth: 1000, zIndex: 999, fixed: function() { }, dontCheckForPositionFixedSupport: true }); //右侧到位自动隐藏 function changeScreen() { var itemTop = document.getElementById("other_item").offsetTop; if ($(document).scrollTop() > itemTop - 600) { $(".guess").hide(); } else if ($(window).width() < 1200) { $(".guess").hide(); } else { $(".guess").show(); } } $(window).scroll(function() { changeScreen(); }); $(window).resize(function(e) { changeScreen(); }); </script> <script type="text/javascript" src="https://www.youqizhuangbei.com/skin/st03lanskin/js/myjs.js"></script> <script type="text/javascript" src="https://www.youqizhuangbei.com/skin/st03lanskin/js/topso.js"></script> <script type="text/javascript" src="https://www.youqizhuangbei.com/skin/st03lanskin/js/scrolltofixed.js"></script> <script type="text/javascript"> </script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?d7f1c93b824c5ee2887566c40d0984af"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> </body> </html>