这篇笔记是官方教程的延续笔记,所有代码基于第一篇笔记的结尾代码。旨在解决教程后面提出的五个问题。


一 . 用(X,Y)来取代原有的数字坐标

原来的数字坐标是这样的:

现在的要求是把原来的代码坐标改为二维坐标系的表达形式,并且在历史记录面板中打出转换后的坐标。

如果只是为了输出好看。只需要写一个转换方法,这些在顶层的Game组件中实现就够了。而不需要修改原来的代码核心。

很自然想到用switch语句,其实都行,怎么喜欢怎么写。

convert:function(i){//i是一维坐标
                var x=Math.floor(i/3)+1;
                var y=0;
                if((i+1)%3===0){
                    y=3;
                }else{
                    y=(i+1)%3;
                }
                return [x,y];
            },

调用就直接在渲染前调用。把它存到state里面去。

接下来问题是把这个方法怎么获取参数i,最直接的办法是写一个全局变量,然后从handleClick里面拿到i。但是全局变量不环保。或许再设一个顶层状态lastLocation是个不错的选择,渲染队列是一个数组,姑且称之为historyLocation

根据React的价值观,能根据其它原有状态计算出来的东西,就不需要设置额外的状态。但如果思路不明确,就在这里先写出来。

回退步骤的本质

在上一篇笔记最后,官方文档没有说清楚一个问题。就是状态中的stepNumber是什么。现在再次遇到,需要写明白给自己提个醒。

回退步骤

每走一步,history状态就会在最后追加一个最新版本。

stepNumber实际上是一个指针,根据这个指针,发送history状态的版本(可能是旧的,也可能是最新的),用它来调控渲染状态。

点击回退步骤,就是把指针往前挪。

通过暂存器刷新状态

如果没有任何其它操作直接触发handleClick,stepNumber指针直接指向最新的版本。

如果在回退步骤上发生了handleClick,那么将发生以下事情:

  • 根据指针生成若干个状态暂存器,这个暂存器是独立且不具备任何效力的,抛开环境来看就是普通变量;
  • 追加新的状态到暂存器;
  • 再用这个暂存器替换掉原有的状态,在此,回退步骤列表将被刷新。

究竟有几个状态暂存器?在这里就两个:

  • 一个储存history的当前指针版本:

