移動を開始して角括弧で配列を修正する方法

Question

現在、HTML5、CSS、およびJS関数を含む角括弧を使った基本的なヘビゲームに取り組んでいます。私は自己教えのコーダーであり、最近私はJavaScript関数を使ってロードブロックを打ちました。私は蛇の動きを開始しようとしています（これは完全に失われており、そのコードは助けにはなりません）、ゲームの開始時に5つのボディーセグメントを含む配列を作成します。そこから、私は動きを把握し、より多くの身体部分をアレイに追加することができるはずです。

これまでのところ、私のコードはちょっと面倒だと思いますが、これは私がフル稼働のゲームで初めて試みたものです。これは、テキストベースのアドベンチャーゲームです。

SnakeBodyは、ヘビのボディセグメントを保持するように設定した配列です。 ctxは、キャンバスオブジェクトを開始するときの "theCanvas.getContext（" 2d "）"シーケンスからのステミングの短縮形です。 cwはキャンバスの幅を表す「theCanvas.width」の短縮形であり、chchもキャンバスの高さを表す「theCanvas.height」から短縮されています。

このコードセグメントの計画では、genSnakeBody（）を使用してスネークのボディの次の部分を生成し、次にdrawSnake（）関数を使用してスネークのイメージをキャンバスに描画しました。

すべてのご協力をよろしくお願い申し上げます。

function genSnakeBody() { 
    var BodyHeight = 15 // Height of the snake's body 
    var BodyWidth = 15 //Width of the snake's body 
    var BodySpeed = 10 //Speed of the snake 

    var body = { 
     x: cw/2 - (BodyHeight/2), 
     y: ch/2 - (BodyWidth/2), 
     h: BodyHeight, 
     w: BodyWidth, 
     color: "green", 
     speed: BodySpeed 
    }; 
    var length = 5; 

    SnakeBody.push(body) 
} 

function drawSnake() { 
    var length = 5 
    for (i = 0; i < SnakeBody.length; i++) { 
     ctx.beginPath(); 
     ctx.fillStyle = SnakeBody[i].color; 
     ctx.fillRect(SnakeBody[i].x, SnakeBody[i].y, SnakeBody[i].w, SnakeBody[i].h); 
     ctx.strokeRect(SnakeBody[i].x, SnakeBody[i].y, SnakeBody[i].w, SnakeBody[i].h); 
     ctx.closePath(); 
    } 
} 

私は、ページがロードされたとき、これは5セグメント蛇になるだろうことを期待していました。

代わりに、画面の中央に1つのボックスがあり、他のボックス（他のボックスにも対応可能な場合）が表示されている場合はわかりません、またはそれらが単に存在しない場合。

私が前に言ったように、あらゆる助けが大いにありがたく、私はそれを楽しみにしています!!あなたがこれを読んで解決策を提案しようと思ってくれてありがとうございました。コードが悪い場合は、私が持っているもののクリーナーバージョンを作成し、この問題を別の角度から試してみてください。ありがとうございました！ここであなたにスクリプトを変更最小限の量を維持しようとし

Answer 1

は、作業コードスニペットです：

（いくつかの野生の推測です）不足している変数は別に

var c = document.getElementById("canvas"); 
 
var cw = 200; 
 
var ch = 200; 
 
var ctx = c.getContext("2d"); 
 
var SnakeBody = [] 
 

 
function genSnakeBody(index) { 
 
    var BodyHeight = 15; // Height of the snake's body 
 
    var BodyWidth = 15; //Width of the snake's body 
 
    var BodySpeed = 10; //Speed of the snake 
 

 
    var body = { 
 
    x: cw/2 - (BodyHeight/2) * index, 
 
    y: ch/2 - (BodyWidth/2) * index, 
 
    h: BodyHeight, 
 
    w: BodyWidth, 
 
    color: "green", 
 
    speed: BodySpeed 
 
    }; 
 

 
    SnakeBody.push(body) 
 
} 
 

 
function drawSnake() { 
 
    var length = 5; 
 
    for (var i = 0; i < length; i++) { 
 
    genSnakeBody(i); 
 
    ctx.beginPath(); 
 
    ctx.fillStyle = SnakeBody[i].color; 
 
    ctx.fillRect(SnakeBody[i].x, SnakeBody[i].y, SnakeBody[i].w, SnakeBody[i].h); 
 
    ctx.strokeRect(SnakeBody[i].x, SnakeBody[i].y, SnakeBody[i].w, SnakeBody[i].h); 
 
    ctx.closePath(); 
 
    } 
 
} 
 

 
drawSnake();

<canvas id="canvas"></canvas>

ここ数追加されたもの：インデックスと

• コールgenSnakeBodyのWiから呼び出された場合、それは各ボディパーツをdifferenciateことができるように細いループ
• は `SnakeBody`と` ctx`は何ですか？drawSnake loop