js贪食蛇

Posted 2020-08-30 阿力瓦

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js贪食蛇相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<head>
<title>canvas贪食蛇</title>
<style>
.canvas{
    background:black;
}
</style>
</head>
<body>
<canvas class="canvas" id="canvas" width=\'400\' height=\'400\'></canvas>
<script>
var sn=[42,41], dz=43, fx=1, n, ctx=document.getElementById(\'canvas\').getContext(\'2d\');
function draw(t,c){
     ctx.fillStyle=c;
   ctx.fillRect(t%20*20+1,~~(t/20)*20+1,18,18);
}
document.onkeydown=function(e){fx=sn[1]-[0]==(n=[-1,-20,1,20][(e||event).keyCode-37]||fx)?fx:n};
!function(){
      sn.unshift(n=sn[0]+fx);
      if(sn.indexOf(n,1)>0 || n<0 ||n>399||fx==1&&n%20==0||fx==-1&&n%20==19) return ;
      draw(n,\'red\');
      if(n==dz){
          while(sn.indexOf(dz=~~(Math.random()*400))>=0);
          draw(dz,\'red\');
      }else
          draw(sn.pop(),\'Black\');
      setTimeout(arguments.callee,130);
}();
</script>

</body>
</html>

以上是关于js贪食蛇的主要内容，如果未能解决你的问题，请参考以下文章