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 相关文章推荐
Node.js生成HttpStatusCode辅助类发布到npm
Apr 09 Javascript
深入理解JavaScript系列(38):设计模式之职责链模式详解
Mar 04 Javascript
jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
Aug 21 Javascript
jquery实现触发时更新下拉列表内容的方法
Dec 02 Javascript
javascript实现的上下无缝滚动效果
Sep 19 Javascript
jQuery实现页面倒计时并刷新效果
Mar 13 Javascript
详解如何使用PM2将Node.js的集群变得更加容易
Nov 15 Javascript
详解node child_process模块学习笔记
Jan 24 Javascript
微信小程序自定义组件实现tabs选项卡功能
Jul 14 Javascript
vue interceptor 使用教程实例详解
Sep 13 Javascript
trackingjs+websocket+百度人脸识别API实现人脸签到
Nov 26 Javascript
Vue使用NProgress的操作过程解析
Oct 10 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
PHP使用Face++接口开发微信公众平台人脸识别系统的方法
2015/04/17 PHP
laravel实现上传图片的两种方式小结
2019/10/12 PHP
PhpStorm 如何优雅的调试Hyperf的方法步骤
2019/11/24 PHP
firefox和IE系列的相关区别整理 以备后用
2009/12/28 Javascript
基于Jquery的表格隔行换色,移动换色,点击换色插件
2010/12/22 Javascript
jquery ajax传递中文参数乱码问题及解决方法说明
2014/02/07 Javascript
如何将php数组或者对象传递给javascript
2014/03/20 Javascript
jquery中子元素和后代元素的区别示例介绍
2014/04/02 Javascript
使用Node.js处理前端代码文件的编码问题
2016/02/16 Javascript
Bootstrap零基础入门教程(二)
2016/07/18 Javascript
Javascript 两种刷新方法以及区别和适用范围
2017/01/17 Javascript
ES6新特性二:Iterator(遍历器)和for-of循环详解
2017/04/20 Javascript
js匿名函数使用&amp;传参(实例)
2017/09/08 Javascript
对Angular中单向数据流的深入理解
2018/03/31 Javascript
Vue.js 使用v-cloak后仍显示变量的解决方法
2018/11/19 Javascript
vue-router定义元信息meta操作
2020/12/07 Vue.js
Python自动连接ssh的方法
2015/03/07 Python
Python使用getpass库读取密码的示例
2017/10/10 Python
python 把文件中的每一行以数组的元素放入数组中的方法
2018/04/29 Python
python+selenium 鼠标事件操作方法
2019/08/24 Python
PyCharm2019安装教程及其使用(图文教程)
2019/09/29 Python
python滑块验证码的破解实现
2019/11/10 Python
python3实现单目标粒子群算法
2019/11/14 Python
keras load model时出现Missing Layer错误的解决方式
2020/06/11 Python
医学专业个人求职自荐信格式
2013/09/23 职场文书
会计专业自我鉴定范文
2013/10/06 职场文书
乡镇干部先进事迹材料
2014/02/03 职场文书
计算机科学与技术专业求职信
2014/09/03 职场文书
街道党风廉政建设调研报告
2015/01/01 职场文书
行政申诉状范文
2015/05/20 职场文书
《蓝鲸的眼睛》读后感5篇
2020/01/15 职场文书
Sql-Server数据库单表查询 4.3实验课
2021/04/05 SQL Server
浅谈MySQL之select优化方案
2021/08/07 MySQL
Python人工智能之混合高斯模型运动目标检测详解分析
2021/11/07 Python
OpenCV实现反阈值二值化
2021/11/17 Java/Android
纯CSS打字动画的实现示例
2022/08/05 HTML / CSS