H5+C3+JS实现五子棋 - UI篇
来源:互联网 发布:秒快软件 编辑:程序博客网 时间:2024/06/08 08:23
本篇文章实现的是双人对战模式,主要是实现除人机AI算法和判断输赢之外的其他功能,下一篇将会发布AI
框架搭建
<!Doctype html><html> <head> <!-- 百度爬虫优化 --> <meta http-equiv="author" content="成兮,缘分五月" /> <meta http-equiv="Keywords" cotent="五子棋,人机大战,单人游戏,双人游戏,小游戏" /> <meta Charset="utf-8" /> <title>爱淘宝-五子棋</title> <style> #chess { display: block; margin: 50px auto; box-shadow: -2px -2px 2px #efefef , 5px 5px 5px #b9b9b9; } #chess:hover{ cursor: pointer; } </style> <script> window.onload = function() { } ; </script> </head> <body> <!-- 棋盘 --> <canvas id="chess" width="450px" height="450px"></canvas> </body></html>
定义一些需要用到的全局变量
<script> //获取棋盘canvas var chess = document.getElementById("chess"); //获取2d画布 var context = chess.getContext('2d'); //指定当前是否黑色下,只在UI中使用 var me = true; //指定当前位置是否下了其,1代表黑,2代表白,0代表空 var curIndex = []; for(var i =0; i <15; i++) { curIndex[i] = []; for(var j =0; j <15; j++) curIndex[i][j] = 0; }</script>
使用canvas绘制棋盘
<script> function drawtable() { //我们设置棋盘总共15根横线15根总线,左右上下都有15px的边距,其中每个棋子相距30px,因此绘制棋盘从15px开始 for(var i =0; i <15; i++) for(var j =0; j <15; j++) { //绘制横线 context.moveTo(15, 15 +j *30); context.lineTo(435, 15 +j *30); //绘制竖线 context.moveTo(15 +j *30, 15); context.lineTo(15 +j *30, 435); //使用灰色描边 context.strokeStyle = "#bfbfbf"; context.stroke(); } }; drawtable();</script>
棋盘的onclick事件:在该位置上绘制一个棋子,每次点击黑白相间
<script> chess.onclick = function(event) { //获取要下的棋子的位置 var x = Math.floor(event.offsetX /30); var y = Math.floor(event.offsetY /30); //判断该点是否已被下了 if(curIndex[x][y] != 0) return; //开始绘制 context.beginPath(); //绘制指定圆 context.arc(15 +x *30, 15 +y *30, 15, 0, 2 *Math.PI); //进行填充 if(me) { context.fillStyle = "#636766"; curIndex[x][y] = 1; me = false; } else { context.fillStyle = "#b9b9b9"; curIndex[x][y] = 2; me = true; } context.fill(); //结束绘制 context.closePath(); };</script>
最终效果图
0 0
- H5+C3+JS实现五子棋 - UI篇
- H5+C3+JS实现五子棋 - AI篇
- H5+C3+JS实现焦点轮换图
- 第八周总结及H5、Js实现五子棋效果
- h5+css3 <canvas>实现五子棋
- 纯js实现五子棋
- js五子棋的实现
- 用js实现五子棋
- h5、c3基础知识整理
- h5、c3基础知识整理
- html5 css js前端开发五子棋UI篇--基于慕课网五子棋视频教程的随笔
- WEB前端开发:轮播图的实现(H5+C3+JavaScript)(JQuery)
- js实现的简单五子棋游戏
- js实现五子棋(含AI)
- js+canvas实现简单的五子棋游戏
- 原生JS+Canvas实现五子棋游戏实例
- H5/C3响应式布局设计流程
- c3&h5权威指南(1)
- java比较两个字符串完全不同处高亮显示(过滤了某些字符串前面不不相干字符)
- Android 内存优化-消除卡顿
- IOS 查看和添加路由条目
- javaWeb session失效时间设置
- python logging模块 自定义输出
- H5+C3+JS实现五子棋 - UI篇
- 常用的电平标准
- 欢迎使用CSDN-markdown编辑器
- 求教:如何处理下面图中List集合信息?
- python os.path模块
- 学习python的第四十六天-第八章 面向对象
- 关于EF6.0整理
- Maven错误:was cached in the local repository, resolution will not be reattempted until the update
- Android学习29