基于Vue实现变色方块(点灯、黑白迭代)休闲小游戏

基于Vue实现变色方块(点灯、
摘要:每天进步一点点... 之前看到一个小游戏,玩起来挺有意思的,就自己重新做了一个,实现起来挺容易,就是玩起来前面还好,后面的有点费脑... [github下载地址](https://github.com/lpyhutu/vue-discoloration) HTML ```js <template> <div class="discoloration"> <div class="header" :style="{ width: `${contentWidth}px` }"> <div class="item">关卡:{{ level }}</div> <div class="item">当前步数:{{ currentSteps }}</div> <div class="item">总步数:{{ steps }}</div> </div> <div class="content"> <div class="item item-color1" :class="item == 0 ? 'item-color1' : 'item-color2'" :style="{ height: `${(contentWidth - level) / level}px`, width: `${(contentWidth - level) / level}px`, }" v-for="(item, key) in list" :key="key" @click="handleCurrentIndex(key)" ></div> </div> </div> </template> ``` JavaScript ```js <script> export default { name: "Discoloration", data() { return { contentWidth: 500, list: [], successList: [], level: 1, steps: 0, currentSteps: 0, isLoading: true, }; }, methods: { /** * 赋值 */ handleList() { this.list = []; for (let i = 0; i < this.level * this.level; i++) { this.list.push(0); } this.isFlag = true; }, handleCurrentIndex(currentIndex) { this.steps++; //当前 this.setList(currentIndex); // 上一级 if (currentIndex > this.level - 1) { const upLevelIndex = currentIndex - this.level; this.setList(upLevelIndex); } // 下一级 if (currentIndex < (this.level - 1) * this.level) { const downLevelIndex = currentIndex + this.level; this.setList(downLevelIndex); } //左 if (currentIndex % this.level !== 0) { const leftLevelIndex = currentIndex - 1; this.setList(leftLevelIndex); } //右 if ((currentIndex + 1) % this.level !== 0) { const rightLevelIndex = currentIndex + 1; this.setList(rightLevelIndex); } this.checkList(); }, checkList() { let isSuccess = true; for (let i = 0; i < this.list.length; i++) { if (this.list[i] === 0) { isSuccess = false; } } if (isSuccess) { this.level++; this.handleList(); } }, /** * 修改 */ setList(index) { this.$set(this.list, index, this.handleVal(this.list[index])); }, /** * 判断1还是0 */ handleVal(value) { let val = value === 1 ? 0 : 1; return val; }, }, created() { this.handleList(); }, }; </script> ``` CSS ```css <style lang="scss"> .discoloration { position: fixed; height: 100%; width: 100%; display: flex; justify-content: center; flex-flow: column; align-items: center; background: edf2f6; .header { display: flex; justify-content: space-between; padding-bottom: 10px; } .content { height: 500px; width: 500px; display: flex; flex-wrap: wrap; .item { border-right: 1px solid eee; border-bottom: 1px solid eee; cursor: pointer; } .item-color1 { background: 07be91; } .item-color2 { background: e0c007; } } .footer { display: flex; justify-content: space-between; padding-top: 10px; button { margin-bottom: 7px; } } } </style> ``` 实现效果 自己可以根据实际需要再添加其它难度或玩法 ![GIF.gif](https://api.lpya.cn/HtBlog/public/upload/article/20210310/e3ebce47bddeb1f3855eb092c143593d.gif)

Vue使用prerender-spa-plugin做简单的SEO优化

Vue使用prerender-
摘要:每天进步一点点... 自己弄了个博客网站,运行了很久,一直没被收录,才发现SEO对单页面不太友好。上网学习并实践了一下,我们可以使用prerender-spa-plugin+vue-meta-info做一个预渲染。 一、安装插件 使用下面命令安装对应插件 ```js npm install prerender-spa-plugin --save npm install vue-meta-info --save ``` 二、修改配置 1、创建vue.config.js文件,并添加下面内容 ```js const PrerenderSPAPlugin = require('prerender-spa-plugin') const Renderer = PrerenderSPAPlugin.PuppeteerRenderer const path = require('path') module.exports = { configureWebpack: () => { if (process.env.NODE_ENV !== 'production') return return { plugins: [ new PrerenderSPAPlugin({ staticDir: path.join(__dirname, 'dist'), routes: ['/', '/message', '/link', '/about', '/detail/id', "/search"], renderer: new Renderer({ inject: { foo: 'bar' }, headless: false, renderAfterDocumentEvent: 'render-event' }) }) ] } }, } ``` 2、修改main.js里面的内容 ```js //引入metainfo import MetaInfo from 'vue-meta-info' Vue.use(MetaInfo) new Vue({ router, store, render: h => h(App), //添加下面这行 mounted() { document.dispatchEvent(new Event('render-event')) } }).$mount('app') ``` 3、在对应页面添加下面内容 ```js export default { name: "About", metaInfo: { title: "网页设计,模板分享,源码下载 - 糊涂博客", meta: [ { name: "keyWords", content: "网页,简介,个人,小程序,博客", }, { name: "description", content: "糊涂个人博客,一位编程爱好者的成长地。专注于前后端的学习,不定期更新分享踩坑过程,学习记录、网页模板、demo源码等,也希望借此能够认识更多的朋友。", }, ], }, } ``` 4、使用npm run build命令打包后,会生成对应的目录 ![1.png](https://api.lpya.cn/HtBlog/public/upload/article/20210310/dbd67f766b6342d1f0fea6627a07ec4a.png) 三、收录效果 ![2.png](https://api.lpya.cn/HtBlog/public/upload/article/20210310/14919b6d79c4f74f12029130119923ac.png)

Vue封装组件实现验证码功能

Vue封装组件实现验证码功能
摘要:每天进步一点点... 对于些限制比较低、要求不高的情况下,可以在前端使用验证码做一个简单验证 ```html <template> <div class="code"> <canvas @click="changeCode" id="canvas"></canvas> </div> </template> <script> export default { name: "VerificationCode", props: { //宽 width: { type: Number, default: 100, }, //高 height: { type: Number, default: 35, }, //验证码长度 codeLength: { type: Number, default: 4, }, //字体大小px codeFontSize: { type: Number, default: 25, }, //字体 family: { type: String, default: "微软雅黑", }, //干扰点数 point: { type: Number, default: 10, }, //干扰线数 line: { type: Number, default: 3, }, }, methods: { changeCode() { this.draw(); }, draw() { let code = "", canvas = document.getElementById("canvas"), context = canvas.getContext("2d"), text = "qwertyuipadfghjkxvbnmQWERTYUPASDFGHJKZXVBNM123456789"; canvas.width = this.width; canvas.height = this.height; for (let i = 0; i < this.codeLength; i++) { let j = Math.floor(Math.random() * text.length); let deg = Math.random() - 0.5; let txt = text[j]; code = code + txt.toLowerCase(); let x = 10 + i * 20; let y = 20 + Math.random() * (this.height / 2 - 10); context.font = `${this.codeFontSize}px ${this.family}`; context.translate(x, y); context.rotate(deg); context.fillStyle = this.randomColor(); context.fillText(txt, 0, 0); context.rotate(-deg); context.translate(-x, -y); } console.log(code); //把该值返回调用的页面进行判断 for (let i = 0; i <= this.line; i++) { context.strokeStyle = this.randomColor(); context.beginPath(); context.moveTo( Math.random() * this.width, Math.random() * this.height ); context.lineTo( Math.random() * this.width, Math.random() * this.height ); context.stroke(); } for (let i = 0; i <= this.point; i++) { context.strokeStyle = this.randomColor(); context.beginPath(); let x = Math.random() * this.width; let y = Math.random() * this.height; context.moveTo(x, y); context.lineTo(x + 1, y + 1); context.stroke(); } }, randomColor() { let r = this.randomNum(170), g = this.randomNum(170), b = this.randomNum(170); return "rgb(" + r + "," + g + "," + b + ")"; }, randomNum(maxNum) { return Math.floor(Math.random() * maxNum); }, }, mounted() { this.draw(); }, }; </script> <style> canvas { cursor: pointer; border: 1px solid rgb(155, 155, 155); background-color: rgba(182, 182, 182, 0.26); } </style> ``` 调用组件,把code值传过来做个匹配就可以了 ![QQ截图20210129211620.jpg](https://api.lpya.cn/HtBlog/public/upload/article/20210129/abe08e32391e23847a7188fcbf792651.jpg)
网站信息
博主: 糊涂
Github: Github
联系邮箱:1048672466@qq.com
在线人数: 0
文章数量: 10
访问总量: 3560