本文摘自PHP中文网,作者coldplay.xixi,侵删。
免费学习推荐:js视频教程
需求分析以及代码实现
第一节 画布样式布局
1. canvas进行画布的设计
新建CSS文件夹,新建style.css文件;
在style.css文件里进行canvas编写;
canvas{ display: block; margin: 50px auto; box-shadow: -2px -2px 2px #EFEFEF,5px 5px 5px #B9B9B9; }
参数解释
margin 50px auto// 是指画布居中;
box-shadow: -2px -2px 2px #EFEFEF,5px 5px 5px #B9B9B9//
offset-x:(如这里的-2px)必需,取值正负都可。offset-x水平阴影的位置。
offset-y:(如这里的-2px)必需,取值正负都可。offset-y垂直阴影的位置。
blur:(如这里的2px)可选,只能取正值。blur-radius阴影模糊半径,0即无模糊效果,值越大阴影边缘越模糊。
color:可选,阴影的颜色。如果不设置,浏览器会取默认颜色,通常是黑色,但各浏览器默认颜色有差异,建议不要省略。
**
2. 效果图
第二节 棋盘设计
1. 大小设计
分成14*14大小的矩形框,总长450px,宽450px,其中两边留白共占15px,每个小的矩形框30px乘30px
2. js代码编写(绘制)
1 2 3 4 5 6 7 8 9 | var chess = document.getElementById( 'chess' ); var context = chess.getContext( '2d' );
for ( var i=0; i<15; i++){
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();
}}drawChessBoard();
|
3. 效果图
第三节 棋子设计
1. 代码编写
1 2 3 4 5 | chessBoard[i] = [];
for ( var j=0;j<15;j++){
chessBoard[i][j] = 0;
}}
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | context.beginPath();
context.arc(15+i*30, 15+j*30, 13,0,2*Math.PI);
context.closePath();
var gradient = context.createRadialGradient(15+i*30+2,15+j*30-2,13,15+i*30+2,15+j*30-2,0);
if (flag){
gradient.addColorStop(0, "#0A0A0A" );
gradient.addColorStop(1, "#636766" )
} else {
gradient.addColorStop(0, "#D1D1D1" );
gradient.addColorStop(1, "#F9F9F9" );
}
context.fillStyle=gradient;
context.fill();}
|
1 2 3 4 5 6 7 8 9 10 | 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){
onstep(i,j,flag);
chessBoard[i][j] = 1;
flag = !flag;
}}
|
2. 效果图
(自己在棋盘上随机点击会轮流出现黑棋和白棋)
第四节 背景添加
1. 代码编写
1 2 3 | var pic = new Image();pic.src = "images/background.jpg" ;pic.onload = function (){
context.drawImage(pic, 0, 0, 450, 450);
drawChessBoard();}
|
2. 效果图
这里是index.html里面的代码
1 2 3 4 | <!doctype html><html lang= "en" ><head>
<meta charset= "UTF-8" >
<title>五子棋</title>
<link rel= "stylesheet" type= "text/css" href= "css/style.css" ></head><body><canvas id= "chess" width= "450px" height= "450px" ></canvas><script type= "text/javascript" src= "js/script.js" ></script></body></html>
|
项目架构
这样简易的五子棋UI界面就设计好了,赶紧动手试一试哦!
相关免费学习推荐:javascript(视频)
以上就是介绍JS实现五子棋界面设计的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
vue可完全替代jq吗
实例汇总js call()及apply()的方法使用
javascript如何设置值
js怎么获取标签的值?
js怎么换行
js如何实现盒子拖拽效果?(附代码)
js中深拷贝和浅拷贝区别?
js如何创建字符串数组
js怎么传一个对象
前端js怎么学
更多相关阅读请进入《js》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 介绍JS实现五子棋界面设计