我的第一个hbulider项目

最新推荐文章于 2024-03-28 09:32:05 发布

要的就是与众不同

最新推荐文章于 2024-03-28 09:32:05 发布

阅读量643

点赞数 2

本文链接：https://blog.csdn.net/ETERNALXIAN/article/details/74231534

版权

7月3日实训第一天

实训内容——五子棋游戏

达州的天气真的不是一般的热，分分钟就可以把人热化，就这样我们带着沉重的脚步开始了我们第一天的实训，老师叫李胤，刚开始我还不知道这个字怎么读，很尴尬啊，李老师是一个比较幽默的老师，希望和老师有一个愉快的实训。

我们学习H5，”说实话我们之前还没有接触过H5“，学的还是基本的HTML代码，比如表格、表单、框架啊等等。讲了一大堆，什么JS特性，H5的特性啊，H5的canvas（画布）的新特性。总之一大堆的理论。说得脑壳都昏的，不过还是感觉多充实的，原来自己也可以干点事情的，我会继续努力的。

上一次的实训至今还在我的脑海里，就那样在机房耍了七天电脑，巨郁闷，感觉自己很没有用，但是这一次让我有那么一点点成就感了。

以下是我的小成果：

<!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>
           //获取canvas的标签
           var ChessCanvas = document.getElementById("myCanvas");
           //获取画布
           var gameCanvas = ChessCanvas.getContext("2d");

           //定义棋盘大小
           var map = 25;
           //棋子大小
           var chessSize = 18;

           //下棋的坐标
           var x=y=0;

           //棋子颜色
           var isRed = true;
           var color="#000000";
           //棋子数组二维数组
           var chessDate = new Array(23);
           for(var i=0;i<23;i++)
           {
                chessDate[i] = new Array(23);
                for(var j=0;j<23;j++)
                {
                   chessDate[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)
           {
               //下棋，画圆   角度转弧度
               gameCanvas.beginPath();
               gameCanvas.arc(x,y,8,0,Math.PI*2,true);
               gameCanvas.fillStyle = color;
               gameCanvas.fill();
               gameCanvas.closePath();
               if(color=="#000000")
               {
                   color="#ff0000";
                   //黑棋
                   chessDate[i][j] = 2;
               }
               else{
                       color="#000000";
                       //红棋
                       chessDate[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=i*25+10;//math的四舍五入
                       y=j*25+10;





                   //判断该位置是否可以落子
                   if(chessDate[i][j] == 0)
                   {
                       //下棋

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

要的就是与众不同

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
我的第一个hbulider项目

7月3日实训第一天实训内容——五子棋游戏达州的天气真的不是一般的热，分分钟就可以把人热化，就这样我们带着沉重的脚步开始了我们第一天的实训，老师叫李胤，刚开始我还不知道这个字怎么读，很尴尬啊，李老师是一个比较幽默的老师，希望和老师有一个愉快的实训。我们学习H5，”说实话我们之前还没有接触过H5“，学的还是基本的HTML代码，比如表格、表单、框架啊等等。讲了一
复制链接

扫一扫