react-konva-demo
简介
在线例子 以create-react-app作为脚手架,通过react+redux+react-konva 写一个简单的五子棋游戏,分享一下react-konva的实际使用例子 (没有人机对战功能哟)
react-konva是一个react组件化的canvas库,来绘制五子棋 redux处理游戏中的数据流
思路介绍
把五子棋游戏分为两个部分,一个是设定部分，另外一部分就是游戏本身。 将五子棋游戏本身分解为三层，即分解为三个组件 底层是棋盘,包括棋盘颜色与网格的绘制 中间层是绘制棋子在棋盘上的状态的 最顶层是操作层负责落子以及绘制光标状态。 五子棋状态储存在一个二维数组中,通过判断值是否大于0判断是否已经落子
棋盘绘制
// src/components/Board.js
import React,{Component} from 'react';
import {Shape, Group, Rect} from 'react-konva';
export default class Board extends Component {
constructor(args){
super(...args)
//绑定上下文
this._grid = this._grid.bind(this);
}
//绘制网格的函数
_grid(context){
/*fill the board */
context.beginPath();
context.fillStyle = "#976B42"
context.fill();
context.closePath();
let col= 0, row= 0,
{ width,height, gridSize } = this.props;
col= Math.ceil(width/gridSize);
row= Math.ceil(height/gridSize);
//绘制列
for(let i= 0; i<= col; i++) {
context.beginPath();
context.moveTo(gridSize*i,0);
context.lineTo(gridSize*i,height);
context.stroke();
context.closePath();
}
//绘制行
for(let j= 0; j<= row; j++){
context.beginPath();
context.moveTo(0,gridSize*j);
context.lineTo(width,gridSize*j);
context.stroke();
context.closePath();
}
}
render(){
let { width,height} = this.props;
console.log(this.props)
return (
<Group>
<Rect
fill = {"#fed386"}
width= {width}
height= {height}
strokeWidth= {2}
stroke={ 'black'}
/>
<Shape
x= {0}
y= {0}
width= {width}
height= {height}
strokeWidth= {2}
sceneFunc = {this._grid}
stroke={ 'black'}
/>
</Group>
)
}
}Rect是konva中绘制矩形的控件, Shape是绘制图形的控件即绘制自定义控件通过sceneFunc函数传入context进行自定义绘制
棋子绘制
import React ,{Component} from 'react';
import {Shape} from 'react-konva';
export default class ChessDisplay extends Component {
constructor(props){
super(props)
this._drawChess = this._drawChess.bind(this);
}
_drawChess(context){
const {chessStore,gridSize,cheeSize} = this.props;
if(!chessStore.hasOwnProperty('length')){
throw Error("must be a valid array");
}
//需要初始化数组,
//type 1 白棋 2 黑棋
for(let i = 0; i < chessStore.length; i++){
for(let j = 0; j < chessStore[i].length; j++){
if(chessStore[i][j] >= 1){
if(chessStore[i][j] === 1){
context.fillStyle = "white";
}
if(chessStore[i][j] === 2)
{
context.fillStyle = "black";
}
context.beginPath();
/*context.arc(x,y,r,sAngle,eAngle,counterclockwise);*/
context.arc(i*gridSize,j*gridSize,cheeSize,0,2*Math.PI);
context.fill();
context.closePath();
}
}
}
}
render(){
let {width, height} = this.props;
return (
<Shape
x= {0}
y= {0}
width= {width}
height= {height}
strokeWidth= {2}
sceneFunc = {this._drawChess}
stroke={ 'black'}
/>
)
}
}落子组件
import React, {Component} from 'react';
import {Shape, Rect, Circle, Group} from 'react-konva';
import PropTypes from 'prop-types'
export default class HandleChess extends Component {
static propTypes=({
chess:PropTypes.array,
addChess:PropTypes.func,
endChess:PropTypes.func,
turn:PropTypes.number
})
constructor(props){
super(props)
this.__handleChess = this._handleChess.bind(this);
this._pointer = this._pointer.bind(this);
this.state = {
pointerX:null,
pointerY:null
}
}
_handleChess(){
let stage = this.props.getStage().getStage(),mousePos,x,y,pointX,pointY,chess,winner,
{chessStore, addChess, endChess, turn, isBegin, setWinner} = this.props;
if(!isBegin){
return
}
const gridSize = 50 ;
mousePos= stage.getPointerPosition();
x = mousePos.x,
y = mousePos.y;
pointX = mousePos.x > gridSize ? mousePos.x/gridSize :1 ;
pointY = mousePos.y > gridSize ? mousePos.y/gridSize :1;
pointX = Math.floor(mousePos.x % gridSize >= 25 ? ++pointX : pointX);
pointY = Math.floor(mousePos.y % gridSize >= 25 ? ++pointY : pointY);
/*add Chess*/
if(chessStore[pointX]&&!chessStore[pointX][pointY]){
chess = {
x:pointX,
y:pointY,
type:turn,
}
if(pointX > 0 && pointY > 0){
addChess(chess)
}
try{
if(this._isWin(chessStore,chess)){
if(chess.type === 1 ){
winner = "白棋"
setWinner(1)
}
if(chess.type ===2 ){
winner = "黑棋"
setWinner(2)
}
alert(`${winner}胜利,游戏结束`)
endChess();
}
}catch(e){
console.log(e)
}
}
}
//扫描游戏是否已经结束了
_isWin(store,chess){
let pointX = chess.x,
pointY = chess.y,
type = chess.type,
count = 0 ;
//扫描行
for(let i = pointX - 5; i <= pointX + 5; i++){
if(i<=0) {
continue;
}
if(type === store[i][pointY]){
count++;
}
if(count === 5){
return 1
}
if(i + 1 == store.length){
break;
}
}
//清空count
count = 0 ;
//扫描列
for(let j = pointY - 5; j<= pointY + 5; j++){
if(j<=0) {
continue;
}else{
if(type === store[pointX][j]){
count++;
}
}
if(count === 5){
return 1
}
if(j + 1 == store[pointX].length){
break;
}
}
//清空count
count = 0 ;
//扫描右对称轴
for(let i = pointX - 5, j = pointY - 5;i <= pointX + 5; i++,j++){
if(i <= 0 || j<= 0) {
continue;
}else{
if(type === store[i][j]){
count++;
}
}
if(count === 5){
return 1
}
if(i + 1 == store.length || j + 1 == store[i].length){
break;
}
}
//清空count
count = 0 ;
//扫描左对称轴
for(let i = pointX + 5, j = pointY +5; i>=pointX - 5; i--,j--){
if(i + 1 >= store.length || j + 1 >= store[i].length) {
continue;
}else{
if(type === store[i][j]){
count++;
}
}
if(count === 5){
return 1
}
if(i <= 0 || j<= 0){
break;
}
}
return 0;
}
/*绘制一个跟随光标的棋子*/
_pointer(){
let stage = this.props.getStage().getStage(),
mousePos = stage.getPointerPosition();
this.setState({
pointerX: mousePos.x,
pointerY: mousePos.y
})
}
/*父组件需要传入stage？*/
render(){
let winWidth= 800, winHeight= 800;
const {turn, cheeSize} = this.props;
let {pointerX, pointerY} = this.state;
return (
<Group>
{this.props.isBegin && pointerX && pointerY ?
<Circle
x = {pointerX}
y = {pointerY}
fill = {turn===1? "white" : "black"}
radius = {20}
/>
:null
}
<Rect
x = {0}
y = {0}
height = {winHeight}
width = {winWidth}
onClick = {this.__handleChess}
onMousemove = {this._pointer}
/>
</Group>
);
}
}