JavaScript实现简单人机五子棋
2016-04-10 11:36
483 查看
稍微给自己总结一下上周做的事情:
first,根据视频和资料学习了bootstrap,现在回想起来,只记得 响应式 布局 这点了,这周打算找些网页和实例来巩固一下.
then, 正在学习jQuery…
Last,在慕课网上按照教学视频 完成了稍有趣的一个游戏,五子棋。
主要用到和学到的知识点有:
简单的html和css;html5中的canvas;
javascript和一点算法;
以下记录我认为的难点,
在游戏中玩家和电脑交替下棋,而电脑的落子的位置是由算法判断决定的,这就需要一个数据结构记录所有的 赢法,这里用的是一个三维数组来记录所有的赢法.
前两维, i, j,用来记录棋子的坐标,最后一维记录赢法数。
五子棋的赢法只有,水平线、竖线、斜线、反斜线。四种方法所以(此处的棋盘是 15*15大小):
以上,将会上传整个游戏的代码,留作记录。
做出来之后的样子:(heiheihei,小小的成就感)
first,根据视频和资料学习了bootstrap,现在回想起来,只记得 响应式 布局 这点了,这周打算找些网页和实例来巩固一下.
then, 正在学习jQuery…
Last,在慕课网上按照教学视频 完成了稍有趣的一个游戏,五子棋。
主要用到和学到的知识点有:
简单的html和css;html5中的canvas;
javascript和一点算法;
以下记录我认为的难点,
在游戏中玩家和电脑交替下棋,而电脑的落子的位置是由算法判断决定的,这就需要一个数据结构记录所有的 赢法,这里用的是一个三维数组来记录所有的赢法.
var wins = []; for(var i=0; i<15; i++){ wins[i] = []; for(var j=0; j<15; j++){ wins[i][j]=[]; } }
前两维, i, j,用来记录棋子的坐标,最后一维记录赢法数。
五子棋的赢法只有,水平线、竖线、斜线、反斜线。四种方法所以(此处的棋盘是 15*15大小):
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++; } }
以上,将会上传整个游戏的代码,留作记录。
做出来之后的样子:(heiheihei,小小的成就感)
相关文章推荐
- 提取多层嵌套JSON类型数据
- js中实现获取当前超链接
- javascript原生ajax写法分享
- Javascript实现苹果悬浮虚拟按钮
- javascript之处理Ajax错误
- JSP
- JavaScript图的基本构建
- ASP.NET MVC Bundles 用法和说明(打包javascript和css)
- JS中使用动态原型模式、寄生构造函数模式、稳妥构造函数模式创建对象
- json转html样式
- javascript继承
- JSON转为字典
- JavaScript 计时事件
- javascript文档对象模型DOM入门详解
- 使用 jsoup 下载图片
- 关于js 函数劫持
- 将.jsp文件放入Jsp文件夹后引发的404错误。
- tab选项卡
- javascript for循环条件 2个条件和 3个条件的区别
- js delete