羊了个羊Jquery版

最新推荐文章于 2022-10-12 09:07:26 发布
最新推荐文章于 2022-10-12 09:07:26 发布
阅读量325 收藏 2
点赞数
分类专栏： javascript jquery 文章标签： jquery javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/GeRenQuXiang/article/details/127207688
版权

 填充每一层的图片数据

实例化十种图片,每种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>

个人取向
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery.fly.min.js
11-01
jquery.fly.min.js jquery.fly.min.js jquery.fly.min.js jquery.fly.min.js jquery.fly.min.js
羊毛纺织制品响应式网页模板
01-21
JavaScript和jQuery也可能用于实现交互效果和动画。同时，为了提高性能，还会利用延迟加载（Lazy Loading）技术，只在用户滚动到相应位置时才加载图片。 压缩包中的文件列表可能包含以下资源： - **ReadMe.txt**：...
jquery 仿天猫加入购物车
ligaivip的专栏
05-07 966
HTML 首先加载jQuery.js和jquery.fly.min.js插件。  src="jquery.js">    src="jquery.fly.min.js"> 接着，作4个商品进行演示，每个商品中有图片、价格、名称以及加入购物车按钮等信息。  class="demo clearfix">       class="per">        src="images/1.jpg" 
jquery.fly.min.js 拋物插件
u011927449的博客
07-28 442
插件官方:https://github.com/amibug/fly, 官方例子:http://codepen.io/hzxs1990225/full/ogLaVp 首先加载jQuery.js和jquery.fly.min.js插件。 <script src="jquery.js"></script> <script src="jquery.fly.min.js"></script>接着，作4个商品进行演示，每个商品中有图片、价格、名称以及加入...
使用jquery.fly插件实现添加购物车抛物动画
cheng1a的博客
08-31 669
这里引用一个插件：jquery.fly.min.jsGit源码地址：https://github.com/amibug/flyDemo演示地址：https://codepen.io/hzxs1990225/full/ogLaVpAPI使用： HTML演示代码： 演示页面如下： 这里配合获取鼠标指针位置的属性一起使用，如果有不明白的可以参考：获取鼠标位置坐标 最终演示效果如下：.........
jquery.fly.js实现添加购物车效果、实现抛物线运动
Cool的博客
10-10 1808
一、JQuery.fly.js整理 1.Git源代码地址： https://github.com/amibug/fly 2.Demo演示地址：http://codepen.io/hzxs1990225/full/ogLaVp 3.Api使用：   [html] view plain copy &lt;script src="jquery.js"&gt;&lt;/script&gt; ...
HTML5绵羊奔跑动画特效特效代码
03-20
在这个动画特效中，`<canvas>`可能被用来描绘绵羊和背景的各个细节，包括绵羊的奔跑动作和吃草的动作。 CSS3是CSS的最新版本，带来了许多增强视觉效果的新特性。在这个绵羊动画中，CSS3可能被用于定义绵羊的样式，...
OBLOG 白羊座
11-28
库和框架如jQuery、React、Vue等简化了JavaScript开发，提供了更高效的解决方案。 4. 响应式设计：现代网页必须适应不同屏幕大小的设备，因此响应式设计是必不可少的。通过媒体查询、百分比单位和流式布局，可以...
从腾讯课堂里面学习的基于jquery实现狼吃羊小游戏
04-13
在本项目中，我们主要探讨的是如何利用jQuery这个强大的JavaScript库来开发一款狼吃羊的趣味小游戏。jQuery是一个高效、简洁且易用的JavaScript库，它简化了HTML文档遍历、事件处理、动画设计和Ajax交互等任务。在这...
山羊
02-18
5. **框架与库**：JavaScript社区有许多流行框架和库，如React、Angular、Vue.js用于构建复杂的前端应用，jQuery简化了DOM操作和事件处理，而Node.js则让JavaScript可以运行在服务器端。 6. **ES6及后续版本**：...
javascript实现《羊了个羊》的小游戏
09-21
javascript实现《羊了个羊》的小游戏
jquery.fly.min.js兼容IE10以下版本插件
12-11
jquery.fly.min.js 运行时，IE10以下版本不兼容，引入这个封装好的API，就能做到完美兼容。
jquery-1.12.2.min.js
03-30
jquery-1.12.2.min.js
基于jquery fly插件实现加入购物车抛物线动画效果
10-22
在购物网站中，加入购物车的功能是必须的功能，有的网站在用户点击加入购物车按钮时，就会出现该商品从点击出以抛物线的动画相似加入购物车，这个功能看起来非常炫，对用户体验也有一定的提高。下面介绍基于jquery fly插件实现加入购物车抛物线动画效果
效果最接近《羊了个羊》（卡牌堆叠游戏）的开源代码
一起加油
10-11 6727
我写的程序是指 卡牌堆叠游戏 ，效果与羊了个羊一致。本文使用 ``C++`` + ``PHP`` + ``H5`` + ``CSS`` + ``JS`` + ``MySql`` 实现。其他语言实现方法类似。我都会耐心讲解，篇幅较长，请看官们做好心理准备。
10分钟撸个 “羊了个羊” 出来
qq_39235055的博客
10-12 2201
实现一个简易版本的“羊了个羊” html 版本（过不了关的我直接自己做一个😁） 不想搞太复杂 直接html一把梭
简易版羊了个羊JS
QuKinX
09-20 1260
简易版，通过Jquery来进行操作，js部分总共有两百行吧相对来说较为简单，比较易懂，没写那么多样式，欢迎补充
JAVASCRIPT(7)
m0_65474726的博客
09-26 313
大
前端用JQuery如何实现羊了个羊
最新发布
04-28
可以通过以下代码实现： HTML： ``` <div id="sheep"></div> <button id="addSheepBtn">羊了个羊</button> ``` JavaScript： ``` $(document).ready(function() { $("#addSheepBtn").click(function() { $("#sheep").append("<span>羊</span>"); }); }); ``` 当点击“羊了个羊”按钮时，会在 `#sheep` 元素中添加一个新的 `span` 元素，内容为“羊”。每次点击按钮，都会继续在 `#sheep` 元素中添加一个“羊”字。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值