我的第一个hbulider项目

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>

我的第一个hbulider项目相关推荐

SpringSecurity学习：1（第一个SpringSecurity项目）
此博客是记录自己学习过程的记录第一个SpringSecurity项目导入依赖详细的步骤我就不多说了,使用IDEA创建过SpringBoot项目的人一般都能看懂. 这一步我们可以在使用IDEA创建 ...
怎样设计一个商城项目？
这两天公司要做一个商城项目,网上搜了很多没找到完整的.有结构体系的资料,可能这件事本身并不难,但是对新手非常不友好,所以我借机把这些碎片化的资料尝试整理成一个有体系的资料,希望能对你有帮助.资料来源包 ...
构建一个react项目_您想要了解更多有关React的内容吗？让我们构建一个游戏，然后玩。...
构建一个react项目 by Samer Buna 通过Samer Buna 您想要了解更多有关React的内容吗? 让我们构建一个游戏,然后玩. (Do you want to learn more ...
树莓派Android Things物联网开发：创建一个Things项目
[转载请注明出处:http://blog.csdn.net/leytton/article/details/77854144] <树莓派Android Things物联网开发>系列文章专栏 ...
从零开始搭建一个vue项目 -- vue-cli/cooking-cli（一）
从零开始搭建一个vue项目 -- vue-cli/cooking-cli(一) 1.vue-cli搭建一个可靠成熟的项目 1.介绍 vue-cli 我是去年六月份接触的vue1.0,当时还是个菜逼,当 ...
四、创建第一个springboot项目
简介 spring boot 它的设计目的就是为例简化开发,开启了各种自动装配,你不想写各种配置文件,引入相关的依赖就能迅速搭建起一个web工程.它采用的是建立生产就绪的应用程序观点,优先于配置的惯例 ...
如何将spring源码作为导入eclipse中，变成一个普通的项目（git、github）
引子: 怎么查看spring-framework的源码?是不是用压缩软件解压jar包,然后用编辑软件看?高端一点的,是在eclipse上面,按住Ctrl键跳转着看?这里我给大家介绍更加高端一点的方法. ...
[征询意见][投票]先集中力量做好一个开源项目
最近一直考虑在博客园组织开源项目的开发,我觉得发挥社区力量做出成功的开源项目是社区价值的体现.虽然组织开源项目的难度很大,也有过失败的教训,但只有实际地去做,去真正地面对挑战,才有成功的可能,否则,只 ...
第一个django项目-通过命令行和pycharm两种方式
以本机环境为例,ip地址为172.20.16.148,windows平台,虚拟环境路径为d:\VirtualEnv,项目存放位置为d:\DjangoProject 命令行方式 1.进入虚拟环境创建项目 ...
一个网站项目的开始，定位有多重要？
在打算做一个网站或者准备操作一个项目的时候,你觉得什么最重要?你把什么事情放在前面来想?是网站程序.域名.还是网站空间服务器?如果你这样准备就开始了,那么项目还没有开始也许已经输掉了一半,一个网站项目 ...

我的第一个hbulider项目

我的第一个hbulider项目相关推荐

最新文章

热门文章