填充每一层的图片数据
实例化十种图片,每种9个的数组[90items...],然后随机填充图层,根据x,y模拟方阵坐标,绝对定位来布局图片。图片Item的ID以level和坐标x,y拼接而成。
function fillTable(x = 6,y= 6) {
let mulitpleArray = [];
for (var i = 0; i < x ; i++) {
for (var j = 0; j < y ; j++) {
let index = Math.floor(Math.random() * itemsArr.length);
let randomItem = itemsArr[index];
itemsArr.splice(index,1);
let zindex = maxZIndex - x;
let diff = 0.5*(maxLevel - x);
let top = 1*(i+6-x) - diff +'rem';
let left = 1*(j+6-x) - diff +'rem';
mulitpleArray.push(`<div x="${i}" y="${j}" l="${x}" char="${randomItem}" id="item-${x}-${i}-${j}" style="top:${top};left:${left};z-index:${zindex}" class="${randomItem} item"></div>`);
}
}
$('#wrapAllItems').append(mulitpleArray.join(""));
}
const Levels = [6,5,4,3];
判断图片是否可以移动
如果上一层级的几个节点都不存在,则可以移动
//判断上一层的遮挡图片是否存在,最多四个
function checkFourNodes(l,x,y){
let nodes = [];
if(x<l && y<l){
nodes.push(`item-${l}-${x}-${y}`);
}
if(x-1>=0 && y<l){
nodes.push(`item-${l}-${x-1}-${y}`);
}
if(y-1>=0 && x<l){
nodes.push(`item-${l}-${x}-${y-1}`);
}
if(x-1>=0 && y-1>=0){
nodes.push(`item-${l}-${x-1}-${y-1}`);
}
console.log(nodes);
let exist = false;
//节点 添加红边框
nodes.forEach((item)=>{
if($(`#${item}`).length > 0){
exist = true;
$(`#${item}`).addClass('redBorder');
setTimeout(()=>{
$(`#${item}`).removeClass('redBorder');
},500);
}
});
return exist;
}
使用jquery.fly.js模拟抛物线移动
if(canMove){
let from = $(this).offset();
let endEle = $(`.stackItem`).eq(counts);
let end = endEle.offset();
let element = $(this);
console.log(from,end);
$(this).fly({
start: {
left: from.left,//抛物体起点横坐标
top: from.top //抛物体起点纵坐标
},
end: {
left: end.left,//抛物体终点横坐标
top: end.top, //抛物体终点纵坐标
},
onEnd: function() {
endEle.addClass(val);
element.remove();
addItemToStack(val);
lockClick = false;
}
});
}else{
lockClick = false;
}
在线Demo 羊了个羊Jquery版本
全部代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>羊了个羊Jquery版本</title>
<style>
html,body{
margin: 0;
padding: 0;
}
div{
box-sizing: border-box;
}
div.item{
width: 1rem;
height: 1rem;
cursor: pointer;
float: left;
box-sizing: border-box;
border: 1px solid white;
position: absolute;
}
div.redBorder{
border: 1px solid red;
}
#wrapAllItems{
position: relative;
width: 6rem;
height: 6rem;
margin: 0.2rem auto;
}
#stackList{
width: 8rem;
height: 1rem;
margin: 1rem auto;
}
#stackList .stackItem{
width: 1rem;
height: 1rem;
float: left;
border: 1px solid silver;
}
.rePlayBtn{
font-size: 0.4rem;
display: none;
}
.A{
background-image: url(https://img0.baidu.com/it/u=2915591120,58539746&fm=253&fmt=auto&app=138&f=JPEG?w=50&h=75);
background-size:cover;
}
.B{background-image: url(https://img2.baidu.com/it/u=1961605168,519023852&fm=253&fmt=auto&app=120&f=JPEG?w=200&h=200);
background-size:cover;}
.C{background-image: url(https://img1.baidu.com/it/u=1558460227,1600052005&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200);
background-size:cover;}
.D{background-image: url(https://img0.baidu.com/it/u=1367134673,2529600782&fm=253&fmt=auto&app=120&f=JPEG?w=200&h=200);
background-size:cover;}
.E{background-image: url(https://img1.baidu.com/it/u=2342405275,30063627&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200);
background-size:cover;}
.J{background-image: url(https://img0.baidu.com/it/u=3372864484,86401414&fm=253&fmt=auto&app=138&f=JPEG?w=160&h=109);
background-size:cover;}
.K{background-image: url(https://img0.baidu.com/it/u=2447232726,212069368&fm=253&fmt=auto?w=200&h=200);
background-size:cover;}
.L{background-image: url(https://img2.baidu.com/it/u=3788646889,2975336153&fm=253&fmt=auto?w=200&h=200);
background-size:cover;}
.M{background-image: url(https://img1.baidu.com/it/u=1035241979,2591366575&fm=253&fmt=auto?w=130&h=170);
background-size:cover;}
.N{background-image: url(https://img0.baidu.com/it/u=1257446861,475247806&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200);
background-size:cover;}
</style>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="http://blog.wangchunjian.top/jquery.fly.js"></script>
<script type="text/javascript">
!function(e,t){function n(){t.body?t.body.style.fontSize=12*o+"px":t.addEventListener("DOMContentLoaded",n)}function d(){var e=i.clientWidth/10;i.style.fontSize=e+"px"}var i=t.documentElement,o=e.devicePixelRatio||1;if(n(),d(),e.addEventListener("resize",d),e.addEventListener("pageshow",function(e){e.persisted&&d()}),o>=2){var a=t.createElement("body"),s=t.createElement("div");s.style.border=".5px solid transparent",a.appendChild(s),i.appendChild(a),1===s.offsetHeight&&i.classList.add("hairlines"),i.removeChild(a)}}(window,document);
</script>
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
<body>
<div id="wrapAllItems">
</div>
<div id="stackList">
<div class="stackItem"></div>
<div class="stackItem"></div>
<div class="stackItem"></div>
<div class="stackItem"></div>
<div class="stackItem"></div>
<div class="stackItem"></div>
<div class="stackItem"></div>
<div class="stackItem"></div>
</div>
<div style="text-align:center;">
<a href="sheep.html" class="rePlayBtn">重新开始</a>
</div>
<script type="text/javascript">
var gameOver = false;
var lockClick = false; // 点击加锁
const maxItemCounts = 8; //下面stack 最多储存个数
const dispelCount = 3; //消除需要相同的数量
const maxZIndex = 1000;
const maxLevel = 6;
const stack = {};
var items = ['A','B','C','D','E',
'J','K','L','M','N'];
var itemsArr = [];
for (var i = 9; i > 0; i--) {
items.forEach((item)=>{
itemsArr.push(item);
})
}
console.log(itemsArr);
function fillTable(x = 6,y= 6) {
let mulitpleArray = [];
for (var i = 0; i < x ; i++) {
for (var j = 0; j < y ; j++) {
let index = Math.floor(Math.random() * itemsArr.length);
let randomItem = itemsArr[index];
itemsArr.splice(index,1);
let zindex = maxZIndex - x;
let diff = 0.5*(maxLevel - x);
let top = 1*(i+6-x) - diff +'rem';
let left = 1*(j+6-x) - diff +'rem';
mulitpleArray.push(`<div x="${i}" y="${j}" l="${x}" char="${randomItem}" id="item-${x}-${i}-${j}" style="top:${top};left:${left};z-index:${zindex}" class="${randomItem} item"></div>`);
}
}
$('#wrapAllItems').append(mulitpleArray.join(""));
}
const Levels = [6,5,4,3];
Levels.forEach((level)=>{
fillTable(level,level);
});
for (var i = itemsArr.length - 1; i >= 0; i--) {
let val = itemsArr[i];
addItemToStack(val);
$(`.stackItem`).eq(i).addClass(val);
}
$('body').on('click','.item',function () {
if(gameOver){
$('.rePlayBtn').show();
alert(`gameOver:${gameOver}`);
return false;
}
// 点击加锁
if(lockClick){
console.log(`lockClick:${lockClick}`);
return false;
}
lockClick = true;
//获取当前stack元素个数
let counts = getStackCounts();
// x,y坐标与层级Level
let x = $(this).attr('x'),
y = $(this).attr('y'),
l = $(this).attr('l');
let val = $(this).attr('char');
console.log(`Level:${l},X:${x},Y:${y}`);
//判断上一层Level 和 可能覆盖该图层的结点是否存在
let nextLevel = l - 1; //上一级level
let canMove = false;
if(!Levels.includes(nextLevel)){
canMove = true;
}else{
//判断可能存在的四个节点 是否存在
let exist = checkFourNodes(nextLevel,x,y);
if(!exist){
canMove = true;
}
}
console.log(`canMove:${canMove}`);
if(canMove){
let from = $(this).offset();
let endEle = $(`.stackItem`).eq(counts);
let end = endEle.offset();
let element = $(this);
console.log(from,end);
$(this).fly({
start: {
left: from.left,//抛物体起点横坐标
top: from.top //抛物体起点纵坐标
},
end: {
left: end.left,//抛物体终点横坐标
top: end.top, //抛物体终点纵坐标
},
onEnd: function() {
endEle.addClass(val);
element.remove();
addItemToStack(val);
lockClick = false;
}
});
}else{
lockClick = false;
}
});
// 添加条目到待消除列表里
function addItemToStack(val){
if(stack.hasOwnProperty(val)){
stack[val] = stack[val] + 1;
}else{
stack[val] = 1;
}
console.log(stack);
//计算消除
if(stack[val] == dispelCount){
stack[val] = 0;
console.log(`消除${val}`);
$(`#stackList .${val}`).remove();
$(`#stackList`).append(`<div class="stackItem"></div>
<div class="stackItem"></div>
<div class="stackItem"></div>`);
}
let counts = getStackCounts();
if(counts == maxItemCounts){
gameOver = true;
$('.rePlayBtn').show();
alert(`gameOver:${gameOver}`);
}
}
function getStackCounts(){
let total = 0;
for (var a in stack) {
total += stack[a];
}
return total;
}
//判断上一层的遮挡图片是否存在,最多四个
function checkFourNodes(l,x,y){
let nodes = [];
if(x<l && y<l){
nodes.push(`item-${l}-${x}-${y}`);
}
if(x-1>=0 && y<l){
nodes.push(`item-${l}-${x-1}-${y}`);
}
if(y-1>=0 && x<l){
nodes.push(`item-${l}-${x}-${y-1}`);
}
if(x-1>=0 && y-1>=0){
nodes.push(`item-${l}-${x-1}-${y-1}`);
}
console.log(nodes);
let exist = false;
//节点 添加红边框
nodes.forEach((item)=>{
if($(`#${item}`).length > 0){
exist = true;
$(`#${item}`).addClass('redBorder');
setTimeout(()=>{
$(`#${item}`).removeClass('redBorder');
},500);
}
});
return exist;
}
</script>
</body>
</html>