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

来源:https://www.cnblogs.com/cafuc20160512056/archive/2020/07/03/13231243.html
-Advertisement-
Play Games

零基礎入門貪吃蛇游戲 貪吃蛇是一款最常見、最經典、最受歡迎的小游戲之一。本篇文章帶你零基礎實現貪吃蛇游戲,一條蛇的使命從這裡開始。 演示地址:貪吃蛇演示,可能會提示危險操作,請忽略,放心訪問。 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、其它游戲教程請公眾號私信獲取
在這裡插入圖片描述


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • HDFS 文件操作命令 註,其實常用命令不用網上搜,和linux下的命令很類似,觸類旁通,直接在linux 上 hadoop fs 看一下就行了,不需要刻意去記 我把 linux 上的 help 列舉下,方便直接看吧,hdfs dfs 與 hadoop fs 效果一樣 常用的就是 hdfs dfs ...
  • 7月2日消息:近2.3萬個MongoDB資料庫遭黑客攻擊勒索特幣贖金,幾乎占MongoDB資料庫的47%。黑客要求每個資料庫2天內支付0.015 BTC(約合140美元),否則泄露其數據。如何解決此類數據安全問題?本文為您帶來“資料庫遭比特幣勒索的解密與恢復實戰”。 ...
  • MySQL調優 優化需要考慮哪些方面 優化目標與方向定位 總體目標:使得響應時間更快,吞吐量更大。 (throughout 吞吐量:單位時間內處理事務的數量) 如何找到需要優化的地方 使用反饋。比如做出一些操作後導致效率降低 分析日誌。 監控伺服器資源。系統,記憶體,I/O 監控資料庫運行狀況 可優化 ...
  • 原理: Redis集群採用一致性哈希槽的方式將集群中每個主節點都分配一定的哈希槽,對寫入的數據進行哈希後分配到某個主節點進行存儲。 集群使用公式(CRC16 key)& 16384計算鍵key數據那個槽。 16384個slot均勻分佈在各個節點上。 集群中每個主節點將承擔一部分槽點的維護,而槽點中存 ...
  • 準備4台虛擬機,安裝好ol7.7,分配固定ip192.168.168.11 12 13 14,其中192.168.168.11作為master,其他3個作為slave,主節點也同時作為namenode的同時也是datanode,192.168.168.14作為datanode的同時也作為second... ...
  • 本文更新於2019-06-22,使用MySQL 5.7,操作系統為Deepin 15.4。 為了便於描述,此處將創建視圖的DDL覆述一次,其已於“SQL”章節描述。 CREATE [OR REPLACE] [ALGORITHM={UNDEFINED|MERGE|TEMPTABLE}] VIEW vi ...
  • Plink是一個基於Flink的流處理平臺,旨在基於 [Apache Flink]封裝構建上層平臺。 提供常見的作業管理功能。如作業的創建,刪除,編輯,更新,保存,啟動,停止,重啟,管理,多作業模板配置等。 Flink SQL 編輯提交功能。如 SQL 的線上開發,智能提示,格式化,語法校驗,保存, ...
  • 前言 閑暇之時,羚羊給大家分享一下羚羊在Centos7 下安裝Cloudera Manager 6.3.0和cloudera cdh 6.3.2的過程和安裝過程中遇到的坑。至於為什麼要選擇CDH,Cloudera Manager和cdh是什麼,之間又是什麼關係,在這裡羚羊就不做介紹了。 為什麼選擇C ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...