使用canvas写五子棋游戏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html, body, div {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

div {
    display: flex;
}

canvas {
    margin: auto;
    border: 1px solid #000;
}

</style>
</head>
<body>

<div>
    <canvas id="canvas" width="780" height="780">
        你的浏览器不支持canvas
    </canvas>
</div>
<script>
/*
 1. 绘制棋盘
 2. 监听鼠标的点击事件
 
 把落下的每个棋子存起来 ：使用二维数组 存储的是棋子的类型  0 没有  1 白色  2 黑
 * */
var chesses;
(function (){
    var hasWin = false;

    var whiteChess = new Image();
    whiteChess.src = "./w.png";
    var blackChess = new Image();
    blackChess.src = "./b.png";
    /*应该谁来落子  1 表示白色  2表示黑色*/
    var whoChess = 1;
    chesses = [];  //存储每个棋子
    //给chesses数组初始化。 默认没有棋子
    for (var i = 0; i < 15; i++){
        chesses.push([]);
        var row = chesses[i];
        for (var j = 0; j < 15; j++){
            row.push(0);
        }
    }

    var canvas = document.getElementById("canvas");
    if (!canvas.getContext) return;

    var ctx = canvas.getContext("2d");
    drawBoard(); //绘制棋盘

    canvas.onclick = function (e){
        if (hasWin){
            ctx.clearRect(0, 0, 780, 780);
            drawBoard();
            for (var i = 0; i < 15; i++){
                for (var j = 0; j < 15; j++){
                    chesses[i][j] = 0;
                }
            }
            hasWin = false;
        }
        var x = e.offsetX;
        var y = e.offsetY;
        drawChess(x, y);
    }
    /*绘制棋子*/
    function drawChess(x, y){
        x = Math.round((x - 40) / 50) * 50 + 40;
        y = Math.round((y - 40) / 50) * 50 + 40;

        if (!isAllowChess(x, y)) return; //如果不允许落子，就直接返回

        var currentChess;
        if (whoChess == 1){
            currentChess = whiteChess;
        }else{
            currentChess = blackChess;
        }
        ctx.drawImage(currentChess, x - whiteChess.width / 2, y - whiteChess.height / 2);
        chesses[(y - 40) / 50][(x - 40) / 50] = whoChess;
        /*判赢*/
        if (judgeWin((y - 40) / 50, (x - 40) / 50)){
            ctx.save();
            ctx.fillStyle = "red";
            ctx.font = "60px sans-serif";
            ctx.textAlign = "center";
            if (whoChess == 1){
                ctx.fillText("白棋赢了!!!", 390, 390);
            }else{
                ctx.fillText("黑棋赢了!!!", 390, 390);
            }
            ctx.restore();
            hasWin = true;
        }
        /*下一次应该是白棋还是黑棋*/
        whoChess = whoChess == 1 ? 2 : 1;
    }
    
    /*判断是否允许落子*/
    function isAllowChess(x, y){
        if (x < 40 || y < 40 || x > 740 || y > 740){
            return false;
        }else if (chesses[(y - 40) / 50][(x - 40) / 50] > 0){
            alert("此处不允许落子")
            return false;
        }
        return true;
    }
    
    /*绘制棋盘*/
    function drawBoard(){
        ctx.fillStyle = "lightgray";
        for (let i = 0; i < 14; i++){
            for (let j = 0; j < 14; j++){
                ctx.fillRect(40 + j * 50, 40 + i * 50, 49, 49);
            }
        }
    }
    
    /*i,j是刚刚落下的子在数组中的下标*/
    function judgeWin(i, j){
        if (judgeHorizontal(i, j)) return true;
        if (judgeVertical(i, j))  return true;
        if (judgeLeftRight(i, j))  return true;
        if (judgeRightLeft(i, j))  return true;

    }
    
    /*判断水平*/
    function judgeHorizontal(i, j){
        var c = whoChess;
        for (; j >= 0 && chesses[i][j] == c; j--){  //向左跑，找到棋盘的边缘或者不是当前落下棋

        }
        ;
        var count = 0;
        for (j++; j < 15 && chesses[i][j] == c; j++){
            count++;
        }
        if (count >= 5) return true;
    }
    
    /*判断垂直*/
    function judgeVertical(i, j){
        var c = whoChess;
        /*判垂直*/
        for (; i >= 0 && chesses[i][j] == c; i--){  //向左跑，找到棋盘的边缘或者不是当前落下棋

        }
        count = 0;
        for (i++; i < 15 && chesses[i][j] == c; i++){
            count++;

        }
        console.log(count);
        if (count >= 5) return true;
    }
    
    /*斜着1*/
    function judgeLeftRight(i, j){
        var c = whoChess;

        for (; i >= 0 && j >= 0 && chesses[i][j] == c; i--, j--){

        }
        count = 0;
        for (i++, j++; i < 15 && j < 15 && chesses[i][j] == c; i++, j++){
            count++;

        }
        if (count >= 5) return true;
    }
    
    /*斜着2*/
    function judgeRightLeft(i, j){
        var c = whoChess;
        for (; i >= 0 && j < 15 && chesses[i][j] == c; i--, j++){

        }
        count = 0;
        for (i++, j--; i < 15 && j >= 0 && chesses[i][j] == c; i++, j--){
            count++;

        }
        if (count >= 5) return true;
    }
})();

</script>
</body>
</html>

最后编辑于：2017.12.08 05:15:55

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 203,547评论 6赞 477
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,399评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 150,428评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,599评论 1赞 274
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,612评论 5赞 365
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,577评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,941评论 3赞 395
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,603评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,852评论 1赞 297
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,605评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,693评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,375评论 4赞 318
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,955评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,936评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,172评论 1赞 259
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 43,970评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,414评论 2赞 342

使用canvas写五子棋游戏

推荐阅读更多精彩内容