先说结论:

前几天写了几个非常简单的移动端小游戏,其中一个拼图游戏让我郁闷了一段时间。因为要获取每张图片的位置,用`<style>`标签写的样式,直接获取计算后样式再用来交换位置,结果就悲剧了,出现了一些不理解的情况。这个错误比较低级,不过还是被我遇到了,就拿来记录一下。

注意:

在交换每张图片位置的时候,我对它们设置了CSS中transition属性,有了缓冲动画效果,这样一来,每次打乱图片的时候,用getComputedStyle获取计算后样式,但是,动画有时长,而获取样式在触发时就完成了,所以会造成:图片还没有达目标位置,就已经获取到了它的中途位置坐标,得到了一组错误的数字,所有的拼图就会错乱。

所以,在遇到需要获取一个移动中的元素的left、top这类属性值的时候,如果要获取的值是个具体的值,那么就不要用计算后样式,而是去获取行内样式或者一个固定的值,就不会出现麻烦了。

代码地址:https://github.com/zhangxiongcn/demo

正确效果:

错误效果:

HTML部分:

    <div class="box">
<h2>拼图游戏</h2>
<button id="btn">play</button>
<div class="puzzle" id="puzzle">
<div class="item item0" data-num="0" style="left: 2px;top: 2px;background-position: 0px 0px;"></div>
<div class="item item1" data-num="1" style="left: 104px;top: 2px;background-position: -100px 0px;"></div>
<div class="item item2" data-num="2" style="left: 206px;top: 2px;background-position: -200px 0px;"></div>
<div class="item item3" data-num="3" style="left: 2px;top: 104px;background-position: 0px -100px;"></div>
<div class="item item4" data-num="4" style="left: 104px;top: 104px;background-position: -100px -100px;"></div>
<div class="item item5" data-num="5" style="left: 206px;top: 104px;background-position: -200px -100px;"></div>
<div class="item item6" data-num="6" style="left: 2px;top: 206px;background-position: 0px -200px;"></div>
<div class="item item7" data-num="7" style="left: 104px;top: 206px;background-position: -100px -200px;"></div>
<div class="item item8" data-num="8" style="left: 206px;top: 206px;background-position: -200px -200px;"></div>
</div>
</div>
<div class="mask" id="mask">
<div class="sucbox">
<div class="animated tada">完成</div>
<button class="again">继续</button>
</div>
</div>

CSS部分:

    <style>
*{margin:;padding:;}
body{
background-color: #FDF5E6;
}
.box{
width: 100%;
text-align: center;
}
.box h2{
margin:20px;
}
.box button{
width: 50px;
height: 30px;
background-color: #1E90FF;
border: none;
outline: none;
font-size: 20px;
color: #fff;
border-radius: 5px;
margin-bottom: 10px;
}
.puzzle{
position: relative;
width: 308px;
height: 308px;
margin: 0 auto;
border: 3px solid #ccc;
box-shadow: 0 0 10px #ddd;
}
.item{
position: absolute;
width: 100px;
height: 100px;
background-image: url(images/puzzle.jpg);
background-repeat: no-repeat;
background-size: 300% 300%;
transition: all .5s;
}
.mask{
display: none;
position: absolute;
top:;
left:;
right:;
bottom:;
background-color: rgba(0,0,0,.3);
}
.mask .sucbox{
position: absolute;
top: 20%;
left: 50%;
}
.tada{
margin-left: -50px;
width: 100px;
height: 50px;
background-color: pink;
border-radius: 10px;
font-size: 24px;
line-height: 50px;
text-align: center;
}
.again{
width: 100px;
height: 30px;
margin-top: 50px;
margin-left: -50px;
font-size: 20px;
}
</style>

JS部分:

    var puzzle = document.getElementById('puzzle');
