javascript实现贪吃蛇游戏

本贴最后更新于 2402 天前,其中的信息可能已经事过境迁

一、截图

二、代码

<script type="text/javascript" src="jquery-1.7.1.js"></script> <style type="text/css"> #map{width:700px; height:600px; border:0px solid #CCC; overflow:hidden;} .maps{width:10px; height:10px; float:left; overflow:hidden;border:1px solid red;} .back{background:black;} .worm{background:blue;} </style> <script type="text/javascript"> // 定时器 var gameInt // 定义方格 function Box(x,y){ this.x = x; this.y = y; } // 初始方向 var direction = 2;//1:东-右-39 2:南-下-40 3:西-左-37 4:北-上-38 37左键 38上建 39右键 下键40 // 定时器 var gameInt // 定义方格 function Box(x,y){ this.x = x; this.y = y; } // 初始方向 var direction = 2;//1:东-右-39 2:南-下-40 3:西-左-37 4:北-上-38 37左键 38上建 39右键 下键40 // 初始蛇 var snakeArr = [new Box(1,2),new Box(1,3),new Box(1,4),new Box(2,4),new Box(3,4),new Box(4,4),new Box(5,4),new Box(6,4)]; // 蛇头 var headBox = snakeArr[snakeArr.length-1]; // 虫子 var worm ; // 初始化地图 function initMap(){ for(var i=1;i&lt;=50;i++){ for(var j=1;j&lt;=50;j++){ $(&quot;&lt;div id=map_&quot;+i+&quot;_&quot;+j+&quot; class='maps'&gt;&lt;/div&gt;&quot;).appendTo($('#map')); if(j==50){ $('&lt;div style=&quot;clear:both;&quot;&gt;&lt;/div&gt;').appendTo($('#map')); } } } } // 绘制蛇 function drawSnake(){ for(var i=0;i&lt;snakeArr.length;i++){ var box = snakeArr[i]; $(&quot;#map_&quot;+box.x+&quot;_&quot;+box.y).addClass('back'); } } // 清楚蛇 function clearSnake(){ for(var i=0;i&lt;snakeArr.length;i++){ var box = snakeArr[i]; $(&quot;#map_&quot;+box.x+&quot;_&quot;+box.y).removeClass('back'); } } // 绘制虫子 function drawWorm(){ do{ var x = Math.round(Math.random()*(50-1)); var y = Math.round(Math.random()*(50-1)); worm = new Box(x,y); }while(isInSnake(worm)); //worm = new Box(x,y); $(&quot;#map_&quot;+worm.x+&quot;_&quot;+worm.y).addClass('worm'); } // 清除虫子 function clearWorm(){ $(&quot;#map_&quot;+worm.x+&quot;_&quot;+worm.y).removeClass('worm'); } // 判断蛇方格中是否存在该方格 function isInSnake(worm){ var result = false; for(var i=0;i&lt;snakeArr.length;i++){ var box = snakeArr[i]; if(worm.x == box.x &amp;&amp; worm.y == box.y){ result = true; break; } } return result; } /* 1、清除原有蛇 2、计算新蛇头的位置 3、判断新蛇头是否碰到边界 是则结束游戏 4、判断新蛇头是否碰到自己 是则结束游戏 5、判断蛇是否碰到虫子 是则吃掉该虫子 产生一个新虫子 6、重新绘制蛇 */ function forward(){ // 清除原有蛇 clearSnake(); // 计算新蛇头的位置 switch (direction){ case 1: headBox = new Box(headBox.x,headBox.y+1); break; case 2: headBox = new Box(headBox.x+1,headBox.y); break; case 3: headBox = new Box(headBox.x,headBox.y-1); break; case 4: headBox = new Box(headBox.x-1,headBox.y); break; } // 判断新蛇头是否碰到边界 if(headBox.x&lt;1 || headBox.x &gt; 50 || headBox.y&lt;1 || headBox.y &gt; 50){ clearInterval(gameInt); alert(&quot;game over!&quot;); //return; } // 判断新蛇头是否碰到自己 if(isInSnake(headBox)){ clearInterval(gameInt); alert(&quot;game over!&quot;); //return; } // 判断蛇是否碰到虫子 if(headBox.x == worm.x &amp;&amp; headBox.y == worm.y){ clearWorm(); drawWorm(); }else{ snakeArr.shift(); } snakeArr.push(headBox); // 重新绘制蛇 drawSnake(); } $(function(){ // 初始化地图 initMap(); // 初始化蛇 drawSnake(); // 初始化虫子 drawWorm(); // 启动定时器 gameInt = setInterval(function(){ forward(); },200); // 监听键盘方向键 根据方向键确定蛇的前进方向 $(document).keydown(function(e){ switch(e.which){ case 37: if(direction!=1){ direction = 3; } break; case 38: if(direction!=2){ direction = 4; } break; case 39: if(direction!=3){ direction = 1; } break; case 40: if(direction!=4){ direction = 2; } break; } }); }); </script> <div id="map"></div>
  • 编程
    52 引用 • 257 回帖 • 3 关注
  • 游戏

    沉迷游戏伤身,强撸灰飞烟灭。

    187 引用 • 832 回帖
  • JavaScript

    JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言,内置支持类型。它的解释器被称为 JavaScript 引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在 HTML 网页上使用,用来给 HTML 网页增加动态功能。

    730 引用 • 1284 回帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...

