手把手教大家編寫貪吃蛇小游戲（前端：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游戲開發中的基礎使用

您的項目需求