jquery 写的贪吃蛇。。

最新推荐文章于 2023-02-18 11:22:03 发布
最新推荐文章于 2023-02-18 11:22:03 发布
阅读量2.6k 收藏 5
点赞数
分类专栏： javascript 文章标签： jquery function javascript xhtml float firefox
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/li277680701/article/details/5677264
版权

看csdn各位大大写js游戏早就想练练手也写一个了。

这个贪吃蛇是我的第一个js游戏不对的地方各位大大给指正。

代码写的没什么难的，用Firefox看里面span的属性改变就知道我是怎么做的了。

不多说了，代码贴出来

 

 

里面<script language="javascript" type="text/javascript" src="../scripts/jquery-1[1].2.6.js"></script>

是jquery库，路径需要改下的

 

下载地址：

http://download.csdn.net/source/2463742

起个名字真难啊啊啊啊啊
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
jquery实现贪吃蛇小游戏
12-20
（写的思维混乱，只是想留个纪念，有时间重新写一遍）
jQuery 实现贪吃蛇小游戏（你一定能看懂）
仰望天空，妳我亦是行人.
07-21 1591
hello！最近学习了JS，做个小游戏练练（基本上是使用的jQuery），其中部分功能是用于和后端交互的。*注意：这里需要引入一个jQuery文件！！！如下图所示：
用jQuery编写出贪吃蛇小游戏
m0_53911328的博客
05-29 561
CSS页面代码： .games { width: 400px; height: 400px; margin: 40px auto 0; background: #999; position: relative; } .mask { width: 100%; height: 100%;
JQuery初学--贪吃蛇小游戏
m0_51589341的博客
02-18 154
学习JQuery
jQ制作贪吃蛇（笨b写法）
qq_45578842的博客
05-27 410
用jQuery写的贪吃蛇案例，比较简单粗糙
jQuery写的贪吃蛇
06-02
这个是用jQuery写的贪吃蛇，有详细的代码和注释，感兴趣的可以看一下
jquery 写的贪吃蛇
08-19
通过网页版贪吃蛇实例可以很好地让你掌握jquery的基本用法，熟悉常用方法。
jquery版贪吃蛇
04-22
代码基础功能实现，新手，界面丑陋。
jQuery贪吃蛇实现
06-24
jQuery贪吃蛇实现，只使用了jQuery库和原生HTML标签，简单实现
jquery做贪吃蛇教程
weixin_42058732的博客
07-20 1413
以下要用到jquery-2.1.1.min.js &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt;     &lt;meta charset="utf-8"&gt;     &lt;style&gt;     .black{         background-color: black;     }     .bo{         width: ...
2个jquery小游戏
03-20
NULL 博文链接：https://gengzhelun619-163-com.iteye.com/blog/825067
贪吃蛇(Jquery)
03-10
贪吃蛇 Jquery 简单易读 逻辑清晰 适合初学者 var x=200,y=200;//初始位置 var speed=20;//移动距离 var time = 100 ; //蛇的速度 var NodeCount = 5;//初始蛇身长度 var FoodCount = 5;//初始食物数量 var direction = 'd'; // w 向上 d 向右 a 左 s下
jQuery 贪吃蛇网页游戏完整版
06-29
jQuery 贪吃蛇网页游戏完整版! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/
JQUERY写的小小游戏
06-19
昨晚写的一个JQUERY插件，实现了一个彩色砖块的游戏，欢迎大家试玩。=.=
用jquery写贪吃蛇
weixin_33748818的博客
12-27 634
需要具备知识：1.html、css基础2.jquery基础 具体实现方法： 创建游戏界面 .bts { display: flex; } .bt { width: 60px; height: 24px;...
js开发实现简单贪吃蛇游戏（20行代码）
热门推荐
程序猿开发日志【学习永无止境】
03-30 8万+
曾经诺基亚的贪吃蛇风靡一时，在游戏匮乏的年代，用java实现太难，现在网页制作20行代码就做成一个简单的demo了，时代在进步啊 代码： 01 <!doctype html> 02 html> 03 body> 04 ca
用HTML+JS+JQuery写的贪吃蛇（贪吃方块）
小天的博客
08-03 1010
用HTML+JS+JQuery写的贪吃蛇（贪吃方块） 这是我写的第一篇文章，第一次使用，可能有很多不了解的地方，还请大家多多指教。 初衷 关于我写CSDN文章的初衷就是，想打开自己的视角，开放自己的朋友圈，认识更多优秀的人，本人之前感觉圈子很小，除了周围的同学，基本没结识太多有志之士，也感谢我的朋友推荐我使用CSDN。嗯，接下来，回归主题聊一聊这个贪吃蛇，哦不对，准确来说应该是贪吃方块。 简单的设...
贪吃蛇JQuery部分
zls120377的博客
07-17 552
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;snake&lt;/title&gt; &lt;style&gt; .square { width: 30px; height: 30px; } .border { background-color: grey; } .snake { back...
javascript之【贪吃蛇系列】第一弹：简单的贪吃蛇实现
u010800530的专栏
07-27 3762
参考博客：http://blog.csdn.net/sunxing007/article/details/4187038 以上博客是参考，毕竟第一次做，真让自己盲人摸象做不出来。 不过我在其上做了一些改进，界面等效果看起来更好一些。 下图是在Chrome上运行的效果，但是火狐和IE会不兼容，onkeydown事件不能正确调用 这里用了一张图把贪吃蛇制作过程的思想画了
如何用jquery写贪吃蛇
最新发布
03-29
由于贪吃蛇是一个比较复杂的游戏，需要涉及到许多细节的处理，因此写贪吃蛇需要一定的前端开发经验。下面是一个简单的贪吃蛇示例，使用jQuery实现： HTML代码： ```html <!DOCTYPE html> <html> <head> <title>贪吃蛇</title> <meta charset="utf-8"> <style> #game { width: 500px; height: 500px; border: 1px solid #000; position: relative; } .snake { width: 20px; height: 20px; background-color: green; position: absolute; } .food { width: 20px; height: 20px; background-color: red; position: absolute; } </style> </head> <body> <div id="game"></div> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="snake.js"></script> </body> </html> ``` JavaScript代码： ```javascript $(function() { // 创建游戏区域 var $game = $('#game'); var gameWidth = $game.width(); var gameHeight = $game.height(); // 创建蛇 var snake = [ {x: 3, y: 1}, {x: 2, y: 1}, {x: 1, y: 1} ]; // 创建食物 var food; // 初始化游戏 function init() { // 清空游戏区域 $game.empty(); // 创建蛇 $.each(snake, function(index, value) { var $snake = $('<div>').addClass('snake').css({ left: value.x * 20 + 'px', top: value.y * 20 + 'px' }); $game.append($snake); }); // 创建食物 createFood(); } // 创建食物 function createFood() { var x = Math.floor(Math.random() * (gameWidth / 20)); var y = Math.floor(Math.random() * (gameHeight / 20)); food = {x: x, y: y}; var $food = $('<div>').addClass('food').css({ left: x * 20 + 'px', top: y * 20 + 'px' }); $game.append($food); } // 移动蛇 function move() { var head = snake[0]; var tail = snake.pop(); var newHead; switch(direction) { case 'up': newHead = {x: head.x, y: head.y - 1}; break; case 'down': newHead = {x: head.x, y: head.y + 1}; break; case 'left': newHead = {x: head.x - 1, y: head.y}; break; case 'right': newHead = {x: head.x + 1, y: head.y}; break; } // 判断是否撞墙 if(newHead.x < 0 || newHead.x >= gameWidth / 20 || newHead.y < 0 || newHead.y >= gameHeight / 20) { clearInterval(timer); alert('游戏结束！'); return; } // 判断是否吃到食物 if(newHead.x == food.x && newHead.y == food.y) { snake.unshift(tail); createFood(); } // 判断是否撞到自己 for(var i = 1; i < snake.length; i++) { if(newHead.x == snake[i].x && newHead.y == snake[i].y) { clearInterval(timer); alert('游戏结束！'); return; } } // 添加新头 snake.unshift(newHead); // 更新蛇的位置 $.each(snake, function(index, value) { $('.snake').eq(index).css({ left: value.x * 20 + 'px', top: value.y * 20 + 'px' }); }); } // 监听键盘事件 var direction = 'right'; $(document).on('keydown', function(e) { switch(e.keyCode) { case 37: if(direction != 'right') { direction = 'left'; } break; case 38: if(direction != 'down') { direction = 'up'; } break; case 39: if(direction != 'left') { direction = 'right'; } break; case 40: if(direction != 'up') { direction = 'down'; } break; } }); // 开始游戏 init(); var timer = setInterval(move, 200); }); ``` 以上代码仅供参考，如果需要实现更完整、更复杂的贪吃蛇游戏，还需要根据实际需求进行调整和优化。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值