快捷導(dǎo)航

javascript 初學(xué)教程及五子棋小程序的簡(jiǎn)單實(shí)現(xiàn)

更新時(shí)間：2017年07月04日 08:14:08 投稿：jingxian

下面小編就為大家?guī)硪黄猨avascript 初學(xué)教程及五子棋小程序的簡(jiǎn)單實(shí)現(xiàn)。小編覺得挺不錯(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ū)?，如圖，到此安裝完成。

三.用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>
  
  <!--
    作者：offline
    時(shí)間：2017-07-03
    描述：使用js代碼控制游戲邏輯
  -->
    <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.onmousedown= 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ù)加上。

以上這篇javascript 初學(xué)教程及五子棋小程序的簡(jiǎn)單實(shí)現(xiàn)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: