复刻一个羊了个羊掘金商城版

游戏逻辑

与羊了个羊逻辑一致，不再赘述

游戏实现

盛放元素的容器box，临时存储的容器temp，多余元素的容器source与source1，结果元素result

<div id="box"></div><div id="temp"></div><div id="source"></div><div id="source1"></div><div class="result"><div>游戏结束，别灰心，你能行的！</div><div class="restart">重新开始</div></div>

样式基于定位和flex布局

<style>* {margin: 0;padding: 0;list-style: none;box-sizing: border-box;}html,body {width: 100%;height: 100%;overflow: auto;background-image: url('https://pic.qy566.com/snake/bg.jpeg');background-size: cover;}#box{width: 600px;height: 600px;position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;}#temp{width: 840px;height: 120px;position: absolute;left: 0;right: 0;margin: auto;bottom: 0;background-image: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.92sucai.com%2Fimage%2F20180626%2F1529979993472449.jpg&refer=http%3A%2F%2Fup.92sucai.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1665795593&t=0c74935a1fa75d5861903e8249c15bbb');background-size: contain;border-radius: 16px;display: flex;}.item{width: 120px;height: 120px;border-radius: 16px;background-size: contain;background-position: center;background-repeat: no-repeat;border: 1px solid #333;cursor: pointer;}.shadow{box-shadow: 0 0 50px 10px #333 inset;}#source{width: 260px;height: 120px;position: absolute;top: 0;left: 0;}#source1{width: 260px;height: 120px;position: absolute;top: 0;right: 0;}.result{width: 200px;height: 120px;border: 4px dashed cyan;position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;background-color: #fff;padding: 10px;display: flex;flex-direction: column;justify-content: space-around;align-items: center;display: none;}.restart{width: 120px;height: 40px;line-height: 40px;border: 1px solid #333;text-align: center;cursor: pointer;margin: auto;}
</style>

生成元素的逻辑

首先会有一个维护好的图片的数组imgSrc

生成12*14的随机乱序待消除元素

// 随机乱序
function randomArr (array) {const arr = [].concat(array)for (let i = arr.length - 1; i >= 0; i--) {const inx = Math.floor(Math.random() * i + 1)const next = arr[inx]arr[inx] = arr[i]arr[i] = next}return arr
}
// 生成 12*14个待消除元素
for (let i =0;i<12;i++) {imgSrc.map((v,m)=>{console.log(m)source.push({src: v, inx: m})})}

分为5层，进行排列，其中层数从5至0递减，然后内部双层循环进行5*层数递减页面布局，元素依次由source.slice(0)来得到，维护图片索引 inx

 for(let k =5;k>0;k--) {for (let i=0;i<5;i++) {for (let j=0;j<k;j++) {let div = $('<div>')div.addClass('item')div.addClass(`${i}-${j}-${k}`)div.attr('x', i)  div.attr('y', j)  div.attr('z', k)  div.css('position', 'absolute')let img = source.splice(0,1)div.css('left', 120*j-Math.random()*10*k+'px')div.css('top', 120*i-Math.random()*10*k+'px')div.attr('inx', img[0].inx)div.css('backgroundImage', `url(${img[0].src})`)....}}}

判断是否被覆盖，被覆盖时添加shadow类

$('.item').each((i,v) => {let x = $(v).attr('x')let y = $(v).attr('y')let z = $(v).attr('z')let ele = $(`.${x}-${y}-${z-1}`)let ele1 = $(`.${x+1}-${y+1}-${z-1}`)if (ele.length || ele1.length) {$(v).addClass('shadow')}})

添加点击事件，通过detach方式向temp中转移
判断是否包含shadow类
判断是否存在，维护temp对象
删除后更新shadow覆盖状态
判断是否大于7触发结束条件

div.click(function () {if(!$(this).hasClass('shadow')) {if (temp[$(this).attr('inx')]) {temp[$(this).attr('inx')] += 1} else {temp[$(this).attr('inx')] = 1}let e = $(this).detach()e.css('position', 'unset')$('#temp').append(e)$('.item').each((i,v) => {$(v).removeClass('shadow')let x = $(v).attr('x')let y = $(v).attr('y')let z = $(v).attr('z')let ele = $(`.${x}-${y}-${z-1}`)let ele1 = $(`.${x+1}-${y+1}-${z-1}`)if (ele.length || ele1.length) {$(v).addClass('shadow')}})if (temp[$(this).attr('inx')]===3) {$(`#temp div[inx=${$(this).attr('inx')}]`).remove()temp[$(this).attr('inx')] = 0}let num = 0for (let i in temp) {num+=temp[i]}if (num>=7) {$('.item').off('click')$('.result').fadeIn()}}})

