基于JS实现简单滑块拼图游戏
成品效果
<body>
<div id="game" style="position:relative"></div>
</body>
/**
* js配置
*/
var config = {
width: 300,
height: 300,
img: "./img/fj.jpg",
gameDom: document.getElementById("game"),
row: 3, //3行
col: 3 //3列
}
//经过计算的一些数据
var computed = {
num: config.col * config.row, //方块数量
w: config.width / config.col, //每个小方块的宽度
h: config.height / config.row //每个小方块的高度
}
//方块对象的数组，每个对象中记录了方块的正确坐标、当前坐标、dom元素、以及一些实用方法
var blocks;
/**
* 为全局变量blocks赋值
*/
function setBlocks() {
blocks = [];
var points = getPointsArray(); //该数组用于设置每个方块的正确坐标
var shuffledPoints = [...points]; //复制后的数组用于在洗牌后设置方块的当前坐标
shuffle(shuffledPoints);//洗牌
for (var i = 0; i < points.length; i++) {
const point = points[i];
//创建方块对象
var b = {
left: point.left,
top: point.top,
curLeft: shuffledPoints[i].left,
curTop: shuffledPoints[i].top,
dom: document.createElement("div"),
update() {
this.dom.style.transition = "all .5s";
this.dom.style.left = this.curLeft + "px";
this.dom.style.top = this.curTop + "px";
},
isCorrect() {
return this.curTop === this.top && this.curLeft === this.left;
},
isEmpty: i === points.length - 1 //是否应该是空白方块
}
b.dom.style.width = computed.w + "px";
b.dom.style.height = computed.h + "px";
b.dom.style.position = "absolute";
b.dom.style.border = "1px solid #fff";
b.dom.style.boxSizing = "border-box";
b.dom.style.background = `url("${config.img}")`;
b.dom.style.cursor = "pointer";
b.dom.style.backgroundPosition = `-${b.left}px -${b.top}px`;
b.dom.block = b;
b.dom.onclick = function () {
switchBlock(this.block);
}
b.update();
blocks.push(b);
}
}
/**
* 生成游戏
*/
function generateGame() {
config.gameDom.style.width = config.width + "px";
config.gameDom.style.height = config.height + "px";
config.gameDom.style.border = "2px solid #8c8c8c";
config.gameDom.innerHTML = ""; //清空区域
for (const item of blocks) {
if (!item.isEmpty) {
config.gameDom.appendChild(item.dom);
}
}
}
/**
* 获得所有方块的可取到的坐标数组
*/
function getPointsArray() {
var arr = [];
for (var i = 0; i < computed.num; i++) {
arr.push({
left: (i % config.col) * computed.w,
top: parseInt(i / config.col) * computed.h
});
}
return arr;
}
/**
* 将某个block对象的坐标，与空坐标交换
* @param {*} block
*/
function switchBlock(block) {
//找到空坐标
var emptyBlock = blocks.find(b=>b.isEmpty);
//判断是否相邻
if(Math.abs(block.curLeft - emptyBlock.curLeft) +
Math.abs(block.curTop - emptyBlock.curTop) !== computed.w){
return;
}
//交换
var bLeft = block.curLeft;
var bTop = block.curTop;
block.curLeft = emptyBlock.curLeft;
block.curTop = emptyBlock.curTop;
emptyBlock.curLeft = bLeft;
emptyBlock.curTop = bTop;
block.update();
emptyBlock.update();
if(isWin()){
setTimeout(() => {
alert("游戏胜利")
}, 500);
}
}
/**
* 数组洗牌
* @param {*} arr
*/
function shuffle(arr) {
for (var i = 0; i < arr.length - 1; i++) {
var targetIndex = getRandom(0, arr.length - 1);
var temp = arr[i];
arr[i] = arr[targetIndex];
arr[targetIndex] = temp;
}
}
function getRandom(min, max) {
var dec = max - min;
return Math.floor(Math.random() * dec + min);
}
/**
* 游戏是否胜利
*/
function isWin() {
for (const b of blocks) {
if (!b.isCorrect()) {
return false;
}
}
return true;
}
setBlocks();
generateGame();
总结
以上所述是小编给大家介绍的基于JS实现简单滑块拼图游戏,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
相关推荐
-
基于javascript制作经典传统的拼图游戏
本文实例为大家分享了javascript制作经典传统的拼图游戏的关键代码,供大家参考,具体内容如下 效果图: 拼出你喜欢的白雪公主和七个小矮人 实现代码: <!DOCTYPE html> <html> <head> <title>pingtu.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
-
JS 拼图游戏 面向对象，注释完整。
在线演示 http://img.jb51.net/online/pintu/pintu.htm 复制代码 代码如下: <html> <head> <title>JS拼图游戏</title> <style> body{ font-size:9pt; } table{ border-collapse: collapse; } input{ width:20px; } </style> </he
-
图片拼图记忆力测试游戏，网页+JS版
记忆力测试游戏,网页+JS版,规则:图被分割成15块. 每次随机给出一块,在问号区域中找到它的位置并单击该位置.每选对一个区域得一分,得15分才算获胜,每次游戏只有15次机会. 记忆测试 .20pt{font-size:20pt;color:#de3076} "; } if (N) { Styl=" ID="+divId+" top="+divY+" left="+divX+" width="+divW+"
-
JS快速实现移动端拼图游戏
最近做的一个简陋的手机端拼图游戏,代码简单易懂,废话不多说了,让大家证明一切吧! 先看下效果图: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" id="viewport" cont
-
js实现九宫格拼图小游戏
效果如下: 代码如下: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>九宫格拼图</title> <style> *{ padding: 0; margin: 0; border: 0; } /* *是通配符,给所有的元素去掉默认样式,因为有的浏览器会默认加上一些样式,这可能会给布局带来问题 */ body{ width: 100
-
JS写的数字拼图小游戏代码[学习参考]
复制代码 代码如下: <html> <head> <title>拼图</title> <style> td.numTd{ width : 20px ; height : 20px ; } div.numDiv{ width : 100% ; height : 100% ; background-color : #000 ; color : #FFF ; text-align : center ; vertical-align : middle ;
-
js+html5实现可在手机上玩的拼图游戏
本文实例讲述了js+html5实现可在手机上玩的拼图游戏.分享给大家供大家参考.具体如下: 手机版的拼图.pc上用Chrome 或者 Firefox var R=(function(){ /*右边菜单*/ function fa(){ if(mo.style.right!='0px'){ mo.style.right='0px'; mco.rcss('','cmck'); }else{ mo.style.right='-100px'; mco.rcss('cmck',''); } } on(mc
-
基于JS实现简单滑块拼图游戏
成品效果 <body> <div id="game" style="position:relative"></div> </body> /** * js配置 */ var config = { width: 300, height: 300, img: "./img/fj.jpg", gameDom: document.getElementById("game"), row: 3
-
基于JS实现接粽子小游戏的示例代码
目录 游戏设计 游戏实现 添加粽子元素 粽子掉落 难度选择 开始游戏 总结 端午节马上就到了,听说你们公司没发粽子大礼包?没关系,这里用 JS 实现了一个简单的接粽子小游戏,能接到多少粽子,完全看你手速,不用担心端午没粽子了. 游戏设计 在游戏屏幕内,会随机的从顶部掉落粽子,通过鼠标移动到粽子上并点击,成功接住粽子,得到积分.在设置面板中,可以设置游戏难度,分为简单.很难.超级难三种等级,不同等级的积分也是不同的,玩家可根据自己的手速进行设置.游戏结束后,可看到自己的成绩.实现出来的效果如下(可
-
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
本文实例讲述了jQuery+vue.js实现的九宫格拼图游戏.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } /*#piclist { width: 600p
-
基于JS实现简单的样式切换效果代码
本文实例讲述了基于JS实现简单的样式切换效果.分享给大家供大家参考.具体如下: 这是一款基于JS实现简单的样式切换代码,自由切换CSS样式,很多大网站现在正在用,我觉得这是个挺实用的不错的功能,希望大家喜欢哦. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-simple-tab-cha-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti
-
Phaser.js实现简单的跑酷游戏附源码下载
采用的物理引擎是Phaser.js 官网地址:http://phaser.io/ 在这里对此引擎不做过多介绍(因为我也是小白,嘿嘿) 效果展示: 源码(详细源码图片资源可点击文章下方或屏幕右上方的github链接进行clone) 1.创建游戏舞台 var config = { type: Phaser.AUTO, width: 800, height: 400, physics: { default: 'arcade', arcade: { gravity: { y: 300 }, debug:
-
js实现简单贪吃蛇游戏
本文实例为大家分享了js实现简单贪吃蛇游戏的具体代码,供大家参考,具体内容如下 上下左右键控制方向使贪吃蛇吃葡萄 吃5个葡萄,游戏结束时左上角为总得分. 运行结果: 界面和css代码这里就不加赘述了,主要贴js代码(加了注释): var config = { width: 20, //一个格子的宽度 height: 20, //一个格子的高度 tr: 30, //行数 td: 30 //列数 } var snake = null, //Snake的实例 food = null, //Food的实
-
java实现简单的拼图游戏
用Java来实现简单的拼图游戏,供大家参考,具体内容如下 首先我们看一下这个拼图小游戏的效果图: 创建一个名称为MedleyGame的类,该类继承了JFrame类:然后在该类中分别声明一个面板对象和一个按钮对象,面板对象用来添加拼图按钮,按钮对象为当前显示空白图片的按钮:最后为该类编写一个main()方法和一个构造方法MedleyGame(),并在构造方法中设置窗体的相关属性,如窗体的标题.显示位置.大小等. java项目结构如下: 具体java代码如下: package pac; import
-
js实现拖拽拼图游戏
本文实例为大家分享了js实现拖拽拼图游戏的具体代码,供大家参考,具体内容如下 该游戏主要使用了一些拖拽事件,以及对数据传递的应用,直接上代码,感兴趣的可以参考 html:代码 <div class="box"> <div id="d1" class="d1"></div> <div id="d2" class="d1"></div> <div
-
js实现简单翻牌小游戏
本文实例为大家分享了js实现简单翻牌小游戏的具体代码,供大家参考,具体内容如下 1.简介 非常简单的一个网络消消乐翻牌小游戏的实现,代码量较少,不过遇到的bug和自行开发的步骤十分有纪念意义. 2.核心代码块 生成随机数列,确定图片随机分布 function getImgIndex(is){ var index = parseInt(Math.random()*8)+1; if(is[index] < 2){ is[index]++;
-
基于JS实现简单的3D立方体自动旋转
目录 演示 技术栈 源码 css js 雪花部分 演示 技术栈 display:inline-block,block,inline元素的区别: display:block将元素显示为块级元素,从而可以更好地操控元素的宽高,以及内外边距,每一个块级元素都是从新的一行开始. display : inline将元素显示为行内元素,高度,行高以及底边距不可改变,高度就是内容文字或者图片的宽度,不可以改变.多个相邻的行内元素排在同一行里,知道页面一行排列不下,才会换新的一行. display:inline