1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>贪食蛇</title>
  6.     <style type="text/css">
  7.         table {
  8.                 border-left: 1px solid #ccc;
  9.                 border-top: 1px solid #ccc;
  10.             }
  11.         td {
  12.                 border-bottom: 1px solid #ccc;
  13.                 border-right: 1px solid #ccc;
  14.                 width: 10px;
  15.                 height: 13px;
  16.             }
  17.     </style>
  18.  
  19.     <script src="jquery-1.11.0.min.js" type="text/javascript"></script>
  20.     <script type="text/javascript">
  21.         var size = 20;//格子的行数和列数
  22.         var snake = new Array();//蛇数组
  23.         function createSnake() {
  24.             var x = parseInt(Math.random() * (size - 2));//右边留出来两个格子
  25.             var y = parseInt(Math.random() * size);
  26.             snake[0] = new Array(x, y);//蛇数组的第一个格子
  27.             $("#x" + x + "y" + y).attr("type", "snake");
  28.             $("#x" + x + "y" + y).css("background-color", "#ccc");
  29.             for (var i = 1; i <= 2; i++) {
  30.                 x++;
  31.                 snake[i] = new Array(x, y);//蛇数组的第二个和第三个格子
  32.                 $("#x" + x + "y" + y).attr("type", "snake");
  33.                 $("#x" + x + "y" + y).css("background-color", "#ccc");
  34.             }
  35.         }
  36.  
  37.         var food = new Array();
  38.         function createFood() {
  39.             var x = parseInt(Math.random() * size);
  40.             var y = parseInt(Math.random() * size);
  41.             while ($("#x" + x + "y" + y).attr("type") == "snake") {//食物出现在了蛇身上 则重新随机
  42.                 x = parseInt(Math.random() * size);
  43.                 y = parseInt(Math.random() * size);
  44.             }
  45.             food = new Array(x, y);
  46.             $("#x" + x + "y" + y).attr("type", "food");
  47.             $("#x" + x + "y" + y).css("background-color", "red");
  48.         }
  49.  
  50.         var isLive = false;//表示蛇是否活着
  51.         var row = 0;//行的移动
  52.         var column = 0;//列的移动
  53.         function die() {//死了
  54.             isLive = false;
  55.             window.alert("Game Over!!!");
  56.             window.location.reload();
  57.         }
  58.         function move() {
  59.             //蛇的移动方法
  60.             if (!isLive) {
  61.                 return;//已经死了
  62.             }
  63.             var x = snake[0][0] + row;//加给行
  64.             var y = snake[0][1] + column;//加给列
  65.             snake.unshift(new Array(x, y));//将x和y的位置作为新的蛇头，插入数组的最前面
  66.             var type = $("#x" + x + "y" + y).attr("type");
  67.             if (type == "snake") {//如果蛇头前方的格子是蛇
  68.                 die();//死了
  69.             } else if (type == "food") {//蛇头前方的格子是食物
  70.                 $("#x" + x + "y" + y).attr("type", "snake");//该位置变成蛇的头
  71.                 $("#x" + x + "y" + y).css("background-color", "#ccc");
  72.                 createFood();//重新随机一个食物
  73.             } else if (type == "map") {//蛇头前方的格子是普通的白色格子
  74.                 var tmp = snake.pop();//删掉蛇数组的最后一个格子
  75.                 $("#x" + tmp[0] + "y" + tmp[1]).attr("type", "map");//将原来蛇尾巴的位置变成普通的白色格子
  76.                 $("#x" + tmp[0] + "y" + tmp[1]).css("background-color", "#fff");
  77.                 $("#x" + x + "y" + y).attr("type", "snake");//将原来蛇头前方的格子变成新的蛇头
  78.                 $("#x" + x + "y" + y).css("background-color", "#ccc");
  79.             } else {//蛇头前方的格子既不是蛇也不是普通的白格子，也不是食物，那肯定是到表格的边框了
  80.                 die();//死了
  81.             }
  82.         }
  83.  
  84.         var direction = '';//增加一个变量表示方向
  85.         var timer = 0;//用于暂停
  86.         $(function () {
  87.             createSnake();//随机出一个三个格子的横躺着的蛇
  88.             createFood();//随机出一个格子的食物
  89.  
  90.             $(document).keydown(function (e) {//有键按下
  91.                 var key = e.keyCode;
  92.                 switch (key) {
  93.                     case 32:
  94.                         //空格键（控制暂停和继续）
  95.                         if (timer != 0) {
  96.                             window.clearInterval(timer);
  97.                             timer = 0;
  98.                         } else {
  99.                             if (isLive) {
  100.                                 timer = window.setInterval("move()", 200);
  101.                             }
  102.                         }
  103.                         return;
  104.                     case 37://左
  105.                         if (direction == 'right') {
  106.                             return;//往反方向走则没有效果
  107.                         }
  108.                         row = -1;
  109.                         column = 0;
  110.                         direction = 'left'
  111.                         break;
  112.                     case 38://下
  113.                         if (direction == 'up') {
  114.                             return;//往反方向走则没有效果
  115.                         }
  116.                         row = 0;
  117.                         column = -1;
  118.                         direction = 'down'
  119.                         break;
  120.                     case 39://右
  121.                         if (direction == 'left') {
  122.                             return;//往反方向走则没有效果
  123.                         }
  124.                         row = 1;
  125.                         column = 0;
  126.                         direction = 'right'
  127.                         break;
  128.                     case 40://上
  129.                         if (direction == 'down') {
  130.                             return;//往反方向走则没有效果
  131.                         }
  132.                         row = 0;
  133.                         column = 1;
  134.                         direction = 'up'
  135.                         break;
  136.                     default:
  137.                         return;
  138.                 }
  139.                 if (!isLive) {
  140.                     isLive = true;
  141.                     if (row == 1 && column == 0) {
  142.                         //最开始就往右侧移动，因为蛇头默认是最左边的一个格子，则给蛇头调换到最右侧
  143.                         //否则最开始不能往右移动
  144.                         snake.reverse();
  145.                     }
  146.                     timer = window.setInterval("move()", 200);
  147.                 }
  148.             });
  149.         });
  150.     </script>
  151. </head>
  152.  
  153. <body>
  154.     <script type="text/javascript">
  155.         //生成格子
  156.         document.writeln("<table  cellspacing='0' align='center'>");
  157.         for (var i = 0; i < size; i++) {
  158.             document.writeln("<tr>");
  159.             for (var j = 0; j < size; j++) {
  160.                 document.writeln("<td id='x" + j + "y" + i + "' type='map'></td>");
  161.             }
  162.             document.writeln("</tr>");
  163.         }
  164.         document.writeln("</table>");
  165.     </script>
  166. <h2>请按上下左右方向键开始，按空格键暂停和继续</h2>
  167. </body>
  168. </html>

