拼图小游戏之计算后样式与CSS动画的冲突
先说结论:
前几天写了几个非常简单的移动端小游戏,其中一个拼图游戏让我郁闷了一段时间。因为要获取每张图片的位置,用`<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动画的冲突的更多相关文章
- JavaScript版拼图小游戏
慕课网上准备开个新的jQuery教程,花了3天空闲时间写了一个Javascript版的拼图小游戏,作为新教程配套的分析案例 拼图游戏网上有不少的实现案例了,但是此源码是我自己的实现,所以不做太多的比较 ...
- jQuery实现拼图小游戏
小熊维尼拼图 2017-07-23 ...
- jQuery拼图小游戏
jQuery拼图小游戏 最后样式 核心代码部分 <script type="text/javascript" > $(function () { $("td& ...
- 仿苹果电脑任务栏菜单&&拼图小游戏&&模拟表单控件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js事件,操作页面文档,计算后样式,数据类型
js:运行在浏览器的脚本语言 js引入 1.行间式:存在于行间事件中 <div id="div" onclick="this.style.color="r ...
- 教你用Python自制拼图小游戏,一起来制作吧
摘要: 本文主要为大家详细介绍了python实现拼图小游戏,文中还有示例代码介绍,感兴趣的小伙伴们可以参考一下. 开发工具 Python版本:3.6.4 相关模块: pygame模块: 以及一些Pyt ...
- 探索javascript----获得节点计算后样式
节点计算后样式是一个属性与属性值的值对对象: IE: node.currentStyle; 非IE: window.getComputedStyle(node,null); 兼容方式: func ...
- 使用NGUI实现拖拽功能(拼图小游戏)
上一次用UGUI实现了拼图小游戏,这次,我们来用NGUI来实现 实现原理 NGUI中提供了拖拽的基类UIDragDropItem,所以我们要做的就是在要拖拽的图片上加一个继承于该类的脚本,并实现其中的 ...
- 在HTML页面中有jQuery实现实现拼图小游戏
1.用jQuery实现拼图小游戏 2.首先获得td的点击事件.再进行交换位置 3.下面这种仅供参考 4.下面这些是HTMl标签 当这个世界变得越来越复杂的时候,内心最需保持一份简单一份纯真:
随机推荐
- ExtJS 4.2 评分组件
上一文章是扩展ExtJS自带的Date组件.在这里将创建一个评分组件. 目录 1. 介绍 2. 示例 3. 资源下载 1. 介绍 代码参考的是 Sencha Touch 2上的一个RatingStar ...
- NYOJ 1007
在博客NYOJ 998 中已经写过计算欧拉函数的三种方法,这里不再赘述. 本题也是对欧拉函数的应用的考查,不过考查了另外一个数论基本定理:如何用欧拉函数求小于n且与n互质所有的正整数的和. 记eule ...
- iOS开发系列--打造自己的“美图秀秀”
--绘图与滤镜全面解析 概述 在iOS中可以很容易的开发出绚丽的界面效果,一方面得益于成功系统的设计,另一方面得益于它强大的开发框架.今天我们将围绕iOS中两大图形.图像绘图框架进行介绍:Quartz ...
- 关于Raid0,Raid1,Raid5,Raid10的总结
RAID0 定义: RAID 0又称为Stripe或Striping,它代表了所有RAID级别中最高的存储性能.RAID 0提高存储性能的原理是把连续的数据分散到多个磁盘上存取,这样,系统有数据请求就 ...
- Oracle手边常用70则脚本知识汇总
Oracle手边常用70则脚本知识汇总 作者:白宁超 时间:2016年3月4日13:58:36 摘要: 日常使用oracle数据库过程中,常用脚本命令莫不是用户和密码.表空间.多表联合.执行语句等常规 ...
- 【HanLP】HanLP中文自然语言处理工具实例演练
HanLP中文自然语言处理工具实例演练 作者:白宁超 2016年11月25日13:45:13 摘要:HanLP是hankcs个人完成一系列模型与算法组成的Java工具包,目标是普及自然语言处理在生产环 ...
- 深入浅出JavaScript之原型链&继承
Javascript语言的继承机制,它没有"子类"和"父类"的概念,也没有"类"(class)和"实例"(instanc ...
- Django admin定制化,User字段扩展[原创]
前言 参考上篇博文,我们利用了OneToOneField的方式使用了django自带的user,http://www.cnblogs.com/caseast/p/5909248.html , 但这么用 ...
- php 基础代码大全(不断完善中)
下面是基础的PHP的代码,不断完善中~ //语法错误(syntax error)在语法分析阶段,源代码并未被执行,故不会有任何输出. /* [命名规则] */ 常量名 类常量建议全大写,单词间用下划线 ...
- Angular2 Hello World 之 2.0.0-beta.14
公司现在采用angualrjs开发一些web应用,采用的是angular1,现在angular2已经差不多了,听说最近rc6已经出来了……其实感觉好慢啊!之前也做过一些anglar2的例子,但是没有记 ...