基于HTML5的五子棋游戏

来源：互联网发布：数据库怎么加锁编辑：程序博客网时间：2024/06/07 12:27

夏日炎炎，迎来了我们暑期实训。老师教我们做关于HTML5的五子棋游戏。我的内心是痛苦的，第一天温度高达37度。不过还是学到了一些东西。下面就是今天的收获。非完整代码。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>五子棋游戏</title>
</head>
<body>
  <canvas id="myCanvas" width="570" height="570"
   style="border: 2px solid #abcabc"></canvas>


  <script type="text/javascript">
   //获取canvas的标签
   var ChessCanvas = document.getElementById("myCanvas");
   //获取画布
   var gameCanvas = ChessCanvas.getContext("2d");
   //定义棋盘大小
   var map = 25;
   //棋子大小
   var chessSize = 24;
    //获取下棋的坐标
    var x = y = 0;
   //棋子的颜色
   var isRed = true;//==true的该下红棋否则下黑棋
   var color = "#000000";

   //棋子数组   二维数组
   //保存所下的棋子 0：未下；1：下红棋；2：下黑棋
   var chessData = new Array(23);
   for(var i=0;i<23;i++)
   {
       chessData[i] =new Array(23);
    for(var j=0;j<23;j++)
    {
     chessData[i][j] = 0;
    }
   }
   //所下棋子在棋子数组的位置
   var i,j;

   //绘制棋盘
   for(var i=0;i<23;i++)
   {
    gameCanvas.moveTo(10,10+i*map);
    gameCanvas.lineTo(560,10+i*map);
    gameCanvas.moveTo(10+i*map,10);
    gameCanvas.lineTo(10+i*map,560);
       gameCanvas.stroke();//画
   }
   //创建函数，完成下棋
   function addChess(x,y)
   {
    //下棋画小圆圈     角度转弧度 π/180×角度        弧度变角度 180/π×弧度
    gameCanvas.beginPath();//开始
    gameCanvas.arc(x,y,12,0,Math.PI*2,true);//画棋子
    gameCanvas.fillStyle = color;
    gameCanvas.fill();
    gameCanvas.closePath();//结束
    if(color=="#000000")
    {
     color = "#ff0000";
     //黑棋
     chessData[i][j] = 2;

    }

else

     {
     color = "#000000";
     //红棋
     chessData[i][j] = 1;

    }

    }
   //重复调用在做坦克大战之类游戏   需要使用。。。。。。。
   // window.setInterval(函数,时间);

   //游戏是否结束
// function isGameWin()

   //如果是人机对战版，则需要下棋的AI 如果不是人机对战则下完棋后，提醒对方下棋
   //   function gameAI()

   //做鼠标监听    游戏逻辑
   document.onmousedown= function(e)
   {
       window.onclick = function (){

      //获取下棋的坐标
       i = Math.round((e.x-10)/25);
       j = Math.round((e.y-10)/25);//边界不能下
    //判断该位置x，y是否可以下棋
    x = i*25+10;
    y = j*25+10；
    //判断该位置ij是否有棋子
    if(chessData[i][j]==0)
    {
     //下棋
     addChess(x,y);
    }

else

      {
     alert("不好意思！你来晚了，已经被对方捷足先登了");
    }
      }
   }
  </script>
</body>
</html>

阅读全文

0 0