var items = puzzle.querySelectorAll('.item');
var btn = document.getElementById('btn');
var mask = document.getElementById('mask');
var again = mask.querySelector('.again');
var info = {
left:0,
top:0,
x:0,
y:0
}
again.addEventListener('touchend',function(){
mask.style.display = "none";
});
// 点击play按钮,打乱图片顺序
btn.addEventListener('touchstart',function(){
for (var i = 1; i < 20; i++) {
// 随机获取20组0-9的数字
// 让它们互相更换位置
var a = Math.floor(Math.random()*1000)%9;
var b = Math.floor(Math.random()*1000)%9;
if( a != b){
var _left = items[a].style.left;
items[a].style.left = items[b].style.left;
items[b].style.left = _left; var _top = items[a].style.top;
items[a].style.top = items[b].style.top;
items[b].style.top = _top; // 更换编号
var _num= items[a].getAttribute("data-num");
items[a].setAttribute("data-num",items[b].getAttribute("data-num"));
items[b].setAttribute("data-num",_num);
}
}
});
for (var i = 0; i < items.length; i++) {
// 手指按下时,获取初始值
items[i].addEventListener('touchstart',function(e){
info.left = parseInt(this.style.left);
info.top = parseInt(this.style.top);
info.x = e.targetTouches[0].pageX;
info.y = e.targetTouches[0].pageY;
// 保存每张图片原来的left和top
// 用于交换图片时用
this.iniLeft = info.left;
this.iniTop = info.top;
this.style.transition = "none";
});
// 滑动时,改变图片的left和top
items[i].addEventListener('touchmove',function(e){
this.style["z-index"] = 99;
this.style.left = info.left - info.x + e.targetTouches[0].pageX + "px";
this.style.top = info.top - info.y + e.targetTouches[0].pageY + "px";
});
// 手指抬起时,更换两张图片位置
items[i].addEventListener('touchend',function(e){
this.style["z-index"] = 0;
var x = e.changedTouches[0].pageX - puzzle.offsetLeft;
var y = e.changedTouches[0].pageY - puzzle.offsetTop;
var target = find(this,x,y);
if( target === this){
target.style.top = target.iniTop +"px";
target.style.left = target.iniLeft +"px";
}else{
exchange(this,target);
if(isOk()){
setTimeout(function(){
mask.style.display = "block";
},1000);
}
}
this.style.transition = "all .5s";
});
}
// 两个图片互相交换,即交换它们的left和top
function exchange(a,b){ var _top = a.iniTop;
a.style.top = b.style.top;
b.style.top = _top + "px"; var _left = a.iniLeft;
a.style.left = b.style.left;
b.style.left = _left + "px";
var _num= a.getAttribute("data-num");
a.setAttribute("data-num",b.getAttribute("data-num"));
b.setAttribute("data-num",_num);
}
// 移动一张图片,找到要更换的目标图片
// 根据鼠标的x,y值所在的范围去确定目标图片
function find(obj,x,y){
for (var i = 0; i < items.length; i++) {
if(obj != items[i]){
var _left = parseInt(items[i].style.left);
var _top = parseInt(items[i].style.top);
var c1 = x >= _left && x < _left+100;
var c2 = y >= _top && y < _top+100;
if(c1 && c2){
return items[i];
}
}
}
return obj;
}
function isOk(){
var str = '';
for (var i = 0; i < items.length; i++) {
str += items[i].getAttribute('data-num');
}
return str == "012345678";
}
document.addEventListener('touchstart',function(e){
e.stopPropagation();
e.preventDefault();
});

