web前端培训：JQuery实现1024数独效果

最新推荐文章于 2022-12-10 23:27:42 发布

科迅教育

最新推荐文章于 2022-12-10 23:27:42 发布

阅读量654

点赞数

分类专栏： IT 文章标签：南通web前端培训南通IT培训南通软件开发培训南通java培训

本文链接：https://blog.csdn.net/kexunjiaoyu_IT/article/details/89949150

版权

本文介绍如何使用HTML5和JQuery实现1024数独小游戏，包括游戏界面布局、样式定义和JavaScript逻辑，涉及元素选中、事件监听、随机赋值、上下左右移动及碰撞检测等核心功能。

摘要由CSDN通过智能技术生成

今天我们来分享一款很火的小游戏，1024数独，先看看图
在这里插入图片描述
那么我先分享一下html5代码：

您现在得分 0 分

开始

↑

← ↓ →

接下来css代码: * { padding: 0; margin: 0; box-sizing: border-box; }

ul {
list-style: none;
}

.color0 {
background: #FFCCCC;
}

.color1 {
background: #FFCCCC;
}

.color2 {
background: #FF9999;
}

.color3 {
background: #FF99CC;
}

.color4 {
background: #CCCCFF;
}

.color5 {
background: #CC99CC;
}

.color6 {
background: #996699;
}

.color7 {
background: #663366;
}

.color8 {
background: #9999CC;
}

.color9 {
background: #CC6699;
}

.color10 {
background: #CC3399;
}

.color11 {
background: #993366;
}

.color12 {
background: #0099CC;
}

.color13 {
background: #666699;
}

.color14 {
background: #999933;
}

.color15 {
background: #003366;
}

.gameFrame {
border: 1px solid #fdfafa;
width: 300px;
height: 300px;
background: #CCCCCC;
margin: 20px auto 50px;
}

.gameFrame>.gameFrameRow {
width: 300px;
height: 75px;
}

.gameFrame>.gameFrameRow .gameFrameUl {
width: 300px;
height: 100%;
}

.gameFrame>.gameFrameRow .gameFrameUl .gameFrameCell {
display: inline-block;
border: 1px solid #fdfafa;
height: 100%;
width: 75px;
float: left;
padding: 2px;
}

.gameFrame>.gameFrameRow .gameFrameUl .gameFrameCell>span {
display: inline-block;
width: 100%;
height: 100%;
line-height: 75px;
text-align: center;
color: #fff;
}

.scoringArea {
text-align: center;
height: 60px;
line-height: 60px;
}

.operateKey {
text-align: center;
}

.operateKey .gameControlButton {
height: 30px;
padding: 0 8px;
display: inline-block;
vertical-align: middle;
background: #66CC99;
border: none;
border-radius: 4px;
color: #fff;
cursor: pointer;
}

.operateKey .directionsKey {
display: inline-block;
width: 100px;
text-align: center;
margin: 0 auto;
}

.operateKey .directionsKey>div {
width: 100px;
}

.operateKey .directionsKey>div>span {
display: inline-block;
width: 30px;
height: 30px;
line-height: 30px;
margin-top: 10px;
background: #339999;
border-radius: 4px;
color: #fff;
cursor: pointer;
}
最后js代码：
$(function() {
var row = 4,
line = 4;
var cellObject = {}, //初始化所有的位置数据对象
cellArray = [], //初始化所有的位置数据数组
isStartGame = false, //判断是否开始游戏
scoreNum = 0; //初始化分数
var sellPiont = {}; //获取所有已经有点位的数据信息
function gameInit(row, line) {
$(".gameFrameCell").html("");
/初始化参数/
/获取行列数/
row = row, line = line, cellObject = {}, cellArray = [], sellPiont = {}; //初始化所有的位置数据
for (var i = 0; i < row; i++) {
for (var j = 0; j < line; j++) {
var cellKey = i + “” + j;
//cellArray.push(cellKey);//组装位置数组格式，00 01 02 03 11 …
cellObject[cellKey] = {}; //组建对象里面的对象，达到多层的效果
cellObject[cellKey].row = i; //排
cellObject[cellKey].line = j; //列

}
}
}

function randomRendering() {
/随机位置随机赋值，赋值局限(2,4)/
var num = Math.floor(Math.random() * 2), //取随机值，0 产生2 的块，1产生4的块。
cellNum = 2; //初始化为2的块
var createCell = “”, //新建的节点
power = 1; //因为js没有计算固定的开根次的方法，只有 sqrt() ，开平方，
if (num == 0) {
createCell = $(‘2’);
power = 1;
cellNum = 2;
} else {
createCell = $(‘4’);
cellNum = 4;
power = 2;

}
cellArray = Object.keys(cellObject); //组装位置数组格式，00 01 02 03 11 …
/console.log(cellArray.length);/
/获取长度的随机数，随机获取位置块的数据/
var pointsLength = Object.keys(cellObject).length;
if (pointsLength <= 0) {
alert(“游戏结束！”)
return false;
}
var pointNum = Math.floor(Math.random() * pointsLe