Html canvas 五子棋_html五子棋代码 canvas-CSDN博客

本文链接：https://blog.csdn.net/lvshuilantian/article/details/50523015
<!DOCTYPE html>
<html>
<head>
<title>五子棋</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1.0, maximum-scale=1, user-scalable=no">
</head>

<body>
    <div style="width:600px;height:600px;background-image:url(images/bg.jpg);">
        <canvas width="600" height="600" onmousedown="play(event)" id="canvas">
        </canvas>
    <div>
</body>
<script type="text/javascript">
canvas = document.getElementById("canvas");
context = canvas.getContext("2d");

bi = new Image();
bi.src = "images/black.png";
wi = new Image();
wi.src = "images/white.png";

var prex = 36, prey = 36, cprex = prex, cprey = prey;
var chess = new Array();
var cnt = 0;
var isFinish = false;

init();

function init() {
    context.clearRect(0, 0, 600, 600);
    for (var i = 0; i < 15; ++i) {
        chess[i] = new Array();
        for (var j = 0; j < 15; ++j) {
            chess[i][j] = 0;
        }
    }
    for (var i = 0; i < 15; ++i) {
        line(prex, prey + i * 38, prex + 14 * 38, prey + i * 38, i == 0 || i == 14);
        line(prex + i * 38, prey, prex + i * 38, prey + 14 * 38, i == 0 || i == 14);
    }
    point(prex + 38 * 3, prey + 38 * 3, 4);    
    point(prex + 38 * 3, prey + 38 * 11, 4);    
    point(prex + 38 * 11, prey + 38 * 3, 4);    
    point(prex + 38 * 11, prey + 38 * 11, 4);    
    point(prex + 38 * 7, prey + 38 * 7, 4);    
    cnt = 0;
    isFinish = false;
}

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

function line(sx, sy, ex, ey, bold) {
    context.beginPath();
    context.moveTo(sx, sy);
    context.lineTo(ex, ey);
    context.strokeStyle = "#000000";
    context.lineWidth = bold ? 4 : 2;
    context.closePath();
    context.stroke();
}

function point(rx, ry, r) {
    context.beginPath();
    context.arc(rx, ry, r, 0, Math.PI * 2, true);
    context.fillStyle = "#000000";
    context.fill();
    context.closePath();
    context.stroke();
}

function play(e) {
    if (isFinish) {
        return;
    }

    var p = windowToCanvas(canvas, e.clientX, e.clientY);
    x = Math.round((p.x - cprex) / 38);
    y = Math.round((p.y - cprey) / 38);
    if (chess[x][y] != 0 || !checkPosition(x, y)) {
        return;
    }
    px = x * 38 + prex - 18;
    py = y * 38 + prey - 18;
    chess[x][y] = cnt % 2 == 0 ? 1 : 2;
    context.drawImage(cnt % 2 == 0 ? wi : bi, px, py);

    if (isEnd(x, y)) {
        isFinished = true;
        show(cnt % 2 != 0 ? "黑方胜" : "白方胜", cnt % 2 != 0 ? "#000000" : "#ffffff");        
        setTimeout("init()", 2000);
    }
    cnt++;
}

function show(ctx, color) {
    context.font = 'bold 72px consolas';
    context.textAlign = 'center';
    context.textBaseline = 'middle';
    context.fillStyle = color;
    context.fillText(ctx, 300, 300);
}

function checkPosition(px, py) {
    return px >= 0 && px < 15 && py >= 0 && py < 15;
}

function isEnd(px, py) {
    return checkDirection(px, py, 0, 1) || checkDirection(px, py, 1, 0) 
        || checkDirection(px, py, -1, -1) || checkDirection(px, py, 1, -1);
}

function checkDirection(px, py, mx, my) {
   var res = 1;
   for (var i = 1; i < 5; ++i) {
      tx = px + i * mx;
      ty = py + i * my;
      if (!checkPosition(tx, ty) || chess[px][py] != chess[tx][ty]) {
          break;
      }
      res++;
   }
   for (var i = 1; i < 5; ++i) {
      tx = px - i * mx;
      ty = py - i * my;
      if (!checkPosition(tx, ty) || chess[px][py] != chess[tx][ty]) {
          break;
      }
      res++;
   }
   return res >= 5;
}

</script>
</html>