- 浏览: 5159018 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
silence19841230:
先拿走看看
SpringBoot2.0开发WebSocket应用完整示例 -
wallimn:
masuweng 写道发下源码下载地址吧!三个相关文件打了个包 ...
SpringBoot2.0开发WebSocket应用完整示例 -
masuweng:
发下源码下载地址吧!
SpringBoot2.0开发WebSocket应用完整示例 -
masuweng:
SpringBoot2.0开发WebSocket应用完整示例 -
wallimn:
水淼火 写道你好,我使用以后,图标不显示,应该怎么引用呢,谢谢 ...
前端框架iviewui使用示例之菜单+多Tab页布局
与儿子一起学围棋,上网上找,发现好用的记谱本软件特别少,打算自己做一个。不知能不能克服惰性,完成这个目标。
千里之行,始于足下,今天完成了基础工作:棋盘、棋子组件,并完成了交替落子功能。是React基本功能的很好示范,代码贴一下。下一步就是多组件的状态管理、共享了。
这里刚开始使用的是全局变量来管理状态,后来发现这是一个不太对路的方法,后来改用了全局的一个状态管理类来统一管理状态、处理状态变化、订阅监听、激活事件,后面的文章会介绍。
一、组件go.js
想出了一个简单的、避免反复修改DOM的办法,将所有棋子组件在初始化都生成,通过状态控制其是否显示、响应点击事件。
二、样式文件go.css
三、效果
四、全部代码
全部代码下载,请看系列文章第一部分,或点击:http://dl.iteye.com/topics/download/536961c7-38a6-38af-b034-c48034f2aa91
千里之行,始于足下,今天完成了基础工作:棋盘、棋子组件,并完成了交替落子功能。是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
评论
1 楼
JsonLiangyoujun
2017-02-28
曾经一时兴起写了个五子棋的(完全自学前端),当初不会前端(我是搞后台开发的),还是搞出来了。算法可能没你这个复杂吧,只会五子棋,不会围棋不清楚规则。
发表评论
-
gradle编译错误:Could not find method compile() for arguments
2020-09-19 10:50 18484编译(IDEA+Gradle)一个别人的工程,出现一个 ... -
netty心跳检查之UDP篇
2019-09-15 08:50 2391部分UDP通信场景中,需要客户端定期发送心跳信息,以获取终 ... -
解决tomcat部署两个SpringBoot应用提示InstanceAlreadyExistsException
2019-06-30 11:49 3385两个SpringBoot应用部署在一个Tomcat中,单独 ... -
Eclipse配置MyBatis代码自动化功能
2019-06-29 10:16 17681.安装插件 Eclipse中,Help->Ecli ... -
vue.js中使用qrcode生成二维码
2019-05-20 00:00 7654一、安装包 npm install qrcodejs2 --s ... -
MySQL插入数据报错: Incorrect string value: '\xFD\xDE'
2019-03-31 23:19 1240我MySQL数据库用的uft-8字符集,插入数据一直很正常 ... -
vue自定义组件并双向绑定属性
2019-03-08 22:46 3255做了两个子组件,原理基本一样,一个是使用原生的select ... -
vue-router简单示例
2019-03-05 00:32 1150写个基本完整、稍有借鉴意义的示例,防止自己忘记。 &l ... -
“联通充值系统繁忙”轻松应对
2019-02-06 11:03 3973大过年的,联通充个值一直报“充值系统繁忙”。昨天晚上试了几 ... -
electron.js数据库应用---导航菜单(element-ui+mysql)
2019-02-05 21:33 2364一、环境搭建 略, ... -
electron.js数据库应用---入门(mysql+element-ui)
2019-01-27 23:19 7492我的机器:Windows10,64 ... -
SpringMVC 在controller层中注入成员变量request,是否线程安全
2018-12-17 21:17 2747@RestController public class ... -
VueJS 组件参数名命名与组件属性转化
2018-12-03 00:00 2073转自:https://www.cnblogs.com/meiy ... -
vue-resource拦截器实现token发送及检验自动化
2018-11-16 22:38 3077用了很长时间vue-resource,最近思考$http发 ... -
element-ui试用手记
2018-10-29 20:25 1742element-ui、iviewui都以vue.js为基础 ... -
iviewui中表格控件中render的使用示例
2018-07-07 16:46 9785示例了如何在表格中显示按钮,如何将代码转化为文字。 i ... -
Tomcat错误“Alias name tomcat does not identify a key entry”解决
2018-07-05 21:39 6566申请到了阿里云的证书后,下载、按照说明生成jks格式证书、 ... -
阿里云免费证书“fileauth.txt内容配置错误”解决
2018-07-05 20:43 5296最近研究微信小程序开发,上阿里云申请了个证书,使用文件验证 ... -
springboot2.0跨域配置
2018-07-04 22:11 5283springboot2.0跨域配置: 一、代码 ... -
微信小程序使用code换openid的方法(JAVA、SpringBoot)
2018-07-01 21:52 10398微信小程序序的代码中提示,使用code换取openid,但 ...
相关推荐
在本篇“React学习之围棋记谱本制作(七)总结”中,我们将深入探讨如何利用React技术栈创建一个功能完善的围棋记谱本应用。React是Facebook开发的一个用于构建用户界面的JavaScript库,尤其适用于构建单页应用。在...
在本文中,我们将探讨如何利用React技术来创建一个围棋记谱本应用。React是Facebook推出的一个用于构建用户界面的JavaScript库,尤其适用于构建组件化的、交互式的Web应用。在这个项目的第一部分,我们将专注于环境...
在本项目中,“React学习之围棋记谱本制作(四)前端开发初步完成”是一个教程,旨在教授如何使用React框架构建一个围棋记谱本的前端应用。从给出的标签“源码”和“工具”来看,我们可以推断这个教程会涉及实际的...
本React学习手册将深入探讨React的核心概念和实战技巧,帮助你从入门到精通。 首先,React的核心概念包括组件化开发。组件是React的基础单元,可以理解为可复用的代码块,它们像乐高积木一样组合起来构建整个应用。...
通常,可以使用二维数组来代表19x19的围棋棋盘。每个单元格可以存储当前的棋子颜色(黑或白)或空。 2. **棋子放置**:玩家每一步都会在棋盘上放置一个棋子。这需要一个函数来处理棋子的放置逻辑,包括检查该位置...
"React学习手册完整版带目录.zip"包含了深入学习React所需的所有资料,包括基本概念、核心原理以及高级技巧。 首先,手册的目录可能会涵盖以下关键知识点: 1. **React基础知识**:介绍React的基本概念,如JSX语法...
React 学习之道 ==================================================
这个"react学习课件.rar"文件包含的"react学习课件.docx"文档,很可能是从哔哩哔哩上的一个React教程课程中提取出的学习资料。在React的世界里,有很多关键概念和技术值得深入探讨。 首先,React的核心理念是组件化...
React学习资源汇总.pdf
React学习路线脑图
在深入探讨React技术栈之前,我们首先需要理解什么是React。React是Facebook开发的一款用于构建用户界面的JavaScript库,尤其擅长于构建单页应用程序(SPA)。它主要关注视图层,但也可以与各种库和框架(如Redux、...
React 学习思维脑图,有助于更好的学习react
React入门学习文档 React 是一个用于构建用户界面的 JavaScript 库,是一个数据驱动的 MVVM 模式的框架。学习 React 需要了解其主要特点、JSX 元素渲染、生命周期、组件事件等知识点。 React 介绍 React 是一个...
【标题】"weiqi-react"是一个以React技术为核心的网页围棋应用项目,旨在提供一个用户友好的在线围棋对弈平台。React是Facebook开发的JavaScript库,用于构建用户界面,特别是单页应用程序。它采用组件化的方式,...
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...
在React的世界里,进阶之路意味着深入理解其核心概念、最佳实践以及高级技巧。React作为一个流行的JavaScript库,用于构建用户界面,尤其适用于单页应用程序(SPA)。本篇将围绕React的多个关键知识点展开,帮助...
"React 官方学习模板"是ReactJs官方提供的一套教程项目,旨在帮助开发者系统地学习和理解React的基本概念、API以及最佳实践。 这个模板项目,"react-tutorial-master",包含了从基础到进阶的所有教程内容,可以帮助...
本节笔记将记录 React 学习过程中的关键知识点。 一、React 组件生命周期 React 组件生命周期是指组件从创建到销毁的整个过程。生命周期方法是指在组件生命周期的不同阶段执行的函数。了解生命周期方法可以帮助...
### React.js零基础自学核心知识点概览 #### 一、React.js简介与基本概念 - **React.js**:一种用于构建用户界面的JavaScript库,特别适用于构建单页应用(SPA)。 - **特点**:虚拟DOM、组件化设计、单向数据流。 #...