基于vue框架使用canvas实现井字棋小游戏

引言：最近实现了一个图片上传压缩的功能，使用了canvas，所以学习一下canvas的语法，实现一个井字棋小游戏，这个小游戏可以人人对弈，如果大家有兴趣，可以对代码进行迭代，比如采用极大值极小值搜索法来实现人机对弈或者机机对弈。

废话少说，先看演示效果:点击此处预览效果

1. 创建画布

<div id="app" ><div style="border: solid 1px #000000 ;width: 600px;height: 600px;" @click="getLocation"><canvas id="mycanvas" width="600px" height="600px"></canvas></div><div style="margin: 15px;"><button type="button" @click="drawBoard()" >清空棋盘</button></div></div>

2. 初始画棋盘
首先需要画出四条线，我定义的棋盘大小为600，

drawBoard(){this.clearAll();this.context.beginPath();this.context.moveTo(0, 200);this.context.lineTo(600, 200);this.context.moveTo(0, 400);this.context.lineTo(600, 400);this.context.moveTo(200, 0);this.context.lineTo(200, 600);this.context.moveTo(400, 0);this.context.lineTo(400, 600);this.context.strokeStyle = 'pink';this.context.closePath();this.context.stroke();},

3. 画O

drawO(x,y){this.context.beginPath();this.context.arc(x, y, 60, 0, Math.PI * 2, true);this.context.fillStyle = 'rgba(0,255,0,0.25)'this.context.fill();this.context.closePath();this.context.stroke();},

4. 画X

drawX(x,y){this.context.beginPath();this.context.moveTo(x-40, y-40);this.context.lineTo(x+40, y+40);this.context.moveTo(x+40, y-40);this.context.lineTo(x-40, y+40);this.context.strokeStyle = 'orange';this.context.closePath();this.context.stroke();},

5.将棋子画到棋盘
那么如何将O和X画到每个格子的中心位置呢，我是这样解决的：首先获取鼠标点击位置的坐标，设我的棋盘步长为step=200，这样就可以算出点击任意一个格子的中心点（x,y）：

         let arr_x = parseInt(e.clientX/this.step);let arr_y = parseInt(e.clientY/this.step);let x = arr_x * this.step+(this.step/2);let y = arr_y * this.step+(this.step/2);

例如：鼠标点击坐标为（158,120），那么arr_x=0,arr_y=0，这就代表他点击了第一个格子，第一个格子中心点就为（100,100），以此类推。

6. 判断输赢
如何判断输赢呢，我们都知道三个相同的连成一条线就代表赢，我这里初始化了一个二维数组，二维数组的每一项的值都为零。

//棋盘初始化initBoard() {this.arr = ''let t = new Array()for(let p = 0;p<3;p++){t[p] = new Array()}for(let i=0;i<3;i++){for(let j=0;j<3;j++){t[i][j] = 0}}},

当下棋的时候，这个数组的位置就设置为1或者2，当三个1连成一条线这就代表一方赢，我这里给出一种情况判断输赢，其他情况可以自行完善。

if(this.arr[0][0] == 1 && this.arr[0][1] == 1&& this.arr[0][2] == 1){alert("O方获胜")return}

7. 交换下棋方
如何判断哪一方下棋呢，我定义了一个flag，初始值为true，当一方下完，就将flag设置为false，以此类推，判断一下就可以了。

8. 下完棋后，需要清空棋盘

clearAll(){this.initBoard()//初始化棋盘数组this.context.clearRect(0,0,600,600)//清空画布//重设高度也可以清空画布this.mycanvas.height = 600;this.mycanvas.width = 600;},

此代码仅仅是练习使用，有好多处可以优化的地方，欢迎大家来谈论~

基于vue框架使用canvas实现井字棋小游戏相关推荐

基于Unity设计的井字棋小游戏
资源下载地址:https://download.csdn.net/download/sheziqiong/86871335 资源下载地址:https://download.csdn.net/downl ...
python井字棋_用Python做一个井字棋小游戏
井字棋是一个经典的小游戏,在九宫格上玩家轮流画OXO,当每列或每行或是两个对角成一线时便是获胜. 今天就用Python编写一个井字棋小游戏,与电脑对战. 程序执行画面如下图所示: 程序提供了两种人工智 ...
用Unity3D实现简单的井字棋小游戏
用Unity3D实现简单的井字棋小游戏项目地址井字棋小游戏完成效果图实现思路首先定义游戏的数据部分: /* 井字棋中每一个棋格中的逻辑控制常量,代表这个棋格的状态 */ private co ...
python井字棋游戏人机对战_用Python做一个井字棋小游戏
井字棋是一个经典的小游戏,在九宫格上玩家轮流画OXO,当每列或每行或是两个对角成一线时便是获胜. 今天就用Python编写一个井字棋小游戏,与电脑对战. 程序执行画面如下图所示: 程序提供了两种人工智 ...
python井字棋_python实现井字棋小游戏
本文为大家分享了python实现井字棋小游戏,供大家参考,具体内容如下周五晚上上了python的选修课,本来以为老师是从python的基础语法开始的,没想到是从turtle画图开始,正好补上了我以前 ...
井字棋小游戏代码（Visual Studio）
#include<graphics.h> #include<conio.h> #include<iostream> #include "ImagePng. ...
python如何在前面加井_python入门之井字棋小游戏
引言: 刚学python好几天了,从java到python,基础学起来确实比较容易,语法掌握,基本概念上都比较容易入脑. 唯一比较郁闷的是老想着用java的语法去学python代码,这点还需要后面慢慢 ...
python井字棋小游戏代码_python实现井字棋小游戏
本文为大家分享了python实现井字棋小游戏,供大家参考,具体内容如下周五晚上上了python的选修课,本来以为老师是从python的基础语法开始的,没想到是从turtle画图开始,正好补上了我以前 ...
C语言初学——井字棋小游戏
hello呀!小伙伴们,今天小刘同学要带着大家学习的内容是--井字棋小游戏!!! 在本次学习中,我们将会运用到的主要内容是数组,函数,循环和判断. 当然,本次学习的内容并不困难,希望本次教学结束大家都 ...

基于vue框架使用canvas实现井字棋小游戏

基于vue框架使用canvas实现井字棋小游戏相关推荐

最新文章

热门文章