スネークゲームのウェブ版を実装するためのJavaScript

この記事では、ウェブページのスネークゲームを実装するためのJavaScriptの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

<!DOCTYPE html>
<html>
<head><title>ヘビ</title>
</head>
<本文>
<キャンバスid="キャンバス" 幅="400" 高さ="400"></キャンバス>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<スクリプト>
var canv = document.getElementById("キャンバス");
var ctx = canv.getContext("2d");
var スコア = 0;
//ブロックコンストラクタを定義する var Block = function (col, row, size)
{
  列は、
  行番号
  this.size=サイズ;
    };
//Block 関数のプロトタイプ メソッド draw を定義します。
Block.prototype.draw = 関数()
{
  ctx.fillRect(この列*このサイズ、この行*このサイズ、このサイズ、このサイズ)
   }
//オブジェクトsnakeを定義するvar snake = {
  体：[
    新しいブロック(20,20,10)
    新しいブロック(20,21,10)
    新しいブロック(20,22,10)
   ]、
  方向:"右",
  };

// ヘビを描画する関数を定義する snake.draw=function()
{
   (var i=0;i<this.body.length;i++) の場合
  {
     this.body[i].draw();
        }
   };

snake.move = 関数()
         {
          var head = this.body[0];

if(snake.direction=="right")
     {    
     var newhead = 新しいブロック (head.col + 1、head.row、head.size)
            }
  
  if(snake.direction == "左")
   
     { 
     var newhead = 新しいブロック(head.col-1、head.row、head.size); 
           }  
 if(snake.direction=="上")
     {
     var newhead = 新しいブロック (head.col、head.row-1、head.size)
           }
    if(snake.direction=="down")
     {
     var newhead = 新しいブロック (head.col、head.row+1、head.size)
           } 
          新しいヘッド列<0 || 新しいヘッド列>39 の場合
          {
           間隔をクリアします(間隔ID);
           ゲームオーバー（）;
          }
          
          新しいヘッド行が<0 || 新しいヘッド行が>39の場合
          {
           間隔をクリアします(間隔ID);
           ゲームオーバー（）;
          }
 (var i=0;i<this.body.length;i++) の場合
{
    this.body[i].col==newhead.col &&this.body[i].row==newhead.row の場合
  {
    間隔をクリアします(間隔ID);
    ゲームオーバー（）;
      }
          }         
     this.body.unshift(新しいヘッド);
     newhead.col==apple.posX &&newhead.row==apple.posY の場合
{  
    スコア=スコア+100;
    （真）の間
  {
     var checkApple =false;
     apple.posX=Math.floor(Math.random()*40);
     apple.posY=Math.floor(Math.random()*40);
     (var i=0; i<this.body.length; i++) の場合
   {
     this.body[i].col==apple.posX &&this.body[i].row==apple.posY の場合
          checkApple=true;
                        }
       if(!checkApple)
       壊す;
      }  
  }
それ以外{
     this.body.pop();
        }         
         };
//リンゴオブジェクトを作成する var apple={
    posX:Math.floor(Math.random()*40)、
    posY:Math.floor(Math.random()*40)、
    サイズR:5
}
//リンゴを描く function apple.draw=function()
{
  ctx.fillStyle="緑";
  ctx.beginPath();
  ctx.arc(this.posX*10+5,this.posY*10+5,5,0,Math.PI*2,false);
  ctx.fill();
  ctx.fillStyle="黒";
     };
//終了 var gameover = function()
{
  ctx.font="60px Comic Sans MS";
  ctx.textAlign="中央";
  ctx.textBaseline="中央";
  ctx.fillText("ゲームオーバー!",200,200)
    };
// タイミング関数 var intervalId = setInterval (function ()
{
   ctx.clearRect(0,0,400,400);
   ctx.font="20px Arial";
   ctx.fillText("スコア:"+score,5,15);
   スネークを描画します。
   スネークを移動します。
   apple.draw();
   ctx.strokeRect(0,0,400,400);
    },200);
//スネークキーコントロール $("body").keydown(function(event)
{
   console.log(イベント.キーコード);
    if(event.keyCode==37 &&snake.direction!="right")
     {
    snake.direction="左";
         }
    if(event.keyCode==38 &&snake.direction!="down")
     {
    snake.direction="上";
        }
    if(event.keyCode==39 &&snake.direction!="left")
     {
     snake.direction="右";
         }
     if(event.keyCode==40 &&snake.direction!="上")
     {
     snake.direction="下";
         }
              }
);
</スクリプト>
</本文>
</html>