将剩余的待消除元素均分至source和source1

 let len = Math.ceil(source.length /2)source.forEach((v,i) => {let div = $('<div>')div.addClass('item')div.attr('inx', v.inx)div.css('backgroundImage', `url(${v.src})`)div.css('position', 'absolute')div.css('top', 0)if (i>len) {div.css('right', `${5*(i-len)}px`)$('#source1').append(div)} else {div.css('left', `${5*i}px`)$('#source').append(div)}...

同样添加点击事件处理
初始化处理清空容器的相关逻辑

 $('#box').empty()$('#temp').empty()$('#source').empty()$('#source1').empty()$('.result').fadeOut()

复刻一个羊了个羊掘金商城版相关推荐

[SFML]使用SFML复刻一个九宫幻卡小游戏（一）前期规划和准备工作
写在前面: 是笔者大二下的课内作业,要求是使用SFML制作棋牌类游戏.本人水平较差,复刻开发过程中存在大量走弯路.走邪门.代码冗余等情况.写此博客记录已经是一年以后的复盘了,仅作为个人学习的记录. ...
[SFML]使用SFML复刻一个九宫幻卡小游戏（二）项目创建和SFML的配置
目录一.项目创建二.SFML的配置 1.下载 2.安装配置 1.解压 2.打开项目属性设置 3.设置项目属性 a.配置include目录 b.配置lib目录 c.指定要添加到链接命令行的附加项 4 ...
基于jquery复刻一个月饼版地狱死神小游戏
先放出游戏截图馋一下你们滚动的月饼,跳跃的死神,尽全力跳起,又在重力的作用下回落...这不正是人生奋斗的写照吗?只是, 盛年不重来,一日难再晨. 珍惜奋斗拼搏的时光,珍惜陪在你身边的亲人,兄弟,爱人 ...
Flutter 复刻一个逼真的笑嘻嘻表情
前言身在孤岛有很多无奈,比如说程序员属于比较偏门的职业.尤其是早些年,在行业里跳过几次槽后,可能你就已经认识整个圈子的人了
程序员用12小时复刻《羊了个羊》，代码已开源！
[CSDN 编者按]过去一周,不少人被<羊了个羊>这款游戏虐的不轻,有多少个"再玩一把"的念头,就有多少次被打入深渊的凄凉,甚至还有人评价道:"什么事都可以过 ...
137_Power BI 自定义矩阵复刻Beyondsoft Calendar
博客:www.jiaopengzi.com 焦棚子的文章目录请点击下载附件一.背景前两天我们用PBI原生的视觉制作了自定义的热力图,今天我们来复刻一个Beyondsoft Calendar 1. ...
10年代码经验程序员UP主复刻“阴间”超级马里奥，获赞27万，马里奥：我头呢？
本文转载自大数据文摘 <超级马里奥兄弟>是很多人童年的回忆,对B站up主"M木糖M"来说也不例外. 为了纪念自己的童年,我们这位代码经验丰富的up主决定自己动手复刻一 ...
PyQt5 + QtDesigner 复刻 Windows 计算器 (一)
目的尝试用 PyQt5 以及 QtDesigner 复刻一个 Windows 计算器,加强对 PyQt5 的学习与理解. 目标尽可能还原 Win11 自带计算器,计划实现 <standard ...
Meta复刻GPT-3“背刺”OpenAI，千亿参数大模型权重及训练代码全公布，中文开发者可用吗？
Meta (原Facebook)开放了一个"高达"1750亿参数的预训练大语言模型OPT-175B,不仅参数比GPT-3的3750亿更少,效果还完全不输GPT-3-- 之前GPT- ...

复刻一个羊了个羊掘金商城版

游戏逻辑

游戏实现

生成元素的逻辑

复刻一个羊了个羊掘金商城版相关推荐

最新文章

热门文章