• 24RT5G
    了解作者
  • HTML
    开发工具
  • 35KB
    文件大小
  • zip
    文件格式
  • 0
    收藏次数
  • 1 积分
    下载积分
  • 2
    下载次数
  • 2019-01-05 20:38
    上传日期
jQuery贪吃蛇网页版游戏代码基于jquery.1.11.3.min.js制作,贪吃蛇游戏是一款经典的益智游戏
2.zip
  • js
  • jquery.min.js
    93.7KB
  • index.html
    10.1KB
内容介绍
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>jQuery贪吃蛇网页版游戏代码 - 源码之家</title> <script src="js/jquery.min.js"></script> <style type="text/css" media="screen"> *{ margin: 0; padding: 0; } img{ border:0; } ol, ul ,li{list-style: none;} body{ background:#272323; } .wrap{ width:810px; height:600px; margin: 100px auto; border:2px solid #FFC400; padding:0 1px 1px 0; position: relative; background:#0B0B0B; } .snake_wrap{ width:810px; height:600px; position: absolute; top:0px; left:0px; overflow: hidden; } .snake_wrap li{ width:14px; height:14px; background:#FFC400; float: left; margin: 1px 0 0 1px; position: absolute; } .food{ width:14px; height:14px; background:#FFC400; position: absolute; top:30px; left:45px; } .Data,.explain{ width:200px; height:605px; background:#0b0b0b; position: absolute; top:-2px; left:-210px; } .score{ height:70px; text-align:center; line-height: 70px; font-size:40px; font-weight: bold; color: #ffc400; } .Data ul{ width:190px; height:494px; border-top:2px solid #ffc400; padding:5px; overflow: hidden; } .Data ul li{ width:100%; color: #ffc400; line-height:26px; padding:3px 0 3px; overflow:hidden; } .Data ul li+li{ border-top:1px dashed rgba(255,196,0,0.2); } .Data ul li span{ display: block; float: left; overflow: hidden; white-space:nowrap; text-overflow:ellipsis; } .Data ul li span.NO{ width:40px; } .Data ul li span.name{ width:100px; } .Data ul li span.scoreList{ float: right; text-align:right; width:50px; } .clear_data{ color:#ffc400; border-top:1px solid #ffc400; text-align:center; padding:5px 0; cursor:pointer; } .clear_data:hover{ text-decoration:underline; } .zhez{ width:100%; height:100%; position: absolute; top:0; left:0; background:rgba(0,0,0,0.5); display: none; text-align:center; } .start{ display: block; } .zhez span{ padding:15px 250px; margin: 20px; border:3px solid #D4A509; line-height: 40px; font-size:22px; background:#0b0b0b; color: #ffc400; border-radius:10px; cursor:pointer; } .zhez span:hover{ background:#D4A509; color: #fff; } .start input{ display: block; width:200px; height:50px; margin: 210px auto 100px; padding:0 20px; outline:none; } .over p{ font-weight:bold; font-size:100px; color:rgba(255,196,0,1); padding:150px 0 100px; } .explain{ left:auto; right:-210px; color:#ffc400; padding:10px; width:180px; height:584px; font-size:14px; line-height:22px; } .explain h3{ font-size:16px; padding:5px 0 10px; margin-bottom:10px; border-bottom: 1px solid #ffc400; } .explain p{padding:3px 0;} </style> <script> $(function(){ $('.game_start').on('click',function(){ $(this).closest('.start').stop().hide(); mySnakeFn(); }) $('.game_over').on('click',function(){ $('.start').stop().show(); $(this).closest('.over').stop().hide(); $('input[name=your_name]').val(''); }) $('.clear_data').on('click',function(){ $('.ranking_list').empty(); }) }) function mySnakeFn(){ //全局变量对相 var myVar = { //移动控制变量 del_x:-15, del_y:0, //初始长度 myscore:0, //移动速度 speed:100, //计时器 itimes:null } // 初始位置 ;(function(){ var arr_snake = [['300px','390px'],['300px','405px'],['300px','420px']]; $('.snake_wrap').empty(); $('.snake_wrap').append('<li></li><li></li><li></li>') $('.snake_wrap li').each(function(value){ $(this).css({'top':arr_snake[value][0],'left':arr_snake[value][1]}) }) })(jQuery); //键盘控制--上下左右暂停 ;(function(){ //暂停判定 var stop = true; $(document).keydown(function(event) { switch(event.keyCode){ //空格 暂停 case 32:stop ? clearInterval(myVar.itimes) : run(); stop = !stop; break; //左 case 37:directionKey(-15,0,true); break; //上 case 38:directionKey(0,-15,false); break; //右 case 39:directionKey(15,0,true); break; //下 case 40:directionKey(0,15,false); break; } }); })(jQuery); //方向判断 function directionKey(y1,y2,bour){ if(!myVar.del_x == bour){ myVar.del_x = y1; myVar.del_y = y2; } } function run(){ //计时器,每speed时刷新一次 myVar.itimes = setInterval(function(){ //获取当前食物位置 var food_top = $('.food').position().top; var food_left = $('.food').position().left; //设置新增蛇头坐标 var header_top = $('.snake_wrap li').eq(0).position().top + myVar.del_y; var header_left = $('.snake_wrap li').eq(0).position().left + myVar.del_x; //当前蛇头颜色重置 $('.snake_wrap li').eq(0).css({'background': '#FFC400'}); //新增蛇头,并赋予样式 $('.snake_wrap').prepend('<li></li>'); $('.snake_wrap li').eq(0).css({'left':header_left + 'px','top':header_top + 'px','background':'#fff'}) //移除最后一节蛇尾 $('.snake_wrap li:last').remove(); //判断蛇是否吃到食物 if((header_left == (food_left - 1)) && (header_top == (food_top - 1))){ var last_top = $('.snake_wrap li:last').position().top; var last_left = $('.snake_wrap li:last').position().left; $('.snake_wrap').append('<li></li>'); $('.snake_wrap li:last').eq(0).css({'left':last_left + 'px','top':last_top + 'px'}) //刷新食物 foodRandom(); //蛇身长度 myVar.myscore++; scoreFn(myVar.myscore); //每加长5,速度提升10 if(!(myVar.myscore%5) && myVar.speed > 10){ clearInterval(myVar.itimes); myVar.speed -= 10; run(); } } //边界判断 borderDetection(header_top,header_left); //自撞判断 selfDetection(header_top,header_left); },myVar.speed) } run(); //分数 function scoreFn(x){ $('.score').html(x) } //食物 function foodRandom(){ var t = 40; var x = 54; var y = 0; var repeat = false; var top = parseInt(Math.random() * (t - y) + y); var left = parseInt(Math.random() * (x - y) + y); //判断食物与蛇身坐标是否重合 $('.snake_wrap li').each(function() { if($(this).position().left == left && $(this).position().top == top){ foodRandom(); }else{ repeat = true; } }); //如果食物没在蛇身上,定位食物 if(repeat){ $('.food').css({'top':top*15 + 1 + 'px','left':left*15 + 1 + 'px'}); } } foodRandom(); // 边界判定 function borderDetection(HT,HL){ if(HT<0 || HT > 585 || HL < 0 || HL >795){ clearInterval(myVar.itimes); gameOver(); rankingList() } } //自撞判定 function selfDetection(HT,HL){ //从第二节开始,坐标是否与蛇头重合 $('.snake_wrap li:gt(0)').each(function(index, val) { var this_top = $(this).position().top; var this_left = $(this).position().left; if( HL == this_left && HT == this_top ){ clearInterval(myVar.itimes); gameOver(); rankingList() } }) } //游戏结束 function gameOver(){ $('.over').show(); } //获取用户昵称 function yourName(){ if($.trim($('input[name=your_name]').val()) != ''){ return $('input[name=your_name]').val(); }else{ return '游客'; } } //排行榜 function rankingList(){ //添加新的记录 var new_ranking = '<li><span class="NO">'+ (1 +parseInt
评论
    相关推荐
    • html5贪吃蛇游戏
      html5代码编写的贪吃蛇游戏,可以在网站直接运行。利用hbuild软件实现,简单美观实用。
    • html贪吃蛇源码
      html,js缩所写的贪吃蛇,源码简介清晰你可以,根据所写的注释读
    • HTML 贪吃蛇游戏
      HTML 贪吃蛇游戏
    • html贪吃蛇
      贪吃蛇小游戏,可通过触摸手机屏幕,控制贪吃蛇走向。 采用了,Jquery,vue。利用canvas绘制贪吃蛇
    • html5贪吃蛇
      自己写的代码 下载就可以运行 直接移植手机浏览器即可享受游戏的乐趣 不过仅供开发人员参考
    • 前端html贪吃蛇.rar
      前端html贪吃蛇.rar
    • HTML5贪吃蛇
      解压包内有HTML5贪吃蛇游戏源代码,图片资源。
    • html贪吃蛇
      贪吃蛇html版!目前虽然有些卡顿,但是挺好玩的,想想还是挺划算的,双击index.html即可开始贪吃蛇,加油!!!
    • html贪吃蛇
      网页贪吃蛇,这是一款比较需要耐心的游戏,用游戏把子上下左右控制蛇的方向,寻找吃的东西,每吃一口就能得到一定的积分,而且蛇的身子会越吃越长,身子越长玩的难度就越大,不能碰墙,更不能咬自己的尾巴,等到了...
    • html贪吃蛇游戏 很不错啊
      在运用了HTML的基础上做的这个游戏,还算很不错的,希望大家能够多多支持