この記事の例は、参照のためにJSスネークゲームの関連コードを共有しています。特定のコンテンツは次のとおりです
<！doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> snake game </title> <style>*{margin：0;パディング：0;} header {display：block;マージン：0 Auto;幅：500px;テキストアリグイン：center;}ヘッダーH1 {font-family：arial; font-weight：bold;} header #newgamebutton {display：block;マージン：20px Auto;幅：100px;パディング：10px 10px;バックグラウンドカラー：＃8F7A66;フォントファミリー：arial;色：白;ボーダーラジウス：10px;テキスト - デコレーション：なし;}ヘッダー#newgamebutton：hover {background-color：＃9f8b77;} header p {font-family：arial;フォントサイズ：25px;マージン：20px auto;} canvas {display：block;ボーダー：中程度のダブルブラック。マージン：4px auto;} </style> </head> <body> <header> <h1> snakeゲーム</h1> <a href = "javascript：newgame（）;" ID = "NewGameButton">新しいゲーム</a> <p>スコア：<SPAN ID = "SCORE"> 0 </span> </p> </header> <canvas id = "canvas">ブラウザは<code> canvas </code>要素をサポートしていません。 </canvas> <script> var canvas = document.getElementById（ "canvas"）; var ctx = canvas.getContext（ "2d"）; var snake = new Array（）; //キュー= "right"でヘビのボディvarをシミュレートします。 //スネークヘッドの方向を制御するために使用しますvarサイズ= 20; //ヘビボディの幅var foodx = 0; //食品のx座標var foody = 0; //食品のy座標var headx = 0; //ヘビヘッドのx座標var heady = 0; //ヘビヘッドのy座標var maxwidth = 200; //キャンバスの高さvar maxheight = 200; //キャンバスの幅var time = 400; //スネークの速度varスコア= 0; //プレーヤースコアの計算var interval = null; canvas.width = maxwidth; canvas.height = maxheight; window.onload = function（）{newgame（）;}; document.getElementById（ "newGameButton"）。 //キューを使用して、ヘビの体= "right"をシミュレートします。 //ヘビの頭の方向を制御するために使用しますheadx = 0; //ヘビヘッドヘッドのx座標= 0; //ヘビヘッドスコアのy座標= 0; Window.ClearInterval（間隔）;間隔= null; // Canvas CTX.ClearRect（0、0、MaxWidth、MaxHeight）を初期化します。 //ヘビdrawsnake（）を描く; //ポートフードsetFood（）; // senake interval = window.setinterval（move、time）;} function move（）{switch（dir）{case "up"：heady = heady-size; break;ケース「右」：headx = headx+size; break;ケース "ダウン"：heady = heady+size; break;ケース「左」：headx = headx-size; break; } if（headx> maxwidth-size || heady> maxheight-size || headx <0 || heady <0）{alert（ "your score is："+score+"ポイント、一生懸命働き続ける！失敗の理由：壁に走った......"）; window.location.reload（）; } for（var i = 1; i <snake.length; i ++）{if（snake [i] [0] == snake [0] [0] && snake [i] [1] == snake [0] [1]）{alert（ "your score is："+score+"ポイント、一生懸命働いてください！ window.location.reload（）; }} if（snake.length == maxwidth *maxheight）{alert（ "so awesome！〜"）; window.location.reload（）; } movein（headx、heady）; // 1つのグリッドを移動} document.onkeydown = function（e）{//ヘビの方向var code = e.keycode -37; switch（code）{case 1：dir = "up"; //ケース2のbreak; // 「左」;ブレーク; //左}} // ========================================================================== ========================================================================== ========================================================================== ========================================================================== ========================================================================== ========================================================================== snake.push（[headx、heady]）; //描画スネークボディスイッチ（dir）{case "up"：drawbody（headx、heady + size、headx、heady + 2 * size）;壊す;ケース「右」：drawbody（headx -size、heady、headx -2 * size、heady）;壊す;ケース「ダウン」：drawbody（headx、heady -size、headx、heady -2 * size）;壊す;ケース「左」：drawbody（headx + size、heady、headx + 2 * size、heady）;壊す; }}関数DrawBody（x1、y1、x2、y2）{ctx.fillrect（x1、y1、size、size）; ctx.fillrect（x2、y2、size、size）; snake.push（[x1、y1]）; snake.push（[x2、 y2]）;} // ======================================================================= ============================================================================== ============================================================================== ============================================================================== ============================================================================== ============================================================================== ============================================================================== ==============================================================================食品、サイズ、サイズ）;} function foodinsnake（）{for（var i = 0; i <snake.length; i ++）{if（foodx == snake [i] [0] && foody == snake [i] [1]）{return true; } } 戻るfalse;} // ==================================================================================== ========================================================================================= ========================================================================================= ============================================================================================================================================ ctx.fillrect（x、y、size、size）; // shenke headを再描画//新しいヘビの頭をヘビアレイvar newsnake = [[x、y]]に追加する; snake = newsnake.concat（snake）; if（false == eatfood（））{//食べ物を食べない場合は、1つのスネークテールvar snaketail = snakeTail = snakeTail = snake.pop（）; //ヘビの尾の位置ctx.clearrect（0]、snaketail [0]、snaketail [1]、size、size）; ctx.fillstyle = "block"; ctx.fillrect（Foodx、Foody、Size、size）; setFood（）;スコア++; //$("#score").text(Score）; document.getElementById（ "score"）。innerhtml = score; trueを返します。 } false;} </script> </html>を返します複製画像：
アイデア：
function newgame（）{ヘビと分数のデータをリセットします。クリア間隔;キャンバスを初期化します。ヘビを描く;食べ物を置きます。タイマー（SetInterval）を使用してヘビ（動き機能）を移動します。 } function move（）{方向に応じて、ヘビの頭の次の緯度の位置を変更します。ゲームが終了したかどうか、そして終了の理由（勝利または負けを含む）を決定します。ヘビは1つの緯度を移動します（movein function）; }キーボードの方向キーを監視し、グローバル変数dirの値を変更します（方向を保存するために使用）。関数movein（）{ヘビの頭の前の緯度に緯度を新しいヘビの頭として追加し、ヘビを表すアレイに最初の要素としてヘビの頭の座標を追加します。 （食べ物が食べられなかった）場合{ヘビの尾の緯度を削除し、キャンバスに対応する変更を加えます。 }}JSのキャンバスの幅と高さを設定する必要がある場合、他のCSSプロパティの設定とはわずかに異なることに注意してください。
canvas.width = maxwidth; canvas.height = maxheight;
編集者は、すべての人に素晴らしいトピックを準備しました：クラシックJavaScriptゲームの要約
上記はこの記事に関するものです。誰もがJavaScriptプログラミングを学ぶことが役立つことを願っています。