今日分享开始啦,请大家多多指教~
明天给大家分享的是扫雷,这是零碎自带的经典小游戏,以前上学那会上机的时候就常常玩这个,很喜爱,所以尝试一下。
效果图
实现思路
1. 创立 9 行 9 列的二维数组。
2. 设置雷:随机行数 i 和列数 j,依据随机到 i、j 从二维数组中取出对应的元素,将取到的元素设置一个属性 type 等于 1,示意以后元素曾经是雷,并且递增雷计数器,而后递归调用;如果取到的元素曾经是雷了,则跳过继续执行,雷计数器达到设定的最大值就跳出递归。
3. 计算每个元素四周的雷数量(四周指的是 左上、上、右上、右、右下、下、左下、左 这 8 个地位),以后地位显示对应的数字(待会内容外面细说)
4. 同样依据这个二维数组来创立遮罩的小方块,正好盖住之前创立的图形。
5. 点击这个遮罩的小方块则触发揭开,揭开后依据对应的数字或者雷做不同的操作。
代码实现
创立背景及相干元素
创立雷和显示对应的图片
1. 随机 row 和 col,并从二维数组中获取到这个对象;2. 判断他是否是雷,如果是则跳过以后;3. 如果以后不是雷,则标记以后对象为雷对象,并且更改图片;4. 递归,当达到设定的数量时跳出。
计算四周雷的数量并显示
1. 循环之前定义的二维数组
2. 如果以后元素的下标是(i,j),则左上为(i-1,j-1),上为(i-1,j ),右上为(i-1,j+1),以此类推,如下图所示:
3. 别离取出这些元素,并判断他们是不是雷,如果是则计数累加,最初将计数对应到相应的图片,而后显示进去。
创立遮罩
创立计时和计数器
退出鼠标挪动事件
退出鼠标点击事件
胜利断定 1
未关上的数量与雷的数量雷同
胜利断定 2
标记为雷(插旗)的数量与类总数雷同
触雷成果
鼠标点击雷后,会触发雷爆炸的一个动画,这是通过图片的切换来实现的
退出鼠标右键事件
此事件是做插旗或者标记为未知等操作的。
最初退出从新开始事件,胜利和失败图片显示就实现了。
小结
用 canvas 编写了这个小游戏,看着还行,不晓得会不会有什么我没发现的 bug,难度目前是设置成繁难的,如果要改难度,代码稍做批改即可。
今日份分享已完结,请大家多多包涵和指导!