當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發(fā)布時(shí)間：2023/12/15 编程问答 56 豆豆

生活随笔收集整理的這篇文章主要介紹了 hbulider初学教程及html5五子棋小程序小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

?	?
?	?

一.JavaScript簡(jiǎn)介

JavaScript一種直譯式腳本語言，是一種動(dòng)態(tài)類型、弱類型、基于原型的語言，內(nèi)置支持類型。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用于客戶端的腳本語言，最早是在HTML（標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用）網(wǎng)頁上使用，用來給HTML網(wǎng)頁增加動(dòng)態(tài)功能。

二.hbulider工具的使用

1）

?? hbulider的特點(diǎn)：

???????? 1.飛快的編碼速度

???????? 2.HBuilder直接創(chuàng)建移動(dòng)App，打包為ios或Android原生安裝包

???????? 3.HTML5語法、HTML5+語法、三大瀏覽器擴(kuò)展語法，盡收HBuilder中

???????? 4.綠柔設(shè)置界面，更加護(hù)眼

?2）??

???????? 下載hbulider安裝包

????????? 百度搜索hbulider，進(jìn)入官方網(wǎng)站，點(diǎn)擊右上角 download 按鈕，即可下載。

4）

下載完成后可以看到下載到的是一個(gè)壓縮包，打開下載的壓縮包，將壓縮包內(nèi)的文件解壓到希望存放的位置，點(diǎn)擊確定。

5）

解壓完成后，找到解壓位置，點(diǎn)擊hbulider.exe文件，開始安裝。

?6）打開后選擇一個(gè)一般用來存放代碼的文件夾作為代碼目錄。

7）根據(jù)自己的實(shí)際情況，選擇所能看清楚的顏色塊，然后點(diǎn)擊下方 生成適合你的視覺方案?生成一個(gè)舒適的配色。

8）選擇喜歡的視覺主題，點(diǎn)擊下面的 確認(rèn)并關(guān)閉 ，完成設(shè)置。

9）完成后進(jìn)入到歡迎向?qū)?#xff0c;如圖，到此安裝完成。

三.用hbulider寫一個(gè)五子棋小程序

<!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 type="text/javascript">//獲取canvas的標(biāo)簽var ChessCanvas = document.getElementById("myCanvas");//獲取畫布var gameCanvas = ChessCanvas.getContext("2d");//定義棋盤大小var map = 25;//棋子大小var chessSize = 24;//獲取下棋的坐標(biāo)var x = y = 0;//棋子的顏色var isRed = true;//==true的該下紅棋否則下黑棋var color = "#000000";//棋子數(shù)組二維數(shù)組//保存所下的棋子 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;}}//所下棋子在棋子數(shù)組的位置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();//畫 }//創(chuàng)建函數(shù)，完成下棋function addChess(x,y){//下棋畫小圓圈角度轉(zhuǎn)弧度 π/180×角度弧度變角度 180/π×弧度gameCanvas.beginPath();//開始gameCanvas.arc(x,y,12,0,Math.PI*2,true);//畫棋子gameCanvas.fillStyle = color;gameCanvas.fill();gameCanvas.closePath();//結(jié)束if(color=="#000000"){color = "#ff0000";//黑棋chessData[i][j] = 2;}else{color = "#000000";//紅棋chessData[i][j] = 1;}}//重復(fù)調(diào)用在做坦克大戰(zhàn)之類游戲需要使用。。。。。。。 // window.setInterval(函數(shù),時(shí)間);//游戲是否結(jié)束 // function isGameWin()//如果是人機(jī)對(duì)戰(zhàn)版，則需要下棋的AI 如果不是人機(jī)對(duì)戰(zhàn) 則下完棋后，提醒對(duì)方下棋 // function gameAI() //做鼠標(biāo)監(jiān)聽游戲邏輯document.οnmοusedοwn= function(e){window.onclick = function (){//獲取下棋的坐標(biāo)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("不好意思！你來晚了，已經(jīng)被對(duì)方捷足先登了");}}}</script></body> </html>

代碼不全，會(huì)陸續(xù)加上。

轉(zhuǎn)載于:https://www.cnblogs.com/lgbloglg/p/7113024.html

總結(jié)

以上是生活随笔為你收集整理的hbulider初学教程及html5五子棋小程序的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。