ダウンアナアカバのキャンディクラッシュチュートリアルパート4 -ダウンキャンディーを移動し、新しいキャンディーを生成し、スコアボードを追加

20743 ワード
codenewbie tutorial javascript 100daysofcode テキストリンク
この技術的な故障から継続して、このゲームを作成するには、次の最後のタスクは、キャンディーは、新しいキャンディーを作成し、移動し、スコアボードを作成生成されます!

キャンディーズダウン
私たちはmovedownという名前の関数を作成し、forループを追加して四角い55までのすべての正方形をチェックします.この関数では、空の四角形の選択したインデックスの下にある四角形をチェックします.インデックス番号を8とし、幅を8にします.たとえば、インデックス7にある場合は、以下の四角形がインデックス15であるかどうかを確認します.
forループの中でチェックします.スタイル.四角形の背景色がif文を使用して空である場合は、BackgroundColorプロパティを参照し、厳密な等値を使用して空の文字列に設定します.
function moveDown () {
    for(let i = 0; i < 55; i++){
        if (squares[i + width].style.backgroundColor === ‘’){

        }
次に、それが空であるならば、我々はキャンディ広場を動かしたいです.正方形7と四角形15の上から同じ例を使用している場合、正方形15を正方形7に等しくする必要がある.これは、現在の広場15は空の広場7は現在、その場所で動いているダウン運動を作成しています.
squares[i + width].style.backgroundColor = squares [i].style.backgroundColor
最後に四角形を空の文字列に設定します.したがって、現在、正方形7は空です、そして、この輪は、空のスペースが適切な正方形で満たされることを確認するために繰り返されます.
squares[i].style.backgroundColor = ‘’

function moveDown () {
    for(let i = 0; i < 55; i++){
        if (squares[i + width].style.backgroundColor === ‘’){
        squares[i + width].style.backgroundColor = squares [i].style.backgroundColor
        squares[i].style.backgroundColor = ‘’
        }
    }
}
ゲームを通して実行することを確認するために、setinterval関数に追加します.また、この関数は100ミリ秒毎に実行されます.
window.setInterval(function(){
        moveDown()
        checkRowForFour()
        checkColumnForFour()
        checkRowForThree()
        checkColumnForThree()
    }, 100)

新しいキャンディー
Mozedown関数の中では、まず最初の行をconst変数と定義します.
const firstRow = [0, 1, 2, 3, 4, 5, 6, 7]
次に、最初の行が上記の配列項目のいずれかを含むかどうかを確認します.を返します.
const isFirstRow = firstRow.includes(i)
if文を作成することによって、正方形の両方の条件が最初の行にあるかどうか、そして、正方形が空であるかどうかチェックします.もしそうならば、我々はランダムな色でそれを満たす必要があります.ANIAは、ビデオの状態として、“ランダムカラー”実際には、キャンディ色の配列でキャンディ色にアクセスするために使用することができます乱数です.
if (isFirstRow && squares[i].style.backgroundColor === ‘’){
    let randomColor = Math.floor(Math.random() * candyColors.length)
}
最後に、その正方形を取り、CandyColors配列に等しく設定します.我々は、CandyColors配列内の番号を取得するステートメントで作成されたRandanColor変数を使用しています.
if (isFirstRow && squares[i].style.backgroundColor === ‘’){
    let randomColor = Math.floor(Math.random() * candyColors.length)
    squares[i].style.backgroundColor = candyColors[randomColor]
}
最終的なコードは次のようになります.
function moveDown () {
    for(let i = 0; i < 55; i++){
        if (squares[i + width].style.backgroundColor === ‘’){
        squares[i + width].style.backgroundColor = squares [i].style.backgroundColor
squares[i].style.backgroundColor = ‘’
        if (isFirstRow && squares[i].style.backgroundColor === ‘’){
        let randomColor = Math.floor(Math.random() * candyColors.length)
        squares[i].style.backgroundColor = candyColors[randomColor]
            }
        }
    }
}

スコアボード
scoredisplayと呼ばれるconstを作成し、HTMLファイル内のスコアIDに等しく設定します.getElementByid ()メソッドを使用してこれを行います.
document.addEventListener('DOMContentLoaded', () =>
    const grid = document.querySlector('.grid')
    const scoreDisplay = document.getElementbyId('.score')
    const width = 8
    const squares = []
    let score = 0
)
次に、このシリーズのパート3で作成された' Change for Match '機能にscoredisplayを追加します.InnerHTMLプロパティを使用して、スコアマークアップをページに設定します.
// Check column for a match of 4
function checkColumnForFour() {
    for(i = 0; i < 39; i++){
        let columnOfFour = [i, i+width, i+width*2, i+width*3]
        let decidedColor = squares[i].style.backgroundColor
        const isBlank = squares[i].style.backgroundColor === ‘ ’
        if (columnOfFour.every(index => squares[index].style.backgroundColor === decidedColor && !isBlank){
            score += 4
            scoreDisplay.innerHTML = score
            columnOfFour.forEach(index => {
            squares[index].style.backgroundColor = ‘’
        })
      }
    }
}
HTMLファイルでは、スコアボードのクラスとdivを追加します.これは、我々はスコアボードを注入している場所です.それから、我々は2つの見出しタグを加えました.つは、単語のスコアを持ち、他のスコアのIDが実際のスコアを保持します.これは、JavaScriptで我々のcont scoredisplayを割り当てたところです.
<!DOCTYPE html>

<html>
    <head>
      <meta charset=“utf-8”>
      <title>Candy Crush</title>
      <link rel=“stylesheet” href=“css/style.css”>
      <script src=“js/app.js” charset=“utf-8”></script>
    </head>
    <body>

      <img class=“logo” src= “images/candycrush.png” alt=“Candy Crush Logo”>

      <div class=“gameboard”>
      <div class=“Score-Board”>
        <h3>Score</h3>
        <h3 id=“score”></h3>
      </div>

      <br>
      <div class=“grid”></div>
    </div>
    </body>
</html>
そこにキャンディクラッシュの超簡単な演出があります!あなたがゲームの私のバージョンを見たいならば、あなたは私のチェックアウトすることができますGitHub repository .
私は、私は、世界のほとんどのほとんどは、現在執着されている動物の交差点のテーマです.あなたがキャンディ色を表すために果物をつくったように、アニアの終わりに、アニアがあなたのCandyColors配列でイメージを加えることができる方法を示します.スタイルの残りの部分-背景、キャンディのアイコン、および私はAdobe Photoshopとイラストレーターで作成したロゴ.
私がこのコードを壊したので、一緒に続くためのありがとう!素晴らしいチュートリアルのためのアナアクボに感謝し、私はあなたがJavaScriptのより良い理解を持って願っています.

MDNウェブドキュメント

トピックは以下の通りです.
  • includes() -
  • conditional statements
  • logical AND (&&)
  • for loop
  • setInterval function
  • getElementById()
  • innerHTML
    • 上記の各関数とメソッドはそれぞれのMDN Webドキュメントページにリンクされます.これは一連の破壊を終わらせる.
    私の構文または文法に誤りがあるならば、私にコメントまたはメッセージを私に教えさせてください!これは私の最初の技術的なブログの投稿ですので、私は可能な限り最高の情報を共有していることを確認したい.
    【動的ソフト】mysqlデータベースストレージプロセスを一括生成するテンプレート
    ファイルをcpanfileのURLとして指定します