我的第一个hbuilder项目，基于h5的五子棋游戏

来源：互联网发布：java oracle 快速入门编辑：程序博客网时间：2024/05/17 06:27

这是在老师的引导下完成小游戏，以下是今天学习的内容和知识分享：

第一个游戏的操作思想：

使用hbuilder软件，打开软件可在其帮助中“hbuilder入门”可以了解相应的软件使用方法

使用“菜鸟教程”网站，可在其中学习h5的相关知识。

制作五子棋的的思想：

1、完成画布的制作

2、完成棋格的制作及界面限定

3、棋子的制作及出现的位置

4、棋子的颜色替换，及同一位置不可以同时出现“重下”现象。

部分代码如下：

<body>
<canvas id="myCanvas" width="500" height="500" style="border:1px; solid #000000;"></canvas>
<script type="text/javascript">
//获取canvas的标签
var chessCanvas = document.getElementById("myCanvas");
//获取画布
var gameCanvas = chessCanvas.getContext("2d");
//定义棋盘及棋子大小
var map=25;
var chessSize=19;
for(var i=0;i<25;i++)
{
gameCanvas.moveTo(0,i*map);
gameCanvas.lineTo(500,i*map);
gameCanvas.stroke();
}

for(var j=0;j<25;j++)
{
gameCanvas.moveTo(j*map,0);
gameCanvas.lineTo(j*map,500);
gameCanvas.stroke();
}

</script>

</body>
<

ml>

}
</script>

</body>

其它的就请要写的人，自己思考一下咯！（这只是一部分）

阅读全文

0 0