html javascript贪吃蛇

最新推荐文章于 2022-11-16 19:54:45 发布

缘起性本空

最新推荐文章于 2022-11-16 19:54:45 发布

阅读量99

点赞数

分类专栏：生活杂谈

本文链接：https://blog.csdn.net/r77683962/article/details/115250565

版权

HTML5 Canvas JavaScript 游戏开发贪吃蛇

关键词由CSDN通过智能技术生成

生活杂谈专栏收录该内容

46 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
   <head>
       <title>贪吃蛇</title>
       <meta charset="UTF-8">
       <style type="text/css">
           .map
           {
               height:600px;
               width:900px;
               background:#0f0;
           }
       </style>
   </head>

   <body>
       <div class="map">
           <canvas id="canvas" height="600" width="900">
           </canvas>
       </div>
       <script>
           var c = document.getElementById("canvas");
           var ctx = c.getContext("2d");
           var snake = []; //定义一条蛇，画蛇的身体
           var snakeCount = 6; //初始化蛇的长度
           var foodx = 0;
           var foody = 0;
           var togo = 0;

           function DrawSnakeAndFood()
           {
               for(var k = 0; k < 6; k++)//画蛇的身体
               {
                   ctx.fillRect(snake[k].x, snake[k].y, 15, 15); //前两个数是矩形的起始坐标，后两个数是矩形的长宽。
               }

               //绘制食物
               ctx.fillStyle = "black";
               ctx.fillRect(foodx, foody, 15, 15);
               ctx.fill();
           }

           function CheckDead() /* 如果碰到边框，则死亡 */
           {
               if (snake[snakeCount-1].x > 885
                   ||snake[snakeCount-1].y > 585
                   ||snake[snakeCount-1].x < 0
                   ||snake[snakeCount-1].y < 0)
               {
                   alert("GAME OVER!");
               }
           }

           document.onkeydown = function(e)
           {
               switch(e.keyCode)
               {
                   case 37: togo = 1; break; //Left
                   case 38: togo = 2; break; //Up
                   case 39: togo = 3; break; //Right
                   case 40: togo = 4; break; //Down
               }
           }

缘起性本空

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html javascript贪吃蛇

<!DOCTYPE html><html> <head> <title>贪吃蛇</title> <meta charset="UTF-8"> <style type="text/css"> .map { height:600px; w...
复制链接

扫一扫

专栏目录