ヘビを書くためにはJavaScriptを使用する方法

スネーク我々は、すべての演奏が、あなたはものを作るのだろうか？これは、ハードな外観のように聞こえる実際にいくつかの単語の非常に単純な男は言った、直接コードに
、私たちは、DOM最初の構造を記述します

        </div>

    </div>

これは、大きな箱の全体のレイアウトのためのコンテンツ、蛇は、ボックス内の蛇たちは頭を区別するために名前を追加した最初のボックスに頭を区別するために、彼の体であり、その後の追加のCSSを聞かせて

<スタイル>
■は{
幅：60PX;
高さ：60PX;
背景色：赤。
位置：絶対;
左：0;
トップ：0;
行の高さ：60PX;
}
.head {
背景色：黄緑色。
}
</スタイル>

私たちは60個のピクセルに蛇の幅と高さのセットに、各セクション、および位置を与え、私たちが見つけていない場合は、ドキュメントフロー（ページに浮上）の彼を得ることができなかった、とフォローアップためには、左と上を通ってくることができません彼の座標を判断します。

グッド我々は（ -どこ美しい自然ガチョウは表示されませんでした- ）素敵なヘビを得たので。何？あなたはそれを見ることができないオーバーラップするので、ちょうど頭と体を前の要素が上書きされます背後にある要素を配置した後の要素に加えて、彼の頭に行ってきました非常に単純な私に尋ねます。
その後、我々は、ヘビの移動の権利をさせる必要があり、証券コードクエリwww.gendan5.com/topic/lcSearch.htmlだから、どのように我々は彼がそれを移動させていますか？原理は非常に簡単です、我々はすべての時間は彼が動き回るせ、タイマーを設定し、そしてどのように彼はそれを移動できるようにすることができ、唯一の裁判官によって上下その後、その+ = 60上のすべての動きの値という、値を設定する必要があります周りに移動したり、要素やトップ割り当てに左に移動します。次のコードを出てきた私たちは、コードのロジックを記述

<スクリプト>
VAR boxs = document.querySelectorAll（ "ボックス。"）;
VAR snake_x = 0;
VAR snake_y = 0;
VaRのターン=「右」。
setInterval（関数（）{
snakeMove（）;
}、100）
関数snakeMove（）{
スイッチ（ターン）{
場合"右"：snake_x + = 60;ブレーク。
ケース"左"：snake_x - = 60;ブレーク;
ケース"トップ"：snake_y - = 60;ブレーク;
ケース"底"：snake_y + = 60;ブレーク;
}

        for(var i = boxs.length - 1; i > 0 ; i --){
            boxs[i].style.left = boxs[i - 1].style.left;
            boxs[i].style.top = boxs[i - 1].style.top;

        }
        boxs[i].style.left = snake_x + "px";
        boxs[i].style.top  = snake_y + "px";

    }

document.onkeydown =関数（EVT）{
VAR電子= EVT || イベント;
VARのkeyCode = e.keyCode || e.which;
スイッチ（のkeyCode）{
ケース37：ターン=「左」、ブレーク。
ケース38：ターン= "トップ";休憩;
ケース39：ターン= "右";休憩;
ケース40：ターン= "下";休憩;
}
}

</ SCRIPT>

上記のコードは、我々は彼の方向を変更するためにキーボードの方向キーを入力することにより、Xを与え、蛇の初期位置のy座標が0に設定され、デフォルト初期すぐ。その中でも、難易度の嘘

用（VARのI = boxs.length - 1、I> 0; I - ）{
boxs [I] .style.left = boxs [I - 1] .style.left。
boxs [I] .style.top = boxs [I - 1] .style.top。

        }
        boxs[i].style.left = snake_x + "px";
        boxs[i].style.top  = snake_y + "px";

このコードブロックは、このコードの目的は、フロント歩行の後ろの要素に従うことで、それは蛇の体のすべての部分を聞かせ運動するようになった、非農業部門雇用して、最終的にはsnake_xとsnake_yに頭を与えることです電流値ができ、従って最初の（ヘッド）を形成する座標値の前に第二のブロックに値snake_x、リアルタイムでsnake_y変化、最初のブロックの前に第二のブロックの値、第3のブロックを。。。だから、の効果と一緒に行くためにヘッド本体を取得

