javascript 初學教程及五子棋小程序的簡單實現(xiàn)
一.JavaScript簡介
JavaScript一種直譯式腳本語言，是一種動態(tài)類型、弱類型、基于原型的語言，內(nèi)置支持類型。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用于客戶端的腳本語言，最早是在HTML（標準通用標記語言下的一個應用）網(wǎng)頁上使用，用來給HTML網(wǎng)頁增加動態(tài)功能。
二.hbulider工具的使用
1）
hbulider的特點：
1.飛快的編碼速度
2.HBuilder直接創(chuàng)建移動App，打包為ios或Android原生安裝包
3.HTML5語法、HTML5+語法、三大瀏覽器擴展語法，盡收HBuilder中
4.綠柔設置界面，更加護眼
2）
下載hbulider安裝包
百度搜索hbulider，進入官方網(wǎng)站，點擊右上角 download 按鈕，即可下載。
4）
下載完成后可以看到下載到的是一個壓縮包，打開下載的壓縮包，將壓縮包內(nèi)的文件解壓到希望存放的位置，點擊確定。
5）
解壓完成后，找到解壓位置，點擊hbulider.exe文件，開始安裝。
6）打開后選擇一個一般用來存放代碼的文件夾作為代碼目錄。
7）根據(jù)自己的實際情況，選擇所能看清楚的顏色塊，然后點擊下方 生成適合你的視覺方案 生成一個舒適的配色。
8）選擇喜歡的視覺主題，點擊下面的 確認并關閉 ，完成設置。
9）完成后進入到歡迎向?qū)?，如圖，到此安裝完成。
三.用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";
//棋子數(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;
}
}
//重復調(diào)用 在做坦克大戰(zhàn)之類游戲 需要使用。。。。。。。
// window.setInterval(函數(shù),時間);
//游戲是否結(jié)束
// function isGameWin()
//如果是人機對戰(zhàn)版，則需要下棋的AI 如果不是人機對戰(zhàn) 則下完棋后，提醒對方下棋
// function gameAI()
//做鼠標監(jiān)聽 游戲邏輯
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("不好意思！你來晚了，已經(jīng)被對方捷足先登了");
}
}
}
</script>
</body>
</html>
代碼不全，會陸續(xù)加上。
以上這篇javascript 初學教程及五子棋小程序的簡單實現(xiàn)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
Email地址加密javascript版...2006-08-08
這篇文章主要介紹了JS解析XML的方法,實例分析了javascript針對IE瀏覽器與非IE瀏覽器解析XML文件的技巧,非常具有實用價值,需要的朋友可以參考下2015-01-01
本文主要介紹了JS變量及其作用域的相關知識。具有很好的參考價值，下面跟著小編一起來看下吧2017-03-03
這篇文章主要介紹了JS實現(xiàn)從頂部下拉顯示的帶動畫QQ客服特效代碼,可實現(xiàn)彈性緩沖效果的彈出QQ客服窗口的功能,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
這篇文章主要介紹了微信小程序自定義toast組件的方法,結(jié)合實例形式詳細分析了微信小程序自定義toast組件的步驟、實現(xiàn)方法及相關操作技巧,需要的朋友可以參考下2019-05-05
這篇文章主要為大家詳細介紹了javascript實現(xiàn)下拉菜單，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-02-02
uni-app打開外部鏈接方式總結(jié)(h5和app)
uni-app在app和h5中跳轉(zhuǎn)至外部鏈接的方式有所不同,需要進行條件編譯,下面這篇文章主要給大家介紹了關于uni-app打開外部鏈接方式(h5和app)的相關資料,文章通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-02-02
限制文本框只能輸入數(shù)字||只能是數(shù)字和小數(shù)點||只能是整數(shù)和浮點數(shù)
這篇文章主要介紹了限制文本框只能輸入數(shù)字||只能是數(shù)字和小數(shù)點||只能是整數(shù)和浮點數(shù)的實例代碼，非常不錯，也比較實用，需要的小伙伴一起看下吧2016-05-05
這篇文章主要介紹了JS對圖片進行黑白化的實現(xiàn)代碼,需要的朋友可以參考下2018-04-04
如何使用 Intl.RelativeTimeFormat 在 JavaScript&nbs
Intl.RelativeTimeFormat是JavaScript提供的一個國際化API,用于格式化相對時間,如"3天前"或"2年后",支持多種語言和配置選項,適用于社交媒體時間戳和事件提醒等場景,它簡化了國際化的相對時間顯示,使開發(fā)者能夠根據(jù)用戶的語言和區(qū)域設置輕松實現(xiàn)時間格式化2024-09-09