为了账号安全,请及时绑定邮箱和手机立即绑定

贪吃蛇的使命之零基础入门贪吃蛇游戏(附演示地址)

2020.07.22 12:07 6545浏览

零基础入门贪吃蛇游戏

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

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

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: 37break;
       case: 38break;
       case: 39break;
       case: 40break;
      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、本教程纯属个人思想构建,避免不了出现一些缺陷或错误,欢迎你批评指正

点击查看更多内容
2人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消