HTML5 canvas五子棋游戏

1.html5 canvas cookbook

http://www.html5canvastutorials.com/cookbook/

2.html5 canvas 2D API

http://ishare.iask.sina.com.cn/f/22796319.html

3.五子棋规则

无禁手玩法：黑先白后，谁先连五谁胜
禁手玩法：黑先行棋，黑棋只能走冲四活三胜，黑双活三禁手 双冲四禁手 四三三禁手 四四三禁手 六连长连禁手；白后手，白棋无任何禁手，还可以抓黑棋的禁手点取胜  
职业规则玩法：三手交换五手两打，黑棋有禁手，意思是下到第三手棋执白方有权选择交换下黑棋或者继续行棋，下到第五手时执黑方给出两个打点让执白方选择去掉一个打点下剩下的打点。
五子棋 第一子下天元 第三手确定一个开局，正规开局26种 直指13种 斜指13种，有些开局即便在职业规则下已经必胜了，或者必败了，还有一些平衡局 黑优局 白优局，职业规则的交换就限制了开局方（一开始执黑方）开必胜或着开黑优会被另一方交换掉，所以职业规则下 大家基本都选择平衡局来行棋

4.五子棋游戏编程思想

基于本五子棋游戏无人机对抗，只是简单的模拟了两个玩家之间的游戏过程。在实际程序中维护了一张关于五子棋黑色棋子和白色棋子状态的地图，用2维数组表示，在每次玩家点击web界面时，判断是否可以落棋，已经判断是否已经有五子连星的状态，如果有，则游戏结束，没有则换对手下棋。

因为只是满足以上需求，所以整个游戏实现起来没有很多技术上的难点，之所以做这个游戏，无非是为了学习html5技术的同时带来一点乐趣而已~

5.源代码

说了以上那么几点，最后还是不例外的把源代码贴出来给大家吧，必然是有不足之处，有幸得到客官您的关注，还请多多交流，板砖别往脸上拍就好~

<div id="title" style="background-color: blue; color: white">
<h2>GOBANG Chess</h2>
</div>
<input type="radio" name="cur_player" id="black_player" οnclick=set_current_player() />Black 
<input type="radio" name="cur_player" id="white_player" οnclick=set_current_player() />White
<img src="black.jpg" />
<div id="canvas_div">
<canvas id="c" width="600" height="600"></canvas>
</div>

<script>
  var canvas = document.getElementById("c")
  var context = canvas.getContext("2d")

  var radio_black = document.getElementById("black_player")
  var radio_white = document.getElementById("white_player")

  radio_black.checked = true

  // player status: 0 black; 1 white
  player_status = 0
  // draw map
  var margin = 30

  function Cell(x, y)
  {
    this.x = x
    this.y = y
    this.draw = function(){
      var cat = new Image()
      if (player_status == 0)
        cat.src = "black.jpg"
      else
        cat.src = "white.jpg"
       
      var x_line = parseInt(String(this.x / margin))
      var y_line = parseInt(String(this.y / margin))
      x_pos = x_line * margin
      y_pos = y_line * margin
      context.drawImage(cat, x_pos, y_pos)
    }
  }
</script>
<script>
  var x_lines = canvas.width / margin
  var y_lines = canvas.height / margin
  // store the status of the chesses
  var gobang_table = new Array(y_lines)
  for (var index = 0; index < y_lines; index++)
    gobang_table[index] = new Array(x_lines)

  for (var index = 0; index < y_lines; index++)
    for(var x_index = 0; x_index < x_lines; x_index++)
      gobang_table[index][x_index] = 0


  // draw the map
  for (var index = 0; index <= x_lines; index++)
  {
    context.moveTo(index*margin, 0)
    context.lineTo(index*margin, canvas.height)
  }

  for (var index = 0; index <= y_lines; index++)
  {
    context.moveTo(0, index*margin)
    context.lineTo(canvas.width, index*margin)
  }

  context.strokeStyle = "#0000ff"
  context.lineWidth = 2
  context.stroke()

  //set click event handle
  canvas.addEventListener("click", click_event_handle, false)

  function click_event_handle(e)
  {
    var cell = get_cur_position(e)

    // whether can fall the chess
    var x_line = parseInt(String(cell.x / margin))
    var y_line = parseInt(String(cell.y / margin))

    if (gobang_table[y_line][x_line] != 0)
    {
      alert(y_line)
      alert(x_line)
      alert("exist")
      return
    }
    else
    {
      if (player_status == 0)
      {
        gobang_table[y_line][x_line] = 1
        cell.draw()
      }
      else
      {
        gobang_table[y_line][x_line] = 2
        cell.draw()
      }

      // is game over
      fresh_game_status()

      // change user to play
      player_status = 1 - player_status
    }
  }
  
  function get_cur_position(e)
  {
    var x
    var y
    if (e.pageX != undefined && e.pageY != undefined)
    {
      x = e.pageX
      y = e.pageY
    }
    else
    {
      x = e.clientX + document.body.scrollLeft +
          document.documentElement.scrollLeft
      y = e.clientY + document.body.scrollTop +
          document.documentElement.scrollTop
    }


    x -= canvas.offsetLeft
    y -= canvas.offsetTop

    var cell = new Cell(x, y)
    return cell
  }

  function fresh_game_status()
  {
    if (player_status == 0)
      target_occu = 1
    else
      target_occu = 2
    // horizone
    for(var i = 0; i < y_lines; i++)
    {
      var count = 0
      for (var j = 0; j < x_lines; j++)
      {
        if (gobang_table[i][j] == target_occu)
        {
          count++
          if (count >= 5)
          {
            notification = (target_occu == 1)?"black win":"white win"
            alert(notification)
            return
          }
        }
      }
    }

    // vertical
    for(var i = 0; i < x_lines; i++)
    {
      var count = 0
      for (var j = 0; j < y_lines; j++)
      {
        if (gobang_table[j][i] == target_occu)
        {
          count++
          if (count >= 5)
          {
            notification = (target_occu == 1)?"black win":"white win"
            alert(notification)
            return
          }
        }
      }
    }

    // left oblique
    for(var i = 0; i < y_lines; i++)
    {
      var count = 0
      for(var j = 0, k = i; j < x_lines; j++)
      {
        if (gobang_table[k][j] == target_occu)
        {
          count++
          k++
          if (count >= 5)
          {
            notification = (target_occu == 1)?"black win":"white win"
            alert(notification)
            return
          }
        }
      }
    }  

    // right oblique
    for(var j = 0; j < x_lines; j++)
    {
      var count = 0
      for(var i = 0, k  = j; i < y_lines; i++)
      {
        if (gobang_table[i][k] == target_occu)
        {
          count++
          k--
          if (count >= 5)
          {
            notification = (target_occu == 1)?"black win":"white win"
            alert(notification)
            return
          }
        }
      }
    }  

  }// end of function

  function set_current_player()
  {
    if (radio_black.checked == true)
      player_status = 0
    else
      player_status = 1  
  }


</script>