拼图小游戏之计算后样式与CSS动画的冲突的更多相关文章

  1. JavaScript版拼图小游戏

    慕课网上准备开个新的jQuery教程,花了3天空闲时间写了一个Javascript版的拼图小游戏,作为新教程配套的分析案例 拼图游戏网上有不少的实现案例了,但是此源码是我自己的实现,所以不做太多的比较 ...

  2. jQuery实现拼图小游戏

    小熊维尼拼图                                                                                    2017-07-23 ...

  3. jQuery拼图小游戏

    jQuery拼图小游戏 最后样式 核心代码部分 <script type="text/javascript" > $(function () { $("td& ...

  4. 仿苹果电脑任务栏菜单&&拼图小游戏&&模拟表单控件

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. js事件,操作页面文档,计算后样式,数据类型

    js:运行在浏览器的脚本语言 js引入 1.行间式:存在于行间事件中 <div id="div" onclick="this.style.color="r ...

  6. 教你用Python自制拼图小游戏,一起来制作吧

    摘要: 本文主要为大家详细介绍了python实现拼图小游戏,文中还有示例代码介绍,感兴趣的小伙伴们可以参考一下. 开发工具 Python版本:3.6.4 相关模块: pygame模块: 以及一些Pyt ...

  7. 探索javascript----获得节点计算后样式

    节点计算后样式是一个属性与属性值的值对对象: IE:    node.currentStyle; 非IE: window.getComputedStyle(node,null); 兼容方式: func ...

  8. 使用NGUI实现拖拽功能(拼图小游戏)

    上一次用UGUI实现了拼图小游戏,这次,我们来用NGUI来实现 实现原理 NGUI中提供了拖拽的基类UIDragDropItem,所以我们要做的就是在要拖拽的图片上加一个继承于该类的脚本,并实现其中的 ...

  9. 在HTML页面中有jQuery实现实现拼图小游戏

    1.用jQuery实现拼图小游戏 2.首先获得td的点击事件.再进行交换位置 3.下面这种仅供参考 4.下面这些是HTMl标签 当这个世界变得越来越复杂的时候,内心最需保持一份简单一份纯真:

随机推荐

  1. C语言 · 薪水计算

    问题描述 编写一个程序,计算员工的周薪.薪水的计算是以小时为单位,如果在一周的时间内,员工工作的时间不超过40 个小时,那么他/她的总收入等于工作时间乘以每小时的薪水.如果员工工作的时间在40 到50 ...

  2. 【声明】前方不设坑位,不收费!~ 我为NET狂官方学习计划

    发个通知,过段时间学习计划相关的东西就出来了,上次写了篇指引文章后有些好奇心颇重的人跟我说:“发现最近群知识库和技能库更新的频率有点大,这是要放大招的节奏啊!” 很多想学习却不知道如何规划的人想要一个 ...

  3. Hyper-V 激活Windows系统重启后黑屏的解决方法 + 激活方法

    异常处理汇总-服 务 器 http://www.cnblogs.com/dunitian/p/4522983.html 服务器相关的知识点:http://www.cnblogs.com/dunitia ...

  4. HTML5 语义元素(一)页面结构

    本篇主要介绍HTML5增加的语义元素中关于页面结构方面的,包含: <article>.<aside>.<figure>.<figcaption>.< ...

  5. C# 对象实例化 用json保存 泛型类 可以很方便的保存程序设置

    用于永久化对象,什么程序都行,依赖NewtonSoft.用于json序列化和反序列化. using Newtonsoft.Json; using System; using System.Collec ...

  6. SQL-类型转换函数

    CAST ( expression AS data_type)CONVERT ( data_type, expression,[style]) Select '您的班级编号'+ 1  错误这里+是数学 ...

  7. ExtJS 项目准备工作(一)

    首先,需要从网上下载两个文件,一个是SenchaCmd-6.2.0-windows-64bit(我的电脑是window 10 64位) 另一个是ExtJs6的源码包(ext-6.0.0.415). 源 ...

  8. 《MySQL必知必会》学习笔记

    数据库:数据库是一种以某种有组织的方式存储的数据集合.其本质就是一个容器,通常是一个或者一组文件. 表:表示一种结构化的文件,可用来存储某种特定类型的数据. 模式:描述数据库中特定的表以及整个数据库和 ...

  9. Linux实战教学笔记01:计算机硬件组成与基本原理

    标签(空格分隔): Linux实战教学笔记 第1章 如何学习Linux 要想学好任何一门学问,不仅要眼睛看,耳朵听,还要动手记,勤思考,多交流甚至尝试着去教会别人. 第2章 服务器 2.1 运维的基本 ...

  10. 前端构建大法 Gulp 系列 (四):gulp实战

    前端构建大法 Gulp 系列 (一):为什么需要前端构建 前端构建大法 Gulp 系列 (二):为什么选择gulp 前端构建大法 Gulp 系列 (三):gulp的4个API 让你成为gulp专家 前 ...