この記事では、貪欲なヘビゲームを達成するためにH5キャンバスを紹介し、次のようにすべての人と共有します。
効果は次のとおりです実装のアイデア：PS：これは単なる詳細については、コードアノテーションを見ることができます
1.最初にヘビを描きます<！doctype html> <html lang = en> <head> <meta charset = utf-8> <title> #canvas {box-shadow：0 5px 40px flack;} </style> </head> <body> <canvas id = canvas width = 800 height = 500> </body> <script> var canvas = document.getElementbyId（ 'canvas'）; （ '2d'）; color = color;} //ブロックrect.prototype.draw = function（）{context.fillstyle = this.color（this.x、y、this 。 //（var i = 0; i <4; i ++）{var rect = new Rect（i*20,0,20,20、gray）for（var i = 0; i ++）に設定しますPushを使用して、Array Snakearray.splice（0,0、Rect）の最初の位置にヘビの頭を表示します2つの後に一般的に使用されるものは、後でこれを呼び出すように設定されています。 （keycode right arrowを使用）this.direction = 39;} // snake.prototype.draw = function（）{for（var i = 0; i <this.snakearray.length; i ++）{for（var i = 0; i <this.snakearray.length）{for（var i = 0; i < this.snakearray [i] .draw（）;} //ヘビの動きの方法snake.prototype.move = function（）{//これはコア部分、ヘビの動き方法// 1。灰色の正方形を描く、ヘビの頭と重複します// 2。このブロックをアレイのヘビの頭の後ろの位置に挿入します// 。 /食べ物を食べるかどうかを判断します。ISEAT決定関数は最後に書かれています//食べると、食べ物が長くなる場合//（iseat（））{food = new。 getRandomFood（）;} else {this.snakearray.pop（）;} //ヘビの頭の動き方向を設定します。 x- = head.w case 38：this.y- = case 39：this.x += case 40：this.head .y += this.head.h break;} // gameover判断//壁を打つ（this.head.x> canvas.width || x <0 || this.head .y> canvas.height || i = 1; i <this.snakearay.length; （タイマー）;}}} //最初のヘビvar snake = new Snake（）snake.draw（）; {Context.ClearRect（Canvas.Width、Canvas.Draw（）; Snakeがdocument.onkeydown = function（e）{var ev = e || event; snake.direction = 37;} break;} case 38：{if（snake.direction！== 40）{snake.direction = 38;} case 39：{if.direction！）{snake！方向= 39;} break;}ケース40：{if（snake.direction！== 38）{snake.direction = 40;} bream; var range = max-min; var random（）;それは重い、その後、varitativenake = trueを再生しますステートメントは、次のステートメントを実行しません= false 20、20、green）; y == rect.y）{//決定が再コールされている場合、乱数がre -sonsnake = true;} // rectに戻るように、それを真に設定しますオブジェクトフードにはドローメソッドがあります。 head.y == food.y）{return true;} else {return false;} </script> </html>上記は、この記事のすべての内容です。