キャンバス上のヘビ

尊敬されるHabraコミュニティに挨拶します。 リリースの日に「キャンバスとスプライトを使用してゲームを作成する」という記事を読んだ後、Canvasの知識を深めることにしました。 したがって、作業中にこの要素に対処する必要がない限り、APIをすばやく実行する必要がありました。
もちろん、線、長方形、三角形、半円を描くことは非常に楽しい仕事です。 しかし、実際の経験を積むために、タスクが設定されました-機能的でシンプルなものを作成する。

それで、アイデアはあなた自身のゲーム、おなじみのヘビを書くために生まれました。

残念ながら、仕事と休息には非常に時間がかかるため、ゲームは今だけ終了しました。
ゲームのベータ版のデモンストレーションとして使用してください。 誰かが私の仕事を手伝ってくれるかもしれません。 おそらく招待を受けるでしょうが、同時に同僚の批判的または称賛に値する意見に興味を持って耳を傾けます。

行こう！
コードはより便利であるため、jQueryライブラリを使用して記述されています。 すべての変数と関数は、ページ読み込みイベントの後に宣言されます。 変数を列挙し、いくつかのデフォルト設定を設定し、キャンバスのサイズも設定し、ヘビの「体」を決定します。 多次元配列になります。 考えは、ヘビの体は9x9ピクセルの領域を持つセクターのセットであり、各セクターの起源は10の倍数であるということです。視覚的な分離のために、セクターの「右側」は描画されません。

//  ,     var canvas, context, first_x, first_y, rabbit_pos = new Array(), rabbit_on_field = false, start = true, state = false, g_over = false, direction = 'right'; //      canvas = document.getElementById('mycanvas'); canvas.width = 310; canvas.height = 310; context = canvas.getContext('2d'); //    context.fillStyle = "#CE3429"; //     var snake_sectors = [[10, 50], [20, 50], [30, 50], [40, 50]]; 

競技場の境界を表示する機能。デフォルト設定が発表された直後に呼び出します。

 //    function field(context){ context.strokeStyle = "#546DEA"; context.lineWidth = 1; context.strokeRect(7, 7, 295, 295); } 

他の必要な関数が呼び出されるスネーク出力関数。

 //   function snake(){ if(state){ //  ""   //      undefined context.clearRect(first_x, first_y, 9, 9); //  "" :  , / if(start){ //     ,       //   ,   9px  10 for(var i in snake_sectors){ context.fillRect(snake_sectors[i][0], snake_sectors[i][1], 9, 9); } start = false; } else{ //     - "" context.fillRect(snake_sectors.slice(-1)[0][0], snake_sectors.slice(-1)[0][1], 9, 9); } //         if(!rabbit_on_field){ rabbit(); } //     ""  "" var last_x = snake_sectors.slice(-1)[0][0]; var last_y = snake_sectors.slice(-1)[0][1]; first_x = snake_sectors[0][0]; first_y = snake_sectors[0][1]; //        if(direction == 'right'){ var next_x = last_x + 10; if(next_x > 290){ //    ,   window.setTimeout(game_over, 700); return false; } snake_sectors.push([next_x, last_y]); } if(direction == 'down'){ var next_y = last_y + 10; if(next_y > 290){ //    ,   window.setTimeout(game_over, 700); return false; } snake_sectors.push([last_x, next_y]); //     ("" ) } if(direction == 'up'){ var next_y = last_y - 10; if(next_y < 10) { //    ,   window.setTimeout(game_over, 700); return false; } snake_sectors.push([last_x, next_y]); } if(direction == 'left'){ var next_x = last_x - 10; if(next_x < 10) { //    ,   window.setTimeout(game_over, 700); return false; } snake_sectors.push([next_x, last_y]); } //          // .. ""    for(var i = 0; i < snake_sectors.length - 1; i++){ if(snake_sectors.slice(-1)[0][0] == snake_sectors[i][0] && snake_sectors.slice(-1)[0][1] == snake_sectors[i][1]){ //   window.setTimeout(game_over, 700); return false; } } //     //     "" if(!is_catching()) snake_sectors.splice(0, 1); else rabbit(); //   ,   -   setTimeout(snake, 200); // 200 ms } } 

順番に。 state == true（ゲームのtrue / false状態が開始/一時停止）の場合、関数は一連のアクションを実行します。アクションの説明はコメントに記載されています。
以下は、snake（）で呼び出される他のすべての関数です。
簡単に言えば、ウサギの結論（その座標のランダムな値の生成と、ヘビの「体」におけるそのような存在の確認）;

 //      function rabbit(){ //    rabbit_pos[0] = math_rand(); rabbit_pos[1] = math_rand(); //       ""  for(var i in snake_sectors){ if(rabbit_pos[0] == snake_sectors[i][0]){ rabbit_pos[0] = math_rand(); } if(rabbit_pos[1] == snake_sectors[i][1]){ rabbit_pos[1] = math_rand(); } } //  ,        context.fillRect(rabbit_pos[0], rabbit_pos[1], 9, 9); rabbit_on_field = true; } 

与えられた範囲のランダムな値の関数ジェネレーター。

 //       //     function math_rand(){ return Math.ceil((Math.random() * 2.9) * 10) * 10; } 

ウサギを「食べる」ことを確認する（「頭」の座標とウサギの座標）;

 //   ""  // ..   ""     function is_catching(){ if(rabbit_pos[0] == snake_sectors.slice(-1)[0][0] && rabbit_pos[1] == snake_sectors.slice(-1)[0][1]) return true; else return false; } 

ゲームの終了のアナウンスとデフォルト設定への復帰（新しい開始のため）;

 // " ",      - //         function game_over(){ //   ,     , //          "Game Over" g_over = true; //     context.clearRect(8, 8, 293, 293); //      context.font='35px Verdana'; context.strokeStyle="#DB733B"; context.strokeText('Game Over!',47,160); //     -   "Game Over!" setTimeout(function(){context.clearRect(8, 8, 293, 293); g_over = false}, 1500); //    -    snake_sectors = [[10, 50], [20, 50], [30, 50], [40, 50]]; state = false; direction = 'right'; start = true; rabbit_on_field = false; } 

「ゲーミング」キーを押すイベントと対応する結果をキャッチします。

 //     ""  document.onkeydown = function(event){ var keyCode; if(event == null){ keyCode = window.event.keyCode; } else{ keyCode = event.keyCode; } switch(keyCode){ // space/ case 32: //     if(!g_over){ //    (continue) state = (!state) ? true : false; //   snake(); } break; // left/  case 37: //    "" if(direction == 'right') return; direction = 'left'; break; // up/  case 38: //    "" if(direction == 'down') return; direction = 'up'; break; // right/  case 39: //    "" if(direction == 'left') return; direction = 'right'; break; // down/  case 40: //    "" if(direction == 'up') return; direction = 'down'; break; default: break; } } 

ここでプレイできます 。

コメントで健全な批判を聞いてうれしいです。 ご清聴ありがとうございました！