H5 贪吃蛇源码的更多相关文章

  1. Winfrom 极简版贪吃蛇源码

    该源码是我在百度知识库借助前辈的的经验,加上自己的一点小改动写的一个非常简陋的贪吃蛇小程序.如果你们有更好的改动方案,欢迎评论. 进入主题吧! 1.创建一个桌面应运程序,拖一个定时器控件.这样,程序界 ...

  2. c# 贪吃蛇源码

    using UnityEngine; using System.Collections;using System.Diagnostics;using UnityEngine.SceneManageme ...

  3. js贪吃蛇源码

    1.注意,自己引入jquery,这个demo基于jquery的,我的jquery是写的本地的 2.没有写注释,看不懂的再问我吧, <!DOCTYPE html><html> & ...

  4. C语言实现贪吃蛇源码

    先放效果 源代码 //2016-2-12 //zhaoyu //Gmail:zhaoyu1995.com@gmail.com //Language: C //Platform:Code::Blocks ...

  5. [C语言]贪吃蛇_结构数组实现

    一.设计思路 蛇身本质上就是个结构数组,数组里存储了坐标x.y的值,再通过一个循环把它打印出来,蛇的移动则是不断地刷新重新打印.所以撞墙.咬到自己只是数组x.y值的简单比较. 二.用上的知识点 结构数 ...

  6. Android源码50例汇总，欢迎各位下载（转载）

    下载中心好资料很多,藏在各个角落,小弟在此帮大家做了一个整理,做了一个下载目录,方便大家选择性下载. 源码实例如下: <Android应用开发揭秘>源代码推荐 http://down.51 ...

  7. JS小游戏：贪吃蛇（附源码）

    javascript小游戏:贪吃蛇 此小游戏采用的是面向对象的思想,将蛇,食物,和游戏引擎分为3个对象来写的. 为方便下载,我把js写在了html中, 源码中暂时没有注释,等有空我在添加点注释吧. 游 ...

  8. Unity 3D游戏-贪吃蛇类游戏源码：重要方法和功能的实现

    贪吃蛇类游戏源码 本文提供全流程,中文翻译.Chinar坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) 1 头部移动方式 2 生成 Shit 道具 ...

  9. iOS补位动画、沙漏效果、移动UITableViewCell、模拟贪吃蛇、拖拽进度等源码

    iOS精选源码 JHAlertView - 一款黑白配色的HUD之沙漏效果 继承UIButton的自定义按钮SPButton 用递归算法实现iOS补位动画 iOS 长按移动UITableViewCel ...

