十大网页游戏排名(中国十大游戏公司排名)

序言：Jquery网页版贪吃蛇益智类小游戏，代码可直接运行，使用键盘方向键(← ↑ → ↓)键来控制方向，空格键暂停。web前端永远不会过时，赶紧点赞收藏吧。

效果图：

移动速度可自定义，数值越大移动速度越慢。

代码：

只有一个html代码，复制代码到编辑器中运行即可查看效果。

!DOCTYPE htmlhtml lang="en"headmeta charset="UTF-8" /titlejQuery贪吃蛇网页版游戏代码/titlescript src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"/scriptstyle 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;}/stylescript $(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:200, //计时器 itimes:null } // 初始位置 ;(function(){ var arr_snake = [['300px','390px'],['300px','405px'],['300px','420px']]; $('.snake_wrap').empty(); $('.snake_wrap').append('li/lili/lili/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(HT0 || 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 = 'lispan class="NO"'+ (1 +parseInt($('.ranking_list li').length)) +'/spanspan class="name"' +yourName()+ '/spanspan class="score_list"' +myVar.myscore+ '/span/li' //排行榜容器 var ranking_list = $('.ranking_list'); //如果排行榜中有记录就进行排序，如果为空就直接添加 if(ranking_list.has('li').length0){ //记录长度 var li_len = $('.ranking_list li').length //冒泡排序，把新的记录排列到对应的位置上 for(var i = 0; i li_len; i++){ if(parseInt($('.ranking_list li').eq(i).children('span.score_list').html()) parseInt(myVar.myscore)){ $(new_ranking).insertBefore($('.ranking_list li').eq(i)).hide().slideDown(); break; }else if(i == li_len - 1){ $(new_ranking).appendTo(ranking_list).hide().slideDown(); } } }else{ $(new_ranking).appendTo(ranking_list).hide().slideDown(); } //重新添加排号序列 $.each($('.ranking_list li'),function(index,value){ $(this).children('.NO').html($(this).index() +1) }) } }/script/headbodydiv class="wrap" ul class="snake_wrap" li class="light"/li li class="light"/li li class="light"/li /ul span class="food"/span div class="Data" div class="score"0/div ul class="ranking_list" /ul p class="clear_data"清除记录/p /div div class="start zhez" input type="text" name="your_name" placeholder="输入您的昵称" span class="game_start"开始游戏/span /div div class="over zhez" piGAME OVER/i/p span class="game_over"重新开始/span /div div class="explain" h3操作指南/h3 p输入游戏昵称（不输入默认“游客”）。/p p点击“开始游戏”按钮启动游戏。/p p使用键盘方向键（← ↑ → ↓）键来控制方向，空格键暂停。/p p游戏开始后，每成功吃到食物，分数加1，身体会加长一块，随着蛇身的加长，速度也会上升。/p p当蛇头跃出边界或者撞到自身时，游戏结束。/p /div/div/body/html

我是小程序软件开发，每天分享开发过程中遇到的知识点，如果对你有帮助的话，帮忙点个赞再走呗，非常感谢。

往期文章分享：

php常见的后台内容管理系统，非常适合初级程序员的建站系统

本文TAG：十大网页游戏排名