Vue实现五子棋小游戏
本文实例为大家分享了Vue实现五子棋小游戏的具体代码，供大家参考，具体内容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>五子棋</title>
<script src="./configJS/vue.js"></script>
<script src="./configJS/jQuery 1.10.2.js"></script>
<style>
.fiveInRow {
position: absolute;
width: 100%;
}
.fiveStar {
position: absolute;
display: flex;
width: 542px;
height: 720px;
margin: -24px 65px;
justify-content: space-around;
align-items: center;
}
.starGroup {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.star {
width: 10px;
height: 10px;
border-radius: 50%;
background: black;
}
.boxRow {
position: absolute;
display: flex;
margin: 20px;
border: 1px solid black;
box-sizing: border-box;
}
.box {
width: 45px;
height: 45px;
border: 1px solid black;
box-sizing: border-box;
}
.chessBlock {
position: absolute;
margin: 20px;
}
.chessBox {
position: absolute;
z-index: 9;
width: 42px;
height: 42px;
display: flex;
justify-content: center;
align-items: center;
}
.chess {
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid black;
box-sizing: border-box;
}
.overCover {
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 632px;
height: 632px;
color: red;
z-index: 11;
}
.btnGroup {
position: absolute;
top: 700px;
left: 235px;
display: flex;
}
.btnGroup button {
margin: 0 10px;
}
</style>
</head>
<body>
<div class="fiveInRow">
<!-- 棋盘五星层 -->
<div class="fiveStar">
<div class="starGroup">
<div class="star"></div>
<div class="star"></div>
</div>
<div class="star"></div>
<div class="starGroup">
<div class="star"></div>
<div class="star"></div>
</div>
</div>
<!-- 落子层 -->
<div class="chessBlock"></div>
<!-- 棋盘网格层 -->
<div class="boxRow" @click="downChess($event)"></div>
<!-- 功能BTN -->
<div class="btnGroup">
<button @click="giveUp()">认输</button>
<button @click="regret()">悔棋</button>
<button @click="openNew()">重开</button>
</div>
</div>
</body>
<script>
new Vue({
el: ".fiveInRow",
data: {
boxSize: 15, //棋盘大小
chessType: "black", //棋子类型,默认为黑
blackList: [], //黑子列表
whiteList: [], //白子列表
totleNum: 0, //落子总数
isOver: 0 //游戏是否结束
},
created() {
this.createBox()
},
watch: {
totleNum(val) {
// 监听棋盘落子数
let boxRow = $(".boxRow")[0];
let overCover = `<div class="overCover">
<h1 style="color:red;">棋盘满了,下一把吧!!!</h1>
</div>`;
if (val === this.boxSize * this.boxSize) {
boxRow.innerHTML += overCover;
this.isOver = 1;
}
}
},
methods: {
createBox() {
// 创建棋盘网格
let box = `<div class="box"></div>`;
let boxRow = $(".boxRow")[0];
for (let i = 1; i < this.boxSize; i++) {
let boxCloum = `<div class="boxCloum">`;
for (let j = 1; j < this.boxSize; j++) {
boxCloum += box;
}
boxRow.innerHTML += boxCloum + `</div>`;
}
},
downChess(ev) {
// 判断落子
if (!this.isOver) {
this.down(ev);
} else {
let overCover = $(".overCover")[0];
let newSpan = `<h2>游戏已经结束了,请重新开始!</h2>`;
if (overCover.children.length <= 3) overCover.innerHTML += newSpan;
}
},
down(ev) {
// 落子
let chessBlock = $(".chessBlock")[0];
let layerX = this.getLayer(ev.layerX);
let layerY = this.getLayer(ev.layerY);
if (layerX >= 0 && layerY >= 0) {
let chessTemp = `<div
class="chessBox" style="left:${layerX-21}px;top:${layerY-21}px;"
><span class="chess" style="background:${this.chessType};"></span></div>`;
chessBlock.innerHTML += chessTemp;
this.totleNum++;
if (this.chessType === "black") {
this.blackList.push([layerX, layerY]);
this.isFive(this.blackList);
this.chessType = "white";
} else {
this.whiteList.push([layerX, layerY]);
this.isFive(this.whiteList);
this.chessType = "black";
}
} else {
console.log("瞅哪呢?看准点下!");
}
},
getLayer(val) {
// 获取落点相对位置
if (val % 45 <= 20) {
return val - val % 45;
} else if (val % 45 >= 25) {
return val - val % 45 + 45;
} else {
return -1;
}
},
isFive(list) {
// 判断是否落成五子
this.isFiveInStraight(list, 0, 1);
this.isFiveInStraight(list, 1, 0);
this.isFiveInSlope(list, -1);
this.isFiveInSlope(list, 1);
},
isFiveInStraight(list, a, b) {
// 判断五子是否在水平线或垂直线
let listSGT = {};
for (let i = 0; i < list.length; i++) {
if (!listSGT[list[i][b]]) {
listSGT[list[i][b]] = [list[i][a]];
} else {
listSGT[list[i][b]].push(list[i][a]);
this.isFiveNearby(listSGT[list[i][b]]);
}
}
},
isFiveInSlope(list, slope) {
// 判断五子是否在正斜线或反斜线
let listSLP = {};
for (let i = 0; i < list.length; i++) {
let b = list[i][1] - slope * list[i][0];
if (!listSLP[b]) {
listSLP[b] = [list[i][0]];
} else {
listSLP[b].push(list[i][0]);
this.isFiveNearby(listSLP[b]);
}
}
},
isFiveNearby(arr) {
// 判断五子是否相邻,连成一线
let idx = 0;
let player = this.chessType === "black" ? "Black(黑)" : "White(白)";
if (arr.length >= 5) {
arr.sort((a, b) => a - b)
for (let i = 1; i < arr.length; i++) {
idx = arr[i] - arr[i - 1] === 45 ? idx + 1 : 0;
if (idx === 4) this.gameOver(player);
}
}
},
gameOver(player) {
// 游戏结束
console.log(player + " Win!!!");
let boxRow = $(".boxRow")[0];
let overCover = `<div class="overCover"><h1>${player} Win!!!</h1></div>`;
boxRow.innerHTML += overCover;
this.isOver = 1;
},
giveUp() {
// 认输投降
let player = this.chessType === "black" ? "White(白)" : "Black(黑)";
if (!this.isOver) this.gameOver(player);
},
regret() {
// 悔棋
if (this.totleNum > 0 && !this.isOver) {
let chessBlock = $(".chessBlock")[0];
chessBlock.removeChild(chessBlock.children[--this.totleNum]);
if (this.chessType === "black") {
this.whiteList.pop();
this.chessType = "white";
} else {
this.blackList.pop();
this.chessType = "black";
}
} else {
console.log("一个子都没有,悔个鸡儿悔!");
}
},
openNew() {
// 重新开始
let chessBlock = $(".chessBlock")[0];
let boxRow = $(".boxRow")[0];
for (let i = this.totleNum - 1; i >= 0; i--) {
chessBlock.removeChild(chessBlock.children[i]);
}
if (boxRow.children[14]) boxRow.removeChild(boxRow.children[14]);
this.chessType = "black";
this.blackList = [];
this.whiteList = [];
this.totleNum = this.isOver = 0;
}
}
})
</script>
</html>
主要思路
1.画棋盘
小雨采用了最直接, 最暴力的方式, 就是把一堆小方块堆起来, 加上边框, 棋盘有了…什么? 你问我那五个点怎么画上去的? 页面上试出来的.
2.落子
落子是比较讲究的. 首先获取鼠标点击事件中的layerX, layerY, 这是鼠标点击的相对位置, 在本例中是比较好用的. 然后通过 getLayer() 函数获取点击点最近的网格点, 如下图, 鼠标点击在红框内则落子. 最后在相比网格点半个棋子位的地方落子就OK了.
3.判断获胜条件
isFive(list) {
// 判断是否落成五子
this.isFiveInStraight(list, 0, 1);
this.isFiveInStraight(list, 1, 0);
this.isFiveInSlope(list, -1);
this.isFiveInSlope(list, 1);
},
isFiveInStraight(list, a, b) {
// 判断五子是否在水平线或垂直线
let listSGT = {};
for (let i = 0; i < list.length; i++) {
if (!listSGT[list[i][b]]) {
listSGT[list[i][b]] = [list[i][a]];
} else {
listSGT[list[i][b]].push(list[i][a]);
this.isFiveNearby(listSGT[list[i][b]]);
}
}
},
isFiveInSlope(list, slope) {
// 判断五子是否在正斜线或反斜线
let listSLP = {};
for (let i = 0; i < list.length; i++) {
let b = list[i][1] - slope * list[i][0];
if (!listSLP[b]) {
listSLP[b] = [list[i][0]];
} else {
listSLP[b].push(list[i][0]);
this.isFiveNearby(listSLP[b]);
}
}
},
isFiveNearby(arr) {
// 判断五子是否相邻,连成一线
let idx = 0;
let player = this.chessType === "black" ? "Black(黑)" : "White(白)";
if (arr.length >= 5) {
arr.sort((a, b) => a - b)
for (let i = 1; i < arr.length; i++) {
idx = arr[i] - arr[i - 1] === 45 ? idx + 1 : 0;
if (idx === 4) this.gameOver(player);
}
}
},
这里主要有4个函数: isFive(), isFiveInStraight(), isFiveInSlope() 和 isFiveNearby().
isFive(): 这个只是调用后续函数的函数, 它将获胜条件分成了4类: 横线获胜, 竖线获胜, 斜率为1的斜线获胜 和 斜率为-1的斜线获胜.
isFiveInStraight(): 判断 横线获胜 和 竖线获胜 的功能函数. 这里的主要难点就是listSGT 对象的创建, 能否想到要用对象来实现落子的分类, 是这个函数的关键. 在 横线获胜 中, 将落子的layerY 坐标作为对象的属性, 将有相同layerY 坐标的棋子的layerX 组成一个数组作为属性的值. 竖线获胜 同理.
isFiveInSlope(): 判断 斜率为1的斜线获胜 和 斜率为-1的斜线获胜 的功能函数. 与 isFiveInStraight() 不同的是, 在创建listSLP 对象时, 以直线函数 y = k x + b y = kx+by=kx+b 中截距(b) 作为对象的属性, 以落子的layerX 坐标组成的数组作为属性的值, 其实用落子的layerY坐标也是一样的.
isFiveNearby(): 判断五子是否相邻的功能函数. 此函数直接获取上两个函数中所创建对象的值, 也就是落子坐标组成的数组. 首先判断数组长度是否大于5, 毕竟能少走一步是一步嘛. 之后将数组从小到大排序, 计算相邻两位的差, 并记录. 连续记录4次获胜.
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
vue实现五子棋游戏
本文实例为大家分享了vue实现五子棋游戏的具体代码,供大家参考,具体内容如下 思路 1.vue实现五子棋 空棋盘开局. 画网格:网格有 15 行 15 列,共有 225 个交叉点 黑先.白后,交替下子,每次只能下一子 胜负判定 按照简单的规则,从当前下子点位的方向判断().如果有一个方向满足连续5个黑子或白子,游戏结束. 2.支持dom和canvas切换 判断浏览器是否支持canvas: false: 不支持 切换dom方式 true: 支持 使用canvas 3.实现悔棋功能 4.实现撤销悔
-
VUE+Canvas实现简单五子棋游戏的全过程
前言 在布局上,五子棋相比那些目标是随机运动的游戏,实现起来相对简单许多,思路也很清晰,总共分为: (1)画棋盘: (2)监听点击事件画黑白棋子: (3)每次落子之后判断是否有5子相连,有则赢. 最复杂的恐怕就是如何判断五子棋赢了,那么就先从简单的开始,画个棋盘吧~ 1.画棋盘 棋盘很简单,我们画个15*15的棋盘,横线竖线相交错: drawCheckerboard() { // 画棋盘 let _this = this; _this.ctx.beginPath(); _this.ctx.fil
-
Vue实现五子棋小游戏
本文实例为大家分享了Vue实现五子棋小游戏的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>五子棋</title> <script src="./configJS/vue.js"></script> <script src=&q
-
教你用Vue基础语法来写一个五子棋小游戏
目录 前言 1.绘制游戏区域和游戏元素 2.点击事件 3.悔棋功能 4.判断胜负 写在最后 前言 在之前的文章中,用JS的基础语法写了一个五子棋小游戏# 如何使用原生JS,快速写出一个五子棋小游戏今天用Vue的基础语法来写一个,感受一下两者的区别..至于怎么判断胜负,我还是把上篇文章的方法复制粘贴过来了,如果想了解这个逻辑,可以看我之前的那篇文章. 1.绘制游戏区域和游戏元素 开始写代码之前,一定要记得先导包Vue文件.棋盘还是用二维数组来渲染,可以使用Array(15).fill(0).map
-
java实现五子棋小游戏
java实现五子棋小游戏 package Gomoku; import java.awt.Toolkit; import javax.swing.JFrame; public class GomokuFrame extends JFrame { //定义一个操作面板 OperatorPane op=null; public GomokuFrame() { //设置名称 this.setTitle("五子棋"); //设置窗口大小 this.setSize(510,510); //设置窗
-
C语言实现五子棋小游戏
首先我们先来看一个稍微简单些的实现方式: #include <stdio.h> #include <stdlib.h> #define N 15 int chessboard[N + 1][N + 1] = { 0 }; int whoseTurn = 0; void initGame(void); void printChessboard(void); void playChess(void); int judge(int, int); int main(void) { init
-
python实现五子棋小游戏
本文实例为大家分享了python实现五子棋小游戏的具体代码,供大家参考,具体内容如下 暑假学了十几天python,然后用pygame模块写了一个五子棋的小游戏,代码跟有缘人分享一下. import numpy as np import pygame import sys import traceback import copy from pygame.locals import * pygame.init() pygame.mixer.init() #颜色 background=(201,202
-
Android自定义View实现五子棋小游戏
本文实例为大家分享了Android实现五子棋小游戏的具体代码,供大家参考,具体内容如下 配图: 代码: package com.example.fiveson; import java.util.LinkedList; import java.util.List; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphic
-
阿望教你用vue写扫雷小游戏
前言 话说阿望还在大学时,某一天寝室突然停网了,于是和室友两人不约而同地打开了扫雷,比相同难度下谁更快找出全部的雷,玩得不亦乐乎,就这样,扫雷伴我们度过了断网的一周,是整整一周啊,不用上课的那种,可想而知我们是有多无聊了. 这两天临近过年了,该放假的已经放假了,不该放假的已经请假了,公交不打挤了,地铁口不堵了,公司也去了大半部分的人了,就留阿望这种不得不留下来值班的人守着空荡荡的办公室了,于是,多年前那种无所事事的断网心态再次袭来,于是,想玩扫雷的心再次蹦跶出来,于是,点开了电脑的附件,于是,发
-
js实现双人五子棋小游戏
本文实例为大家分享了js实现双人五子棋小游戏的具体代码,供大家参考,具体内容如下 这是自己自学js的时候,在网上找的js源码,由于是自学,花了数小时才把这个源码大致弄明白. 大致算法 自定义棋盘规格,直接在棋盘建新div就可以,长度宽度用计算就可以了.下棋,在div里再建class,这里要给每个class标一个site值,由site值写出该棋子竖直方向和横向的坐标,由坐标可以写出棋子胜利的条件.而棋子的黑白走是用标识符,偶的标识符则是白棋子的class.奇的标识符则是黑棋子的class. ps
-
js+canvas实现五子棋小游戏
本文实例为大家分享了js+canvas实现五子棋小游戏的具体代码,供大家参考,具体内容如下 效果展示: 源码展示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>五子棋</title> <style> * { margin: 0; padding: 0; } body { margin-to
-
vue实现打地鼠小游戏
本文实例为大家分享了vue实现打地鼠小游戏的具体代码,供大家参考,具体内容如下 效果图如下: 代码如下: <template> <div class="game"> <h2>打地鼠游戏</h2> <div class="wraper"> <div class="item" v-for="n in TOTAL" :key="n"> <