最近心血来潮想制作一个数独游戏,说干咱就干。刚刚好前一阶段学习了es6,可以用这个项目来当做一个小练习。

目前开发已经完成,由于只是基本功能,页面样式并不是很华丽,下面我们先开看看长什么样子。

大概页面就长这个样子,页面有三个按钮,分别是检查,重玩,换题。

  1. 检查就是检查当你填满是否成功。
  2. 重玩就是放弃你所填的,重新开始本局游戏。
  3. 换题就是重新换个题目。

下面是游戏中截图。

;

;

最后这个图我比较偷懒。直接生成的,并没有自己填。

下面就来看看代码吧。

里面最重要的就数算法了吧。我使用是回溯法,废话不多说直接上代码。先来看一下生成数独的算法。大概就是把数独分成81格,从1-81分别生成,没生成一个格都要去判断一下每一行,每一列,每一宫是否满足规则。如果不满足则回溯。下面是生成数独的方法。

//生成数独
const makeArray=(arr, n)=>{if(n == 81) {return arr;}let x = Math.floor(n / 9);let y = n % 9;if(arr[x][y] == 0) { let index = 0; let arrn = makeRandomArray(9); for(let i = 0; i < arrn.length; i++) { arr[x][y] = arrn[i]; if(checkArrayByIndex(arr, x, y)) { let endArr = makeArray(arr, n + 1); if(!checkArrayHasZero(arr)) return endArr; } } arr[x][y] = 0; //回溯  } else { makeArray(arr, n + 1); } return arr; }

当生成完数组之后,就可以生成游戏所用的数独,其实则是隐藏其中的格子。

//对二维数组进行随机n位置0
const resetZeroByArray=(arr,n)=>{let k=0;while(k<n){let ranNum=randomNumber(81);let x = Math.floor((ranNum-1) / 9);let y = ranNum % 9; if(arr[x][y]!=0){ arr[x][y]=0; k++; } } return arr; }

最后则是当玩家填完数组之后再去验证这个数独是否满足规则。

//判断二维数组是否是完整数独checkSudoArray(arr){                let sign=true;//检查数组中是否含有0,如果有0立刻返回falseif(checkArrayHasZero(arr))return false;//对每一行每一列每一宫进行检查for(let i=0;i<9;i++){let rowSign=checkedRow(arr,i);let colSign=checkedCol(arr,i); let gongSign=checkedGongByNum(arr,i+1); if(!(rowSign&&colSign&&gongSign)){ sign=false; }; } return sign; } //根据坐标检查九宫格 const checkArrayByIndex = (arr, x, y) => { let signRow = false; let signCol = false; let signGong = false; //检查行 signRow = checkedRow(arr, x); //检查列 signCol = checkedCol(arr, y); //检查宫 signGong = checkedGongByIndex(arr, x, y); if(signRow && signCol && signGong) { return true; } else { return false; } }

这样算法大概就介绍完了。接下来来看看页面。页面我是把二维数组直接放在父模板中,然后先去初始化然后根据这个数组去生成grid。

<div class="sudoMain" ><Row class="numRow" type="flex" v-for="(row,i) in arr" justify="center">            <i-col class="numCol" v-for="(cell,j) in row" :data-x='i'  :data-y='j'><div class="spanDiv" @click="cellClick($event,i,j)">{{arr[i][j]==0?"":arr[i][j]}}</div></i-col>           </Row>
</div>

一定要记得把每个坐标赋值到元素上,这样可以进行接下来的操作都很方便。接来下用户选择的数字面板单独写出来,通过点击事件进行隐藏或者显示。

selectClick(e,i,j){this.showSelectPop=false;this.arr[this.selectX][this.selectY]=(i-1)*3+j;                    }

介绍的大体差不多了,代码已经上传到github,如果想看源码的话可以直接上github下载。地址是:https://github.com/like2372/sudoVue.git。

转载于:https://www.cnblogs.com/like2372/p/8329835.html

使用es6制作简单数独游戏相关推荐

  1. 用c语言做一个五子棋程序,C语言制作简单五子棋游戏

    原标题:C语言制作简单五子棋游戏 C语言制作简单的五子棋游戏 学习C语言的人很多,但是用C语言很少,而用来为自己所用,来做游戏的人就更少了,很多人都是跟着学校学习,学校讲到哪就坐到哪,但是以后却还是不 ...

  2. python制作五子棋_python制作简单五子棋游戏

    python制作简单五子棋游戏 来源:中文源码网 浏览: 次 日期:2019年11月5日 [下载文档: python制作简单五子棋游戏.txt ] (友情提示:右键点上行txt文档名->目标另存 ...

  3. 【游戏思路】制作简单小游戏实现思路总结

    很多小伙伴在制作游戏的时候苦于没有思路,实际上制作一个游戏是很简单的,我们可以先从小游戏开始思考. 小游戏的概念和分类 概念:单机或联机类型,操作简单,效果简单,体积不大,玩法单一类型. 特点:体积小 ...

  4. 用flash制作简单拼图游戏

    简介: 可能有很多玩Flash的朋友都曾和我一样想自己动手制作一个拼图游戏,但是苦于不知道实现的方法或不了解ActionScript(以下简称AS)而心存遗憾.别急,今天盗匪就告诉你如何利用Flash ...

  5. C语言简单数独游戏终盘生成

    前言 这一篇文章介绍的是移动变换法,有详细的移动变化法的图文解析,在文末有完整的可用于查看移动变换法生成数独终盘过程的代码 实现思路 移动变换法这一方法是很简单的一种方法,实现起来也比较容易,但同时它 ...

  6. 编写五子棋的完整python代码_python制作简单五子棋游戏

    本文实例为大家分享了python五子棋游戏的具体代码,供大家参考,具体内容如下 #五子棋 '" 矩阵做棋盘 16*16 "+" 打印棋盘 for for 游戏是否结束 开 ...

  7. 基于C++和QT实现的简单数独游戏软件

    资源下载地址:https://download.csdn.net/download/sheziqiong/85660211 一.实验题目与要求 本次实验主要内容是实现一个简单的数独软件,具体要求如下: ...

  8. Unity3d制作简单拼图游戏

    本文为原创,如需转载请注明原址:http://blog.csdn.net/cube454517408/article/details/7907247 最近一直在使用Unity,对它有了一些小的使用心得 ...

  9. Python Pygame制作简单五子棋游戏(详细代码+解释)

    这里只想简单演示下一个简单的五子棋界面和落子等操作,主要为了后面设计AI对战方便演示,AI算法后面设计吧,最近事太多了,,,,. 希望本文有助于你制作自己期望的简单的五子棋. 一.pygame初始化画 ...

  10. 简单五子棋游戏c语言简单,C语言制作简单五子棋游戏

    #pragma comment(lib,'winmm.lib') //玩游戏 void PlayGame() { //鼠标操作 int chess[N][N] = { 0 };//标志没有棋子的标志 ...

最新文章

  1. 中国矿业大学计算机控制技术英语,中国矿业大学计算机控制系统参考试卷4及答案.pdf...
  2. LeetCode Wiggle Subsequence(动态规划)
  3. MSP430G2553需要注意的一些参数
  4. .net 宏定义_C语言、嵌入式中一些实用的宏技巧
  5. java版电子商务spring cloud分布式微服务b2b2c社交电商(四)SpringBoot 整合JPA
  6. bash下个人习惯的一些文件设置
  7. 从零开始编写自己的C#框架(27)——什么是开发框架
  8. 老板看似表面风光,可能还没有员工赚得多
  9. 《线性代数》(同济版)——教科书中的耻辱柱
  10. 程序员理想的工作环境应该是怎样的?
  11. IDEA进行对json数据格式化
  12. 启发式算法(Heuristic)概述
  13. [转载]中华桥梁先驱——茅以升
  14. Linux ps命令
  15. 集福啦!你想要的“福”这里都有~
  16. 记一次godaddy上同一共享主机上部署多站
  17. Linux SDIO WIFI Marvell8801/Marvell88w8801(三) --- Linux驱动以及组件的使用
  18. Vacuum和Vacuum Full的处理过程
  19. 乐视网CEO梁军:现在就是缺钱 正在重新学习做生意 2017年09月20日01:18 新京报 37 微博 微信 QQ空间 添加喜爱 乐视网CEO梁军。 新京报记者 吴江 摄乐视网CEO梁军。 新京
  20. 快讯:中粮联手维维出资1亿元设立置业公司

热门文章

  1. poj 2828 线段树
  2. WPF中实现图片文件转换成Visual对象,Viewport3D对象转换成图片
  3. 微信小程序——律师事务所微官网
  4. 如何使用:after伪元素和:before伪元素
  5. 虚拟机开机时出现Press ESC in 5 seconds to skip startup.nsh, any other key to continue问题的解决办法
  6. sql 链接 oracle 查询,Oracle学习之路-SQL篇-连接查询
  7. sklearn svm 调参_用 Grid Search 对 SVM 进行调参
  8. 旋转链表 Java,leetcode 旋转链表 Java
  9. pls-00302: 必须声明 组件_vue组件
  10. 地壳中元素含量排名记忆口诀_碳元素的知识点总结