hbulider 초보자를 위한 작은 예-JS 튜토리얼-php.cn

hbulider 초보자를 위한 작은 예

零下一度

풀어 주다： 2017-07-17 16:04:04

원래의

2341명이 탐색했습니다.

1. hbulider 도구 사용

hbulider의 특징:

1. 빠른 코딩 속도

2. HBuilder가 직접 모바일 앱을 생성하고 이를 iOS 또는 Android용 기본 설치 패키지로 패키징합니다.

3 . HTML5 구문, HTML5+ 구문 및 세 가지 주요 브라우저 확장 구문이 모두 HBuilder에 포함되어 있습니다.

4. 눈에 더 친숙한 녹색 소프트 설정 인터페이스

hbulider 설치 패키지 다운로드

Baidu에서 hbulider를 검색하고 다음을 입력하세요. 공식 홈페이지에서 오른쪽 상단의 다운로드 버튼을 클릭하여 다운로드하세요.

다운로드가 완료되면 다운로드한 내용이 압축된 패키지임을 확인할 수 있습니다. 다운로드한 압축 패키지를 열고 저장하려는 위치에 압축 패키지의 파일을 추출합니다. 그것을 선택하고 확인을 클릭하세요.

압축해제가 완료된 후, 압축해제 위치를 찾아 hbulider.exe 파일을 클릭하여 설치를 시작합니다.

6) 개봉 후 일반적으로 코드를 저장하는데 사용하는 폴더를 코드 디렉토리로 선택합니다.

7) 실제 상황에 따라 선명하게 보이는 컬러 블록을 선택한 후 아래를 클릭하여 나에게 맞는 시각적 구성을 생성하여 편안한 색상 구성을 생성하세요.

8) 원하는 시각적 테마를 선택하고 아래의 확인 및 닫기를 클릭하여 설정을 완료하세요.

9) 완료 후 그림과 같이 웰컴마법사를 입력하시면 이제 설치가 완료됩니다.

3. 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.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>

로그인 후 복사

코드가 불완전하여 차례로 추가됩니다.

위 내용은 hbulider 초보자를 위한 작은 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!