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的Spin Button自定义文本框数值自增或自减
Jul 17 Javascript
javascript时间自动刷新实现原理与步骤
Jan 06 Javascript
JavaScript事件委托的技术原理探讨示例
Apr 17 Javascript
jQuery实现的左右移动焦点图效果
Jan 14 Javascript
JS 面向对象之继承---多种组合继承详解
Jul 10 Javascript
Javascript动画效果(4)
Oct 11 Javascript
Three.js基础学习教程
Nov 16 Javascript
微信小程序实现左滑修改、删除功能
Oct 19 Javascript
一个小时快速搭建微信小程序的方法步骤
Apr 15 Javascript
微信小程序如何访问公众号文章
Jul 08 Javascript
vue路由 遍历生成复数router-link的例子
Oct 30 Javascript
微信小程序纯文本实现@功能
Apr 08 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/08 其他游戏
IP138 IP地址查询小偷实现代码
2010/02/15 PHP
PHP中使用sleep函数实现定时任务实例分享
2014/08/21 PHP
php中convert_uuencode()与convert_uuencode函数用法实例
2014/11/22 PHP
在WordPress中实现评论头像的自定义默认和延迟加载
2015/11/24 PHP
php5.3后静态绑定用法详解
2016/11/11 PHP
妙用Jquery的val()方法
2012/06/27 Javascript
Javascript模拟加速运动与减速运动代码分享
2014/12/11 Javascript
javascript实现鼠标移到Image上方时显示文字效果的方法
2015/08/07 Javascript
Sublime Text新建.vue模板并高亮(图文教程)
2017/10/26 Javascript
nodejs实现一个word文档解析器思路详解
2018/08/14 NodeJs
微信小程序自定义导航教程(兼容各种手机)
2018/12/12 Javascript
优雅地使用loading(推荐)
2019/04/20 Javascript
微信小程序class封装http代码实例
2019/08/24 Javascript
JS实现盒子拖拽效果
2020/02/06 Javascript
vue如何在用户要关闭当前网页时弹出提示的实现
2020/05/31 Javascript
Python常见格式化字符串方法小结【百分号与format方法】
2016/09/18 Python
python面向对象法实现图书管理系统
2019/04/19 Python
在pytorch中查看可训练参数的例子
2019/08/18 Python
基于Python中的yield表达式介绍
2019/11/19 Python
css3实现文字首尾衔接跑马灯的示例代码
2020/10/16 HTML / CSS
找到不普通的东西:Bonanza
2016/10/20 全球购物
美国生日蛋糕店:Bake Me A Wish!
2017/02/08 全球购物
英语系毕业生自荐信
2013/10/31 职场文书
师范应届生教师求职信
2013/11/05 职场文书
采购部部门职责
2013/12/15 职场文书
初中女生自我鉴定
2013/12/19 职场文书
护士的自我鉴定
2014/02/07 职场文书
公司试用期员工自我评价
2014/09/17 职场文书
民间借贷协议书范本
2014/10/01 职场文书
教师个人总结范文
2015/02/11 职场文书
岗位聘任报告
2015/03/02 职场文书
2019森林防火宣传标语大全!
2019/07/03 职场文书
解决MySQL存储时间出现不一致的问题
2021/04/28 MySQL
SQL中的三种去重方法小结
2021/11/01 SQL Server
Redis高并发缓存架构性能优化
2022/05/15 Redis