微信小程序实现井字棋游戏

本文实例为大家分享了微信小程序实现井字棋游戏的具体代码,供大家参考,具体内容如下

效果图

.wxml

<view class="title">
  <view wx:if="{{currindex < 9 || defeat}}">
  {{defeat?'胜出方:':'轮到了:'}}<span class="span">{{defeat?(outindex?'○':'x'):(outindex?'x':'○')}}</span>
  </view>
  <view wx:else>平局</view>
</view>
<view class="curr_toe">
  <view wx:for="{{detail}}" wx:key="index" class="curr_item" 
  bindtap="{{item.type > 0 || defeat?'':'tactoe'}}" data-index="{{index}}">
    <view wx:if="{{item.type > 0}}">{{item.type == 1?'○':'×'}}</view>
  </view>
</view>
<button wx:if="{{defeat || currindex > 8}}" bindtap="reset">重新开始</button>

.wxss

page{background: #fff;}
.title{width: 100%;display: flex;align-items: center;justify-content: center;margin-top: 20rpx;font-size: 34rpx;}
.span{font-size: 60rpx;}
.curr_toe{width: 510rpx;height: 510rpx;margin: 30rpx calc((100% - 500rpx) / 2);border-top:1px solid #ddd;border-right: 1px solid #ddd;}
.curr_item{border-left: 1px solid #ddd;width: 33.33%;height: 170rpx;display: flex;align-items: center;justify-content: center;color:red;
font-size:170rpx;float: left;border-bottom: 1px solid #ddd;}

.js

Page({
  data: {
    lines:[
      [0, 1, 2],
      [3, 4, 5],
      [6, 7, 8],
      [0, 3, 6],
      [1, 4, 7],
      [2, 5, 8],
      [0, 4, 8],
      [2, 4, 6],
    ]
  },
  onLoad: function (options) {
    this.reset()
  },
  reset(e){
    this.setData({
      detail:[
        {type:0},{type:0},{type:0},{type:0},{type:0},{type:0},{type:0},{type:0},{type:0}
      ],
      defeat:false,
      outindex:false,
      currindex:0
    })
  },
  tactoe(e){
    var index = e.currentTarget.dataset.index,currindex = this.data.currindex,
    detail = this.data.detail,outindex = this.data.outindex;
    currindex++
    detail[index].type = outindex?2:1
    this.setData({
      detail:detail,
      currindex:currindex,
      outindex:!outindex
    })
    if(currindex > 4){
      this.validate()
    }
  },
  validate(e){
    var detail = this.data.detail,lines = this.data.lines;
    for(let i = 0;i < lines.length;i++){
      const [a, b, c] = lines[i];
      if(detail[a].type && detail[a].type == detail[b].type && detail[a].type == detail[c].type){
        wx.showModal({
          title: '提示',
          content: (detail[a].type == 1?'○':'×')+'获得了胜利',
          showCancel:false,
          confirmText:'我知道了'
        })
        this.setData({
          defeat:true
        })
        return false;
      }
    }
  },
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 微信小程序实现五子棋游戏

    本文实例为大家分享了微信小程序实现五子棋游戏的具体代码,供大家参考,具体内容如下 效果图 .wxml <view class="title">   <view wx:if="{{currindex < 324 || defeat}}">   {{defeat?'胜出方:'+(outindex?'黑棋':'白棋'):'轮到了:'+(outindex?'白棋':'黑棋')}}   </view>   <view wx:el

  • 微信小程序五子棋游戏AI实现方法【附demo源码下载】

    本文实例讲述了微信小程序五子棋游戏AI实现方法.分享给大家供大家参考,具体如下: DEMO下载 五子棋AI篇DEMO 效果图 原理 1. 将棋盘中能够胜利的五子连珠方法遍历一个数组: 2. 当AI持棋时,遍历棋盘中所有棋子的空位: 3. 如果用户落子该位置,给用户该位置的五连珠方式进行加分:1连10分,2连20分,3连40分,4连80分: 4. 如果AI落子该位置,给AI该位置的五连珠方式进行加分:1连15分,2连25分,3连45分,4连85分: 5. 最后对该位置的分值进行比较,取最大分值位置

  • 微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】

    本文实例讲述了微信小程序五子棋游戏的悔棋实现方法.分享给大家供大家参考,具体如下: DEMO下载 五子棋悔棋DEMO 效果图 分析 悔棋功能需要的操作: 1. 判断当前持棋人: 2. 清空棋盘: 3. 将当前持棋人的棋子数组的最后一个棋子还原到全局坐标数组的位置: 4. 删除当前持棋人的棋子数组的该坐标. js this.page.changeUndo = function(e){ if (self.START_GAME){ var lastM = self.myPoint.length - 1

  • 微信小程序五子棋游戏的棋盘,重置,对弈实现方法【附demo源码下载】

    本文实例讲述了微信小程序五子棋游戏的棋盘,重置,对弈实现方法.分享给大家供大家参考,具体如下: DEMO下载 五子棋对弈.悔棋DEMO 效果图 分析 1. 采用微信小程序的canvas制作五子棋: 2. 确定棋盘大小及格数: 3. 绘制棋盘--通过棋盘宽高和格数计算间距,同时保存坐标点: 4. 黑方和白方下子--定义一个布尔变量代表各自的身份: 5. 重置棋盘--重新开始: 6. 通过判断当前棋手,悔棋时进行改变. 绘制棋盘 drawLine(arr){ arr.forEach(current

  • 微信小程序实现井字棋游戏

    本文实例为大家分享了微信小程序实现井字棋游戏的具体代码,供大家参考,具体内容如下 效果图 .wxml <view class="title">   <view wx:if="{{currindex < 9 || defeat}}">   {{defeat?'胜出方:':'轮到了:'}}<span class="span">{{defeat?(outindex?'○':'x'):(outindex?'x':

  • python实现简单的井字棋游戏(gui界面)

    项目输出 项目先决条件 要使用python构建井字游戏,我们需要tkinter模块和python的基本概念 Tkinter模块是用于渲染图形的标准图形用户界面. Tkinter.messagebox用于显示消息框 要安装tkinter模块,我们在命令提示符下使用了pip install命令: pip install tkinter 项目文件结构 这些是使用python构建井字游戏的步骤: 导入模块 初始化窗口 检查结果的功能 检查获胜者的功能 定义标签和按钮 1.导入模块 from tkinte

  • C语言实现简易井字棋游戏

    井子棋承载了每个人孩童时的美好时光,小到书本.纸张,大到课桌.墙壁,总能找到井字棋盘的痕迹.今天我们就来实际操作一番,用C语言完成一个简单的井字棋游戏,让我们一起重温美好. 棋盘如下: **功能描述:**棋盘共分为九个格子,一方执"O"为棋,一方执"X"为棋,双方依次选择格子.己方棋子率先连成三子的获胜,若棋盘占满仍未分胜负,则打成平局. 具体功能实现: 1.在页面选择玩家vs玩家,或玩家vs电脑 2.玩家下棋时,输入对应格子的坐标 3.电脑下棋时,使用随机值选择坐

  • JavaScript实现一个带AI的井字棋游戏源码

    最近有一门课结束了,需要做一个井字棋的游戏,我用JavaScript写了一个.首先界面应该问题不大,用html稍微写一下就可以.主要是人机对弈时的ai算法,如何使电脑方聪明起来,是值得思考一下的.开始游戏后,由玩家先行.那么站在计算机的角度,可以对多种情况进行分析,并按照重要程度赋予权值. 情况如下: 1.同一排(行.列.对角线)有且只有两个棋子,并且都是自己的,只要再进一步就能获胜,那么剩下的那个位置权值最高,优先级最大.赋予一级权值. 2.同一排(行.列.对角线)有且只有两个棋子,并且都是对

  • vue实现井字棋游戏

    本文实例为大家分享了vue实现井字棋游戏的具体代码,供大家参考,具体内容如下 之前看react的教程时看到的小游戏,试着用vue做一个.右边的winner提示胜者,还没有胜者时提示下一个棋子的种类.restart按钮点击可重新开始.go to step可跳转到第n步. html: <div id="app"> <ul id="board" class="white normal"> <li class="s

  • C语言实现井字棋游戏

    本文实例为大家分享了C语言实现井字棋游戏的具体代码,供大家参考,具体内容如下 首先,我们需要一个大体的思路,先进行宏观规划,再对细节进行实现. 比如: 1.首先需要一个菜单面板作以修饰,在这个面板上,玩家可以选择进入游戏或者退出游戏. 2.需要一个游戏程序,这个是核心. 差不多就是这两个了,我们可以先把这个写下来,这样也可以方便后面使用,像这样: void Game(); int Menu();//这里Menu之所以用int,是为了用返回值来确定是否退出游戏,并非唯一,也非最佳,读者自己尝试 为

  • C语言实现井字棋游戏(人机对弈)

    井字棋游戏:即三子棋,英文名叫Tic-Tac-Tic,是一种在3*3格子上进行的连珠游戏,和五子棋比较类似,由于棋盘一般不画边线框,格线排成井字故得名. 题目分析 : 要完成该游戏的编写,我们需要先分析出完成整个游戏过程都需要干什么? 1.首先,需要定义出一个3*3的棋盘,根据相关知识,我们可以以二维数组的方式将棋盘表示出来: 2.棋盘定义出来后,需要将棋盘初始化,将3*3二维数组的每一个位置初始化为‘ ’(空格): 3.有了棋盘,我们就可以开始进行下棋了,首先要确定是玩家先下还是电脑先下.在这

  • 用C语言实现井字棋游戏代码

    目录 前言 首先得确定程序实现的功能 直接上代码: 1. 菜单界面 2. 棋盘打印 3. 玩家下棋 4. 电脑下棋(智障下棋版,毫无智能) 5. 判断输赢 搞定 总结 前言 我们都玩过或见过这样一种简单地下棋游戏,两位玩家在一个井字形状的棋盘上,用‘*’和‘#’来下棋,获胜条件是横竖斜任意一列三子成列.那如何在C语言怎么写一个简单地黑框框里运行的井字棋呢,我们在接下来开始从0实施这一工程. 首先得确定程序实现的功能 在写代码时列出需求方便我们后面实现它们. 菜单界面棋盘打印棋子存储采用二维数组.

  • python实现井字棋游戏

    本文实例介绍了python实现井字棋游戏的方法,分享给大家,具体内容如下 windows7下python3.4.0编译运行通过.由于采用了cmd调用,所以与Linux不兼容,无法在Linux下运行. 游戏就是井字棋,小键盘上的数字位置对应棋盘位置. #本游戏python3.4.0下编写调试,只能在windows下运行. import random import subprocess import time #定义函数 def draw_board(the_board): subprocess.c

  • 微信小程序实现的贪吃蛇游戏【附源码下载】

    本文实例讲述了微信小程序实现的贪吃蛇游戏.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: 界面布局 pages/snake/snake/snake.wxml: <!--snake.wxml--> <view class="control" bindtouchstart="tapStart" bindtouchmove="tapMove" bindtouchend="tapEnd">

随机推荐