html5のoutputタグとcanvasタグはgreedy Snakeを実装しています

操作方法:
キーボードを上下左右またはWASDの移動方向に押します。
得点ルール: マムシの体の各部分が加算され、得点は 10 点となり、次の餌を食べる前に方向を変えるたびに 1 点減点されます。
ps: スコアは負の値である可能性があります {:4_105:}

HTML5 タグの Canvas:
Canvas 要素は、Web ページ上にグラフィックを描画するために使用されます。
キャンバスを使用してスネークの背景グリッドを描画します:

  //清空整个画布
                                ctx.clearRect(0,0,480,480);
                                //绘制网格
                                for(var i=0;i<30;i++){
                                        ctx.strokeStyle="#ccc";//线条颜色
                                        ctx.beginPath();
                                        //绘制横线
                                        ctx.moveTo(0,i*width);
                                        ctx.lineTo(480,i*width);
                                        //绘制竖线
                                        ctx.moveTo(i*width,0);
                                        ctx.lineTo(i*width,480);
                                        ctx.closePath();
                                        ctx.stroke();
                                }

キャンバスを使用してスネークの体と食べ物を描画します:

   //绘制蛇的身体
                                for(var i=0;i<snake.length;i++){
                                        ctx.fillStyle="black";//填充颜色
                                        //蛇的头部
                                        if(i==snake.length-1){
                                                ctx.fillStyle="red";
                                        }
                                        ctx.beginPath();
                                        ctx.rect(snake[i].x*width,snake[i].y*width,width,width);
                                        ctx.closePath();
                                        ctx.fill();
                                        ctx.stroke();
                                }

HTML5 タグ出力:

出力要素は、計算やスクリプトなどのさまざまな種類の出力に使用されます。 :
れぇぇぇぇぇぇぇ

以上がhtml5のoutputタグとcanvasタグはgreedy Snakeを実装していますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。