vue3版本网页小游戏_vue写个小游戏

最新推荐文章于 2024-07-06 16:47:02 发布
最新推荐文章于 2024-07-06 16:47:02 发布
阅读量642 收藏 9
点赞数 10
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_85124858/article/details/139581714
版权 
              <StarFilled :color="colors[0]" />
            </el-icon>
            <el-icon class="fz" v-if="oneiSub === 1">
              <Aim :color="colors[1]" />
            </el-icon>
            <el-icon class="fz" v-if="oneiSub === 2">
              <Grid :color="colors[2]" />
            </el-icon>
            <el-icon class="fz" v-if="oneiSub === 3">
              <HelpFilled :color="colors[3]" />
            </el-icon>
            <el-icon class="fz" v-if="oneiSub === 4">
              <Star :color="colors[4]" />
            </el-icon>
            <el-icon class="fz" v-if="oneiSub === 5">
              <Menu :color="colors[5]" />
            </el-icon>
            <el-icon class="fz" v-if="oneiSub === 6">
              <Camera :color="colors[6]" />
            </el-icon>
            <el-icon class="fz" v-if="oneiSub === 7">
              <Bicycle :color="colors[7]" />
            </el-icon>
            <el-icon class="fz" v-if="oneiSub === 8">
              <IceTea :color="colors[8]" />
            </el-icon>
            <el-icon class="fz" v-if="oneiSub === 9">
              <ColdDrink :color="colors[9]" />
            </el-icon>
            <el-icon class="fz" v-if="oneiSub === 10">
              <CoffeeCup :color="colors[10]" />
            </el-icon>
          </div>
        </div>
      </el-col>
    </el-row>
  </template>
</div>

<div class="sheep-footer flex-center">
  <div v-for="(ii, k) in footerList" :key="'ii' + k" class="sheep-footer-items">
    <el-icon class="fz" v-if="ii === 0">
      <StarFilled :color="colors[0]" />
    </el-icon>
    <el-icon class="fz" v-if="ii === 1">
      <Aim :color="colors[1]" />
    </el-icon>
    <el-icon class="fz" v-if="ii === 2">
      <Grid :color="colors[2]" />
    </el-icon>
    <el-icon class="fz" v-if="ii === 3">
      <HelpFilled :color="colors[3]" />
    </el-icon>
    <el-icon class="fz" v-if="ii === 4">
      <Star :color="colors[4]" />
    </el-icon>
    <el-icon class="fz" v-if="ii === 5">
      <Menu :color="colors[5]" />
    </el-icon>
    <el-icon class="fz" v-if="ii === 6">
      <Camera :color="colors[6]" />
    </el-icon>
    <el-icon class="fz" v-if="ii === 7">
      <Bicycle :color="colors[7]" />
    </el-icon>
    <el-icon class="fz" v-if="ii === 8">
      <IceTea :color="colors[8]" />
    </el-icon>
    <el-icon class="fz" v-if="ii === 9">
      <ColdDrink :color="colors[9]" />
    </el-icon>
    <el-icon class="fz" v-if="ii === 10">
      <CoffeeCup :color="colors[10]" />
    </el-icon>
    <div class="boom-class" v-if="ii === 'boom'">💥</div>
  </div>
</div>

.el-row {
// margin-top: 3rem;
height: 28%;
}

.fz {
font-size: 3rem;
border: 1px solid #dfe5f9;
// box-shadow: 2px 2px 10px #f3f6fe;

background: #f3f6fe;
border-radius: 5px;
}

.pic-list {
position: relative;
width: 100%;
height: 100%;

&-item {
position: absolute;
left: 10vw;
cursor: pointer;
transition: all 0.3s;

&:nth-child(1n) {
  top: calc(var(--i) * 1.5rem);
}

&.true {
  box-shadow: 0 -55px 0 0 #dfe5f9 inset;
}

// &:nth-child(even) {
//   top: 2rem;
// }

}
}

.sheep-main {
flex: 1;

&-wrap {
height: calc(100% - 80px);
}
}

