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

零基礎入門貪吃蛇游戲貪吃蛇是一款最常見、最經典、最受歡迎的小游戲之一。本篇文章帶你零基礎實現貪吃蛇游戲，一條蛇的使命從這裡開始。演示地址：貪吃蛇演示，可能會提示危險操作，請忽略，放心訪問。 1、游戲描述貪吃蛇是一款非常經典的休閑類游戲。在一塊固定大小的區域內，游戲玩家通過控制貪吃蛇的移動去吃食 ...

零基礎入門貪吃蛇游戲

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

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

1、游戲描述

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

2、前期準備

2.1 具備技能

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

2.2 開發工具

為提高開發速率，選擇一款優秀的開發工具也很重要，這裡小編推薦 sublime text3,輕巧方便，可以去百度下載，也可以關註小編公眾號“C you again”,私信獲取破解中文版。當然你足夠優秀，使用記事本小編也不攔著。

3、實現目標

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

4、按鍵約定

    為方便玩家游戲，對操作按鍵做以下約定：
     1、上、下、左、右按鍵分別操作貪吃蛇的四個運動方向
     2、“+”、“-”按鍵分別代表貪吃蛇的加速、減速
     3.、空格鍵代表游戲暫停/繼續

5、實現原理

    1、利用canvas畫布完成運動場地、食物、貪吃蛇的展示
    2、利用數組存儲貪吃蛇的坐標位置
    3、利用上、下、左、右鍵改變貪吃蛇的蛇頭坐標
    2、不斷重新繪製頁面，造成貪吃蛇運動的錯覺

6、實現邏輯

//偽代碼
function 初始化數據（）{
    1、初始化貪吃蛇運動區域大小
    2、初始化canvas畫布山下文對象
    3、初始化貪吃蛇的坐標
    4、初始化貪吃蛇運動的方向
    5、初始化玩家分數
    6、初始化貪吃蛇的速度
    7、初始化食物
    8、初始化蛇
    9、初始化蛇的狀態
 }
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(蛇頭左上角的坐標==食物左上角的坐標){
     //吃到食物
     1、分數加一;
     2、重新繪製食物
     3、增加蛇身
  }
}

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

7、實現過程

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 主要實現代碼

1、初始化方法的實現

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(); //初始化食物
}

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

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();
	}

}

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

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';
		}
	}
}

4、繪製蛇方法的實現

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、結果演示

8.1 運行

在這裡插入圖片描述

8.2 暫停

在這裡插入圖片描述

8.3 死亡

在這裡插入圖片描述

9、最後的話

    1、至此貪吃蛇已製作完成，謝謝你的支持
    2、本教程純屬個人思想構建，避免不了出現一些缺陷或錯誤，歡迎你批評指正
    3、如果你對那部分不太理解或有更好的解決辦法，請在公眾號“C you again”私信與我交流
    4、獲取源碼請搜索公眾號“C you again”或掃描下麵二維碼，回覆“貪吃蛇”
    5、轉載請標明來源
    6、其它游戲教程請公眾號私信獲取
在這裡插入圖片描述