一条贪吃蛇的使命——零基础入门贪吃蛇游戏（附演示地址）(代码片段)

关键词：

零基础入门贪吃蛇游戏

贪吃蛇是一款最常见、最经典、最受欢迎的小游戏之一。本篇文章带你零基础实现贪吃蛇游戏，一条蛇的使命从这里开始。

演示地址：贪吃蛇演示，可能会提示危险操作，请忽略，放心访问。

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、其它游戏教程请公众号私信获取

c语言零基础项目：贪吃蛇！详细思路+源码分享(代码片段)

每天一个C语言小项目，提升你的编程能力！贪吃蛇游戏大家应该都不陌生了，要说没玩过的话，可能你是15后吧？贪吃蛇游戏最初为单机模式，后续又陆续推出团战模式、赏金模式、挑战模式等多种玩法。... 查看详情

结对-贪吃蛇游戏-测试过程

贪吃蛇游戏托管平台地址：https://gitee.com/a540816440/codes/kuizlv3wfc5eyx8gopmhd70功能测试:移动功能,测试方法:使用键盘上的,方向键，是否贪吃蛇可以移动。  功能测试：分数功能测试方法:当贪吃蛇吃掉食物是否分数会有增加 ... 查看详情

结对编程—贪吃蛇游戏—需求分析

1.游戏简介：贪吃蛇游戏是一款经典的益智游戏，既简单又耐玩。该游戏通过控制蛇头方向吃食物，从而使得蛇变得越来越长。2.游戏玩法：用上下左右方向键控制蛇的方向，寻找吃的食物，每吃一口就能得到一定的积分，而且... 查看详情

结对编程—贪吃蛇游戏—需求分析

1.游戏简介：贪吃蛇游戏是一款经典的益智游戏，既简单又耐玩。该游戏通过控制蛇头方向吃食物，从而使得蛇变得越来越长。2.游戏玩法：用上下左右方向键控制蛇的方向，寻找吃的食物，每吃一口就能得到一定的积分，而且... 查看详情

贪吃蛇需求分析

Partone项目题目 贪吃蛇游戏（单词版）Parttwo选题背景和意义 作为一个经典的游戏，贪吃蛇设计简单，实用和娱乐性高，是90后的我们童年的美好回忆。对于贪吃蛇传统的玩法，大家众所周知，即：玩家通过控制游戏手柄... 查看详情

html5----简易贪吃蛇小游戏

话不多说直接贴上代码:<script>window.onload=function(){//定义一些公共变量vargj=document.getElementById("gj");varp2=gj.getContext("2d");//定义蛇的变量varsnake=3;//定义存储蛇身体的数组varsBody=[];//定义蛇的初始化位置(坐标)varx=y=0;//定义蛇的初始... 查看详情

华为机试真题c++实现贪吃蛇

目录 题目思路考点Code题目贪吃蛇是一个经典游戏，蛇的身体由若干方格连接而成，身体随蛇头移动。蛇头触碰到食物时，蛇的长度会增加一格。蛇头和身体的任一方格或者游戏版图边界碰撞时，游戏结束。下面让我们来完... 查看详情

结对-贪吃蛇-开发过程

...又名贪食蛇，是一款经典的小游戏。玩家使用方向键操控一条长长的蛇不断吞下豆子，同时蛇身随着吞下的豆子不断变长，当蛇头撞到蛇身或障壁时游戏结束。贪吃蛇最初为人们所知的是诺基亚手机附带的一个小游戏，它伴随着... 查看详情

gui简单实战——贪吃蛇(代码片段)

将前面学到的GUI基础知识完成实战，完成一个简单的贪吃蛇项目项目功能用键盘上下左右实现贪吃蛇的自动移动贪吃蛇吃到食物后，长度加一，分数加一贪吃蛇吃到自己的身体，则游戏结束按空格键实现游戏的暂停和继续效果截... 查看详情

自动玩贪吃蛇的小白痴机器人(代码片段)

偶然间刷到的一个非常治愈的贪吃蛇小视频 于是萌生了制作这个小白痴机器人的念头使用机器人自动玩贪吃蛇  首先需要一个能正常玩贪吃蛇的游戏选用winform进行开发，非常快和方便分解需求首先需要一块画布在Form1... 查看详情

100行python代码，轻松完成贪吃蛇小游戏？

...ygame库，小编通过pipinstallpygame，很快就安装好了。在完成贪吃蛇小游戏的时候，我们需要知道整个游戏分为四部分：1.游戏显示：游戏界面、结束界面2.贪吃蛇：头部、身体、食物判断、死亡判断3.树莓：随机生成4.按键控制：上... 查看详情

结对-贪吃蛇开发过程

...又名贪食蛇，是一款经典的小游戏。玩家使用方向键操控一条长长的蛇不断吞下豆子，同时蛇身随着吞下的豆子不断变长，当蛇头撞到蛇身或障壁时游戏结束。贪吃蛇最初为人们所知的是诺基亚手机附带的一个小游戏，它伴随着... 查看详情

华为od机试真题python实现贪吃蛇

目录题目思路考点Code题目贪吃蛇是一个经典游戏，蛇的身体由若干方格连接而成，身体随蛇头移动。蛇头触碰到食物时，蛇的长度会增加一格。蛇头和身体的任一方格或者游戏版图边界碰撞时，游戏结束。下面让我们来完成贪... 查看详情

c语言项目实战：《自动版贪吃蛇》零基础项目(代码片段)

这篇文章主要为大家详细介绍了C语言实现——《进化版贪吃蛇项目》，也就是在我们上一个发布的文章项目分享的基础上，实现贪吃蛇的自动行动，你可以按键也可以不按键，让蛇自己找食物！还是挺好玩的&... 查看详情

实验二：贪吃蛇的实现(代码片段)

...考 实验参考的是B站UP主麦数编程的教程，链接：贪吃蛇：1小时Java开发贪吃蛇游戏[编号:J301]_哔哩哔哩_bilibili，同时在他的基础上对贪吃蛇加上一些更改和限定。2.实验总体思路一.界面设计    我使用的贪吃蛇... 查看详情

贪吃蛇游戏趣味版

我在程序中加入了分数显示，三种特殊食物，将贪吃蛇的游戏逻辑写到了SnakeGame的类中，而不是在Snake类中。特殊食物:1.绿色：普通，吃了增加体型2.红色：吃了减少体型3.金色：吃了回到最初体型4.变色食物：吃了会根据食物颜... 查看详情

结对-贪吃蛇游戏-需求分析

结对编程--贪吃蛇需要安装pythonpygame需求分析：玩家用键盘“WASD”来控制贪吃蛇的方向，          贪吃蛇碰壁结束游戏，主要完成游戏的开始按钮，暂停按钮，退出按钮等功能 查看详情

结对-贪吃蛇游戏-需求分析

结对编程--贪吃蛇需要安装pythonpygame需求分析：玩家用键盘“WASD”来控制贪吃蛇的方向，          贪吃蛇碰壁结束游戏，主要完成游戏的开始按钮，暂停按钮，退出按钮等功能 查看详情