javascript handleClick:function(i){ //history指针版本暂存 var history=this.state.history.slice(0,this.state.stepNumber+1); var lastHistory=history[this.state.stepNumber]; var squares=lastHistory.squares.slice();

  • 一个储存二维坐标轴版本:

javascript /**上接handleClick***/ //二维坐标数据暂存器 var historyLocation=this.state.historyLocation; historyLocation=historyLocation.slice(0,this.state.stepNumber); historyLocation.push(this.convert(i));//刷新状态暂存器

通过状态暂存器,既可以在指针位置重新开始,又能在屏幕上保留历史步骤数方便查看,即实现官方文档所谓的“时间旅行”。

在这里意识到状态暂存器其实应该只有一个是最好的。

judgeWinner的完善

按理来说,判断胜负的函数judgeWinner应该是在组件的里面,这样比较环保,也可以更好地调用组件中的状态。

现在就把它拿进来。直接生成渲染方法中的status。并且添加一个和棋的判断。实现思路是调用指针版本的history状态数组。然后遍历这个数组对象,如果发现9个位置全部不为null,就返回和棋。

放进来之后,参数也没有必要再写,全部改为state相关的表达。

这样一来就没办法用原来的禁着点判断了。因为不好判断棋局是否完结。在此根据返回的结果进行indexOf判断,留下的坑后面填。

所以到此为止,Game组件应该是:

getInitialState:function(){
                return {
                    history:[
                        {squares:Array(9).fill(null)}
                    ],
                    turnToX:true,
                    stepNumber:0,
                    historyLocation:[]
                }
            },
            // 判断胜负的函数,穷举法
            judgeWinner:function(){
                var history=this.state.history;
                var lastHistory=history[this.state.stepNumber];
                var squares=lastHistory.squares;
                var win=[
                    [0,1,2],
                    [0,3,6],
                    [0,4,8],
                    [1,4,7],
                    [2,5,8],
                    [2,4,6],
                    [3,4,5],
                    [6,7,8]
                ];
                for(var i=0;i<win.length;i++){
                    var winCase=win[i];
                    if(squares[winCase[0]]&&squares[winCase[0]]===squares[winCase[1]]&&squares[winCase[1]]===squares[winCase[2]]){//三子一线
                        return ('获胜方是:'+squares[winCase[0]]);//返回胜利一方的标识
                    }
                }

                // 定义当前棋盘上被填满的格子数量
                var fill=lastHistory.squares.filter((item)=>item!=null).length;
                if(fill==9){
                    return '和棋!'
                }else{
                    var player=this.state.turnToX?'X':'O';
                    return ('轮到'+player+'走');
                }
            },
            // 点击事件是把暂存器的内容存为真正的状态。
            handleClick:function(i){
                //历史squares暂存
                var history=this.state.history;
                history=history.slice(0,this.state.stepNumber+1);

                var lastHistory=history[this.state.stepNumber];
                var winner=this.judgeWinner();
                var squares=lastHistory.squares.slice();

                //历史步骤暂存器
                var historyLocation=this.state.historyLocation;
                historyLocation=historyLocation.slice(0,this.state.stepNumber);
                historyLocation.push(this.convert(i));

                if((winner.indexOf('轮到')==-1)||squares[i]){
                    return false;
                    //胜负已分或是已有子则不可落子。indexOf这是一种暂时的非主流写法
                }
                // 判断下棋的轮换色
                squares[i]=this.state.turnToX?'X':'O';

                this.setState({
                    history:history.concat([{squares:squares}]),
                    turnToX:!this.state.turnToX,
                    stepNumber:history.length,
                    historyLocation:historyLocation
                });

            },
            // 历史步骤跳转是把状态还原到某个时间点,状态根据stepNumber呈现内容,但不会改变最终状态。
            jumpTo:function(step){
                this.setState({
                    stepNumber:step,
                    turnToX:step%2?false:true
                });
            },
            // 坐标转换函数
            convert:function(i){
                var x=Math.floor(i/3)+1;
                var y=0;
                if((i+1)%3===0){
                    y=3;
                }else{
                    y=(i+1)%3;
                }
                return [x,y];
            },

            render:function(){
                var history=this.state.history.slice();
                var lastHistory=history[this.state.stepNumber];//渲染方法遵照的是stepNumber而不是最后一步
                var status=this.judgeWinner();//获胜状态
                var arr=[];
                var location=this.state.historyLocation.slice();
                var _this=this;
                history.map(function(step,move){
                    var content='';
                    if(move!==0){
                        content='Move#'+move+':'+'('+location[move-1][0]+','+location[move-1][1]+')';
                        //console.log(location[move-1])
                    }else{
                        content='游戏开始~';
                    }
                    arr.push(<li key={move}><a onClick={()=>_this.jumpTo(move)} href="javascript:;">{content}</a></li>);
                });

                return (
                    <div className="game">
                        <Board lastHistory={lastHistory.squares} onClick={(i)=>this.handleClick(i)} />
                        <div className="info">
                            <div>{status}</div>
                            <ol>{arr}</ol>
                        </div>
                    </div>
                );
            }
        });

二. 对右方的被选中的当前记录进行加粗显示

样式这种东西,就交给CSS来实现吧!

.back-active{
    font-weight: bolder;
    color: #EE9611;
}

简单实现

思路就是加个class。操作方法是jumpTo。

问题在于,当前的jumpTo已经给定了参数。为了拿到e.target还得在改改。

jumpTo在这个问题中实际上要完成两件事,删除所有a的class中可能.back-active;给当前对象加个.back-active

有了e.target,就能用DOM找到该有的内容。比方说e.target.parentNode.parentNode.childNode就代表所有点击对象上层的所有li集合

然而这个集合不是一个数组啊,不能map。只能用for循环。根据查到的性能资料,for循环还真的比其它迭代方法高。

jumpTo:function(e,step){
                // console.log(e.target)
                var aList=e.target.parentNode.parentNode.childNodes;
                for(var i=0;i<aList.length;i++){
                    var item=aList[i];
                    if(item.childNodes[0].classList.contains('back-active')){
                        item.childNodes[0].classList.remove('back-active');
                    }
                }

                e.target.classList.add('back-active');
                this.setState({
                    stepNumber:step,
                    turnToX:step%2?false:true
                });
            },

