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 相关文章推荐
IE浏览器兼容Firefox的JS脚本的代码
Oct 23 Javascript
关于IE、Firefox、Opera页面呈现异同 写脚本很痛苦
Aug 28 Javascript
JS+JSP checkBox 全选具体实现
Jan 02 Javascript
PHPExcel中的一些常用方法汇总
Jan 23 Javascript
使用window.prompt()实现弹出用户输入的对话框
Apr 13 Javascript
JS简单实现动画弹出层效果
May 05 Javascript
js实现鼠标点击左上角滑动菜单效果代码
Sep 06 Javascript
js实现背景图自适应窗口大小
Jan 10 Javascript
微信小程序实现图片放大预览功能
Oct 22 Javascript
Array数组对象中的forEach、map、filter及reduce详析
Aug 02 Javascript
Vue-cli3项目引入Typescript的实现方法
Oct 18 Javascript
如何解决jQuery 和其他JS库的冲突
Jun 22 jQuery
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 array_search() 函数使用
2010/04/13 PHP
探讨php define()函数及defined()函数使用详解
2013/06/09 PHP
php根据日期或时间戳获取星座信息和生肖等信息
2015/10/20 PHP
JavaScript中的对象化编程
2008/01/16 Javascript
js取得url地址参数实例
2013/02/22 Javascript
『jQuery』.html(),.text()和.val()的概述及使用
2013/04/22 Javascript
JQuery教学之性能优化
2014/05/14 Javascript
排序算法的javascript实现与讲解(99js手记)
2014/09/28 Javascript
JavaScript动态改变div属性的实现方法
2015/07/22 Javascript
jQuery实现自动与手动切换的滚动新闻特效代码分享
2015/08/27 Javascript
jquery.mousewheel实现整屏翻屏效果
2015/08/30 Javascript
使用jQuery mobile库检测url绝对地址和相对地址的方法
2015/12/04 Javascript
Javascript iframe交互并兼容各种浏览器的解决方法
2016/07/12 Javascript
jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
2016/09/21 Javascript
AngularJS用户选择器指令实例分析
2016/11/04 Javascript
用jQuery实现圆点图片轮播效果
2017/03/19 Javascript
微信小程序获取手机号授权用户登录功能
2017/11/09 Javascript
JavaScript鼠标悬停事件用法解析
2020/05/15 Javascript
在Python中使用成员运算符的示例
2015/05/13 Python
python魔法方法-属性转换和类的表示详解
2016/07/22 Python
python简单实现获取当前时间
2016/08/27 Python
python 遍历字符串(含汉字)实例详解
2017/04/04 Python
python学习之hook钩子的原理和使用
2018/10/25 Python
解决Python中list里的中文输出到html模板里的问题
2018/12/17 Python
python 多线程重启方法
2019/02/18 Python
pyqt 实现在Widgets中显示图片和文字的方法
2019/06/13 Python
python 实现矩阵填充0的例子
2019/11/29 Python
Python3爬虫中pyspider的安装步骤
2020/07/29 Python
Django-silk性能测试工具安装及使用解析
2020/11/28 Python
德国婴儿服装和婴儿用品购买网站:Baby Sweets
2019/12/08 全球购物
亚洲领先的设计购物网站:Pinkoi
2020/11/26 全球购物
高级工程师岗位职责
2013/12/15 职场文书
新学期班主任寄语
2014/01/18 职场文书
主题班会开场白
2015/06/01 职场文书
岁月神偷观后感
2015/06/11 职场文书
如何Python使用re模块实现okenizer
2022/04/30 Python