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. 2019年java全栈工程师学习大全

    技术更新日新月异,对于初入职场的同学来说,经常会困惑该往那个方向发展,这一点我是深有体会的. 我刚开始学习 Java 那会,最大的问题就是不知道该学什么,以及学习的顺序,我相信这也是很多初学者经常面临 ...

  2. Protobuf多协议

    上一篇只有Person的message,如果多了一个message,如Dog,这样就会有问题. 解决方法: 定义多协议 一.定义proto文件 syntax = "proto2"; ...

  3. pip常用命令(转载)

    用阿里云服务器,使用pip安装第三方库的时候卡的要死.所以我就想pip能不能安装本地的包. 找到了这篇博客: http://me.iblogc.com/2015/01/01/pip%E5%B8%B8% ...

  4. tensorflow运行时openssl与boringssl兼容性问题

    tensorflow中,grpc使用boringssl进行加密,boringssl是google基于openssl自行开发的一条分支,有许多相同函数,但底层实现以及支持的加密类型有不同. 且tenso ...

  5. JavaScript工具类(三):localStorage本地储存

    localStorage Web 存储 API 提供了 sessionStorage (会话存储) 和 localStorage(本地存储)两个存储对象来对网页的数据进行添加.删除.修改.查询操作. ...

  6. Redis 密码设置 及 带密码访问

    转: Redis 密码设置 如果不加密码,默认只能本机访问,加密码也是为了安全考虑 1.进入Redis 的安装目录,找到redis.conf文件.用vi命令打开文件 输入  / requirepass ...

  7. IDEA 开发javafx: error: java:package javafx.application does not exist

    1)jdk使用1.8, 1.7中未包含javafx相关内容. 2)确保classpath中加入了javafx包路径. 在“file” --> "project structure&qu ...

  8. 【翻译】Flink Table Api & SQL — 用户定义函数

    本文翻译自官网:User-defined Functions  https://ci.apache.org/projects/flink/flink-docs-release-1.9/dev/tabl ...

  9. IDEA中MyBatis插件的安装及使用

    这个插件的好处就在于能自动关联mapper类与xml,让你可以快速的互相跳转,还能帮助你做简单的排错. 安装方法: 1.File→Settings→Plugins,输入mybatis plugin,本 ...

  10. consul reconnect_timeout

    reconnect_timeout这将控制从集群中彻底删除发生故障的节点需要多长时间.默认值为72小时,建议将其设置为至少为节点或网络分区的预期可恢复的最大停机时间的两倍.警告:将此时间设置得太低可能 ...