A small example for beginners of hbulider-JS Tutorial-php.cn

A small example for beginners of hbulider

零下一度

Release： 2017-07-17 16:04:04

Original

2361 people have browsed it

1. The use of hbulider tool

Features of hbulider:

1. Fast coding speed

HBuilder can directly create mobile apps and package them as native installation packages for iOS or Android.

#4. Green Rou settings interface, more eye protection

## download hbulider installation package

百度 Search HBULIDER, enter the official website, click the download button in the upper right corner, that is, Available for download.

After the download is completed, you can see that what you have downloaded is a compressed package. Open the downloaded compressed package and copy the contents of the compressed package. Extract the file to the location where you want to store it, and click OK.

After decompression is completed, find the decompression location and click on the hbulider.exe file to start Install.

# 6) After opening, select a folder generally used to store code as the code directory.

7) According to your actual situation, select the color block that you can see clearly, and then click belowGenerate a visual plan that suits you

Generate a comfortable color matching.

#8) Select the visual theme you like, click below to confirm and close

to complete the setting.

#9) After completion, enter the welcome wizard, as shown in the figure, and the installation is complete.

3. Use hbulider to write a small backgammon program

<!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.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("不好意思！你来晚了，已经被对方捷足先登了");
                }
                
                
               }
            }            
            </script>
        
    </body>
</html>

Copy after login

The code is incomplete and will be added one after another .

The above is the detailed content of A small example for beginners of hbulider. For more information, please follow other related articles on the PHP Chinese website!