一條貪吃蛇的使命——零基礎入門貪吃蛇遊戲（附演示地址）

零基礎入門貪吃蛇遊戲

貪吃蛇是一款最多見、最經典、最受歡迎的小遊戲之一。本篇文章帶你零基礎實現貪吃蛇遊戲，一條蛇的使命從這裏開始。

演示地址：貪吃蛇演示，可能會提示危險操做，請忽略，放心訪問。

一、遊戲描述

    貪吃蛇是一款很是經典的休閒類遊戲。在一塊固定大小的區域內，遊戲玩家經過控制貪吃蛇的移動去吃食物，吃到食物的蛇身體變長。食物被蛇吃到後立馬消失，並再次隨機產生。蛇撞到四周牆壁或者本身身體時死亡。

二、前期準備

2.1 具有技能

    本遊戲所說是零基礎，但你具有如下技能最佳：
    一、 HTML（主要是div盒子模型，canvas畫布）
    2.、CSS （爲你好看的遊戲界面作準備）
    3.、JavaScript （讓小蛇動起來，邏輯代碼實現）

2.2 開發工具

    爲提升開發速率，選擇一款優秀的開發工具也很重要，這裏小編推薦 sublime text3,輕巧方便，能夠去百度下載，也能夠關注小編公衆號「C you again」,私信獲取破解中文版。固然你足夠優秀，使用記事本小編也不攔着。

三、實現目標

    本篇文章欲帶你實現如下功能
    一、基本貪吃蛇（蛇的移動，吃食物，產生食物，增長分數）
    二、增長 暫停遊戲/繼續遊戲功能
    三、再來一局功能（貪吃蛇死亡後有再來一局提示）

四、按鍵約定

    爲方便玩家遊戲，對操做按鍵作如下約定：
     一、上、下、左、右按鍵分別操做貪吃蛇的四個運動方向
     二、「+」、「-」按鍵分別表明貪吃蛇的加速、減速
     3.、空格鍵表明遊戲暫停/繼續

五、實現原理

    一、利用canvas畫布完成運動場地、食物、貪吃蛇的展現
    二、利用數組存儲貪吃蛇的座標位置
    三、利用上、下、左、右鍵改變貪吃蛇的蛇頭座標
    二、不斷從新繪製頁面，形成貪吃蛇運動的錯覺

六、實現邏輯

//僞代碼
function 初始化數據（）{
    一、初始化貪吃蛇運動區域大小
    二、初始化canvas畫布山下文對象
    三、初始化貪吃蛇的座標
    四、初始化貪吃蛇運動的方向
    五、初始化玩家分數
    六、初始化貪吃蛇的速度
    七、初始化食物
    八、初始化蛇
    九、初始化蛇的狀態
 }
function 開始遊戲（）{
  interval = setInterval(運動方法（）, speed);
  document.onkeydown = function(event) {
		var event = event || window.event;
		按鍵監控方法(event.keyCode);
	}
}

function 按鍵監控方法（key）{
   switch(key){
      case: 37
      左
      break;
       case: 38
      上
      break;
       case: 39
      右
      break;
       case: 40
      下
      break;
      case: 32
      開始/暫停
      break;
      case: 107
      加速
      break;
      case: 109
      減速
      break;
   }
}

function 運動方法（）{
  switch(moveTo){
     case 0:
       向左運動代碼；
       break;
      case 1:
       向上運動代碼；
       break;
      case 2:
       向右運動代碼；
       break;
      case 3:
       向下運動代碼；
       break;
  }
  畫地圖方法（）;
  畫食物方法（）;
  畫蛇方法（）;
  是否吃到食物方法（）;
  是否死亡方法（）;
}

function 畫地圖方法（）{
  畫地圖代碼實現.....
}

function 畫食物方法（）{
   畫食物代碼實現.....
}

function 畫蛇方法（）{
   畫蛇代碼實現.....
}
function 是否吃到食物方法（）{
  if(蛇頭左上角的座標==食物左上角的座標){
     //吃到食物
     一、分數加一;
     二、從新繪製食物
     三、增長蛇身
  }
}

function 是否死亡方法（）{
   一、判斷蛇頭左上角座標是否越過上、下、左、右任一牆壁;
   二、判斷蛇頭左上角座標是否與本身身體相撞;
}

七、實現過程

7.1 全局變量的定義與解釋

變量名稱	說明
ROWS	行數
COLS	列數
CONTEXT	canvas上下文對象
BLOCK_SIZE	貪吃蛇運動的格子大小
snake[]	保存蛇的座標
snakeCount	蛇身長度
foodX, foodY	食物的座標
interval	計時
moveTo	蛇移動的方向
isStop	是否暫停
score	分數
speed	運動速度

