vue实现井字棋游戏


Posted in Javascript onSeptember 29, 2020

本文实例为大家分享了vue实现井字棋游戏的具体代码,供大家参考,具体内容如下

之前看react的教程时看到的小游戏,试着用vue做一个。右边的winner提示胜者,还没有胜者时提示下一个棋子的种类。restart按钮点击可重新开始。go to step可跳转到第n步。

vue实现井字棋游戏

html:

<div id="app">
 <ul id="board" class="white normal">
 <li class="square" v-for="i, idx in datas" @click=set(idx)>{{i}}</li>
 </ul>
 <div id="console">
 <div id="hint" class="white">{{hint}}</div>
 <input type="button" class="white" id="restart" value="restart" @click="init()"/>
 <ul id="history" class="normal">
  <li class="history" v-for="i, idx in history">
  <input type="button" class="white" :value="'go to step' + (idx + 1)" @click=jump(idx) />
  </li>
 </ul>
 </div>
</div>

css:

<style type="text/css">
 body {
 background: #5af;
 }
 
 .white {
 background: #fff;
 border-radius: 11px;
 outline: none;
 border: none;
 }
 
 .normal {
 list-style: none;
 padding: 0px;
 margin: 0px;
 }
 
 #app {
 display: flex;
 justify-content: space-between;
 width: 450px;
 height: 306px;
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 margin: auto;
 }
 
 #board {
 display: flex;
 width: 306px;
 height: 306px;
 flex-wrap: wrap;
 overflow: hidden;
 }
 
 #hint {
 width: 100px;
 height: 22px;
 text-align: center;
 margin: 10px;
 }
 
 #restart {
 width: 70px;
 height: 22px;
 margin: 10px;
 }
 
 #history,
 .history {
 margin: 5px;
 }
 
 .square {
 height: 100px;
 width: 100px;
 border: #ebebeb solid 1px;
 flex: 0 0 auto;
 font-size: 50px;
 font-weight: 900;
 line-height: 100px;
 text-align: center;
 }
</style>

js:

new Vue({
 el: '#app',
 data: {
 datas: Array(9).fill(''),
 history: [],
 next: true,
 winner: '',
 cases: [
  [0, 1, 2],
  [3, 4, 5],
  [6, 7, 8],
  [0, 3, 6],
  [1, 4, 7],
  [2, 5, 8],
  [0, 4, 8],
  [2, 4, 6],
 ]
 },
 methods: {
 //放置棋子
 set(idx) {
  if (!this.datas[idx] && !this.winner) {
  this.$set(this.datas, idx, this.next_player);
  this.history.push({
   status: [...this.datas],
   player: this.next
  });
  if (this.is_win(this.next_player)) {
   this.winner = this.next_player;
  }
  this.next = !this.next;
  }
 },
 //跳转到第n步
 jump(idx) {
  this.datas = this.history[idx].status;
  this.history.splice(idx + 1, this.history.length - idx - 1);
  this.next = !this.history[idx].player;
  this.winner = this.is_win('O') 
  ? 'O' 
  : this.is_win('X') 
   ? 'X' 
   : '';
 },
 //判断是否胜出
 is_win(player) {
  return this.cases.some(arr => arr.every(el => this.datas[el] === player));
 },
 //初始化
 init() {
  this.datas = Array(9).fill('');
  this.history = [];
  this.next = true;
  this.winner = '';
 }
 },
 computed: {
 next_player() {
  return this.next ? 'O' : 'X';
 },
 hint() {
  return this.winner ? 'winner: ' + this.winner : 'next: ' + this.next_player;
 }
 }
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js清除input中type等于file的值域(示例代码)
Dec 24 Javascript
js取值中form.all和不加all的区别介绍
Jan 20 Javascript
JS实现闪动的title消息提醒效果
Jun 20 Javascript
浅谈JavaScript超时调用和间歇调用
Aug 30 Javascript
JavaScript实现广告弹窗效果
Aug 09 Javascript
angular2中router路由跳转navigate的使用与刷新页面问题详解
May 07 Javascript
JS+canvas画一个圆锥实例代码
Dec 13 Javascript
Postman的下载及安装教程详解
Oct 16 Javascript
jquery插件懒加载的示例
Oct 24 jQuery
JS实现鼠标移动拖尾
Dec 27 Javascript
前端vue+express实现文件的上传下载示例
Feb 18 Vue.js
ECharts transform数据转换和dataZoom在项目中使用
Dec 24 Javascript
js实现移动端图片滑块验证功能
Sep 29 #Javascript
js+cavans实现图片滑块验证
Sep 29 #Javascript
如何利用JS将手机号中间四位变成*号
Sep 29 #Javascript
原生JavaScript实现刮刮乐
Sep 29 #Javascript
原生JavaScript实现拖动校验功能
Sep 29 #Javascript
使用JavaScript实现贪吃蛇游戏
Sep 29 #Javascript
解决idea开发遇到javascript动态添加html元素时中文乱码的问题
Sep 29 #Javascript
You might like
帅气的琦玉老师
2020/03/02 日漫
收音机指标测试方法及仪器
2021/03/01 无线电
外媒评选出10支2020年最受欢迎的Dota2战队
2021/03/05 DOTA
PHP获取页面执行时间的方法(推荐)
2016/12/10 PHP
Laravel中错误与异常处理的用法示例
2018/09/16 PHP
gearman中任务的优先级和返回状态实例分析
2020/02/27 PHP
jQuery弹出层插件简化版代码下载
2008/10/16 Javascript
jquery maxlength使用说明
2011/09/09 Javascript
jQuery删除一个元素后淡出效果展示删除过程的方法
2015/03/18 Javascript
js如何实现点击标签文字,文字在文本框出现
2015/08/05 Javascript
JavaScript知识点整理
2015/12/09 Javascript
jQuery Select下拉框操作小结(推荐)
2016/07/22 Javascript
vue-router跳转页面的方法
2017/02/09 Javascript
JavaScript 实现 Tab 点击切换实例代码
2017/03/25 Javascript
vue使用mint-ui实现下拉刷新和无限滚动的示例代码
2017/11/06 Javascript
浅析java线程中断的办法
2018/07/29 Javascript
vue 中this.$set 动态绑定数据的案例讲解
2021/01/29 Vue.js
[32:26]EG vs IG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[10:21]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster 选手采访
2021/03/11 DOTA
Python ZipFile模块详解
2013/11/01 Python
Python编写一个闹钟功能
2017/07/11 Python
Python os.access()用法实例
2019/02/18 Python
Python3+PyInstall+Sciter解决报错缺少dll、html等文件问题
2019/07/15 Python
python爬虫 模拟登录人人网过程解析
2019/07/31 Python
Python 实现日志同时输出到屏幕和文件
2020/02/19 Python
K最近邻算法(KNN)---sklearn+python实现方式
2020/02/24 Python
pyx文件 生成pyd 文件用于 cython调用的实现
2021/03/04 Python
详解CSS3开启硬件加速的使用和坑
2017/08/21 HTML / CSS
全球高级音频和视频专家:HiDef Lifestyle
2019/08/02 全球购物
社会学专业求职信
2014/02/24 职场文书
绿色校园广播稿
2014/10/13 职场文书
校友回访母校寄语
2015/02/26 职场文书
实习指导老师意见
2015/06/04 职场文书
运动会宣传稿100字
2015/07/23 职场文书
只需要12页,掌握撰写一流商业计划书的技巧
2019/05/07 职场文书
Redis实现短信验证码登录的示例代码
2022/06/14 Redis