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 相关文章推荐
javascript 控制弹出窗口
Apr 10 Javascript
腾讯与新浪的通过IP地址获取当前地理位置(省份)的接口
Jul 26 Javascript
动态创建script在IE中缓存js文件时导致编码的解决方法
May 04 Javascript
零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门
Dec 20 Javascript
全系IE支持Bootstrap的解决方法
Oct 19 Javascript
JavaScript 经典实例日常收集整理(常用经典)
Mar 30 Javascript
javascript常见数字进制转换实例分析
Apr 21 Javascript
简单实现jQuery进度条轮播实例代码
Jun 20 Javascript
微信小程序 template模板详解及实例代码
Mar 09 Javascript
Ext JS 实现建议词模糊动态搜索功能
May 13 Javascript
浅谈VUE监听窗口变化事件的问题
Feb 24 Javascript
Node.js中的cluster模块深入解读
Jun 11 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
set_include_path和get_include_path使用及注意事项
2013/02/02 PHP
php使用指定编码导出mysql数据到csv文件的方法
2015/03/31 PHP
基于PHP后台的Android新闻浏览客户端
2016/05/23 PHP
PHP API接口必备之输出json格式数据示例代码
2017/06/27 PHP
php根据命令行参数生成配置文件详解
2019/03/15 PHP
JS应用之禁止抓屏、复制、打印
2008/02/21 Javascript
js 固定悬浮效果实现思路代码
2013/08/02 Javascript
jquery 快速回到页首的方法
2013/12/05 Javascript
jQuery控制TR显示隐藏的几种方法
2014/06/18 Javascript
jQuery实现鼠标划过添加和删除class的方法
2015/06/26 Javascript
js实现汉字排序的方法
2015/07/23 Javascript
AngularJS使用ngMessages进行表单验证
2015/12/27 Javascript
javascript中apply、call和bind的使用区别
2016/04/05 Javascript
jQuery实现的简单拖动层示例
2017/02/22 Javascript
Angular网络请求的封装方法
2018/05/22 Javascript
vue-router+nginx 非根路径配置方法
2018/06/30 Javascript
vue--vuex详解
2019/04/15 Javascript
你了解vue3.0响应式数据怎么实现吗
2019/06/07 Javascript
JS中如何轻松遍历对象属性的方式总结
2019/08/06 Javascript
如何通过shell脚本自动生成vue文件详解
2019/09/10 Javascript
Django工程的分层结构详解
2019/07/18 Python
对tensorflow中cifar-10文档的Read操作详解
2020/02/10 Python
pyecharts动态轨迹图的实现示例
2020/04/17 Python
浅析python中的del用法
2020/09/02 Python
CSS3 实现的缩略图悬停效果
2020/12/09 HTML / CSS
new修饰符是起什么作用
2015/06/28 面试题
初三学生个人自我评定
2014/04/06 职场文书
大型公益活动策划方案
2014/08/20 职场文书
外贸英文求职信范文
2015/03/19 职场文书
入党培养人考察意见
2015/06/08 职场文书
2019年销售人员的职业生涯规划书
2019/03/25 职场文书
Python基础之常用库常用方法整理
2021/04/30 Python
goland 设置project gopath的操作
2021/05/06 Golang
html5表单的required属性使用
2021/07/07 HTML / CSS
python代码实现扫码关注公众号登录的实战
2021/11/01 Python
关于SpringBoot 使用 Redis 分布式锁解决并发问题
2021/11/17 Redis