자바스크립트로 게임 만들기⑥~애플 포착 득점~

자바스크립트로 게임 만들기⑤~불규칙하게 사과 떨어뜨리기 반복하기~에서 불규칙하게 떨어지는 것이 게임 같은 동작으로 변했다.
마지막으로 바구니 하나로 애플의 득점을 받을 수 있는 메커니즘을 만들자.

■바구니에 사과 받기

가마에 사과를 받을 수 있도록 가마와 사과가 겹치는 순간 사과가 사라지고 그 위에서 떨어진다.
'자바스크립트 게임 제작 ⑤~불규칙적으로 애플이 떨어지는 것을 반복한다~'에서 애플의 수직 위치(y)가 화면의 맨 아래를 넘어서면 수직 위치는 0으로 회복된다.
이걸로 가마와 겹치면 수직 위치를 0 이하로 회복합니다.
순환 처리에 새 코드를 추가합니다.★ 새 코드입니다.

    // ループ処理の実装
    app.ticker.add(function(){
        //Pixiアプリの子要素に対する処理
        app.stage.children.forEach(element => {
            //カゴ以外の場合、落下処理を実施する
            if(basket != element){
                element.y = element.y + 1;//落下移動
                //リンゴのｙ位置が画面を超えた場合、新しいｙ位置を設定する
                if(element.y > app.view.scrollHeight){
                    //配列からランダムにｙ位置を取得
                    random = Math.floor( Math.random() * y_positions.length );
                    element.y = y_positions[random];//垂直位置にランダム値を設定
                }
                //★リンゴとプレイヤーの位置が一致した場合、新しいｙ位置を設定する
                if(element.x == basket.x && element.y == basket.y){
                    //★配列からランダムにｙ位置を取得
                    random = Math.floor( Math.random() * y_positions.length );//★
                    element.y = y_positions[random];//★垂直位置にランダム値を設定
                }
            }
        });
    });

if(element.x=basket.x &element.y=basket.y)로 애플(element)의 수평 위치와 수직 위치가 바구니(bascket)와 겹치는지 판단한다.
"=="은 왼쪽과 오른쪽의 값이 일치하는지 여부를 묻는 조건입니다.
'&&'는 두 가지 조건을 충족시킨 후 처리를 집행한다는 뜻이다.
일치하는 후 {}의 처리를 실행합니다.
브라우저에서 확인하세요.광주리와 사과가 겹치는 순간 사과는 위로 이동한 뒤 다시 떨어진다.

■ 사과를 잡고 득점

바구니가 사과를 받아 득점을 하여 득점을 표시하다.
다음 코드를 추가합니다.순환 처리하기 전에 추가하십시오.

    // 得点
    const score = new PIXI.Text("得点:0");//変数に格納
    score.position.set(12, 12);//表示位置
    app.stage.addChild(score);//画面に追加

득점 부분을 만든다.PIXI.텍스트 유형의 부품은 Text()를 통해 제작할 수 있습니다.
처음에 점수: 0으로 표시되므로 Text()에 기술을 추가하면 표시됩니다.
position.set()에서 표시 위치를 지정합니다.왼쪽 상단은 수직 위치, 수평 위치는 0으로 그곳에서 오른쪽으로 12px, 아래로 12px를 이동한 후 표시됩니다.
그럼 득점 부분에 사과를 받는 수를 표시하세요.
★의 행은 추가·변경 행이다.

    // ループ処理の実装
    let count_up = 0;//★得点をカウントアップする変数を宣言
    app.ticker.add(function(){
        //Pixiアプリの子要素に対する処理
        app.stage.children.forEach(element => {
            //★カゴとスコア以外の場合、落下処理を実施する
            if(basket != element && score != element){//★
                element.y = element.y + 1;//落下移動
                //リンゴのｙ位置が画面を超えた場合、新しいｙ位置を設定する
                if(element.y > app.view.scrollHeight){
                    //配列からランダムにｙ位置を取得
                    random = Math.floor( Math.random() * y_positions.length );
                    element.y = y_positions[random];//垂直位置にランダム値を設定
                }
                //リンゴとプレイヤーの位置が一致した場合、新しいｙ位置を設定する
                if(element.x == basket.x && element.y == basket.y){
                    //配列からランダムにｙ位置を取得
                    random = Math.floor( Math.random() * y_positions.length );
                    element.y = y_positions[random];//垂直位置にランダム値を設定
                    //★得点を１つアップ
                    count_up = count_up + 1;//★カウントアップ
                    score.text = "得点:" + count_up;//★スコアパーツに代入
                }
            }
        });
    });

순환 처리 전에 득점해야 하는 변수를 성명한다.초기값은 0입니다.
순환 처리에서 성명하면 매번 순환은 0이다.
바구니와 사과가 겹치는 조건에 득점 처리를 추가한다.
1개 수치와 득점 증가: + 연결 가능.그 결과는'득점:10'을 나타낼 수 있다.
그럼 브라우저에서 확인해 보세요.

사과를 받으면 0, 1, 2...이렇게 하면 높아진다.
게임은 이것으로 끝냅니다.어때?
이 기사를 통해 자바스크립트가 게임을 만드는 재미를 전할 수 있다면 정말 좋겠다.