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

已于 2022-04-14 07:31:10 修改
阅读量5k 收藏 2
点赞数 3
文章标签： vue.js 前端 javascript
于 2022-03-09 21:37:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/A081127/article/details/123387550
版权

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

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

用了less,vue2

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

 

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAdW5nYW1l,size_20,color_FFFFFF,t_70,g_se,x_16

 

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAdW5nYW1l,size_20,color_FFFFFF,t_70,g_se,x_16

最低0.47元/天 解锁文章
ungame
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
一款基于Vue3+TypeScript+Kotlin开发的WebApp移动端打字练习软件，为五笔、音形文字录入爱好者.zip
02-18
【项目资源】： 包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。 包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、python、web、C#、EDA、proteus、RTOS等项目的源码。 【项目质量】： 所有源码都经过严格测试，可以直接运行。 功能在确认正常工作后才上传。 【适用人群】： 适用于希望学习不同技术领域的小白或进阶学习者。 可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】： 项目具有较高的学习借鉴价值，也可直接拿来修改复刻。 对于有一定基础或热衷于研究的人来说，可以在这些基础代码上进行修改和扩展，实现其他功能。 【沟通交流】： 有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。 鼓励下载和使用，并欢迎大家互相学习，共同进步。
使用vue开发的网页游戏
m0_59093266的博客
03-28 9509
先放链接：baiwanrunrun 无聊的时候用vue脚手架搭配vuex，vuerouter以及自己想的碰撞计算，完成了一个小游戏 图片背景是网上找的，如有不爽联系我删除 说一下收获与心得： 1.封装组件的必要性，初始开发比较麻烦，伤害体积，碰撞体积，跳跃递减，碰撞使跳跃开始自由落体，因为我没有接触过什么游戏框架，所以我都是自己计算写出来的，花了一天完成了基础，然后做了两关而已，因为后面的就没什么挑战难度了，封装完组件后，后面的关卡只需要添加组件就好，接下来开发一关只需要几分钟...
【前端网页游戏开发】Vue3＋PixiJS开发2D闯关打怪游戏，更新内容（打斗）
最新发布
m0_61279136的博客
06-19 488
本次更新内容：怪物攻击，怪物死亡，怪物刷新，自动跟随玩家，靠近玩家时自动攻击，玩家点击键盘J键可以攻击怪物，玩家血量为10，怪物的血量为5，怪物每5秒钟刷新一次，并且大于5只时不再刷新，怪物的伤害为攻击一次减1血量，玩家的伤害为攻击减2血量，当玩家或者怪物死亡时倒地，并且不再移动，玩家死亡游戏结束，弹出提示框，是否回到主界面重新开始游戏，杀死怪物10只后游戏通关，提示是否进入下一关。
8个经典的 Vue / React 开源小游戏
frontend_frank的博客
12-07 579
本文来分享 8 个基于 Vue / React 的小游戏，包括俄罗斯方块、贪吃蛇、扫雷、国际象棋等，个个经典！3D 俄罗斯方块基于 Three.js、React、TypeScript 实现的 3D 俄罗斯方块游戏，可以拖动旋转页面进行观察。Github：https://github.com/RylanBot/threejs-tetris-react贪吃蛇基于 Vue 3.3、Vite、Vuex 实...
基于 Vue 制作一个猜拳小游戏
weixin_62897746的博客
01-03 2790
在工作学习之余玩一会游戏既能带来快乐，还能缓解生活压力，跟随此文一起制作一个小游戏吧。 描述： 石头剪子布，是一种猜拳游戏。起源于中国，然后传到日本、朝鲜等地，随着亚欧贸易的不断发展它传到了欧洲，到了近现代逐渐风靡世界。简单明了的规则，使得石头剪子布没有任何规则漏洞可钻，单次玩法比拼运气，多回合玩法比拼心理博弈，使得石头剪子布这个古老的游戏同时用于“意外”与“技术”两种特性，深受世界人民喜爱。 游戏规则：石头打剪刀，布包石头，剪刀剪布。 现在，需要你写一个程序来判断石头剪子布游戏的结果。
基于Vue实现一个简易的大冒险游戏选择器
qq_42316173的博客
12-14 744
vue实现一个简易的大冒险游戏选择器 普通学校研究生刚开始学习vue不久，第一次尝试写博客，首先分享一个简易的vue实现的简易的大冒险游戏选择器（大冒险内容用aa,bb,cc…代替） 页面如下： 话不多说直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>time</title> <style>
vue实现2048小游戏功能思路详解
08-27
总结来说，使用Vue.js实现2048小游戏涉及到的主要知识点包括Vue的组件化思想、数据绑定、事件监听、计算逻辑实现（如移动合并算法）、矩阵旋转以及游戏状态管理。通过这个项目，开发者不仅可以提升Vue.js的实战技能...
vue实现打地鼠小游戏
12-28
本文实例为大家分享了vue实现打地鼠小游戏的具体代码，供大家参考，具体内容如下 效果图如下： 代码如下： 打地鼠游戏 <div xss=removed xss=removed click=clickItem>{{n}}号地鼠 <div class
vue3 实现 chatgpt 的打字机效果
04-16
在Vue3中实现ChatGPT的打字机效果，我们需要理解Vue3的响应式系统、事件处理机制以及如何模拟打字动画。ChatGPT的打字机效果通常指的是文字逐个字符显示，就像真正的打字机一样，带有停顿和回车等效果，这种效果在...
vue+canvas实现拼图小游戏
01-18
利用 vue+canvas 实现拼图小游戏，供大家参考，具体内容如下 思路步骤 一个拼图拼盘和一个原图参照 对原图的切割以及随机排序 通过W/A/D/S或上下左右进行移动 难度的自主选择 对拼图是否完成的判定 JS实现部分 ...
Vue中如何进行游戏开发与游戏引擎集成？
Java徐师兄的博客
06-16 6126
Vue.js是一款流行的JavaScript框架，它的MVVM模式和组件化开发思想非常适合构建Web应用程序。但是，如果我们想要开发Web游戏，Vue.js并不是最合适的选择。在本文中，我们将介绍如何在Vue.js中进行游戏开发，并集成一些流行的游戏引擎。
基于vue.js前端框架_一个基于Vue.js的填字游戏构建器和填充器前端应用程序
cuk5239的博客
07-26 376
基于vue.js前端框架 Vue填字游戏 (Vue Crossword) A Vue.js based crossword puzzle builder and filler front-end application. 一个基于Vue.js的填字游戏构建器和填充器前端应用程序。 View Demo 查看演示 Download Source 下载源 特征 (Features) suppor...
8个开源的Vue/React小游戏，个个经典
ApologizeError的博客
10-18 970
该项目使用的技术栈包括：TypeScript、Webpack、React、Redux、React Router。其功能包括：15个关卡、快速下落和硬下落、方块放置预览、音效和背景音乐、简化的得分系统等。使用 React、Redux Toolkit、ThreeJS、React Three Fiber、ChessJS 和 ChakraUI 构建的经典国际象棋游戏。本文来分享 8 个基于 Vue / React 的小游戏，包括俄罗斯方块、贪吃蛇、扫雷、国际象棋等，个个经典！
使用Vue实现简易推箱子小游戏
2301_77201370的博客
05-27 670
经典的推箱子是一个来自日本的古老游戏，目的是在训练你的逻辑思考能力。在一个狭小的仓库中，要求把木箱放到指定的位置，稍不小心就会出现箱子无法移动或者。console.log("警告！console.log("警告！console.log("警告！console.log("警告！console.log("警告！console.log("警告！console.log("警告！console.log("警告！此次让我们做一个简易的推箱子，以此来回忆童年。编写script代码，创建Vue实例绑定app容器使用。
vue做游戏vue游戏引擎vue小游戏开发
代上老码的专栏
04-08 1719
Vue.js 是一个构建用户界面的渐进式JavaScript框架，它同样可以用于游戏开发。
vue写一个简单的警察抓小偷的打字游戏
weixin_43688414的博客
01-07 2879
vue写一个简单的警察抓小偷的打字游戏
Vue 实现打字机效果--ityped.js
tjzc1352640的博客
06-22 3968
// html template <p class="desc" v-show="showDesc"><span>I'm </span><span ref="descStr"></span></p> // import import {init} from 'ityped'; // usage const descS...
2048小游戏 vue+uni-app 简单实现了一下
m0_57533694的博客
04-19 3820
做的一个 挺有意思的小游戏
vue开发小游戏怎么样_springboot-vue前后端分离，博客首页
weixin_39583013的博客
12-12 576
vue使用的vue-cli3创建的项目在使用的背景图片时发现css中直接写路径vue提示错误，无法编译成功查询了发现可以这样配置vue.config.js中配置module.exports = { devServer: { // 跨域配置 port: 4000, proxy: { '/api': { t...
vue实现漂流瓶小游戏
10-31
Vue实现漂流瓶小游戏需要用到Vue的组件化开发和数据驱动特性。 首先要创建一个Vue实例，其中包含了漂流瓶游戏的各个组件，比如瓶子组件、海洋组件等。可以使用Vue的模板语法来定义这些组件的结构和样式。 在漂流瓶...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值