`

React学习之围棋记谱本制作(二)棋盘、棋子、交替落子

阅读更多
  与儿子一起学围棋,上网上找,发现好用的记谱本软件特别少,打算自己做一个。不知能不能克服惰性,完成这个目标。
  千里之行,始于足下,今天完成了基础工作:棋盘、棋子组件,并完成了交替落子功能。是React基本功能的很好示范,代码贴一下。下一步就是多组件的状态管理、共享了。
  这里刚开始使用的是全局变量来管理状态,后来发现这是一个不太对路的方法,后来改用了全局的一个状态管理类来统一管理状态、处理状态变化、订阅监听、激活事件,后面的文章会介绍。

一、组件go.js
  想出了一个简单的、避免反复修改DOM的办法,将所有棋子组件在初始化都生成,通过状态控制其是否显示、响应点击事件。
var React = require('react');
var ReactDOM = require('react-dom');
require('../../../css/go.css');

//全局变量
window.gGoConfig = new GoConfig();

class GoConfig{
	constructor(){
		this.index=0;
		this.black=true;
	}
	
	inc(){
		this.index++;
		this.black=!this.black;
		console.log(this);
	}
}

//围棋桌面
class GoDesk extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            refresh: false
        };
    }

    render() {
        var self = this;
        this.state.refresh=false;
        var pieces = [];
        for (var i=0; i<19*19; i++){
        	pieces.push(
        		<GoPiece color={i % 2==0 ? 'white':'black'} id={'go'+(i+1)} key={'go'+(i+1)}/>
        	);
        }
        return <div className="go-desk">
        	<div className="go-opr">
	        	<GoBtn title="黑走"/>
	        	<GoBtn title="白走"/>
	        	<GoBtn title="黑子"/>
	        	<GoBtn title="白子"/>
        	</div>
        	<div className="go-board">
				{pieces}		        		
        	</div>
        </div>;
    }
}

//可以控制单个按钮的状态
class GoBtn extends React.Component{
	constructor(props){
		super(props);
		this.state={
			active:false,
		}
		this.clickHandle=this.clickHandle.bind(this);
	}
	
	clickHandle(event){
		this.setState({active:!this.state.active});
		console.log(this.state);
	}
	//<img src=img/{this.state.png} />
	render(){
		var className = "btn btn-default btn-sm";
		if(this.state.active==true)className = className+" active";
		return <button className={className} onClick={this.clickHandle}>{this.props.title}</button>;
	}
}

//使用bootstap的按钮组,可以不用控制按钮的状态,较为方便,还没有完全走通
class GoBtns extends React.Component{
	constructor(props){
		super(props);
		this.state={};
		this.clickHandle=this.clickHandle.bind(this);
	}
	
	clickHandle(idx){
		this.setState({index:idx});
	}
	render(){
		return <div class="btn-group" data-toggle="buttons">
				  <label class="btn btn-primary active"><input type="checkbox" autocomplete="off" checked />黑走(pre-checked)</label>
				  <label class="btn btn-primary"><input type="checkbox" autocomplete="off" />白走</label>
				  <label class="btn btn-primary"><input type="checkbox" autocomplete="off" />黑子</label>
				  <label class="btn btn-primary"><input type="checkbox" autocomplete="off" />白子</label>
				</div>;
	}
}

//棋子
class GoPiece extends React.Component{
	constructor(props){
		super(props);
		this.state={
			showNum:false,
			num:0,
			color:props.color,//or w
			current:false,
			visibility:'hidden',
		}
		
		//设置this,很重要
		this.handleClick=this.handleClick.bind(this);
	}
		
	handleClick(event){
		this.setState({
			visibility:this.state.visibility=='hidden'?'visible':'hidden',
			color:window.gGoConfig.black==true?'black':'white',
			});
		//console.log('click, visibility='+this.state.visibility);
		window.gGoConfig.inc();
	}
	
	render(){
		var className="go-piece go-piece-"+this.state.color;
		if (this.state.visibility=='hidden') className = className+" go-piece-hidden";
		//console.log(className);
		return <div className={className} id={this.props.id} onClick={this.handleClick}>
			<span style={{visibility:this.state.visibility}}>{this.state.num=window.gGoConfig.index}</span>
		</div>;// style={{visibility:this.state.visibility}}
	}
}

ReactDOM.render(
  <GoDesk />,
  document.getElementById('go-container')
);


二、样式文件go.css
.go-desk{
	background-image:url(../img/go/bk.png);
	width:100%;
	height:100%;
	padding:20px;
}

.go-opr{
	height:30px;
	text-align:center;
	margin-bottom:10px;
}

.go-board{
	width:800px;
	height:800px;
	margin:0 auto;
	background-image:url(../img/go/board.png);
	background-repeat:no-repeat;
	padding:20px;
}

.go-piece{
	width:40px;
	height:40px;
	float:left;
	background-image:url(../img/go/piece.png);
	text-align:center;
	line-height:40px;
	vertical-align:middle;
	font-size:20px;
}
.go-piece span{
}
.go-piece-white{
	background-position:-40px 0;
	color:black;
}
.go-piece-black{
	background-position:0 0;
	color:white;
}
.go-piece-hidden{
	background-image:none;

}


三、效果




四、全部代码
  全部代码下载,请看系列文章第一部分,或点击:http://dl.iteye.com/topics/download/536961c7-38a6-38af-b034-c48034f2aa91
  • 大小: 411.8 KB
分享到:
评论
1 楼 JsonLiangyoujun 2017-02-28  
曾经一时兴起写了个五子棋的(完全自学前端),当初不会前端(我是搞后台开发的),还是搞出来了。算法可能没你这个复杂吧,只会五子棋,不会围棋不清楚规则。

相关推荐

    React学习之围棋记谱本制作(七)总结

    在本篇“React学习之围棋记谱本制作(七)总结”中,我们将深入探讨如何利用React技术栈创建一个功能完善的围棋记谱本应用。React是Facebook开发的一个用于构建用户界面的JavaScript库,尤其适用于构建单页应用。在...

    React学习之围棋记谱本制作(一)环境准备

    在本文中,我们将探讨如何利用React技术来创建一个围棋记谱本应用。React是Facebook推出的一个用于构建用户界面的JavaScript库,尤其适用于构建组件化的、交互式的Web应用。在这个项目的第一部分,我们将专注于环境...

    React学习之围棋记谱本制作(四)前端开发初步完成

    在本项目中,“React学习之围棋记谱本制作(四)前端开发初步完成”是一个教程,旨在教授如何使用React框架构建一个围棋记谱本的前端应用。从给出的标签“源码”和“工具”来看,我们可以推断这个教程会涉及实际的...

    React学习手册.zip

    本React学习手册将深入探讨React的核心概念和实战技巧,帮助你从入门到精通。 首先,React的核心概念包括组件化开发。组件是React的基础单元,可以理解为可复用的代码块,它们像乐高积木一样组合起来构建整个应用。...

    公司一个大师用JS写的围棋

    通常,可以使用二维数组来代表19x19的围棋棋盘。每个单元格可以存储当前的棋子颜色(黑或白)或空。 2. **棋子放置**:玩家每一步都会在棋盘上放置一个棋子。这需要一个函数来处理棋子的放置逻辑,包括检查该位置...

    React学习手册完整版带目录.zip

    "React学习手册完整版带目录.zip"包含了深入学习React所需的所有资料,包括基本概念、核心原理以及高级技巧。 首先,手册的目录可能会涵盖以下关键知识点: 1. **React基础知识**:介绍React的基本概念,如JSX语法...

    React 学习之道

    React 学习之道 ==================================================

    react学习课件.rar

    这个"react学习课件.rar"文件包含的"react学习课件.docx"文档,很可能是从哔哩哔哩上的一个React教程课程中提取出的学习资料。在React的世界里,有很多关键概念和技术值得深入探讨。 首先,React的核心理念是组件化...

    React学习资源汇总.pdf

    React学习资源汇总.pdf

    React学习路线脑图

    React学习路线脑图

    react-react学习心得

    在深入探讨React技术栈之前,我们首先需要理解什么是React。React是Facebook开发的一款用于构建用户界面的JavaScript库,尤其擅长于构建单页应用程序(SPA)。它主要关注视图层,但也可以与各种库和框架(如Redux、...

    React学习思维脑图

    React 学习思维脑图,有助于更好的学习react

    react入门学习文档

    React入门学习文档 React 是一个用于构建用户界面的 JavaScript 库,是一个数据驱动的 MVVM 模式的框架。学习 React 需要了解其主要特点、JSX 元素渲染、生命周期、组件事件等知识点。 React 介绍 React 是一个...

    weiqi-react:基于React的网页围棋应用

    【标题】"weiqi-react"是一个以React技术为核心的网页围棋应用项目,旨在提供一个用户友好的在线围棋对弈平台。React是Facebook开发的JavaScript库,用于构建用户界面,特别是单页应用程序。它采用组件化的方式,...

    react中文学习资料

    React中文学习资料提供了丰富的信息和教程,帮助开发者理解React的基本概念、核心原理和编程方法。 在React的学习过程中,首先需要了解的基本要求包括Node.js环境以及npm(Node Package Manager)。Node.js是一个...

    元宇宙初探React+Three.js制作3D全景漫游.zip

    元宇宙初探React+Three.js制作3D全景漫游.zip元宇宙初探React+Three.js制作3D全景漫游.zip元宇宙初探React+Three.js制作3D全景漫游.zip元宇宙初探React+Three.js制作3D全景漫游.zip元宇宙初探React+Three.js制作3D...

    React 进阶之路

    在React的世界里,进阶之路意味着深入理解其核心概念、最佳实践以及高级技巧。React作为一个流行的JavaScript库,用于构建用户界面,尤其适用于单页应用程序(SPA)。本篇将围绕React的多个关键知识点展开,帮助...

    React 官方学习模板

    "React 官方学习模板"是ReactJs官方提供的一套教程项目,旨在帮助开发者系统地学习和理解React的基本概念、API以及最佳实践。 这个模板项目,"react-tutorial-master",包含了从基础到进阶的所有教程内容,可以帮助...

    react 学习笔记

    本节笔记将记录 React 学习过程中的关键知识点。 一、React 组件生命周期 React 组件生命周期是指组件从创建到销毁的整个过程。生命周期方法是指在组件生命周期的不同阶段执行的函数。了解生命周期方法可以帮助...

    React零基础自学手册.pdf

    ### React.js零基础自学核心知识点概览 #### 一、React.js简介与基本概念 - **React.js**:一种用于构建用户界面的JavaScript库,特别适用于构建单页应用(SPA)。 - **特点**:虚拟DOM、组件化设计、单向数据流。 #...

Global site tag (gtag.js) - Google Analytics