js黑白棋

前几天做了个简单的杀病毒小游戏，发现js开发游戏具有很多优势，于是准备做一些游戏练练手。

这次做的是个简单的黑白棋游戏，主要的交互方法是通过鼠标事件监听实现的。

canvas对象里支持所有的js鼠标事件，包括单击(MouseClick)、按下(MouseDown)、抬起(MouseUp)、移动(MouseMove)

其添加方法基本和在文件里添加没啥区别

canvas,addEventListener(`mousedown`,domousedown , false)
//另有反模式
canvas.onmousedown = function(e){}

游戏思路很简单，就是利用鼠标监听事件来完成游戏的进程推进，一旦监听道鼠标事件，就进行坐标转换，将坐标转换为canvas内的坐标，再转换为棋盘上的点，对该点进行检查和方向上棋子的变换后，再对棋盘上所有的点进行标记，根据不同的标记绘制不同的图案，这样就完成了整个游戏的逻辑。

首先定义black，white，empty等标记。创立囊括整个棋盘的矩阵，在网页窗体初始化的时候运行init函数来进行初始化。

function init(){
    initLevel(); //初始化开始的棋子
    showMoveInfo(); //显示现在的棋局信息到公示板
    Canvas,addEventListener(“mousedown”, doMouseDown,false);
}

初始化棋子主要是在放下启始的四颗棋子，而信息公示版主要用innerHTML实现就可以了。

这样就完成了初始化的工作，接下来完成几个重要功能，首先是响应鼠标事件，响应鼠标事件要完成对鼠标坐标的转换，对落子点的标记变换。以及后续的检查，变换等一系列功能。

对于坐标的转换这里是通过getBoundingClientRect()属性来实现的：

function getPointOnCanvas(canvas,x,y){
    var box = canvas.getBoundingClientRect();
    return {x: x - box.left*(canvas.width/box.width),
                 y: y - box.top*(canvas.height/box.height)}
}

function clickStone( loc ){
    var x = Math.round((loc.x-40)/80) ; 
    var y = Math.round((loc.y-40)/80);
}

接着比较重要的功能是判断选中的坐标是否可以落子，其思路是通过判断上下左右八个方向是否有对方的棋子来实现的。

//判断上下左右等八个方向可否落子
function can_go(x,y){
    if(checkDirect(x,y,-1,0)){
        return true;
    }
    if(checkDirect(x,y,-1,-1)){
        return true;
    }
    if(checkDirect(x,y,1,0)){
        return true;
    }
    if(checkDirect(x,y,1,1)){
        return true;
    }
    if(checkDirect(x,y,0,-1)){
        return true;
    }
    if(checkDirect(x,y,1,1)){
        return true;
    }
    if(checkDirect(x,y,0,1)){
        return true;
    }
    if(checkDirect(x,y,-1,1)){
        return true;
    }
    return false;
}

function checkDirect(x,y,dx,dy){
    var flag = false
    x = x+dx;
    y = y+dy;
    while(InBoard(x,y)&&!Ismychess(x,y)&&stone[x][y] != empty){
        x+=dx;
        y+=dy;
        flag = true; //形成了夹击之势
    }
    if(InBoard(x,y)&&Ismychess(x,y)&&flag){
        return true;
    }
    return false;
}

同样的思路用来实现反转棋子，判断八个方向有对方棋子的方向，然后进行反向追踪并改变其标记。

function DirectReverse(x1,y1,dx,dy){
    var flag = false
    x = x1+dx;
    y = y1+dy;
    while(InBoard(x,y)&&!Ismychess(x,y)&&stone[x][y] != empty){
        x+=dx;
        y+=dy;
        flag = true; //形成了夹击之势
    }
    if(InBoard(x,y)&&Ismychess(x,y)&&flag){
        do{
            x-=dx;
            y-=dy;
            if(x!=x1||y!=y1){
                change(x,y);
            }
        }while((x!=x1||y!=y1));
    }
}

function change(x,y){
    if(stone[x][y] == Black){
        stone[x][y] = White;
    }else{
        stone[x][y] = Black;
    }
}

这样就基本完成了黑白棋，再加入help功能，help是通过搜索整个 棋盘，找出可以放置现在执棋人的棋子的地方并指出。

function DoHelp(){
    var i,j;
    var n = 0;
    for(i=0;i<=8;i++){
        for(j=0;j<=8;j++){
            if(stone[i][j]==empty&&can_go(i,j)){
                n+=1;
                pic = info;
                ctx.drawImage(pic,w*j+20,h*i+20,pic.width,pic.height);
            }
        }
    }
}

最终成果如图示

?

js黑白棋

原文：https://www.cnblogs.com/cmcshenwei/p/js-hei-bai-qi.html