7.2 方法的定義與解釋

方法名稱	參數	返回值	說明
init()	無	無	初始化方法
start()	無	無	遊戲啓動方法
reLoad()	無	無	頁面從新加載方法
keydown(keyCode)	按鍵的碼值	無	交互響應方法
isDie()	無	無	判斷是否死亡方法
isEat()	無	無	判斷是否吃到食物方法
addSnake()	無	無	增長蛇身方法
addFood()	無	無	製造食物方法
move()	無	無	移動方法
drawMap()	無	無	繪製運動區域方法
drawFood()	無	無	繪製食物方法
drawSnake()	無	無	繪製蛇方法

7.3 主要實現代碼

一、初始化方法的實現

function init() {
	ROWS = 35; //初始化行數
	COLS = 25; //初始化列數
	BLOCK_SIZE = 20;
	snakeCount = 3;
	moveTo = 2;
	score=0;
	document.getElementById("score").innerHTML=score;
	CONTEXT = document.getElementById('canvas').getContext('2d'); //初始化畫布上下文對象的引用
	for(var i = 0; i < snakeCount; i++) {
		snakes[i] = {
			x: i * BLOCK_SIZE,
			y: 0
		};
	}
	isStop=false;
	speed=500;
	addFood();
	drawMap(); //初始化場地
	drawSnake(); //初始化蛇
	drawFood(); //初始化食物
}

二、繪製運動區域方法的實現

function drawMap() {
	CONTEXT.clearRect(0, 0, BLOCK_SIZE * ROWS, BLOCK_SIZE * COLS);
	//畫橫線
	for(var i = 0; i < COLS; i++) {
		CONTEXT.beginPath();
		CONTEXT.moveTo(0, i * BLOCK_SIZE);
		CONTEXT.lineTo(BLOCK_SIZE * ROWS, i * BLOCK_SIZE);
		CONTEXT.strokeStyle = "gray";
		CONTEXT.lineWidth=1;
		CONTEXT.stroke();
	}
	//畫豎線
	for(var i = 0; i < ROWS; i++) {
		CONTEXT.beginPath();
		CONTEXT.moveTo(i * BLOCK_SIZE, 0);
		CONTEXT.lineTo(i * BLOCK_SIZE, BLOCK_SIZE * COLS);
		CONTEXT.strokeStyle = "gray";
		CONTEXT.lineWidth=1;
		CONTEXT.stroke();
	}

}

三、判斷是否死亡方法的實現

function isDie() {
	if(snakes[snakeCount - 1].x == -20 || snakes[snakeCount - 1].x == BLOCK_SIZE * ROWS ||
		snakes[snakeCount - 1].y == -20 || snakes[snakeCount - 1].y == BLOCK_SIZE * COLS) {
		clearInterval(interval);
		document.getElementById("model2").style.display='block';
	}
	for(var i = 0; i < snakeCount - 1; i++) {
		if(snakes[snakeCount - 1].x == snakes[i].x && snakes[snakeCount - 1].y == snakes[i].y) {
			clearInterval(interval);
			document.getElementById("model2").style.display='block';
		}
	}
}

四、繪製蛇方法的實現

function drawSnake() {

	for(var i = 0; i < snakes.length; i++) {
		CONTEXT.beginPath();
		CONTEXT.fillStyle = "red";
		CONTEXT.fillRect(snakes[i].x, snakes[i].y, BLOCK_SIZE, BLOCK_SIZE);
		CONTEXT.moveTo(snakes[i].x, snakes[i].y);
		CONTEXT.lineTo(snakes[i].x + BLOCK_SIZE, snakes[i].y);
		CONTEXT.lineTo(snakes[i].x + BLOCK_SIZE, snakes[i].y + BLOCK_SIZE);
		CONTEXT.lineTo(snakes[i].x, snakes[i].y + BLOCK_SIZE);
		CONTEXT.closePath();
		CONTEXT.strokeStyle = "gray";
		CONTEXT.stroke();
	}
}

八、結果演示

8.1 運行

8.2 暫停

8.3 死亡

九、最後的話

    一、至此貪吃蛇已製做完成，謝謝你的支持
    二、本教程純屬我的思想構建，避免不了出現一些缺陷或錯誤，歡迎你批評指正
    三、若是你對那部分不太理解或有更好的解決辦法，請在公衆號「C you again」私信與我交流
    四、獲取源碼請搜索公衆號「C you again」或掃描下面二維碼，回覆「貪吃蛇」
    五、轉載請標明來源
    六、其它遊戲教程請公衆號私信獲取