随机推荐

  1. vector作为二维数组

    vector本来就是可以用来代替一维数组的,vector提供了operator[]函数,可以像数组一样的操作,而且还有边界检查,动态改变大小. 这里只介绍用它来代替二维的数组,二维以上的可以依此类推. ...

  2. VSCode插件开发全攻略（七）WebView

    更多文章请戳VSCode插件开发全攻略系列目录导航. 什么是Webview 大家都知道,整个VSCode编辑器就是一张大的网页,其实,我们还可以在Visual Studio Code中创建完全自定义的 ...

  3. VSCode插件开发全攻略（三）package.json详解

    更多文章请戳VSCode插件开发全攻略系列目录导航. package.json 在详细介绍vscode插件开发细节之前,这里我们先详细介绍一下vscode插件的package.json写法,但是建议先 ...

  4. vue2入坑随记(一)-- 初始全家桶

    都说Vue2简单,上手容易,但小马过河,自己试了才晓得,除了ES6语法和webpack的配置让你感到陌生,重要的是思路的变换,以前随便拿全局变量和修改dom的锤子不能用了,变换到关注数据本身.vue的 ...

  5. 通过Weeman+Ettercap配合拿下路由器管理权限

    通过Weeman+Ettercap配合拿下路由器管理权限 本文转自>>>i春秋学院 本篇文章主要介绍如何在接入无线网络后如何拿到路由器的管理权限,至于如何得到路由器连接密码可以参考 ...

  6. 开源网盘云存储 Seafile

    摘要: Seafile 是一款安全.高性能的开源网盘(云存储)软件.Seafile 提供了主流网盘(云盘)产品所具有的功能,包括文件同步.文件共享等.在此基础上,Seafile 还提供了高级的安全保护 ...

  7. 使用《JAVA面向对象编程》总结

    抽象和封装 现实世界是“面向对象”的,面向对象就是采用“现实模拟” 的方法设计和开发程序. 面向对象设计是目前计算软件开发中最流行的技术.面向对象设计的过程就是抽象的过程. 类是对某一类事物的描述,是 ...

  8. fixed Oracle SQL报错 #ORA-01460: 转换请求无法实施或不合理

    最近遇到一个oracle错误,之前并没有遇到过,并不是select in超过1000个导致的,通过网上资料说是oracle版本导致,也有的说是oracle SQL过长导致. 然后通过自己实践应该说是o ...

  9. Docker - 参考信息

    初见 从 0 开始了解 Docker 可能是把Docker的概念讲的最清楚的一篇文章 Docker新手指南 8 个基本的 Docker 容器管理命令 Docker 核心技术与实现原理 在线教程 Doc ...

  10. Linux 系统下实践 VLAN

    本文首发于我的公众号 Linux云计算网络(id: cloud_dev),专注于干货分享,号内有 10T 书籍和视频资源,后台回复「1024」即可领取,欢迎大家关注,二维码文末可以扫. 01 准备环境 ...