あなたはこのヘビがあまりにもいたずらでなく、無制限の前方その後、外出先の国境に行ってきましたことを見つけ、それが蛇を任せることはできない、ああしないだろうということでしょう実行しているにコードを失うときあなたが持っているのでしかし、実行されませんプラスヘビボーダー

   var snake_x_max = document.documentElement.clientWidth ;
    var snake_y_max = document.documentElement.clientHeight;

IF（snake_x> snake_x_max）{
snake_x = 0。
}
IF（snake_x <0）{
snake_x = snake_x_max。
}
IF（snake_y> snake_y_max）{
snake_y = 0。
}
IF（snake_y <0）{
snake_y = snake_y_max。
}

ここでは、現在のウィンドウの幅と高さの最大値x、yを設定して、現在の座標ならば、最大値よりも大きい場合、if文を決定し、現在のトーク正規化座標0、0は、それが（すなわち左境界が行ったよりも小さいです）、ストアは、現在は、それが境界を得ることができるように、最大値に設定された座標

あなたはそれを離れて得るために、このように思いますか？nonono、それは蛇呼び出すことができますどのようにヘビを食べるために食べ物は、それが何の魂の騒々しされません。ここでは、（ヘビ空腹の権利を任せることはできない）食べ物を作り始めます。

        </div>

そして、彼にCSSを与えます

#food {
幅：60PX。
高さ：60PX;
位置：絶対;
背景：greenyellow。
}

次いで、要素および彼の左と上の値を結合がランダムな位置を生成するために行うことができる乱数の範囲内に設定されているもの

VAR FD =のdocument.getElementById（ "食品"）;
fd.style.left = Math.random（）snake_x_max + "PX"。
fd.style.top = Math.random（） snake_y_max + "PX"。

我々は、ランダムに生成されますので、良い食べ物

しかし、私たちの食べ物と蛇が通過した後、その中にはほとんど関心を持っているように見えたし、食べられないだろう、我々は彼に右の衝突検出を与えるために持っているので、衝突検出ロジックは、ちょうど左にするために、非常に簡単で、食品の頭値左の減算値の絶対値<=食品の大きさ、及びトップ値の食品トップヘッド部分との絶対値を減算した値<=食品の大きさ、及び裁判官するよう未満等しい提供されるような直接使用、それが必要なら二つの要素完全に仕事オーバーラップ、我々は必要なものの位相が値まで低減され、その結果後半のエッジは、行うために、2つに等しい場合にも満たされます。そして、怠惰なクローニング法に適用できる（ヘビの内側のクローン化されたボディにするとき食品とヘッドが衝突、ヘビの体のパーツアウトを決定し、食品の位置をリフレッシュしてみましょう、この方法は、場合にのみ、怠惰なヘビの開始適用します身体が来るとき蛇の体は、我々は唯一のブロックアウトして、コメントを追加classNameは、ジョブに親要素に追加のcreateElementによって新しいボディを作成するには、既存の体のクローンを作成することができない場合、）起動しなくなります。ここでは、コードにロジックを置きます

VAR DL = snake_x。
VAR DT = snake_y。
VAR FL = fd.style.left。
VARフィート= fd.style.top。
VAR DV = document.querySelectorAll（ "＃蛇DIV"）;
VAR SK =のdocument.getElementById（ "蛇"）;
VaRのA2 =番号（0（fl.substring、fl.indexOf（ "PX"）））。
VaRのB2 =番号（ft.substring（0、ft.indexOf（ "PX"）））。
IF（Math.abs（DL-A2）<= 60 && Math.abs（DT-B2）<= 60）{
fd.style.left = Math.random（）1000+ "PX"。
fd.style.top = Math.random（） 800+ "PX"。
sk.appendChild（DV [1] .cloneNode（））。
boxs = document.querySelectorAll（ "ボックス。"）;

前記方法ストリングの長いリストは、取得した値のフォーマットは、例えば、残っているとトップ「200pxの」は、そのようなアレイは、数学演算することができないので、それを遮断するPX、および残りの文字べきであること数タイプに文字列「200」は数学演算を実行することができます。

ヘビを書くためにはJavaScriptを使用する方法

おすすめ