フロントエンドは、手の小さなプロジェクトを実践 - スネーク
最初から彼らが望む最後まで言うのは難しいことができますが！ハッピー
jsは独立した書き込みダウン以上の収穫、アイデアと遭遇した問題の詳細な態様について、以下の言いました
ここに私のルールの簡易版、である、ランダムな食べ物、長さがインクリメントされているすべての蛇を食べるがあります。
億、HTML、CSSレイアウトは、いくつかの小さな点のことに留意すべきです
ゲームのゲームボックスの幅と高さを正確に蛇が国境を越えて来るかどうかを決定するために、小さな蛇の幅と高さの整数倍に設定されなければなりません。
実際には、このゲームのレイアウトは、国境に注意を払う必要があり、主に幅と高さの設定では、比較的簡単であるなどと、ボックスの状況の実際の幅と高さに影響を与えるだろう
box-sizing=border-box;、あなたが数学を行うことができますすることができます。ここでは、ベースモデルのリストボックスとjQueryの対応方法があります
- 幅（） - 設定または返す素子幅
- 高さ（） - 設定または返す要素の高さ
- innerWidth（） - （パディングを含む）戻り要素の幅
- innerHeightは（） - （パディングを含む）戻り要素の高さ
- outerWidthの（） - （+パディング境界を含む）要素の幅を返します
- outerWidthのは（真） - （パディング+ボーダー+マージンを備えた）要素の幅を返します。
ここでは、裁判官に委ね。ヘビ片が比較的私はオフセット（）を使用し始めたときに直接セットで左上CSSの位置変更と修正位置している見つけるが、この変化に重大な問題がありますそれは、次の要素は、ページの再構築を実行している要素を削除するだろう、まだドキュメントフローに関しては未定です。
あなたのような人によると、お気に入りの写真に背景を設定することができ、コンテンツボックス（一番外側）を得た背景画像を設定され、その後、インデックスを見て= -1マスクの箱絵がゲームに影響を与えないように、グレーを形成するために、明るすぎますディスプレイ。
まず、初期化イベントリスナー
イベントは次の3つにバインドするためのプロジェクトは、比較的簡単です。
1）キーボタン
グローバルバインディング文書にここで採用からkeyupためのトリガ・イベントを押すと結果のゆるみによるものではない繰り返し減らす代わりに、KeyDownイベント
- Event.keyは、キーを使用して得られたアサインタイプ（グローバル変数を移動するためにどの方向を決定するために使用される）、次いで、プレスし、
- あなたが運動の主要な反対の方向を押すと、それは無効な操作とみなさことに留意すべきです。
2）[スタート]ボタン
彼女は、インターフェース、ゲームのインターフェイス表示を撤回し始めた、とタイマーが作動し始めます。
3）再開ボタン
ページの終わりゲームインタフェース表示を終了し、そしてするゲームボックスを初期化する（または継続最後のゲームの終了時に蛇が続きます）
第二に、ヘビの動きを移動します（）
基本的な考え方は、移動の方向を決定する（方向キーを押す）、ヘビ蛇の最後のブロックの方向は、蛇の動きを達成することになるでしょう、各タイプに応じて、速度がグローバル変数速度によって制御され、タイマーを設定します。
ヘビ制御moveDirection（の方向）
4つの場合、時間event.key ArrowUp、ArrowDown、ArrowLeftの対応する値とArrowRight。
- 押してキーを右時間：最初のコンプライアンスのための次の（動きの次の方向）ライギョ位置位置を決定- 壁に実行されません（ルール）、ゲームの現在のラウンドの終了を直接呼び出しゲームオーバー機能を満たしていない、とfalseを返す必要があり、この機能は、続く文を実行するために継続するかどうかを決定するために使用する機能を移動するために戻って呼び出されます。
- 彼らが仕様を満たしている場合には、前方に移動するremoveElement蛇を達成するための機能を使用し、基本的な考え方は次のとおりです。
- 現在のフラグが（後ろ蛇食品を食べるかどうかを決定するために言うだろう）場合、ヘビと同じノードを作成1ではない、その後、現在のテール・ノードを削除します。
- ヘッドノードとテール・ノードの位置を変更し、それに追加作成されたノードのヘッドノードの背面では、（ここでは右と便利な比較を変更する方法を考えるために）;
- この関数は、現在の動きの方向を知らないので、あなたは、removeElement機能に直接添加されているノードの位置を設定することができない、この新しく作成されたノードに、（また、コールバックコールバック関数によって達成することができる）当時次の4つのケースを返すように、各ノードの位置を提供しました。
第三に、食品randomFoodの出現（）
- 現在のゲームがない食べ物は、食べ物だけを追加する場合は判断します。
- ので、ゲームが設定されている開始フレーム・サイズ、小蛇の倍数である幅、高フレームを設定ゲームがブロックアーチファクトのグラフ用紙とみなすことができます
- ここでゲームボックス500 * 20 * 20 800小さなヘビ。
- そのX、Y座標、x∈毎回ランダムに生成する（0,1,2、...、39）、y∈（0,1,2、...、24）は、夫々、次いで20を得るXY *食品の位置。
- ゲーム（個人ハッハッハ）楽しさを向上させるために、ゲームの背景がランダムにすべての権利であることを引かれ、その後、お気に入りのいくつかの写真になることができます。
第四には、食べ物は、その長さを変えます
フラグにグローバルフラグを使用することをここに
- フラグは等しくなり、1に設定されている場合、各移動ヘビ後、蛇は、食品のヘッドノードの現在の位置と比較されるであろうまだ長さの変化を達成します。
- 蛇は、次回に移動する（フラグ=== 1）：
- テール電流ノードは削除するが、現在の蛇テール型テール・ノードの識別を除去されていない、すなわちヘビ共通ノードにそれを回すために、。
- ゼロにフラグ戻ります。
- なぜ変化を達成するために、このような長さ？順方向のライギョのフラグ値は、ノードを追加する理由に関係なく、理由は次のとおりです。
- フラグが0である場合、それは食べる食べ物がない場合、その後、移動スネークを達成するために、テール・ノードを削除する、です。
- フラグが1の場合、すなわち食物を食べる場合には、テール・ノードの共通ノードは、蛇の追加長さになる削除されません。
第五に、彼らの衝突判定（ルール番号2）
ここで衝突がヒットするとき、確かに、考えることができるようにヘッドノードが他のノードを打つあなたは、次のアイデアを持つことができますので、：
- 食べ物は最初の兄弟ノードであるため、すべての兄弟兄弟ヘッドノード（「スネーク」）を通じ、食品にトラバース上に行くしないように注意してください。
- ゲームオーバーである場合に等しく、それぞれ2つの値が等しいされ、最初のノードかどうかを各ノードの左及び上位置の値を参照してください。