手把手教大家编写贪吃蛇小游戏（前端：html+css+javascript）

始之前大家最好掌握前端最基本的一些语法如：html、css、javascript等课程知识点。

好吧！！！因为开发前端的东西无须安装任何开发工具，就算啥也不懂也没关系，那么赶紧瓜子花生板凳准备好快跟着老师来体验一下编程的魅力吧！:)

真实效果图如下：

程序思维

开发的大概思路是首先在Body中定义一个div作为容器，然后使用样式定义界面游戏场景，角色（贪吃蛇）以及食物，然后编写javascript脚本对游戏地图，角色以及食物进行初始化的渲染，再编写move函数完成蛇身移动，蛇身在移动的过程当中判断蛇头和蛇身是否重叠，促使蛇身增长，假如蛇头在移动的过程当中碰到身体的其它部位，或者超出地图编写视作游戏结束Game Over,当蛇身长度达到某个长度值我们可以设置通关条件可以增加移动速度。

废话不多说直接按步骤撸代码！！！

第一步：编写游戏地图/贪吃蛇/食物样式

第二步：定义初始化数据（并定义功能函数）

第三步：创建地图(函数)

第四步：创建/擦除蛇身(函数)

第五步：蛇身移动(函数)

第五步中调用的函数：吃到食物（函数）

由于是否吃到食物和控制方向函数都是蛇身移动过程当中需要反复调用，所以最后单独写成了独立函数在蛇身移动函数中调用，好了代码到此结束！最后大家可以来试试啦！

如果有小伙伴在编写代码过程当中碰到问题欢迎大家添加关注私信我来咨询，或找我获取录制的经典小游戏之贪吃蛇游戏录制的视频和代码。

或点击下面的“了解更多”,进入在线视频链接进行学习。好了感谢大家的观看再见！

个课程中将使用HTML5的画布来生成经典的手机游戏贪食蛇，将使用到基础的画布相关API，希望能够帮助大家了解画布在HTML5游戏开发中的基础使用

整个课程从简入难，大家有兴趣可以边学，变调试和运行代码，如果有任何技术问题，请留言或者发布课程提问到社区，我们会在线解答

点击“阅读全文” 可在手机访问课程

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

效果图：

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

代码：

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>jQuery贪吃蛇网页版游戏代码</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/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:200,
				//计时器
				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($('.ranking_list li').length)) +'</span><span class="name">' +yourName()+ '</span><span class="score_list">' +myVar.myscore+ '</span></li>';
			//排行榜容器
			var ranking_list = $('.ranking_list');

			//如果排行榜中有记录就进行排序，如果为空就直接添加
			if(ranking_list.has('li').length>0){
				//记录长度
				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>
</head>
<body>
<div 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">
		<p><i>GAME 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常见的后台内容管理系统，非常适合初级程序员的建站系统

微信小程序授权获取手机号，跟着我来学习下是如何实现的吧

在线咨询

上一篇：亚马逊运营必备技能，一分钟学会HTML「附各HTML工具测评」
下一篇：前端开发过程中的HTML规范，来学习一下吧

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

手把手教大家编写贪吃蛇小游戏（前端：html+css+javascript）

个课程中将使用HTML5的画布来生成经典的手机游戏贪食蛇，将使用到基础的画布相关API，希望能够帮助大家了解画布在HTML5游戏开发中的基础使用

您的项目需求