羊了个羊Jquery版

最新推荐文章于 2022-11-11 15:38:05 发布
最新推荐文章于 2022-11-11 15:38:05 发布
阅读量400 收藏 2
点赞数
CC 4.0 BY-SA版权
分类专栏： 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>

javascript实现《羊了个羊》的小游戏
09-21
javascript实现《羊了个羊》的小游戏
羊了个羊小游戏
电脑高级开关机工程师的博客
09-15 6321
自制 "羊了个羊"、"王了个王"小游戏，微信小游戏
简易版羊了个羊JS
QuKinX
09-20 1333
简易版，通过Jquery来进行操作，js部分总共有两百行吧相对来说较为简单，比较易懂，没写那么多样式，欢迎补充
羊了个羊游戏前端原生js实现
weixin_64260174的博客
11-11 1514
纯前端和原生js简单实现羊了个羊小游戏 从生成地图到覆盖关系到最后消除 感兴趣的小伙伴可以看一下
一夜爆火的《羊了个羊》，开发竟这么简单！
腾讯云云开发布道师，慕课网合作讲师
09-16 4134
这个开发之前一定要了解清楚，很多类目是不允许个人小程序去发布的，只能通过企业小程序来发布，并且都需要相应的资质。先注册一个服务号，先认证这个服务号，然后再通过服务号去创建小程序，小程序就可以不用认证了。服务器是必须的，用来存放数据库和后端代码。如果小程序想要公开给别人使用，是需要准备域名和服务器的，这些都需要花钱，服务器学生买都会有优惠。《羊了个羊》的爆火，除了玩法很有传播点之外，跟小程序易登录，方便传播的特质也是分不开的。个人版小程序是不需要认证的，企业版小程序大部分是需要认证的，认证费用300元/年。
从腾讯课堂里面学习的基于jquery实现狼吃羊小游戏
04-13
在本项目中，我们主要探讨的是如何利用jQuery这个强大的JavaScript库来开发一款狼吃羊的趣味小游戏。jQuery是一个高效、简洁且易用的JavaScript库，它简化了HTML文档遍历、事件处理、动画设计和Ajax交互等任务。在这...
前端用JQuery如何实现羊了个羊
04-28
羊了个羊 ``` JavaScript： ``` $(document).ready(function() { $("#addSheepBtn").click(function() { $("#sheep").append("羊</span>"); }); }); ``` 当点击“羊了个羊”按钮时，会在 `#sheep` 元素中添加...
腾讯课堂教你用jquery打造狼吃羊小游戏
例如，“狼吃羊”这个名称可能是游戏的主要HTML文件，里面会包含游戏的HTML结构，以及引用jQuery和游戏逻辑处理的JavaScript文件。 - 游戏的资源文件，如图片素材、声音文件等，也会根据文件结构分布于不同的目录中...
山羊
02-18
5. **框架与库**：JavaScript社区有许多流行框架和库，如React、Angular、Vue.js用于构建复杂的前端应用，jQuery简化了DOM操作和事件处理，而Node.js则让JavaScript可以运行在服务器端。 6. **ES6及后续版本**：...
HTML5绵羊奔跑动画特效特效代码
03-20
在这个动画特效中，`<canvas>`可能被用来描绘绵羊和背景的各个细节，包括绵羊的奔跑动作和吃草的动作。 CSS3是CSS的最新版本，带来了许多增强视觉效果的新特性。在这个绵羊动画中，CSS3可能被用于定义绵羊的样式，...
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
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.min.js，很好用的基础插件
10-09
jquery.min.js插件，实际运用项目中还是很好用。分享出来大家一起共享，如果大家觉得不错，希望能给个好评。
jQuery标签插件flyLabel.js
07-02
flyLabel.js是一种灵活的浮动标签占位符。flyLabel.js很容易自定义表单标签上的行为。浏览器要求ie9以上版本,演示地址:http://www.jq22.com/jquery-info492
网页版羊了个羊 Vue3 实现
News777的博客
09-27 2178
Vue 实现了网页版 羊了个羊
羊了个羊游戏网站源码_带前后端源码，带教程
网站开发专家
09-20 4816
据悉，这是一款卡通背景的消除闯关游戏。玩家们需要点击上方卡牌，被选中的卡牌会下移到底部的木框中，框内最多可以储存7张卡牌，当有3张相同的卡牌同置于框内时，则可达成消除。, 账户18127950266 ，密码qq2360248666。羊了个羊游戏源码_带前后端源码_及配置教程说明。​ 程序开源：java+html+js。
羊了个羊, 低配版开源代码来啦~
私欲日生，如地上尘，一日不扫，便又有一层。着实用功，便见道无终穷，愈探愈深，必使精白无一毫不彻方可。
09-17 9623
前几天朋友圈突然被一个小游戏 “羊了个羊” 刷屏了，出于好奇我也打算小玩一把试试，结果没想到上头了。。。 游戏的玩法非常简单，类似 “消消乐”，从一堆方块中找到相同图案的 3 个方块并消除即可。
10分钟撸个 “羊了个羊” 出来
qq_39235055的博客
10-12 2472
实现一个简易版本的“羊了个羊” html 版本（过不了关的我直接自己做一个😁） 不想搞太复杂 直接html一把梭
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值