html5网页小游戏 拖拽,移动端拖动小游戏

这次来个拖动的小游戏吧，格子随机，这里以编号标识，其实就是里面的class，编号对应，底部小格子就可以拖曳到上面对应位置，+1分。

拖动小游戏.png

html

app.js

$(function () {

/***************************************/

/* 滑动事件 */

/***************************************/

lockScroll();

//随机生成dog结构

var arr1 = [];

for(var i=0;i<25;i++){

getx1(arr1);

}

function getx1(arr1){

for(var i=0;i>-1;i++){

var flag = true;

var num1 = Math.floor(Math.random()*25)+1;

for(var i in arr1){

if(arr1[i] == num1){

flag= false;

break;

}

}

if(flag == true){

//console.log(num1);

$(".dog").append("

"+num1+"

");

arr1.push(num1);

return;

}

}

}

//随机生成底部mini dog结构

var arr2 = [];

for(var i=0;i<25;i++){

getx2(arr2);

}

function getx2(arr2){

for(var i=0;i>-1;i++){

var flag = true;

var num2 = Math.floor(Math.random()*25)+1;

for(var i in arr2){

if(arr2[i] == num2){

flag= false;

break;

}

}

if(flag == true){

//console.log(num2);

$("footer ul").append("

"+num2+"");

arr2.push(num2);

return;

}

}

}

//开始拖曳

var pressX = 0,

pressY = 0;

var obj = $('footer ul li');//触发页面

var a,b,c;

//手指按下时

obj.bind('touchstart', function (event) {

var touch = event.targetTouches[0];

pressX = touch.pageX;

pressY = touch.pageY;

var current = $(this).attr("class");//获取当前结构class

var top = $(".dog div."+current).offset().top;//获取目标结构top值

var left = $(".dog div."+current).offset().left;//获取目标结构left值

$(this).removeAttr('style');

console.log(top,left);

a = top;

b = left;

c = current;

}, false);

//手指滑动时

obj.bind('touchmove', function (event) {

event.preventDefault();

var touch = event.targetTouches[0];

var deltaX = touch.pageX - pressX;

var deltaY = touch.pageY - pressY;

$(this).css({"-webkit-transform":"translate3d("+deltaX+"px,"+deltaY+"px,0)"})

}, false);

//手指离开时

obj.bind('touchend', function (event) {

var t = $(this).offset().top;

var l = $(this).offset().left;

console.log(t,l);

if(t>a-25 && tb-25 && l

console.log("匹配");

$(this).remove();

$(".dog div."+c).addClass("old");

}else{

console.log("不匹配");

$(this).css({"-webkit-transition":"0.3s ease -webkit-transform"});

$(this).css({"-webkit-transform":"translate3d(0,0,0)"})

}

var o = $(".dog").children(".old").length;//获取已匹配的个数

if(o == 25){

alert("结束")

obj.unbind();//解除绑定

}

}, false);

//禁止页面touchmove

function lockScroll(){

$('body').bind('touchmove',function(e){

e.preventDefault();

});

}

});

css

body {background: #333;font-family: "Microsoft Yahei"}

.dog {width:7rem;height:7rem;overflow: hidden;margin:0.5rem auto;}

.dog div {background: #14a72b;border:1px solid #000;display: inline-block;width:1.4rem;height:1.4rem;float:left;}

.dog .old {background:#be8824; }

footer {position: fixed;width:7rem; bottom:0;left:0.25rem;height: 1.4rem;}

footer ul li{background: #be8824;border:1px solid #000;display: inline-block;width:1.4rem;height:1.4rem;float:left;}