这个问题就算解决了。

点击实现高亮当前的步骤

其实就个人理解来说,不应该再对handleClick再加什么高亮当前步骤的操作了。当前步骤明摆着就是最后一个。纵观就当前的代码实现,用户体验已经很好了,进程不会乱七八糟,用户还可以很清晰地知道指针指向的还原点。还高亮什么?

但是假设老板就要求点击按钮时最后一步也高亮,那也只能照做。

显然,这个应该放渲染前判断:如果这是状态最后一步(是this.state.history.length-1,不是this.state.stepNumber),那么就高亮。反正样式也不要钱,就多写一个样式给它。

.process-active{
    font-weight: bolder;
    color: green;
}/*写在.back-active之后,方便覆盖*/

这样,渲染前的处理里还得多加一个判断:是最后一个就加.process-active——这段获取历史步骤的方法已经变得太长了。为了阅读方便把它放一个getMoveList函数里吧。

...
    getMoveList:function(){
                var history=this.state.history.slice();
                var arr=[];
                var location=this.state.historyLocation.slice();
                var _this=this;
                history.map(function(step,move){
                    var content='';
                    if(move!==0){
                        content='Move#'+move+':'+'('+location[move-1][0]+','+location[move-1][1]+')';
                        //console.log(location[move-1])
                    }else{
                        content='游戏开始~';
                    }
                    //console.log(_this.state.stepNumber)
                    if(arr.length==_this.state.history.length-1){
                        arr.push(<li key={move}><a className="process-active" onClick={(e)=>_this.jumpTo(e,move)} href="javascript:;">{content}</a></li>);
                    }else{
                        arr.push(<li key={move}><a onClick={(e)=>_this.jumpTo(e,move)} href="javascript:;">{content}</a></li>);
                    }
                });
                return arr;
            },
              ...

这样,第二个问题就解决了。


三. 用两个循环重写Board组件,替代掉原来生硬的代码结构

因为只有9宫格,复用也毫无意义。所以写死也问题不大。

想到的处理方法就是这样了。

var Board=React.createClass({
            renderSquare:function(i){
                return <Square key={i} value={this.props.lastHistory[i]} onClick={() => this.props.onClick(i)} />
            },
            getSquare:function(rows){
                var index=rows*3;
                var arr=[];
                for(var i=index;i<index+3;i++){
                    arr.push(this.renderSquare(i));
                }
                return arr;
            },
            getBoardRow:function(){
                var arr=[];
                for(var i=0;i<3;i++){
                    arr.push(<div key={i} className="board-row">{this.getSquare(i)}</div>)
                }
                return arr;
            },
            render:function(){
                return (
                    <div clasName="board">
                        <div className="status"></div>
                        {this.getBoardRow()}
                    </div>
                );
            }
        });

四. 对你的历史记录进行升降序排列

接下来又回到Game组件上面来了。在渲染结构中加一个按钮。点击,触发事件。大概就是这样。

<input type="button" value={this.state.isAscending} onClick={this.sortToggle} />

因为默认就是降序,因此这个toggleSort只做一件事:切换开关。至于是升序还是降序,又要多设置一个开关状态(isAscending,初始为降序排列)。

根据这个状态,getMoveList方法决定生成数组后是直接return还是return arr.reverse()

sortToggle:function(){
    this.setState(function(prevState){
        var sort=prevState.isAscending;
        var content='';
        if(sort=='升序排列'){
            content='降序排列';
        }else{
            content='升序排列'
        }
        return {
            isAscending:content
        }
    })
},

然后再到getMoveList方法的最后,加一个判断:

.....
                if(this.state.isAscending=='降序排列'){
                    return arr;
                }else{
                    return arr.reverse();
                }
}

嗯,第四个问题解决。


五. 高亮显示获胜的结果

扩展judgeWinner的功能

judgeWinner判断函数已经被纳入到了组件中,而且只是返回一个status,现在要扩展它的功能,把胜负情况反应出来。

在原来的判断胜负函数里面加个console就可以知道胜负手了。

