查看: 58|回复: 0

[闲聊] 分享html贪吃蛇源代码

[复制链接]
发表于 2022-6-19 16:12:28 | 显示全部楼层 |阅读模式
  1. <!DOCTYPE html>

  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>贪吃蛇</title>
  6.     <style type="text/css">
  7. *{margin:0;padding: 0;font-family: "Microsoft YaHei";}
  8. #page{margin-right: auto;margin-left: auto; margin-top: 20px;height: 600px; width: 980px; }
  9. #yard{ width: 800px;border: 1px solid gray;box-shadow: 0 0 10px black; float: right;}
  10. #mark{font-weight: 800;}
  11. #mark_con{ color: red; }
  12. button{width: 50px; }
  13. a{text-decoration:none;}
  14. </style>
  15. <script type="text/javascript">
  16.         //伪常量
  17.         var BLOCK_SIZE = 20;        //格子大小
  18.         var COLS = 40;                        //列数
  19.         var ROWS = 30;                        //行数
  20.         //变量
  21.         var snakes = [];                //保存蛇坐标
  22.         var c = null;                        //绘图对象
  23.         var toGo = 3;                        //行进方向
  24.         var snakecount = 4;                //蛇身数量
  25.         var interval = null;        //计时器
  26.         var foodX = 0;                        //食物X轴坐标
  27.         var foodY = 0;                        //食物Y轴坐标
  28.         var oMark = null;                //分数显示框
  29.         var isPause = false;        //是否暂停
  30.         // 绘图函数
  31.         function draw(){
  32.             c.clearRect(0,0,BLOCK_SIZE * COLS, BLOCK_SIZE * ROWS);
  33.             //画出横线
  34.             for( var i = 1; i <= ROWS; i++ ) {
  35.                 c.beginPath();
  36.                 c.moveTo(0, i * BLOCK_SIZE);
  37.                 c.lineTo(BLOCK_SIZE * COLS, i * BLOCK_SIZE);
  38.                 c.strokeStyle = "gray";
  39.                 c.stroke();
  40.             }
  41.             //画出竖线
  42.             for(var i = 1; i <= COLS; i++){
  43.                 c.beginPath();
  44.                 c.moveTo(i * BLOCK_SIZE, 0);
  45.                 c.lineTo(i * BLOCK_SIZE, BLOCK_SIZE * ROWS);
  46.                 c.stroke();
  47.             }
  48.             //画出蛇
  49.             for (var i = 0; i < snakes.length; i++){
  50.                 c.beginPath();
  51.                 c.fillStyle = "green";
  52.                 c.fillRect(snakes[i].x, snakes[i].y, BLOCK_SIZE, BLOCK_SIZE);
  53.                 c.moveTo(snakes[i].x, snakes[i].y);
  54.                 c.lineTo(snakes[i].x + BLOCK_SIZE, snakes[i].y);
  55.                 c.lineTo(snakes[i].x + BLOCK_SIZE, snakes[i].y + BLOCK_SIZE);
  56.                 c.lineTo(snakes[i].x, snakes[i].y + BLOCK_SIZE);
  57.                 c.closePath();
  58.                 c.strokeStyle = "red";
  59.                 c.stroke();
  60.             }
  61.             //画出食物
  62.             c.beginPath();
  63.             c.fillStyle = "yellow";
  64.             c.fillRect(foodX, foodY, BLOCK_SIZE, BLOCK_SIZE);
  65.             c.moveTo(foodX, foodY);
  66.             c.lineTo(foodX + BLOCK_SIZE, foodY);
  67.             c.lineTo(foodX + BLOCK_SIZE, foodY + BLOCK_SIZE);
  68.             c.lineTo(foodX, foodY + BLOCK_SIZE);
  69.             c.closePath();
  70.             c.strokeStyle = "red";
  71.             c.stroke();
  72.         }
  73.         //游戏初始化
  74.         function start(){
  75.             for( var i = 0; i < snakecount; i++){
  76.                 snakes[i] = {x: i * BLOCK_SIZE, y: 0};
  77.             }
  78.             addFood();
  79.             //draw();
  80.             oMark.innerHTML = 0;
  81.         }
  82.         //移动函数
  83.         function move(){
  84.             switch(toGo){
  85.                 case 1: //左边
  86.                     snakes.push({x: snakes[snakecount - 1].x - BLOCK_SIZE, y: snakes[snakecount - 1].y});
  87.                 break;
  88.                 case 2: //上边
  89.                     snakes.push({x: snakes[snakecount - 1].x, y: snakes[snakecount - 1].y - BLOCK_SIZE});
  90.                 break;
  91.                 case 3: //右边
  92.                     snakes.push({x: snakes[snakecount - 1].x + BLOCK_SIZE, y: snakes[snakecount - 1].y});
  93.                 break;
  94.                 case 4: //下边
  95.                     snakes.push({x: snakes[snakecount - 1].x, y: snakes[snakecount - 1].y + BLOCK_SIZE});
  96.                 break;
  97.                 default:;
  98.             }
  99.             snakes.shift();
  100.             isEat();
  101.             isDie();
  102.             draw();
  103.         }
  104.         //吃到食物判断
  105.         function isEat(){
  106.             if (snakes[snakecount - 1].x == foodX && snakes[snakecount - 1].y == foodY) {
  107.                 oMark.innerHTML = (parseInt(oMark.innerHTML) + 1).toString();
  108.                 addFood();
  109.                 addSnake();
  110.             }
  111.         }
  112.         //添加蛇身
  113.         function addSnake(){
  114.             snakecount++;
  115.             snakes.unshift({x:BLOCK_SIZE * COLS, y:BLOCK_SIZE * ROWS});
  116.         }
  117.         //交互响应函数
  118.         function keydown(keyCode){
  119.                 switch(keyCode){
  120.                         case 37: //左边
  121.                                 if(toGo != 1 && toGo != 3)  toGo = 1;break;
  122.                         case 38: //上边
  123.                                 if(toGo != 2 && toGo != 4)        toGo = 2;break;
  124.                         case 39: //右边
  125.                                 if(toGo != 3 && toGo != 1)         toGo = 3;break;
  126.                         case 40: //下的
  127.                                 if(toGo != 4 && toGo != 2)        toGo = 4;break;
  128.                         case 80: //开始/暂停
  129.                                 if(isPause){
  130.                                         interval = setInterval(move,200);
  131.                                         isPause = false;
  132.                                         document.getElementById('pause').innerHTML = "Pause";
  133.                                 }else{
  134.                                         clearInterval(interval);
  135.                                         isPause = true;
  136.                                         document.getElementById('pause').innerHTML = "Start";
  137.                                 }
  138.                                 break;
  139.                 }
  140.         }
  141.         //制造食物
  142.         function addFood(){
  143.                 foodX = Math.floor(Math.random() * (COLS - 1)) * BLOCK_SIZE;
  144.                 foodY = Math.floor(Math.random() * (ROWS - 1)) * BLOCK_SIZE;
  145.                 // console.log(foodX + " -- " + foodY);
  146.         }
  147.         //死亡判断
  148.         function isDie(){
  149.                 if(snakes[snakecount - 1].x == -20 || snakes[snakecount - 1].x == BLOCK_SIZE * COLS
  150.                         || snakes[snakecount - 1].y == -20 || snakes[snakecount - 1].y == BLOCK_SIZE * ROWS){
  151.                         alert("Game Over!");
  152.                         clearInterval(interval);
  153.                 }
  154.                 for(var i = 0; i < snakecount - 1; i++){
  155.                         if(snakes[snakecount - 1].x == snakes[i].x && snakes[snakecount - 1].y == snakes[i].y){
  156.                                 clearInterval(interval);
  157.                                 alert("Game Over!");
  158.                         }
  159.                 }
  160.         }
  161.         // 启动函数
  162.         window.onload = function(){
  163.             c = document.getElementById('canvas').getContext('2d');
  164.             oMark = document.getElementById('mark_con');
  165.             start();
  166.             interval = setInterval(move,100);
  167.             document.onkeydown = function(event){
  168.                 var event = event || window.event;
  169.                 keydown(event.keyCode);
  170.             }
  171.         }
  172. </script>
  173. </head>
  174. <body>

  175.     <div id="page">
  176.         <div id="yard"><canvas id="canvas" height="600px" width="800px"></canvas></div>

  177.         <div id="help">
  178.             <div id="mark">得分:<span id="mark_con"></span></div>
  179.             <!--
  180.             <div id="helper">
  181.                 <table>
  182.                     <tr>
  183.                         <td></td>
  184.                         <td><button οnclick="keydown(38);">上</button></td>
  185.                         <td></td>
  186.                     </tr>
  187.                     <tr>
  188.                         <td><button οnclick="keydown(37);">左</button></td>
  189.                         <td><button οnclick="keydown(80);" id="pause">暂停</button></td>
  190.                         <td><button οnclick="keydown(39);">右</button></td>
  191.                     </tr>
  192.                     <tr>
  193.                         <td></td>
  194.                         <td><button οnclick="keydown(40);">下</button></td>
  195.                         <td></td>
  196.                     </tr>
  197.                 </table><a href="index.html">再玩一次</a>
  198.             </div>-->
  199.         </div>
  200.     </div>
  201.     <div style="text-align:center;">
  202.         <p>使用方向键移动,按刷新键(F5)重开,按P键暂停</p>
  203.         <p>注:本游戏有些许bug,比如暂停后贪吃蛇就会变慢 ヾ(•ω•`) </p>
  204. <p>代码为网上公开模板,侵权请联系楼主!<p>
  205. </div>
  206. </body>
  207. </html>
复制代码


关注官方微博,第一时间获取最新动态!

您需要登录后才可以回帖 登录 | 立即注册 用百度帐号登录

本版积分规则

关闭

站长推荐上一条 /1 下一条

微信公众号

新浪微博

联系我们

电子邮箱: geteloli@foxmail.com

QQ群: 194605118  271946728 

欢迎加入QQ群聊天扯皮

小黑屋|小黑屋|手机版|Archiver|洛天依中文网  |人工智能   

GMT+8, 2022-6-28 11:55 , Processed in 0.276731 second(s), 17 queries , Gzip On, MemCache On.

Powered by Discuz! X3.4 © 2001-2013 Comsenz Inc.