专栏首页IT技术圈(CSDN)一条贪吃蛇的使命——零基础入门贪吃蛇游戏

一条贪吃蛇的使命——零基础入门贪吃蛇游戏

零基础入门贪吃蛇游戏

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 面向 python 小白的贪吃蛇游戏

    作为 python 小白,总是觉得自己要做好百分之二百的准备,才能开始写程序。以至于常常整天在那看各种语法教程,学了几个月还是只会print('hello wo...

    Python进阶者
  • 一步步教你怎么用python写贪吃蛇游戏

    前几天,星球有人提到贪吃蛇,一下子就勾起了我的兴趣,毕竟在那个Nokia称霸的年代,这款游戏可是经典中的经典啊!而用Python(蛇)玩Snake(贪吃蛇),那...

    诸葛青云
  • 贪吃蛇的使命 | 零基础入门贪吃蛇游戏(附源码、演示地址)

    大家好啊,老铁们,二零二零年八月二十九日,一个人来到成都的第六天。人生总有许许多多的不如意。每天都会遇见不同的人,经历不同的事,还好我们年轻,经得起折腾!

    C you again
  • 一步步教你怎么用python写贪吃蛇游戏

    前几天,星球有人提到贪吃蛇,一下子就勾起了我的兴趣,毕竟在那个Nokia称霸的年代,这款游戏可是经典中的经典啊!而用Python(蛇)玩Snake(贪吃蛇),那...

    Python进击者
  • 牛得一批!10分钟用Python编写一个贪吃蛇小游戏

    贪吃蛇,大家应该都玩过。当初第一次接触贪吃蛇的时候 ,还是能砸核桃的诺基亚上,当时玩的不亦乐乎。今天,我们用Python编程一个贪吃蛇游戏,下面我们先看看效果:...

    龙哥
  • 10分钟用 Python 编写一个贪吃蛇小游戏

    贪吃蛇,大家应该都玩过。当初第一次接触贪吃蛇的时候 ,还是能砸核桃的诺基亚上,当时玩的不亦乐乎。今天,我们用Python编程一个贪吃蛇游戏,下面我们先看看效果:

    逆锋起笔
  • 有趣!10分钟用Python编写一个贪吃蛇小游戏

    贪吃蛇,大家应该都玩过。当初第一次接触贪吃蛇的时候 ,还是能砸核桃的诺基亚上,当时玩的不亦乐乎。今天,我们用Python编程一个贪吃蛇游戏,下面我们先看看效果:...

    龙哥
  • 用C语言写贪吃蛇笔记-1

    神无月
  • 手起刀落-一起来写经典的贪吃蛇游戏

    回味 小时候玩的经典贪吃蛇游戏我们印象仍然深刻,谋划了几天,小时候喜欢玩的游戏,长大了终于有能力把他做出来(从来都没有通关过,不知道自己写的程序,是不是能通关了...

    okaychen
  • 10分钟用Python编写贪吃蛇小游戏

    前不久我们公众号发布了一篇C++编写贪吃蛇小游戏的推文,反响空前。看来大家对这类简单易上手小游戏还是很喜爱的。

    用户1621951
  • 用python写一个简单的贪吃蛇游戏

    Python 虽然并不是一个“为游戏而生”的语言,但也有着自己的游戏引擎。最常用的就是 pygame。另外还有一个知名游戏引擎 cocos2d,它的最初版本就是...

    Crossin先生
  • 用 Python 写个贪吃蛇,保姆级教程!

    HelloGitHub 推出的《讲解开源项目》系列,本期介绍 Python 练手级项目——贪吃蛇!

    州的先生
  • 教大家半小时用pygame做个贪吃蛇玩玩

    pygame是基于python编写的图形化编程库,可以使程序运行在各种平台。同时学习起来也非常简单,我们直接上案例。

    一条coding
  • 5 分钟教你用 Python 实现贪吃蛇!

    贪吃蛇作为一款经典小游戏,早在 1976 年就面世了,我最早接触它还是在家长的诺基亚手机中。

    Python小二
  • 【玩转Python】DIY贪吃蛇游戏复盘

    贪吃蛇通过“上”,“下”,“左”,“右”四个方向来控制蛇的移动,贪吃蛇每吃到一个食物,身体长度就会增长一次,当蛇撞到墙壁或者自己身体的时候,游戏就会结束。

    潘永斌
  • 国庆节前端技术栈充实计划(4):用H5撸一个贪吃蛇游戏

    第一种是笔者小时候在掌上游戏机最先体验到的(不小心暴露了年龄),具体玩法是蛇吃完一定数量的食物后就通关,通关后速度会加快;第二种是诺基亚在1997年在其自家手机...

    疯狂的技术宅
  • 10分钟教你用python打造贪吃蛇超详细教程

    在家闲着没妹子约, 刚好最近又学了一下python,听说pygame挺好玩的。今天就在家研究一下, 弄了个贪吃蛇出来。希望大家喜欢哈。

    短短的路走走停停
  • 【程序源代码】python像素贪吃蛇

    python像素贪吃蛇小游戏,可以通过上下左右键控制蛇头转向,点击回车键开始游戏。简单好玩

    程序源代码
  • 零基础VB教程067期:贪吃蛇游戏开发第三节 撞墙会挂的

    刘金玉编程

扫码关注云+社区

领取腾讯云代金券