一.hbulider工具的使用
1）
hbulider的特点：
1.飞快的编码速度
2.hbuilder直接创建移动app，打包为ios或android原生安装包
3.html5语法、html5+语法、三大浏览器扩展语法，尽收hbuilder中
4.绿柔设置界面，更加护眼
2）
下载hbulider安装包
百度搜索hbulider，进入官方网站，点击右上角 download 按钮，即可下载。
4）
下载完成后可以看到下载到的是一个压缩包，打开下载的压缩包，将压缩包内的文件解压到希望存放的位置，点击确定。
5）
解压完成后，找到解压位置，点击hbulider.exe文件，开始安装。
6）打开后选择一个一般用来存放代码的文件夹作为代码目录。
7）根据自己的实际情况，选择所能看清楚的颜色块，然后点击下方 生成适合你的视觉方案 生成一个舒适的配色。
8）选择喜欢的视觉主题，点击下面的 确认并关闭 ，完成设置。
9）完成后进入到欢迎向导，如图，到此安装完成。
三.用hbulider写一个五子棋小程序
<!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>
<!--作者：offline
时间：2017-07-03描述：使用js代码控制游戏逻辑-->
<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>
代码不全，会陆续加上。
以上就是hbulider初学的一个小例子的详细内容。