コメント：ヘビの食事、主な機能：1。ヘビの動き2。ヘビの方向を変える3。自分の犠牲を増やす5。それを掛ける方法、特定の実装は次のとおりです。 60行でシンプルで実用的です。興味のある友達はそれを参照できます。私はそれが誰にでも役立つことを願っています。
過去にHTML5に注意を払うことはめったにありませんでした。 HTMLを選択することが徐々にトレンドになったと感じているので、それについて知りたいです。私はそれを学ぶためのゲームを見つけました。このゲームを書いた後、JSが特に良くない場合、HTML5とJSは非常に密接に統合されていると感じました。私は最初にJSを指導する必要があると思います。これは私の個人的なアドバイスであり、正確ではないかもしれません。もう1つは、自分の思考と論理について特に明確にする必要があるということです。そうしないと、ゲームを書くことは苦痛になるかもしれません。貪欲なヘビの主な機能：1。ヘビの動き2。ヘビの方向を変える3。食べ物を置く4。犠牲を増やす5。
初めてゲームを書いたとき、初めてHTML5を書いたとき、それは非常に難しいと感じました。私は書き終えました、そして私はあなたとそれを共有します。お互いのコミュニケーション...あなたが理解していない、または何か提案がある場合は、私にメッセージを残してください。 。 。コードは非常に短く、わずか60行です。
しかし、これは半仕上げの製品であり、完成しました。もう一度更新してください
<！doctype html>
<html>
<body>
<canvas> </canvas>
<script type = "text/javascript">
var c = document.getElementById（ "mycanvas"）;
var time = 160; //ヘビのスピード
var cxt = c.getContext（ "2d"）;
var x = y = 8;
var a = 0; //食品座標
var t = 20; //あなたの人生を犠牲にします
var map = []; //ヘビの走行経路を記録します
var size = 8; //ヘビのボディユニットサイズ
var方向= 2; // 1 UP 2右0左3ダウン
interval = window.setInterval（set_game_speed、time）; //ヘビを動かします
function set_game_speed（）{// snakeを移動します
switch（方向）{
ケース1：y = y-size; break;
ケース2：x = x+size; break;
ケース0：x = x-size; break;
ケース3：y = y+size; break;
}
if（x> 400 || y> 400 || x <0 || y <0）{
アラート（「あなたは死んで、一生懸命働き続けてください！失敗の理由：私は壁にぶつかります...」）; window.location.reload（）;
}
for（var i = 0; i <map.length; i ++）{
if（parseint（map [i] .x）== x && parseint（map [i] .y）== y）{
アラート（「あなたは死んで、一生懸命働き続けてください！失敗の理由：私は自分自身にぶつかりました...」）; window.location.reload（）;
}
}
if（map.length> t）{//犠牲の長さを保ちます
var cl = map.shift（）; //配列の最初のアイテムを削除し、元の要素を返します
cxt.ClearRect（cl ['x']、cl ['y']、サイズ、サイズ）;
};
map.push（{'x'：x、 'y'：y}）; //元の配列の最後にデータを追加します
cxt.fillstyle = "＃006699"; //内部塗りつぶし色
cxt.Strokestyle = "＃006699"; //境界色
cxt.fillrect（x、y、size、size）; //長方形を描画します
if（（a*8）== x &&（a*8）== y）{//食べ物を食べます
rand_frog（）; t ++;
}
}
document.onkeydown = function（e）{//ヘビの方向を変更します
var code = e.keycode -37;
switch（code）{
ケース1：方向= 1; break; // on
ケース2：方向= 2;ブレーク; //右
ケース3：方向= 3;ブレーク; //次へ
ケース0：方向= 0; break; //左
}
}
//食べ物をランダムに配置します
関数rand_frog（）{
a = math.ceil（math.random（）*50）;
cxt.fillstyle = "＃00000"; //内部充填色
cxt.strokestyle = "＃00000"; //ボーダーカラー
cxt.fillrect（a*8、a*8、8、8）; //長方形を描画します
}
//食べ物をランダムに配置します
rand_frog（）;
</script>
</body>
</html>