一条贪吃蛇的使命——零基础入门贪吃蛇游戏
零基础入门贪吃蛇游戏
贪吃蛇是一款最常见、最经典、最受欢迎的小游戏之一。本篇文章带你零基础实现贪吃蛇游戏,一条蛇的使命从这里开始。
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、其它游戏教程请公众号私信获取
- dataguard归档路径的问题(r7笔记第99天)
- 厚土Go学习笔记 | 34. 一个简单的 web 服务器实现
- JavaWeb18-jquery学习笔记(Java全栈开发)
- 简单易学的机器学习算法——Apriori算法
- 厚土Go学习笔记 | 29. 接口
- MySQL删除数据的简单尝试 (r7笔记第98天)
- 简单易学的机器学习算法——lasso
- 优化算法——差分进化算法(DE)
- 通过shell脚本批量验证dataguard的有效性(r7笔记第96天)
- JavaWeb17-案例之ajax(Java真正的全栈开发)
- JavaWeb15-DBUtils(Java真正的全栈开发)
- 利用Theano理解深度学习——Multilayer Perceptron
- JavaWeb14-事务,连接池(Java正在的全栈开发)
- 利用Theano理解深度学习——Logistic Regression
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法