jq + 面向对象实现拼图游戏

知识点

  • 拖拽事件
  • es6面向对象
  • jquery事件
  • 效果图

html:

    <div class="wraper">
<div class="btn">
<button class="start">开始</button>
</div>
<div class="box"></div>
</div>

css:

    * {
margin: 0;
padding: 0;
list-style: none;
}
html,
body {
width: 100%;
height: 100%;
background: url('../img/bg_pic.jpg') no-repeat;
background-size: 100% 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.wraper {
width: 500px;
height: 600px;
position: relative;
}
.wraper .btn {
text-align: center;
line-height: 80px;
}
.wraper .btn button {
width: 100px;
height: 40px;
background: yellow;
border: none;
outline: none;
font-size: 14px;
color: red;
border-radius: 20px;
cursor: pointer;
}
.wraper .box {
width: 100%;
height: 500px;
position: relative;
border: 10px solid red;
border-radius: 10px;
}
.wraper .box .pic {
position: absolute;
background: url('../img/zy.jpg') no-repeat;
box-shadow: 0 0 5px #fff;
background-size: 500px 500px;
cursor: pointer;
}

js:

   class Game {
constructor() {
this.boxW = parseInt($('.box').css('width'));
this.boxH = parseInt($('.box').css('height'));
this.imgW = this.boxW / 5;
this.imgH = this.boxH / 5;
this.flag = true; //true为开始 false为重排
this.orArr = []; //标准数组
this.randArr = []; //乱序数组
this.init();
}
init() {
this.createDom();
this.getState();
}
createDom() {
//行
for (var i = 0; i < 5; i++) {
//列
for (var j = 0; j < 5; j++) {
this.orArr.push(i * 5 + j);
let imgs = $("<div class='pic'></div>").css({
width: this.imgW + 'px',
height: this.imgH + 'px',
left: j * this.imgW + 'px',
top: i * this.imgH + 'px',
backgroundPosition: -j * this.imgW + 'px ' + -i * this.imgH + 'px'
});
$('.box').append(imgs);
}
}
}
getState() {
let btn = $('.btn .start');
let imgs = $('.pic');
let _this = this;
btn.on('click', function() {
if (_this.flag) {
_this.flag = false;
btn.text('重排');
_this.getRandom();
_this.getOrder(_this.randArr);
imgs.on('mousedown', function(e) {
let index = $(this).index();
let left = e.pageX - imgs.eq(index).offset().left;
let top = e.pageY - imgs.eq(index).offset().top;
$(document).on('mousemove', function(e1) {
let left1 = e1.pageX - left - $('.box').offset().left - 10;
let top1 = e1.pageY - top - $('.box').offset().top - 10;
imgs.eq(index).css({
'z-index': '40',
'left': left1,
'top': top1
})
}).on('mouseup', function(e2) {
let left2 = e2.pageX - left - $('.box').offset().left - 10;
let top2 = e2.pageY - top - $('.box').offset().top - 10;
let index2 = _this.changeIndex(left2, top2, index);
if (index === index2) {
_this.picReturn(index);
} else {
_this.picChange(index, index2);
}
$(document).off('mousemove').off('mouseup').off('mousedown');
})
return false;
})
} else {
_this.flag = true;
btn.text('开始');
_this.getOrder(_this.orArr);
imgs.off('mousemove').off('mouseup').off('mousedown');
}
})
}
changeIndex(left, top, index) {
if (left < 0 || left > this.boxW || top < 0 || top > this.boxH) {
return index;
} else {
let col = Math.floor(left / this.imgW);
let row = Math.floor(top / this.imgH);
let moveIndex = 5 * row + col;
let i = 0;
let len = this.randArr.length;
while ((i < len) && this.randArr[i] !== moveIndex) {
i++;
}
return i;
}
}
picReturn(index) {
let j = this.randArr[index] % 5;
let i = Math.floor(this.randArr[index] / 5);
$('.pic').eq(index).css('z-index', '40').animate({
'left': j * this.imgW,
'top': i * this.imgH
}, 300, function() {
$(this).css('z-index', '10');
})
}
picChange(index, index2) {
let _this = this;
let fromJ = _this.randArr[index] % 5;
let fromI = Math.floor(_this.randArr[index] / 5);
let toJ = _this.randArr[index2] % 5;
let toI = Math.floor(_this.randArr[index2] / 5);
let temp = _this.randArr[index];
$('.pic').eq(index).css('z-index', '40').animate({
'left': toJ * _this.imgW + 'px',
'top': toI * _this.imgH + 'px'
}, 300, function() {
$(this).css('z-index', '10');
})
$('.pic').eq(index2).css('z-index', '40').animate({
'left': fromJ * _this.imgW + 'px',
'top': fromI * _this.imgH + 'px'
}, 300, function() {
$(this).css('z-index', '10');
_this.randArr[index] = _this.randArr[index2];
_this.randArr[index2] = temp;
_this.check();
})
}
getRandom() {
this.randArr = [...this.orArr];
this.randArr.sort(function() {
return Math.random() - 0.5;
})
}
getOrder(arr) {
let len = arr.length;
for (var i = 0; i < len; i++) {
$('.box .pic').eq(i).animate({
left: arr[i] % 5 * this.imgW,
top: Math.floor(arr[i] / 5) * this.imgH
}, 400)
}
}
check() { //判断是否成功
if (this.randArr.toString() == this.orArr.toString()) {
alert('拼图成功');
this.flag = true;
$('.btn .start').text('开始');
$('.pic').off('mousemove').off('mouseup').off('mousedown');
}
}
}
new Game();

参考至腾讯课堂渡一教育

jq + 面向对象实现拼图游戏的更多相关文章

  1. JavaScript写一个拼图游戏

    拼图游戏的代码400行, 有点多了, 在线DEMO的地址是:打开: 因为使用canvas,所以某些浏览器是不支持的: you know: 为什么要用canvas(⊙o⊙)?  因为图片是一整张jpg或 ...

  2. 利用Vue.js实现拼图游戏

    之前写过一篇<基于Vue.js的表格分页组件>的文章,主要介绍了Vue组件的编写方法,有兴趣的可以访问这里进行阅读:http://www.cnblogs.com/luozhihao/p/5 ...

  3. JavaScript拼图游戏

    今天是2016年最后一天上班了.最近几天都比较休闲,有时间空闲下来写写文档之类的. 2016过得真是快.感觉没做什么就过去了.想到之前想坚持每个月写一写博客都没坚持到.希望2017年可以吧. 无聊之余 ...

  4. SDL制作拼图游戏

    看完教程第三集后,好像自己能用这个来写一个简单的拼图游戏,第一次写出个带界面的游戏,好有成就感. 图片是自己慢慢截左上部分8个脸. #include <stdio.h> #include ...

  5. 拼图游戏(js,C#,java三种语言)

    <html> <head> <meta charset="utf-8"> <style type="text/css" ...

  6. atitit.html5 拼图游戏的解决之道.

    atitit.html5 拼图游戏的解决之道. 1. 拼图游戏的操作(点击法and 拖动法) 1 1. 支持键盘上.下.左.右键移动: 1 2. 支持点击空白模块中的上下左右箭头移动: 1 3. 支持 ...

  7. [CareerCup] 8.6 Jigsaw Puzzle 拼图游戏

    8.6 Implement a jigsaw puzzle. Design the data structures and explain an algorithm to solve the puzz ...

  8. Android拼图游戏

    效果如下 游戏的设计 首先我们分析下如何设计这款游戏: 1.我们需要一个容器,可以放这些图片的块块,为了方便,我们准备使用RelativeLayout配合addRule实现 2.每个图片的块块,我们准 ...

  9. 拼图游戏 v1.1

    我一直对拼图游戏比较有兴趣,市面上卖的所谓“1000块拼图”也玩过不少,不过玩那个太占地方,后来也不再买了,同时也就萌生了在电脑上玩拼图的想法. 现在虽然有很多拼图游戏,但能大多数只能支持几十或几百块 ...

随机推荐

  1. bash 重启后台程序脚本

    kill -9 `cat pid` nohup python3 -u webserver.py & echo $! > pid

  2. Tracking without bells and whistles

    Tracking without bells and whistles 2019-08-07 20:46:12 Paper: https://arxiv.org/pdf/1903.05625 Code ...

  3. python 上下文管理器contextlib.ContextManager

    1 模块简介 在数年前,Python 2.5 加入了一个非常特殊的关键字,就是with.with语句允许开发者创建上下文管理器.什么是上下文管理器?上下文管理器就是允许你可以自动地开始和结束一些事情. ...

  4. Laravel 使用自己的类库三种方式

    虽然Composer使得我们可以重用很多现有的类库(例如packagist.org中的),但是我们仍然可能用到一些不兼容composer的包或者类库.另外在某一项目中,我们也可能会创建某一类库,而且可 ...

  5. 改进初学者的PID-初始化

    最近看到了Brett Beauregard发表的有关PID的系列文章,感觉对于理解PID算法很有帮助,于是将系列文章翻译过来!在自我提高的过程中,也希望对同道中人有所帮助.作者Brett Beaure ...

  6. -bash: /usr/bin/rm: 参数列表过长

    解决方法: find ./ -type f -name "*.nasl"|xargs rm -f find ./ -type f -name "*.*"|xar ...

  7. SQL server触发器学习记录

    作为C#程序员,我工作内容基本就是winform,wpf,asp.net.sql接触的比较少,今天突然来了一个ticket要我修改触发器脚本....只会select*的我顿感迷茫... 需求描述:as ...

  8. Quartus ii 设计中的差分信号在例化时的命名规则

    在Quartus中做设计,如果使用了差分信号的,如DDR的IP中的mem_ck与mem_ck_n,mem_dqs与mem_dqs_n,将其引入输出端口时,对其命名有一定的规则,否则就会出现错误. 如下 ...

  9. 百练1724 ROADS

    总时间限制: 1000ms    内存限制: 65536kB 描述 N cities named with numbers 1 ... N are connected with one-way roa ...

  10. 在ensp上的mstp基础配置

    为什么需要mstp? 因为stp中存在阻塞端口,阻塞后不承载流量,造成了带宽浪费 实验模拟 实验拓扑 相关参数 首先我们在交换机上创建vlan 10,20 设置端口 默认是运行mstp服务看一下