JavaScript实现五子棋的界面设计
五子棋的界面设计包括绘制棋盘、绘制棋子及黑白棋轮流落子。
涉及的知识点主要有canvas绘制直线、设置画笔颜色;canvas画圆、填充渐变色
1.绘制棋盘
先设定棋盘的宽、高;然后利用for循环,根据坐标使用context的一些方法来绘制
var drawChessBoard=function(){
for(var i=0;i<15;i++){ //棋盘宽高450,旁白15,间距30
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();
} }
2.绘制棋子
这里牵涉到canvas绘制圆的情况,用画弧形的方法来画圆,同时设置黑棋白琪两种颜色,用到了渐变对象,fill()函数用来填充的。
//绘画棋子需要首先会画圆 ,先开始一个路径,然后记得关闭该路径
context.beginPath ();
context.arc(200,200,100,0,2*Math.PI );
//arc用来画扇形,此处用来画圆,前面两个参数为圆心坐标,接着为半径,起始弧度,种植弧度
context.closePath ();
var gradient=context.createRadialGradient (200,200,50,200,200,20);
//返回一个渐变的对象,前面三个参数为外圆心坐标和半径,后面三个为内圆心坐标和半径
gradient.addColorStop (0,"#0A0A0A");//外圆的颜色
gradient.addColorStop (1,"#636766");//内圆的颜色
context.fillStyle =gradient ;
context.fill();//fill是用来填充的*/
3.落子设置
我们需要在点击棋盘某个位置时候落子,则需要给canvas绑定一个onclick事件,根据坐标索引来确定落子的位置,同时为了防止一个位置可以同时落黑白两种棋我们需要先定义并初始化一个二维数组来存储棋盘上的位置及落子情况,然后将棋盘位置没有棋子设置为0,黑棋设置为1,白棋设置为2.点击一次之后改变对象的值即可实现轮流落子的动作。
chess.onclick=function(e){
var x= e.offsetX;
var y= e.offsetY;
var i=Math.floor(x/30);//索引,下取整
var j=Math.floor(y/30);
if(chessBoard [i][j]==0){ //位置上没有棋子时候才让其落子
oneStep(i,j,me);//默认画的是黑棋
if(me){ //落完棋子后,为了区分落下的是黑棋还是白琪分别为其设定值
chessBoard [i][j]=1;
}else{
chessBoard [i][j]=2;
}
me=!me;//黑棋下完之后换白琪 }
}
源码:https://github.com/sunshineqt/webxt/tree/master/game-five-in-a-row
JavaScript实现五子棋的界面设计的更多相关文章
- JavaScript中国象棋程序(1) - 界面设计
"JavaScript中国象棋程序" 这一系列教程将带你从头使用JavaScript编写一个中国象棋程序.这是教程的第1节. 这一系列共有9个部分: 0.JavaScript中国象 ...
- NanUI for Winform发布,让Winform界面设计拥有无限可能
如今,尽管WPF.UWP大行其道,大有把Winform打残干废的趋势.但是还是有那么一波顽固不化的老家伙们固守着Winform,其中就包括我. 好吧,既然都说Winform做得软件不如WPF界面美观效 ...
- 对WEB前端的几段思考(一)——界面设计和性能优化(整理中)
尽管我并非艺术出生,既没有任何设计基础,又没有较高艺术涵养,也深谙在短时间内创造一定艺术造诣并非易事,但是既然当初选择从事网站前端开发,我的目光不能仅停留在前端代码上.作为一名志向在前端领域发展的人员 ...
- React 可视化开发工具 Shadow Widget 非正经入门(之五:指令式界面设计)
本系列博文从 Shadow Widget 作者的视角,解释该框架的设计要点.本篇解释 Shadow Widget 中类 Vue 的控制指令,与指令式界面设计相关. 1. 指令式界面设计 Vue 与 A ...
- Java界面设计 Swing(1)
Java界面设计的用途 开发者可以通过Java SE开发丰富并且强大的具有图形界面的桌面应用程序.也可以设计一些提高效率的工具软件,帮助自己处理机械性工作. Java 的图形界面工具包,可以用于工具类 ...
- Android开发1:基本UI界面设计——布局和组件
前言 啦啦啦~本学期要开始学习Android开发啦~ 博主在开始学习前是完完全全的小白,只有在平时完成老师要求的实验的过程中一步一步学习~从此篇博文起,博主将开始发布Android开发有关的博文,希望 ...
- iPhone / iPad UI界面设计与图标设计的尺寸设计规范+安卓+网页
①iPhone的设计尺寸 iPhone界面尺寸: 设备 分辨率 状态栏高度 导航栏高度 标签栏(工具栏)高度 iPhone6 plus设计版 1242 × 2208 60px 132px 146px ...
- 免费 PSD 素材:25个全新的界面设计资源
在这篇文章中,我们给大家收集了25套全新的 UI 设计素材.这些来自优秀设计师的 PSD 源文件素材让其它的设计师们在设计用户界面原型的时候能够非常便利. 网站用户界面,移动应用程序用户界面和对设计师 ...
- 26款能够吸引用户的 iPhone App 界面设计
在这个移动互联网告诉的时代,众多的移动应用程序涌现出来.谁能抓住用户的注意力,谁就有可能成功.在下面这些移动 App 界面设计中,你可以看到不同创意类型的视觉效果,让你获得灵感. 您可能感兴趣的相关文 ...
随机推荐
- ALV详解:Function ALV(一)
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- C#强制清除缓存
#region 强制清除缓存 [DllImport("kernel32.dll", EntryPoint = "SetProcessWorkingSetSize" ...
- Python基础学习笔记(八)常用字典内置函数和方法
参考资料: 1. <Python基础教程> 2. http://www.runoob.com/python/python-dictionary.html 3. http://www.lia ...
- FTP常用故障代码注解
FTP错误列表 出处:http://bbs.enet.com.cn/UserControl?act=13&threadID 作者: |秒杀』| 详细的FTP错误列表 Restart marke ...
- HDU-4521 小明系列问题——小明序列 间隔限制最长上升子序列
题意:给定一个长度为N的序列,现在要求给出一个最长的序列满足序列中的元素严格上升并且相邻两个数字的下标间隔要严格大于d. 分析: 1.线段树 由于给定的元素的取值范围为0-10^5,因此维护一棵线段树 ...
- iOS - OC 数据持久化
1.Sandbox 沙箱 iOS 为每个应用提供了独立的文件空间,一个应用只能直接访问为本应用分配的文件目录,不可以访问其他目录,每个应用自己独立的访问空间被称为该应用的沙盒.也就是说,一个应用与文件 ...
- class&object
类(class)是构造对象的模板或蓝图. 对象的行为是用可调用的方法定义的. import java.time.*; public class EmployeeTest{ public static ...
- thinkphp3.2+PHPExcel导出查询数据到excel表格的实例
首先下载PHPExcel插件,我们需要把PHPExcel.php和PHPExcel文件夹放到D:\XAMPP\htdocs\fsxb\ThinkPHP\Library\Vendor\PHPExcel目 ...
- C++中的虚函数与纯虚函数
这个吧,我也不怎么知道,所以,大家来看这两篇文章哦: http://blog.csdn.net/hackbuteer1/article/details/7558868 http://blog.csdn ...
- unique-substrings-in-wraparound-string(好)
https://leetcode.com/problems/unique-substrings-in-wraparound-string/ 好,我自己做出来的.多总结规律,多思考. package c ...