hbulider初学教程及html5五子棋小程序

一.JavaScript简介

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

二.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.οnmοusedοwn= 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>

代码不全，会陆续加上。

转载于:https://www.cnblogs.com/lgbloglg/p/7113024.html

hbulider初学教程及html5五子棋小程序相关推荐

python五子棋程序教程_python实现五子棋小程序
本文实例为大家分享了python实现五子棋小程序的具体代码,供大家参考,具体内容如下一.结合书上例子,分三段编写: wuziqi.py #coding:utf-8 from win_notwin i ...
python之用循环实现五子棋小程序
在python中我们学过流程控制中的循环结构,现在我们来进行一个小应用的练习本程序是通过循环控制结构来实现五子棋小程序的游戏规则五子棋的规则如下: 对局双方各执一色棋子. 空棋盘开局. 黑先.白 ...
编写五子棋的完整python代码_python实现五子棋小程序
本文实例为大家分享了python实现五子棋小程序的具体代码,供大家参考,具体内容如下一.结合书上例子,分三段编写: wuziqi.py #coding:utf-8 from win_notwin i ...
基于微信小程序的五子棋小程序（含简单人机）
基于微信小程序的五子棋小程序(含简单人机) 运行截图项目结构目录基本思路实现过程棋盘的生成落子判断胜负悔棋人机对战的实现权值表机器人落子逻辑改进胜负判断方法更多功能结语运行 ...
初学Python可能会遇见的小程序
初学Python可能会遇见的小程序前言 <孙子算经>中的典例取随机数问题 "水仙花数"问题 for循环 while循环九九乘法表简单选择排序回文数问题序列的 ...
联机五子棋小程序：C++ MFC创建游戏界面
利用C++,通过MFC搭建游戏界面,制作了一个可以在局域网内联机对战的五子棋小程序,在小程序中添加了电脑玩家角色,用以辅助对战(也可以将电脑玩家角色独立出来做成单机版) 放上网盘分享: https:/ ...
小程序源码免费html5,微信小程序静态页面案例（附源码）
微信小程序出来有段时间了,最近抽空写了个静态案例练练手.由于没有公测名额,无法测试,没有接口,所以先这样吧. 首先上图,整个app的演示是这样的: 图一一.微信小程序和html5标签的区别: 二.w ...
微信小程序开发教程7：实现小程序登陆功能
平凡也就两个字: 懒和惰; 成功也就两个字: 苦和勤; 优秀也就两个字: 你和我. 跟着我从0学习JAVA.spring全家桶和linux运维等知识,带你从懵懂少年走向人生巅峰,迎娶白富美! 关注微信 ...
微信小程序开发系列教程三：微信小程序的调试方法
微信小程序开发系列教程微信小程序开发系列一:微信小程序的申请和开发环境的搭建微信小程序开发系列二:微信小程序的视图设计这个教程的前两篇文章,介绍了如何用下图所示的微信开发者工具自动生成一个Hel ...

hbulider初学教程及html5五子棋小程序

hbulider初学教程及html5五子棋小程序相关推荐

最新文章

热门文章