JavaScript实现五子棋游戏的方法详解
(编辑:jimmy 日期: 2024/11/28 浏览:3 次 )
本文实例讲述了JavaScript实现五子棋游戏的方法。分享给大家供大家参考,具体如下:
最近半个月一直在看深入的学习JavaScript,里面有很多重点和难点,比如闭包、词法分析、面向对象等。今天给大家分享一个由JavaScript编写的五子棋游戏,主要用到JavaScript的面向对象、事件委托、闭包等知识,还是挺有分量的,正好可以检测学习的成果。
老规矩,先上图,再说话。
效果图:
五子棋素材图:
代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>HTML五子棋游戏</title> <link rel="stylesheet" href=""> <script> //五子棋的构造函数 function Game(){ this.isWin = false;//游戏是否结束标志 } //闭包计棋器 Game.cnt = (function(){ var curr = 'black'; return function(){ var tmp = curr; if(curr == 'black'){ curr = 'white'; }else{ curr = 'black'; } return tmp; } })(); //下棋函数 Game.xiaQi = function(g){ //判断选择的位置是否已经下过棋了 if(this.style.backgroundImage.indexOf('gif') >= 0){ alert('这里已经下过棋了'); return ; } var color = Game.cnt(); this.style.backgroundImage = "url(./images/"+color+".gif)"; Game.judge.call(this,color,g);//判定函数 } //判定游戏是否结束 Game.judge = function(color,g){ var tds = document.getElementsByTagName('td'); //获取当前棋子所下的位置 var curr = {x:this.cellIndex,y:this.parentElement.rowIndex,color:color}; var line = ['','','',''];//表示当前棋子的横、竖、左斜、右斜方向的棋子 //遍历255个棋格,看看是否能赢 for(var i=0,tmp={};i<tds.length;i++){ tmp = {x:tds[i].cellIndex,y:tds[i].parentElement.rowIndex,color:'0'}; if(tds[i].style.backgroundImage.indexOf('black') >= 0){ tmp.color = 'b'; }else if(tds[i].style.backgroundImage.indexOf('white') >= 0){ tmp.color = 'w'; } //获取当前棋子的横向其他棋子的坐落情况 if(curr.y == tmp.y){ line[0] += tmp.color; } //获取当前棋子的竖向其他棋子的坐落情况 if(curr.x == tmp.x){ line[1] += tmp.color; } //获取当前棋子的左斜方向其他棋子的坐落情况 if(curr.x+curr.y == tmp.x+tmp.y){ line[2] += tmp.color; } //获取当前棋子的右斜方向其他棋子的坐落情况 if(curr.x-tmp.x == curr.y-tmp.y){ line[3] += tmp.color; } } color = color == 'black'"color: #800000">PS:这里再为大家推荐另一款本站的js版五子棋游戏供大家参考(其AI相对简单一些)在线五子棋游戏:
http://tools.jb51.net/games/wuziqi更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript数据结构与算法技巧总结》、《JavaScript数学运算用法总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》及《JavaScript遍历算法与技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
下一篇:ES6 Class中实现私有属性的一些方法总结