ungame-CSDN博客

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

感觉vue3和js写起来更接近，vue3可以改变数据来修改ui，不用直接操作domvue3和vue2不同更轻，所以要用勾子函数和一些监视函数，都要先引入，按需引入使vue3更轻吧。vue2都是把要响应的数据放在data函数里，vue3可以在setup函数里，声明对象名=reactive里包成一对象，直接用...toRefs(对象名)，就可以直接用属性名放在ui里使用，要在setup函数里使用就使用对象名.属性名进行增删改查先引入需要的函数方法 import {onMounted, rea

2022-05-08 20:43:43 1542

原创 vue3小笔记

一.创建vue3确保vuee-cli是4.5版本以上二.vue3在main.js中的引入与vue2不同import {createApp } from 'vue'import App from './App.vue'createApp(App).mount('#app')三.sutpu是一个函数，把变量，方法，以前的勾子函数都放里面async在没在使用Suspense组件时是不能出现在sustpu中的 template下可以不用加div根标签 vue3的方法变量都写到set

2022-05-03 15:11:31 3913

原创用canvas画了个多啦A梦

学了点canvas就画了个多啦A梦，分享一下，一起进步需要很大的耐心封装了圆形，线形，折线形，矩形函数，直接套然后就是调数据用的时间长，画出来了就感觉很好<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <met..

2022-04-24 21:21:17 449

原创 js实现天降字母打字小游戏

通过完成这个小demo，对js又熟练了一些。运用了原型，原型链，随机数，es6的一些简单用法，函数封装，键盘事件，一些数组的方法//获取id的函数function $(ele) { return document.getElementById(ele)}//随机生成的字母let abc = "abcdefghijklnmopqrstuvwxyz"//记录错过的数量let imss=0;//下落速度let speed = 30;//出现的个数let speeds=50

2022-04-17 17:16:16 2212

原创手撕js轮播,其实不难

刚开始学时很难，现在自己实现，还是可以的，就会觉得没有那么难布局是基本的就不详细说了，主要是要把图片全部放到一个位置层叠起来，因为我用的opacity来实现显示先把图片的全部li设置opacity为0隐藏第一张图片opacity为1显示ul li{ position: absolute; left: 0; top: 0; opacity: 0; } ul .frist...

2022-04-08 12:33:27 1068

原创 vue2实现纯新历日历组件

今天放假，自己实现了一个日历，熟悉了下日期对象的基本使用，记录下遇到的难点和报错难点获取当前月份总天数getdate(){ let nexMonth=this.months; let d=new Date(this.years,nexMonth,0); return d.getDate() }, 2.获取当前月份一号是星期几//获取当月1号是星期几getday(){ let nexMonth=this.month...

2022-04-05 04:26:06 1773

原创 vue2实现井字棋小游戏附代码

用写东西来学习是最好的效果，能看到自己写出来的东西会有成就感创建vue cil一.先静态简单九宫格样式先做出来创建单个格子的组件名grid 宽高100px,点击后出现的字要水平垂直居中用grid布局两行代码搞定引入grid组件并循环出九个grid 组件外层包一层div 宽高300px,样式布局用flex自动换行，盒子模型要用标准模型边框才不会影响布局...

2022-04-02 17:18:11 3258

原创 vue在data中引入图片的正确路径

每天都踩坑，今天踩的坑给分享出来。想要在横版遍历图片出来在vue中自己做轮播，结果发现在data中直接引入路径是渲染不出来的，原因是webpack打包无法解析，查了些资料才知道在通过import引入路径才行。如果直接在模板上通过src="../../assets/images/top5.png"是没有问题的想通过data里的引入路径，再：src绑定就不能直接把"../../assets/images/top5.png"放到data中，否则webpack打包无法解析需要通过import引入再放到

2022-03-19 21:24:25 4706

原创 vue组件间传递数据的几种方式

一.父传子子组件通过props属性接收// 在子组件内定义组件接收一个参数 name{ props: ['name']}// 父组件使用组件时传递参数 name<child :name="name"></child>二.子传父通过$emit 传递数据给父元素// 子组件定义事件this.$emit('事件名称', '传递的参数') //例： this.$emit('add', 111)// 父组件监听事件的触发<child...

2022-03-18 16:27:31 1511

原创 vue实现最简单的打字小游戏

就想做点小游戏，都是自己想的自己一步步做出来的，做完好有成就感，虽然好简单。做出点小东西能让自己更有信心去学习用了less,vue2页面用flex布局的用了watch属性监视文本输入的内容先用if判断输入的与页面上的单词是否一样，一样就给当前的单词背景变色判断有没有输入过，没输入过再就放到一个新的数组上判断新数组里有没有这个单词如果没有才进入判断，再给新数组增加单词给输入框设置为空，numder减一剩余数量设置good标志显示隐藏，先设置显示，再设置个定时器隐藏就..

2022-03-09 21:37:10 5009

原创用两层animation动画设置沿方形跑一圈

用实现一些功能来去学习，能挖到不少自己不知道的知识点，虽然天天出bug，每次都有新问题，新的知识盲区，最后都一一克服。用到的技术，less, css3, vue.2(原生js也差不多)用了animation和简单的v–show ...

2022-03-06 09:08:50 637

原创 DOM获取/修改节点笔记

获取 DOM 节点获取 DOM 节点的方式有很多，这里例举几个常用的，所有的 DOM 元素都具有以下方法：element.getElementByIdelement.getElementByNameelement.getElementsByTagNameelement.getElementsByClassNameelement.querySelectorelement.querySelectorAll...

2022-03-03 07:14:53 936

原创水平居中和垂直居中几种方式

一、水平居中自身行内元素父是块元素给父元素设置 text-align:center 自身行内元素父不是块先给父元素设置 display:block; text-align:center 自身块元素方式一、定宽在自身设置 margin: 0 auto; 不定宽在自身设置 ...

2022-02-27 12:52:49 532

原创 flex属性笔记

弹性盒子 flex设为弹性盒子 display flex display : flex 块级弹性盒子 display: inline flex 行内弹性容器排列方式 flex-direction 可选值(默认值) row 从左向右 row-reverse 从右向左 column 纵向排列自上向下 ...

2022-02-24 19:52:04 236

A081127的博客