for(var i=0;i<win.length;i++){
                    var winCase=win[i];
                    if(squares[winCase[0]]&&squares[winCase[0]]===squares[winCase[1]]&&squares[winCase[1]]===squares[winCase[2]]){//三子一线
                        console.log(winCase)//这里的winCase就是胜负手
                        return ('获胜方是:'+squares[winCase[0]]);//返回胜利一方的标识
                    }
                }

既然是扩展功能,再来大改就没必要了。可以考虑把return一个字符串改为return一个数组。第0项放status,第1项放winCase或null

有了这个方法,handleClick中那种非主流写法就可以删掉了。

                var winner=this.judgeWinner();
                if(winner[1]||squares[i]){
                    return false;
                    //胜负已分或已有子:则不可落子。
                }

传递胜负手

再写一个 CSS

.win-case{
    color: red;
}

现在可以通过winner[1]拿到胜负手了。它是一个数组。现在就得在Game组件render方法里面在var一个数据。通过props传下去,传到Board组件之后,做一个判断,看看参数是否符合点位条件,是的话就继续把class名传下去。

/********<Game/>*******/
render:function{
    var winCase=this.judgeWinner()[1];//获胜状态
    return (
        <div className="game">
        <Board winCase={winCase} lastHistory={lastHistory.squares} onClick={(i)=>this.handleClick(i)} />
...
/**********<Board/>***********/
renderSquare:function(i){
                if(this.props.winCase){
                    for(var j=0;j<this.props.winCase.length;j++){
                        if(this.props.winCase[j]==i){
                            return <Square winCase="win-case" key={i} value={this.props.lastHistory[i]} onClick={() => this.props.onClick(i)} />
                        }
                    }
                }
                return <Square key={i} value={this.props.lastHistory[i]} onClick={() => this.props.onClick(i)} />
            },
...
/************<square/>******************/
  var Square=React.createClass({
              render:function(){
                  if(this.props.winCase){
                      return (
                          <button className={"square "+this.props.winCase} onClick={() => this.props.onClick()}>{this.props.value}</button>
                      );
                  }else{
                      return (
                          <button className="square" onClick={() => this.props.onClick()}>{this.props.value}</button>
                      );
                  }
              }
        });
。。。。。。

那么第五个问题就完成了。


结束

现在,功能已经完备。思路已经理清。再看之前留下的大坑:historyLocation

之前提到过,historyLocation是可以和history相互计算得出的。historyLocation只用于展示步数。组件的判断引擎是用兼容history的一维数组实现的,为了后期实现AI书写方便,也显然是history更好。还是删掉这个historyLocation。

不好之处在于每次都要多一点计算,相比React每次动辄重新渲染,这点计算也不是很多。

写一个根据history获取坐标的方法,拿到坐标之后在转换为二维坐标,这本质上是一件事,所以convert方法也可以删掉了。

getRectangular:function(){
                var arr=[];
                var mainArr=this.state.history.slice();
                for(var i=0;i<mainArr.length;i++){
                    if(i<mainArr.length-1){
                        for(var j=0;j<9;j++){
                            //比较mainArr[i].squares和mainArr[i+1].squares[j])不同,拿到坐标值
                            if(mainArr[i].squares[j]!==mainArr[i+1].squares[j]){
                                arr.push(j);
                            }
                        }
                    }
                }
                var result=[]
                for(var i=0;i<arr.length;i++){
                    var x=Math.floor(arr[i]/3)+1;
                    var y=(arr[i]+1)%3===0?3:(arr[i]+1)%3;
                    result.push([x,y])
                }
                return result;
            },

可以再自己优化下算法和css,或者加个重置button之类的。把不必要的变量删掉。

效果:

下一篇笔记将解决最大的一个坑。


附录:组件代码

var Game=React.createClass({
            getInitialState:function(){
                return {
                    history:[
                        {squares:Array(9).fill(null)}
                    ],
                    turnToX:true,
                    stepNumber:0,
                    isAscending:'降序排列'
                }
            },
            // 判断胜负的函数,穷举法,返回一个数组,如果胜负已定,第二个元素就是胜负手
            judgeWinner:function(){
                var lastHistory=this.state.history[this.state.stepNumber];//获取指针版本
                var squares=lastHistory.squares;
                var win=[
                    [0,1,2],
                    [0,3,6],
                    [0,4,8],
                    [1,4,7],
                    [2,5,8],
                    [2,4,6],
                    [3,4,5],
                    [6,7,8]
                ];
                for(var i=0;i<win.length;i++){
                    var winCase=win[i];
                    if(squares[winCase[0]]
                      &&squares[winCase[0]]===squares[winCase[1]]
                      &&squares[winCase[1]]===squares[winCase[2]]){//三子一线
                        return [('获胜方是:'+squares[winCase[0]]),winCase];//返回一个status和胜负情况
                    }
                }
                // 获取当前棋盘上被填满的格子数量
                var fill=lastHistory.squares.filter((item)=>item!=null).length;
                if(fill==9){
                    return ['和棋!',null];
                }else{
                    var player=this.state.turnToX?'X':'O';
                    return [('轮到'+player+'走'),null];
                }
            },

            // 点击事件是把暂存器的内容存为真正的状态。
            handleClick:function(i){
                //history指针版本暂存
                var history=this.state.history.slice(0,this.state.stepNumber+1);
                var lastHistory=history[this.state.stepNumber];
                var squares=lastHistory.squares.slice();

                var winner=this.judgeWinner();
                if(winner[1]||squares[i]){
                    return false;
                    //胜负已分或是已有子则不可落子。
                }
                // 判断下棋的轮换色
                squares[i]=this.state.turnToX?'X':'O';
                //覆盖掉原来的状态!
                this.setState({
                    history:history.concat([{squares:squares}]),
                    turnToX:!this.state.turnToX,
                    stepNumber:history.length
                });

            },
            // 转化history状态为各个版本的平面直角坐标
            getRectangular:function(){
                var arr=[];
                var mainArr=this.state.history.slice();
                for(var i=0;i<mainArr.length;i++){
                    if(i<mainArr.length-1){
                        for(var j=0;j<9;j++){
                            //比较mainArr[i].squares和mainArr[i+1].squares[j])不同,拿到坐标值
                            if(mainArr[i].squares[j]!==mainArr[i+1].squares[j]){
                                arr.push(j);
                            }
                        }
                    }
                }
                var result=[]
                for(var i=0;i<arr.length;i++){
                    var x=Math.floor(arr[i]/3)+1;
                    var y=(arr[i]+1)%3===0?3:(arr[i]+1)%3;
                    result.push([x,y])
                }
                return result;
            },
            // 历史步骤跳转是把状态还原到某个时间点,状态根据stepNumber呈现内容,但不会改变最终状态。
            jumpTo:function(e,step){
                var aList=e.target.parentNode.parentNode.childNodes;
                for(var i=0;i<aList.length;i++){
                    var item=aList[i];
                    if(item.childNodes[0].classList.contains('back-active')){
                        item.childNodes[0].classList.remove('back-active');
                    }
                }
                e.target.classList.add('back-active');
                this.setState({
                    stepNumber:step,
                    turnToX:step%2?false:true
                });
            },
            // 坐标转换函数
            convert:function(i){
                var x=Math.floor(i/3)+1;
                var y=(i+1)%3===0?3:y=(i+1)%3;

                return [x,y];
            },
            // 获取历史步骤列表
            getMoveList:function(){
                var history=this.state.history.slice();
                var arr=[];
                var _this=this;
                var rectangular=this.getRectangular();//获取二维坐标

                history.forEach(function(step,move){
                    var content='';
                    if(move!==0){
                        content='Move#'+move+':'+'('+rectangular[move-1][0]+','+rectangular[move-1][1]+')';
                    }else{
                        content='游戏开始~';
                    }
                    // 高亮最后一个
                    if(arr.length==_this.state.history.length-1){
                        arr.push(
                            <li key={move}>
                                <a
                                  className="process-active"
                                  onClick={(e)=>_this.jumpTo(e,move)}
                                  href="javascript:;">
                                      {content}
                                </a>
                            </li>
                        );
                    }else{
                        arr.push(
                            <li key={move}>
                                <a onClick={(e)=>_this.jumpTo(e,move)}
                                  href="javascript:;">
                                  {content}
                                </a>
                            </li>
                        );
                    }
                });
                // 排序方式
                if(this.state.isAscending=='降序排列'){
                    return arr;
                }else{
                    return arr.reverse();
                }
            },
            // 切换排序方式
            sortToggle:function(){
                this.setState(function(prevState){
                    var sort=prevState.isAscending;
                    var content='';
                    if(sort=='升序排列'){
                        content='降序排列';
                    }else{
                        content='升序排列'
                    }
                    return {
                        isAscending:content
                    }
                })
            },
            // 重置
            reset:function(){
                this.setState({
                    history:[
                        {squares:Array(9).fill(null)}
                    ],
                    turnToX:true,
                    stepNumber:0,
                    isAscending:'降序排列'
                });
            },

            render:function(){
                var lastHistory=this.state.history[this.state.stepNumber];//渲染遵照的是stepNumber而不是最后一步
                var status=this.judgeWinner()[0];//获胜描述
                var winCase=this.judgeWinner()[1];//获胜状态

                return (
                    <div className="game">

                        <div>
                            <h1 classNme="status">React的井字过三关(2)</h1>
                            <Board
                              winCase={winCase}
                              lastHistory={lastHistory.squares}
                              onClick={(i)=>this.handleClick(i)} />
                        </div>
                        <div className="info">
                            <div>{status}</div>
                            <input
                              type="button"
                              value={this.state.isAscending}
                              onClick={this.sortToggle} />
                            <input
                              type="button"
                              value="重置"
                              onClick={this.reset} />
                            <ol>{this.getMoveList()}</ol>
                        </div>
                    </div>
                );
            }
        });

        var Board=React.createClass({
            renderSquare:function(i){
                if(this.props.winCase){
                    for(var j=0;j<this.props.winCase.length;j++){
                        if(this.props.winCase[j]==i){
                            return (
                                <Square
                                  winCase="win-case"
                                  key={i}
                                  value={this.props.lastHistory[i]}
                                  onClick={() => this.props.onClick(i)} />
                            );
                        }
                    }
                }
                return (
                    <Square key={i}
                      value={this.props.lastHistory[i]}
                      onClick={() => this.props.onClick(i)} />
                );
            },

            getSquare:function(rows){
                var index=rows*3;
                var arr=[];
                for(var i=index;i<index+3;i++){
                    arr.push(this.renderSquare(i));
                }
                return arr;
            },

            getBoardRow:function(){
                var arr=[];
                for(var i=0;i<3;i++){
                    arr.push(
                        <div key={i}
                          className="board-row">
                          {this.getSquare(i)}
                        </div>
                    );
                }
                return arr;
            },

            render:function(){
                return (
                    <div clasName="board">
                        <div className="status"></div>
                        {this.getBoardRow()}
                    </div>
                );
            }
        });

        var Square=React.createClass({
            render:function(){
                if(this.props.winCase){
                    return (
                        <button
                          className={"square "+this.props.winCase}
                          onClick={() => this.props.onClick()}>
                            {this.props.value}
                        </button>
                    );
                }
                return (
                    <button
                      className="square"
                      onClick={() => this.props.onClick()}>
                        {this.props.value}
                    </button>
                );

            }
        });

        ReactDOM.render(
            <Game />,
            document.getElementById('container')
        );

React的井字过三关(2)的更多相关文章

  1. React的井字过三关(1)

    React的井字过三关(1) 本文系React官方教程的Tutorial: Intro To React的笔记.由笔者用ES5语法改写. 在本篇笔记中,尝试用React构建一个可交互的井字棋游戏. 开 ...

  2. React的井字过三关(3)

    这是React井字棋项目的最后一篇笔记,记述AI实现. 一. 是开头都会说的原理 但凡懂一点围棋的人都知道"大场"这个概念,可以浅显地把它理解为布局时棋盘上各处的要点.棋谚&quo ...

  3. [HTML5实现人工智能]小游戏《井字棋》发布,据说IQ上200才能赢

    一,什么是TicTacToe(井字棋)   本 游戏 为在下用lufylegend开发的第二款小游戏.此游戏是大家想必大家小时候都玩过,因为玩它很简单,只需要一张草稿纸和一只笔就能开始游戏,所以广受儿 ...

  4. 『HTML5实现人工智能』小游戏《井字棋》发布,据说IQ上200才能赢【算法&amp;代码讲解+资源打包下载】

    一,什么是TicTacToe(井字棋) 本游戏为在下用lufylegend开发的第二款小游戏.此游戏是大家想必大家小时候都玩过,因为玩它很简单,只需要一张草稿纸和一只笔就能开始游戏,所以广受儿童欢迎. ...

  5. Pascal小游戏 井字棋

    一个很经典的井字棋游戏 Pascal源码Chaobs奉上 注意:1.有的FP版本不支持汉语,将会出现乱码.2.别想赢电脑了,平手不错了. 井字过三关: program TicTacToe; uses ...

  6. [CareerCup] 17.2 Tic Tac Toe 井字棋游戏

    17.2 Design an algorithm to figure out if someone has won a game oftic-tac-toe. 这道题让我们判断玩家是否能赢井字棋游戏, ...

  7. quick cocos2d-x 入门---井字棋

    学习quick cocos2d-x 第二天 ,使用quick-x 做了一个井字棋游戏 . 我假设读者已经 http://wiki.quick-x.com/doku.php?id=zh_cn阅读了这个链 ...

  8. 程序设计入门—Java语言 第五周编程题 2井字棋(5分)

    2 井字棋(5分) 题目内容: 嗯,就是视频里说的那个井字棋.视频里说了它的基本思路,现在,需要你把它全部实现出来啦. 你的程序先要读入一个整数n,范围是[3,100],这表示井字棋棋盘的边长.比如n ...

  9. [C++] 井字棋游戏源码

    TicTac.h #define EX 1 //该点左鼠标 #define OH 2 //该点右鼠标 class CMyApp : public CWinApp { public: virtual B ...

随机推荐

  1. view的滑动冲突解决方案

    一.常见的滑动冲突场景 1.外部滑动方向和内部滑动方向不一致 2.外部滑动方向和内部滑动方向一致 3.上面两种情况的嵌套 二.滑动冲突处理的原则 场景1的处理原则是:当用户左右滑动时,需要让外部的vi ...

  2. ExtJs Panel 滚动条设置

    设置autoscroll:true同时出现横向和纵向滚动条. 不要设置autoscroll属性,或者autoscroll:false,然后设置bodyStyle : 'overflow-x:hidde ...

  3. CentOS 6.X版本升级PHP

    #-----------------------------CentOS 6.X版本升级PHP------------------#! /bin/sh #1.关闭selinuxcp -rp /etc/ ...

  4. iOS常用动画-b

    CoreAnimationEffect.h //  CoreAnimationEffect // //  Created by VincentXue on 13-1-19. //  Copyright ...

  5. openwrt上opkg更新报错&amp;quot;opkg_download: Failed to download .............&amp;quot;

    開始搞op的时候,看到op居然能够直接安装一些插件.激动坏了,由于这东西对嵌入式的小系统来说简直不敢想,可是op就支持了,就是这么任性. 好不easy编译了固件.依照网上的教程.telnet进去.首先 ...

  6. 将Eclipse代码导入到Android Studio的两种方式

    转: http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0104/2259.html 说到使用Android Studio,除了新建 ...

  7. WiresShark 使用方法

    Wireshark(前称Ethereal)是一款功能强大的网络抓包分析工具,在我的工作中是不可或缺的一部分工具,往往在网络出现异常时,查看网络中的数据包,会豁然开朗.1.菜单栏  主菜单包括以下几个项 ...

  8. python web开发-flask中消息闪现flash的应用

    Flash中的消息闪现,在官方的解释是用来给用户做出反馈.不过实际上这个功能只是一个记录消息的方法,在某一个请求中记录消息,在下一个请求中获取消息,然后做相应的处理,也就是说flask只存在于两个相邻 ...

  9. MyBatis 中@param 的用法

    示例: 接口方法 public List<Teacher> selectTeacher(@Param(value="id") String id,@Param(valu ...

  10. C#设计模式之二工厂方法模式(Factory Method Pattern)【创建型】

    一.引言 在上一篇文章中我们讲解了过渡的一种模式叫做[简单工厂],也有叫[静态工厂]的,通过对简单工厂模式得了解,我们也发现了它的缺点,就是随着需求的变化我们要不停地修改工厂里面的方法的代码,需求变化 ...