曾几何时想有一款自己编写的游戏，通过不断学习，终于掌握了一点JavaScript基础，捣鼓了一个益智类的数字棋牌游戏，没有使用任何游戏框架，就简单使用HTML做布局，CSS做动画，JavaScript做事件响应，有兴趣的童鞋可以拿去玩一下。

目录

一、游戏效果展示

二、游戏逻辑与交互设计

二、游戏制作过程

三、完整JavaScript源代码

一、游戏效果展示

二、游戏逻辑与交互设计

       由于技术有限不能做太复杂的游戏，所以做个休闲数字游戏是比较合适的，下手之前做了挺多准备，包括思考游戏逻辑、收集和制作游戏图片、音乐素材等，最后确定要完成一下几个游戏必备的内容。

       （一）游戏逻辑，游戏玩法就是在原来“井字过三关”游戏的基础上加上数字计算，三连子后同时计算个位数大小，谁大就谁赢。

       （二）人机交互，游戏为双人游戏，分为蓝方（AI）和红方（玩家），双方一开始各自获得5个随机分配的棋子，棋子包含个位数字。抛骰子后，玩家按先后顺序拖动棋子放入棋盘中。每次游戏都可实时计算得分，每盘游戏结束后记录得分，具有历史排行榜功能。

       （三）游戏界面设计，游戏以卡通为主，收集制作素材尽量为可爱风格。支持英语、日语、简体中文、繁体中文。

       （四）游戏音乐设计，游戏要有背景音乐、下棋声音、胜负声音、并可以按需关闭声音。

二、游戏制作过程

        （一）游戏资源收集和制作，先在纸上画出草图，然后网上收集素材制作棋盘、棋子等贴图，最后全部放在一个img文件夹并命名编号，用于后续JavaScript调用。

         （二）游戏布局，使用HTML+CSS代码，将Img文件夹中的贴图元素按设计的布局放置在对应的位置中，并设置z-index属性，用于控制元素的显示与隐藏。HTML代码如下：

        CSS的代码如下，主要用于设置共同的样式属性和部分元素的移动、弹出、消失动画。

        （三）游戏响应开发

        1.通过JavaScript的.addEventListener()为div棋子元素添加选中、拖动、放入，触发对应mousedown、mousemove、mouseup事件的响应函数。

        为div元素添加事件响应函数，代码如下：

        为div元素实现拖放效果，代码如下：

        2.使用audio元素，为游戏添加音效，载入游戏音频文件、播放音频代码如下：

        3.使用二维数组存放双方棋子，用于判断双方下棋后剩余棋子的情况，a[][0]代表手牌数值，a[][1]代表手牌状态，主要代码如下：

        4.使用二维数组存放棋局，用于判断实时得分以及控制AI下棋，主要代码如下：

        5.编写简单AI算法，自动下棋，目前原理只是有空位就放。

        6.判断输赢，把结果存入全局变量gameState中，主要代码如下：

三、完整JavaScript源代码

        完整源文件下载地址↓↓↓