推荐标签 标签

  • OneDrive
    2 引用
  • InfluxDB

    InfluxDB 是一个开源的没有外部依赖的时间序列数据库。适用于记录度量,事件及实时分析。

    2 引用 • 106 关注
  • Java

    Java 是一种可以撰写跨平台应用软件的面向对象的程序设计语言,是由 Sun Microsystems 公司于 1995 年 5 月推出的。Java 技术具有卓越的通用性、高效性、平台移植性和安全性。

    3203 引用 • 8217 回帖 • 2 关注
  • OnlyOffice
    4 引用 • 19 关注
  • Firefox

    Mozilla Firefox 中文俗称“火狐”(正式缩写为 Fx 或 fx,非正式缩写为 FF),是一个开源的网页浏览器,使用 Gecko 排版引擎,支持多种操作系统,如 Windows、OSX 及 Linux 等。

    7 引用 • 30 回帖 • 369 关注
  • 快应用

    快应用 是基于手机硬件平台的新型应用形态;标准是由主流手机厂商组成的快应用联盟联合制定;快应用标准的诞生将在研发接口、能力接入、开发者服务等层面建设标准平台;以平台化的生态模式对个人开发者和企业开发者全品类开放。

    15 引用 • 127 回帖 • 1 关注
  • SQLite

    SQLite 是一个进程内的库,实现了自给自足的、无服务器的、零配置的、事务性的 SQL 数据库引擎。SQLite 是全世界使用最为广泛的数据库引擎。

    4 引用 • 7 回帖
  • LaTeX

    LaTeX(音译“拉泰赫”)是一种基于 ΤΕΧ 的排版系统,由美国计算机学家莱斯利·兰伯特(Leslie Lamport)在 20 世纪 80 年代初期开发,利用这种格式,即使使用者没有排版和程序设计的知识也可以充分发挥由 TeX 所提供的强大功能,能在几天,甚至几小时内生成很多具有书籍质量的印刷品。对于生成复杂表格和数学公式,这一点表现得尤为突出。因此它非常适用于生成高印刷质量的科技和数学类文档。

    12 引用 • 59 回帖
  • Love2D

    Love2D 是一个开源的, 跨平台的 2D 游戏引擎。使用纯 Lua 脚本来进行游戏开发。目前支持的平台有 Windows, Mac OS X, Linux, Android 和 iOS。

    14 引用 • 53 回帖 • 563 关注
  • Webswing

    Webswing 是一个能将任何 Swing 应用通过纯 HTML5 运行在浏览器中的 Web 服务器,详细介绍请看 将 Java Swing 应用变成 Web 应用

    1 引用 • 15 回帖 • 643 关注
  • BookxNote

    BookxNote 是一款全新的电子书学习工具,助力您的学习与思考,让您的大脑更高效的记忆。

    笔记整理交给我,一心只读圣贤书。

    1 引用 • 1 回帖 • 1 关注
  • Shell

    Shell 脚本与 Windows/Dos 下的批处理相似,也就是用各类命令预先放入到一个文件中,方便一次性执行的一个程序文件,主要是方便管理员进行设置或者管理用的。但是它比 Windows 下的批处理更强大,比用其他编程程序编辑的程序效率更高,因为它使用了 Linux/Unix 下的命令。

    125 引用 • 74 回帖 • 3 关注
  • Ngui

    Ngui 是一个 GUI 的排版显示引擎和跨平台的 GUI 应用程序开发框架,基于
    Node.js / OpenGL。目标是在此基础上开发 GUI 应用程序可拥有开发 WEB 应用般简单与速度同时兼顾 Native 应用程序的性能与体验。

    7 引用 • 9 回帖 • 407 关注
  • Office

    Office 现已更名为 Microsoft 365. Microsoft 365 将高级 Office 应用(如 Word、Excel 和 PowerPoint)与 1 TB 的 OneDrive 云存储空间、高级安全性等结合在一起,可帮助你在任何设备上完成操作。

    5 引用 • 34 回帖 • 1 关注
  • Thymeleaf

    Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。类似 Velocity、 FreeMarker 等,它也可以轻易的与 Spring 等 Web 框架进行集成作为 Web 应用的模板引擎。与其它模板引擎相比,Thymeleaf 最大的特点是能够直接在浏览器中打开并正确显示模板页面,而不需要启动整个 Web 应用。

    11 引用 • 19 回帖 • 398 关注
  • Oracle

    Oracle(甲骨文)公司,全称甲骨文股份有限公司(甲骨文软件系统有限公司),是全球最大的企业级软件公司,总部位于美国加利福尼亚州的红木滩。1989 年正式进入中国市场。2013 年,甲骨文已超越 IBM,成为继 Microsoft 后全球第二大软件公司。

    107 引用 • 127 回帖 • 341 关注
  • Postman

    Postman 是一款简单好用的 HTTP API 调试工具。

    4 引用 • 3 回帖 • 3 关注
  • Wide

    Wide 是一款基于 Web 的 Go 语言 IDE。通过浏览器就可以进行 Go 开发,并有代码自动完成、查看表达式、编译反馈、Lint、实时结果输出等功能。

    欢迎访问我们运维的实例: https://wide.b3log.org

    30 引用 • 218 回帖 • 645 关注
  • IPFS

    IPFS(InterPlanetary File System,星际文件系统)是永久的、去中心化保存和共享文件的方法,这是一种内容可寻址、版本化、点对点超媒体的分布式协议。请浏览 IPFS 入门笔记了解更多细节。

    20 引用 • 245 回帖 • 236 关注
  • etcd

    etcd 是一个分布式、高可用的 key-value 数据存储,专门用于在分布式系统中保存关键数据。

    6 引用 • 26 回帖 • 545 关注
  • CSS

    CSS(Cascading Style Sheet)“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    199 引用 • 543 回帖 • 3 关注
  • Access
    1 引用 • 3 回帖 • 3 关注
  • 印象笔记
    3 引用 • 16 回帖 • 1 关注
  • Elasticsearch

    Elasticsearch 是一个基于 Lucene 的搜索服务器。它提供了一个分布式多用户能力的全文搜索引擎,基于 RESTful 接口。Elasticsearch 是用 Java 开发的,并作为 Apache 许可条款下的开放源码发布,是当前流行的企业级搜索引擎。设计用于云计算中,能够达到实时搜索,稳定,可靠,快速,安装使用方便。

    117 引用 • 99 回帖 • 200 关注
  • 30Seconds

    📙 前端知识精选集,包含 HTML、CSS、JavaScript、React、Node、安全等方面,每天仅需 30 秒。

    • 精选常见面试题,帮助您准备下一次面试
    • 精选常见交互,帮助您拥有简洁酷炫的站点
    • 精选有用的 React 片段,帮助你获取最佳实践
    • 精选常见代码集,帮助您提高打码效率
    • 整理前端界的最新资讯,邀您一同探索新世界
    488 引用 • 384 回帖 • 4 关注
  • 周末

    星期六到星期天晚,实行五天工作制后,指每周的最后两天。再过几年可能就是三天了。

    14 引用 • 297 回帖 • 1 关注
  • frp

    frp 是一个可用于内网穿透的高性能的反向代理应用,支持 TCP、UDP、 HTTP 和 HTTPS 协议。

    17 引用 • 7 回帖 • 4 关注