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

就想做点小游戏，都是自己想的自己一步步做出来的，做完好有成就感，虽然好简单。

做出点小东西能让自己更有信心去学习

用了less,vue2

页面用flex布局的
文本框用v-model绑定
用了watch属性监视文本输入的内容
先用if判断输入的与页面上的单词是否一样，一样就给当前的单词背景变色
判断有没有输入过，没输入过再就放到一个新的数组上
判断新数组里有没有这个单词如果没有才进入判断，再给新数组增加单词
给输入框设置为空，numder减一剩余数量设置good标志显示隐藏，先设置显示，再设置个定时器隐藏

for (let i = 0; i < this.learning.length; i++) {

//输入的内容是否与页面上的单词一样 if (this.word == this.$refs.items[i].innerText) {

//判断新数组里有没有这个单词如果没有才进入判断

if (!this.itemed.includes(this.word)) { //新数组没有就把当前的单词增加当前输入的单词到新数组里 this.itemed.push(this.word) //numder减一就是剩余数量 this.num--;

//文本框清空

this.word = '';

//设置good标志显示

this.isgood = true

// 设置good标志隐藏

setTimeout(()=>{ this.isgood = false},800) }

//设置已输入的单词背景变色 this.$refs.items[i].style.backgroundColor = "#9c8e9c" } }

vue实现最简单的打字小游戏相关推荐

原生JS实现一个简单的打字小游戏
原生JS实现一个简单的打字小游戏利用javascript制作一个简单的打字小游戏之前写了一个贪吃蛇小游戏好像反响不错今天我来写一个比贪吃蛇更low更简单的打字小游戏打字小游戏原理接下来咋们直 ...
html金山打字源码,c#实现简单金山打字小游戏（源码）
using GameDemo.Utils; using System; using System.Collections.Generic; using System.Linq; using Syste ...
JAVA实现打字小游戏
目录一.效果二.教程三.代码一.效果首先我们先看效果,左上角的分数是用来记录我们打对了多少字母.字母是从上面开始往下落.每打对一个字母,分数增加,增加到一定分数后,字母下落的速度也会增加.( ...
java实验2总结心得,打字小游戏JAVA实验总结及心得体会
篇一:扫雷游戏实验报告课程设计班级: 姓名: 学号: 指导教师: 成绩: 电子与信息工程学院信息与通信工程系目录 1.任务概述------------------------------ ...
python简单小游戏代码_一个简单的python小游戏---七彩同心圆
本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,如有问题请及时联系我们以作处理用pygame做一个简单的python小游戏-七彩同心圆玩法:每次点击鼠标时,会以鼠标为圆心,不断 ...
基于C语言Ncurse库和链表的简单贪吃蛇小游戏
参考:基于C语言Ncurse库和链表的简单贪吃蛇小游戏作者:三速何时sub20 发布时间:2020-09-29 10:23:51 网址:https://blog.csdn.net/weixin_44 ...
Python 打字小游戏开发，来体验不一样的打字游戏乐趣（第二篇）
Python 打字小游戏开发,来体验不一样的打字游戏乐趣(第二篇) 代码实现窗口类小车类玩家类电脑类赛道类小树类打字类 Python 打字小游戏开发,来体验不一样的打字游戏乐趣(第一篇) ...
用pygame做一个简单的python小游戏---贪吃蛇
用pygame做一个简单的python小游戏-贪吃蛇贪吃蛇游戏博客链接:(方法一样,语言不一样) c++贪吃蛇:https://blog.csdn.net/weixin_46791942/artic ...
用pygame做一个简单的python小游戏---七彩同心圆
用pygame做一个简单的python小游戏-七彩同心圆这个小游戏原是我同学python课的课后作业,并不是很难,就简单实现了一下,顺便加强一下pygame库的学习. 玩法:每次点击鼠标时,会以鼠标 ...

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

vue实现最简单的打字小游戏相关推荐

最新文章

热门文章