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 相关文章推荐
jquery中:input和input的区别分析
Jul 13 Javascript
js判断字符是否是汉字的两种方法小结
Jan 03 Javascript
Jquery Ajax解析XML数据(同步及异步调用)简单实例
Feb 12 Javascript
JQuery EasyUI 日期控件如何控制日期选择区间
May 05 Javascript
Javascript 两种刷新方法以及区别和适用范围
Jan 17 Javascript
jQuery排序插件tableSorter使用方法
Feb 10 Javascript
React-Native左右联动List的示例代码
Sep 21 Javascript
JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例
Feb 08 Javascript
详解一个小实例理解js原型和继承
Apr 24 Javascript
微信小程序实现渐入渐出动画效果
Jun 13 Javascript
Node.js API详解之 timer模块用法实例分析
May 07 Javascript
Js生成随机数/随机字符串的方法小结【5种方法】
May 27 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
Warning: session_destroy() : Trying to destroy uninitialized sessionq错误
2011/06/16 PHP
Zend Framework基本页面布局分析
2016/03/19 PHP
php实现计算百度地图坐标之间距离的方法
2016/05/05 PHP
php str_replace替换指定次数的方法详解
2017/05/05 PHP
php中try catch捕获异常实例详解
2020/08/06 PHP
使用正则替换变量
2007/05/05 Javascript
js过滤数组重复元素的方法
2010/09/05 Javascript
JavaScript创建对象的写法
2013/08/29 Javascript
异步动态加载JS并运行(示例代码)
2013/12/13 Javascript
jQuery中wrapInner()方法用法实例
2015/01/16 Javascript
jquery仅用6行代码实现滑动门效果
2015/09/07 Javascript
深入浅析JavaScript的API设计原则
2016/06/14 Javascript
D3.js中强制异步文件读取同步的几种方法
2017/02/06 Javascript
前端主流框架vue学习笔记第一篇
2017/07/26 Javascript
Vue中使用vue-i18插件实现多语言切换功能
2018/04/25 Javascript
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
2018/12/29 jQuery
vue过滤器用法实例分析
2019/03/15 Javascript
vue 如何使用递归组件
2020/10/23 Javascript
[01:01:51]EG vs VG Supermajor小组赛B组 BO3 第二场 6.2
2018/06/03 DOTA
python简单读取大文件的方法
2016/07/01 Python
python使用pil进行图像处理(等比例压缩、裁剪)实例代码
2017/12/11 Python
Python中的默认参数实例分析
2018/01/29 Python
Python3.6笔记之将程序运行结果输出到文件的方法
2018/04/22 Python
在ubuntu16.04中将python3设置为默认的命令写法
2018/10/31 Python
对django的User模型和四种扩展/重写方法小结
2019/08/17 Python
用sqlalchemy构建Django连接池的实例
2019/08/29 Python
windows python3安装Jupyter Notebooks教程
2020/04/13 Python
Tensorflow之MNIST CNN实现并保存、加载模型
2020/06/17 Python
使用Keras构造简单的CNN网络实例
2020/06/29 Python
时装界的“朋克之母”:Vivienne Westwood
2017/07/06 全球购物
美国购买新书和二手书网站:Better World Books
2018/10/31 全球购物
继承公证书
2014/04/09 职场文书
工地安全生产标语
2014/06/06 职场文书
css 中多种边框的实现小窍门
2021/04/07 HTML / CSS
浅谈TypeScript 索引签名的理解
2021/10/16 Javascript
浅谈css实现背景颜色半透明的两种方法
2021/12/06 HTML / CSS