.sheep-footer {
height: 80px;
width: 100%;
// border: 2px solid #298df9;
border: 2px solid #778899;
background: #010206;

.sheep-footer-items {
height: 80px;
width: calc(100% / 7);
margin-left: 8px;
display: flex;
align-items: center;
justify-content: center;

.boom-class {
  font-size: 3rem;
  animation: myMove 3s ease-in-out infinite;
}

@keyframes myMove {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

// border-right: 1px solid #dfe5f9;

}
}


## 3.核心逻辑分步骤详解



> 
> import { ref, type Ref } from "vue";
> 
> 
> import { ElMessage, ElMessageBox } from "element-plus";
> 
> 
> import { useSheepStore } from "@/stores/sheep";
> 
> 
> // 关卡数据
> 
> 
> import data from "./data.json";
> 
> 
> // 颜色
> 
> 
> import constants from "./constants";
> 
> 
> // pinia 控制关卡
> 
> 
> const store = useSheepStore();
> 
> 
> 


首先引入data.json数据是渲染中间的页面内容，即是：


![](https://img-blog.csdnimg.cn/cac29ea1764545a09200c0b322076923.png)


中间的就叫卡片区域吧，卡片分为半个遮挡和整个遮挡，在data数据里面配置：



> 
> "full": true
> 
> 
> 


 默认是半个遮挡，配置了"full": true就表示这块的卡片是全遮挡的效果：



> 
> :style="!onei.full ? `--i:${onekSub}` : `--i:0`"
> 
> 
> :class="onei.full && onei.oneSub.length > 1 ? 'true' : ''" :key="'i' + onekSub"
> 
> 
> 


css: 使用了var的变量形式，来控制是否需要top下移，&.true来控制是否有下一级的卡片的样式



> 
> &:nth-child(1n) {
> 
> 
> top: calc(var(--i) \* 1.5rem);
> 
> 
> }
> 
> 
> 
> &.true {
> 
> 
>         box-shadow: 0 -55px 0 0 #dfe5f9 inset;
> 
> 
> }
> 
> 
> 


data.json里面的数据oneSub的选值范围是：0-10


这和dom渲染层的息息相关：卡片使用的是简单的icon也可以是其他类型的元素，你觉得好看即可。




            <el-icon class="fz" v-if="oneiSub === 0">
              <StarFilled :color="colors[0]" />
            </el-icon>
            <el-icon class="fz" v-if="oneiSub === 1">
              <Aim :color="colors[1]" />
            </el-icon>
            <el-icon class="fz" v-if="oneiSub === 2">
              <Grid :color="colors[2]" />
            </el-icon>
            <el-icon class="fz" v-if="oneiSub === 3">
              <HelpFilled :color="colors[3]" />
            </el-icon>
            <el-icon class="fz" v-if="oneiSub === 4">
              <Star :color="colors[4]" />
            </el-icon>
            <el-icon class="fz" v-if="oneiSub === 5">
              <Menu :color="colors[5]" />
            </el-icon>
            <el-icon class="fz" v-if="oneiSub === 6">
              <Camera :color="colors[6]" />
            </el-icon>
            <el-icon class="fz" v-if="oneiSub === 7">
              <Bicycle :color="colors[7]" />
            </el-icon>
            <el-icon class="fz" v-if="oneiSub === 8">
              <IceTea :color="colors[8]" />
            </el-icon>
            <el-icon class="fz" v-if="oneiSub === 9">
              <ColdDrink :color="colors[9]" />
            </el-icon>
            <el-icon class="fz" v-if="oneiSub === 10">
              <CoffeeCup :color="colors[10]" />
            </el-icon>


这里只提供11中卡片的效果，可以扩展添加，需要修改代码。


接下来是：



> 
> // 七个槽位
> 
> 
> // const footerList = ref([0, 1, 2, 3, 4, 5, 6]);
> 
> 
> const footerList: Ref<Array<any> | [any]> = ref([]);
> 
> 
> 
> const colors = ref(constants.colors);
> 
> 
> 
> // 关卡响应式
> 
> 
> const totalList: Ref<Array<any> | [any]> = ref([]);
> 
> 
> totalList.value = data["list1"]; // 默认第一关
> 
> 
> 
> // 控制动画效果结束才能点击
> 
> 
> const isNotClick = ref(false);
> 
> 
> 
> 


7个槽位在底部需要变化展示，做成响应式。totalList是动态变化的卡片数据集。totalList.value = data["list1"] ，默认第一关。爆炸💥的电话效果有延迟，需要控制在结束之后才能进行卡片的点击。


然后就是核心的卡片点击事件，需要做哪些逻辑控制呢？先看源代码，已经提前做了备注：

// 点击控制事件
function handleClick(
i: number,
k: number,
onei: { oneSub: string | Array },
onek: number,
oneiSub: Array,
onekSub: number
) {
console.log(i, k, onei, onek, oneiSub, onekSub, “测试”);
if (isNotClick.value) {
return false;
}
// 内层不能点击
if (onekSub !== onei.oneSub.length - 1) {
return false;
}

// 前置点击如果槽位满了还没有消除完
fullFun()

// 关卡的消除
let tempList = fixFun(k, onekSub, onek, oneiSub)

// 消除动作 和 添加爆炸效果
if (footerList.value.length > 2) {
isNotClick.value = true
const { list, flag } = eliminationFunction(footerList.value)
footerList.value = list;
if (flag) {
footerList.value = addBoomFunction(footerList.value);
}
setTimeout(() => {
const { list, flag } = eliminationFunction(footerList.value)
footerList.value = list;
isNotClick.value = false
}, 1000);

// 进入下一关
nextFun(tempList)

}
// 挑战失败
failFun(tempList)

console.log(footerList, tempList, “tempList”);
}


首先是函数的签名，接受最上层级的i对象，k索引，然后是中层的onei对象，onek索引，最后是父级的oneiSub对象，onekSub索引。判断条件需要前置，判断能否点击isNotClick，内层不能点击



> 
> if (isNotClick.value) {
> 
> 
>         return false;
> 
> 
> }
> 
> 
> 


// 前置点击如果槽位满了还没有消除完


fullFun()函数判断如果槽位满了还没有消除完，就是挑战失败

function fullFun() {
if (footerList.value.length === 7) {
ElMessage.closeAll();

ElMessageBox.alert("挑战失败，点击确定返回！", "Warning", {
  confirmButtonText: "确定",
  type: "warning",
  showClose: false,
}).then(() => {
  location.reload();
});
return false;

}
}


如何添加爆炸💥效果：


思路是在三个相同消除之后添加，添加在totalList数据之中 ,效果展示完成之后立即进行totalList数据重置操作。

// 关卡的消除
let tempList = fixFun(k, onekSub, onek, oneiSub)

// 消除动作 和 添加爆炸效果
if (footerList.value.length > 2) {
isNotClick.value = true
const { list, flag } = eliminationFunction(footerList.value)
footerList.value = list;
if (flag) {
footerList.value = addBoomFunction(footerList.value);
}
setTimeout(() => {
const { list, flag } = eliminationFunction(footerList.value)
footerList.value = list;
isNotClick.value = false
}, 1000);

// 进入下一关
nextFun(tempList)

}


css 添加的方法：




.boom-class {
  font-size: 3rem;
  animation: myMove 3s ease-in-out infinite;
}

@keyframes myMove {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}


消除函数eliminationFunction逻辑的控制，flag用来进行是否成功消除：

// 消除函数
function eliminationFunction(list: any[]) {
let flag: boolean = false;
for (let k = 0; k < list.length - 2; k++) {
const temp = list;
const arr = temp.slice(k, k + 3);
console.log(k, arr);
if (arr[0] === arr[1] && arr[1] === arr[2] && arr[0] === arr[2]) {
list.splice(k + 2);
list.splice(k + 1);
list.splice(k, 1);
flag = true
break;
}
}

return { list, flag };
}


添加addBoomFunction爆炸函数：

// 实现爆炸💥效果
function addBoomFunction(list: any[]) {
const temp = JSON.parse(JSON.stringify([…list, …[‘boom’, ‘boom’, ‘boom’]]))
return temp;
}


挑战失败如何判断呢？

//fail
function failFun(tempList: any[]) {
setTimeout(() => {
if (footerList.value.length > 0 && !jugeList(tempList)) {
ElMessage.closeAll();

  ElMessageBox.alert("挑战失败，点击确定返回！", "Warning", {
    confirmButtonText: "确定",
    type: "warning",
    showClose: false,
  }).then(() => {
    location.reload();
  });
  return false;
}

}, 1002)
}


jugeList函数是对目前存在的卡片集合进行长度判断，如何卡片不存在，但是槽位的数据不为空的情况下，说明没有消除完，就判断要重新开始挑战： 

// 判断是否过关
function jugeList(list: any[]) {
let temp: any = [];
list?.forEach((oeni: { one: any }) => {
oeni?.one?.forEach((sub: { oneSub: any }) => {
temp = […temp, …sub.oneSub];
});
});
return temp.length;
}


最后是挑战成功就可以进行下一关：

// next
function nextFun(tempList: any[]) {
setTimeout(() => {
if (!footerList.value.length && !jugeList(tempList)) {
// debugger
ElMessage.closeAll();
ElMessage.success(“恭喜您，挑战成功！进入下一关”);
store.step++;
const inStep: string = “list” + (store.step + 1);
totalList.value = JSON.parse(JSON.stringify(data))[inStep];
footerList.value = [];
}
}, 1001)
}


如何卡片不存在，但是槽位的数据为空的情况下，说明消除完了，就可以进入下一关进行挑战，难度也将升级！


## 4.总结


最近是由于玩了羊了个羊的小程序，有所感悟，思考了这个游戏的整体的玩法，如何去操作，然后想到了可以实现一个前端网页版本的羊了个羊，这里面有一些自己的设计思考是很重要的，花了一个星期左右来实现，中间遇到了如何消除，如何控制挑战失败，成功的问题，并且一一解决了，可以想到如果前端来做这个游戏怎么在最优的方案上，书写可以扩展的dom，来适配很多不同的关卡的元素或者是我们需要什么样的数据结构，方便后续的关卡的升级。这里解决的方案是配合json，数据是数组嵌套类型，元素是需要循环来调用的，什么类型的卡片是需要提前有个范围的，这样是可扩展的。最后的操作，或者撤销，恢复等操作（这里没有实现）本质上也是对于数据的操作。终而言之：数据驱动页面，才是我们追求的。最后，各位同学一起多思考一下背后的实现，让我们用技术来创作更多有趣的事情吧~❤️  
  



> 
> 个人主页：[KinHKin(五年前端)的博客\_CSDN博客-vue,css,中秋活动领域博主]( )的博客_CSDN博客-vue,css,中秋活动领域博主")
> 
> 
> 在线演示：[KinHKin]( )
> 
> 


### HTTP

* HTTP 报文结构是怎样的？

* HTTP有哪些请求方法？

* GET 和 POST 有什么区别？

* 如何理解 URI？

* 如何理解 HTTP 状态码？

* 简要概括一下 HTTP 的特点？HTTP 有哪些缺点？

* 对 Accept 系列字段了解多少？

* 对于定长和不定长的数据，HTTP 是怎么传输的？

* HTTP 如何处理大文件的传输？

* HTTP 中如何处理表单数据的提交？

* HTTP1.1 如何解决 HTTP 的队头阻塞问题？

* 对 Cookie 了解多少？

* 如何理解 HTTP 代理？

* 如何理解 HTTP 缓存及缓存代理？

* 为什么产生代理缓存？

* 源服务器的缓存控制

* 客户端的缓存控制

* 什么是跨域？浏览器如何拦截响应？如何解决？  



![](https://img-blog.csdnimg.cn/img_convert/3a28cc7b978db5d78ce5f1c5ec78122b.png)
2401_85124858
关注
  • 10
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue3版本网页小游戏_vue写个小游戏，让人茅塞顿开
2401_84182097的博客
04-17 1025
第{{ store.step + 1 }}关羊了个羊🐑vue3版本
贪吃蛇2.0_html_vue贪吃蛇_vue项目贪吃蛇_贪吃蛇_vue小游戏demo_
09-29
这是一个用vue写的贪吃蛇小游戏，用于学习
vue3——pixi初学，编写一个简单的小游戏,复制粘贴可用学习
Wancc123的博客
09-19 1186
两个文件夹 一个index.html 一个data.js。
用 vue3 + phaser 实现经典小游戏：飞机大战
SOHU_TECH的博客
05-22 481
本文字数：7539字预计阅读时间：30分钟01前言说起小游戏，最经典的莫过于飞机大战了，相信很多同学都玩过。今天我们也来试试开发个有趣的小游戏吧！我们将从零开始，看看怎样一步步实现一个H5版的飞机大战！首先我们定好目标，要做一个怎样的飞机大战，以及去哪整游戏素材？刚好微信小程序官方提供了一个飞机大战小游戏的模板，打开【微信开发者工具】，选择【新建项目】-【小游戏】，选择飞机大战的模板，创建后就是一...
最新vue3版本网页小游戏_vue写个小游戏，应聘高级前端工程师历程感言
2401_84433924的博客
05-09 374
整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》// 控制动画效果结束才能点击// 点击控制事件i: number,k: number,) {
vue3版本网页小游戏
热门推荐
weixin_42974827的博客
09-29 1万+
最近是由于玩了羊了个羊的小程序，有所感悟，思考了这个游戏的整体的玩法，如何去操作，然后想到了可以实现一个前端网页版本的羊了个羊，这里面有一些自己的设计思考是很重要的，花了一个星期左右来实现，中间遇到了如何消除，如何控制挑战失败，成功的问题，并且一一解决了，可以想到如果前端来做这个游戏怎么在最优的方案上
使用vue写一个转盘抽奖小游戏
weixin_35755640的博客
12-20 544
好的，下面是在 Vue 中编写转盘抽奖小游戏的一些建议步骤: 创建一个 Vue 应用，并在其中创建一个组件来表示转盘。 在组件的模板中，使用 HTML 元素 (例如 div) 和 CSS 样式创建转盘的外观。 使用 Vue 实例中的数据来表示转盘上奖品的信息 (例如奖品名称、图片等)。 在组件的计算属性中计算出转盘上每个奖品所对应的角度。 为转盘添加交互，使用 Vue 中的方法来控制转盘...
阿望教你用vue写扫雷小游戏
10-15
通过本教程，你将学习到如何利用Vue的基本原理和特性实现一个功能完备的扫雷小游戏。 ### 游戏规则 扫雷游戏的规则如下： 1. 开始游戏时，玩家选择难度，不同的难度对应不同的雷区大小和雷的数量。 2. 点击格子，...
期末大作业基于VUE的连连看小游戏源码.zip
06-21
期末大作业基于VUE的连连看小游戏源码，内附安装教程。 期末大作业基于VUE的连连看小游戏源码，内附安装教程。期末大作业基于VUE的连连看小游戏源码，内附安装教程。期末大作业基于VUE的连连看小游戏源码，内附安装...
vue实现2048小游戏功能思路详解
08-27
主要介绍了vue实现2048小游戏功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2048Vue写的2048小游戏可打包成app
06-11
标题中的“2048Vue写的2048小游戏可打包成app”表明这是一个使用Vue.js框架开发的2048游戏项目，可以被编译和打包为移动应用程序。Vue.js是一个轻量级的前端JavaScript框架，以其易学易用、组件化开发和高性能著称。...
Vue3+Element-plus的表单重置
weixin_49352307的博客
07-04 219
1.创建表单,绑定表单数据对象model,并且每一表单需要绑定prop。作用:简化代码,重置表单数据。
【vueUse库Component模块各函数简介及使用方法--上篇】
xiejunlan的博客
07-02 1303
vueUseComponent函数理解 `computedInject` 的概念模拟 `computedInject`使用场景总结构想`createReusableTemplate`的用途可能的实现方式方法一：使用高阶组件（HOC）方法二：使用插槽（Slots）和默认插槽内容结论构想`createTemplatePromise`的用途可能的实现方式使用Vue 3的异步组件构想中的`createTemplatePromise`结论使用Vue的`ref`属性在模板中引用元素或组件示例：引用模板中的DOM元素。
Vue前端打包
weixin_63680330的博客
07-04 200
介绍:Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器。其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的使用。启动：双击nginx.exe 文件启动，服务器默认占用80端口。官网:https://nginx.org/打包好的dist目录赋值到html下。html静态资源文件目录。conf 配置文件目录。logs日志文件目录。temp临时文件目录。
新建Vue工程的几种方法
黔肆的博客
07-04 258
新建vue工程的几种方法，关键词：@vue/cli ,vite , parcel , webpack
前端利用vue如何实现导入和导出功能.md
BradenHan的专栏
07-02 1031
xlsx/TOC。
Vue 3集成krpano 全景图展示
最新发布
Mr丶GUO
07-06 268
Vue 3集成krpano 全景图展示，需要借助官方工具进行制作注意事项：vue@cli3没有static，需要放在public目录下。
vue2 中如何使用 vuedraggable 库实现拖拽功能
微光无限的博客
07-02 259
vue2 中如何使用 vuedraggable 库实现拖拽功能（详细Demo，容易理解）
前端播放RTSP视频流，使用FLV请求RTSP视频流播放（Vue项目，在Vue中使用插件flv.js请求RTSP视频流播放）
weixin_65793170的博客
07-01 1026
在浏览器中请求 RTSP 视频流并进行播放时，直接使用原生的浏览器 API 是行不通的，因为它们不支持 RTSP 协议。为了解决这个问题，开发者通常会选择使用像 flv.js 这样的库，它专为在浏览器中播放 FLV 和其他流媒体格式设计。然而，flv.js 本身并不直接支持 RTSP，这意味着我们需要一个额外的步骤来桥接 RTSP 和 flv.js。
使用vue3写一个小游戏
04-28
好的，我可以给你提供一个简单的示例：猜数字小游戏。 1. 在Vue3中创建一个新的组件，名为`GuessNumberGame`。 2. 在组件中定义一个响应式...这是一个简单的Vue3小游戏示例，你可以根据自己的需求进行修改和扩展。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值