五子棋是一款非常经典的益智游戏,本文主要针对界面的更换。实现功能:人机对战,更换背景颜色,更换棋盘图片,音效及飘花特效。
一、实现效果
1、默认页面
2、更换背景颜色
3、更换棋盘图片
4、飘花特效
5、效果预览地址
https://yangyanfang95.github.io/wuziqi/
二、效果实现主要思想
1、人机对战
参照慕课网五子棋UI篇和AI篇,使用canvas画棋盘和棋子,使用三维数组标记赢的方法
2、更换背景颜色
使用input标签的type属性中的color,弹出颜色选择器,从而更换背景颜色
3、更换棋盘图片
将待选棋盘图片放在ul列表中,类似横向导航栏,点击图片时获取其src属性值,然后设置给棋盘
4、源码地址
/yangyanfang95/wuziqi
三、待改进
1、定位落子
最后落子位置高亮或其他形式区别显示
2、新游戏刷新
仅清空棋盘中的棋子,不影响其他内容设置
3、更换棋盘背景图片
开始游戏更换棋盘背景图片不影响棋局内容;优化点击更换图片代码;可打开计算机中文件夹读取本地图片并更换
4、页面自适应
改变窗口大小不影响页面布局
5、页面按钮美化