vue3加canvas完成天降字母小游戏

本文介绍如何使用Vue3结合Canvas实现一款简单的天降字母游戏。通过学习,作者发现Vue3的语法更加接近JavaScript,允许通过改变数据来更新UI而不需要直接操作DOM。Vue3更轻便,需要按需引入功能。在Vue2中,数据通常在data函数中定义,而在Vue3的setup函数中,可以使用reactive包裹对象,并通过toRefs将其属性直接用于UI。文章详细阐述了获取canvas上下文、创建小球、绑定事件以及实现字母下落等功能的实现步骤。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

vue3加canvas实现天降字母小游戏,每学习一部分知识就要有所输出,虽然挺简单的,还是用了不少时间,毕竟不太熟练

感觉vue3和js写起来更接近,vue3可以改变数据来修改ui,不用直接操作dom

vue3和vue2不同更轻,所以要用勾子函数和一些监视函数,都要先引入,按需引入使vue3更轻吧。

vue2都是把要响应的数据放在data函数里,vue3可以在setup函数里,声明对象名=reactive里包成一对象,直接用...toRefs(对象名),就可以直接用属性名放在ui里使用,要在setup函数里使用就使用对象名.属性名进行增删改查

  • 先引入需要的函数方法
  • import {onMounted, reactive,watch, toRefs} from 'vue'
  • 在setup函数里声明需要的数据
  •  let p = reactive({
          //下落的随机字母
          ABC: "abcdefghijklnmopqrstuvwxyz".toUppe
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值