贪吃蛇项目总结
Paste_Image.png
项目需求分析
采用 "面向对象编程" 思路,因为 面向对象的思想 更适应于应用程序的编写。
1. 找对象
(1)蛇
属性: 长度、颜色、位置、头、移动方向
方法: 吃、移动、长大
(2)食物
属性: 大小、颜色、位置
方法: 改变位置
(3)游戏引擎
属性: 场景、蛇、食物
方法: 初始化、键盘控制、启动游戏、停止游戏
2. 实现对象
游戏引擎
采用 字面量的形式 创建对象。 因为游戏引擎只有1个,采用这种方式会更合适些。代码如下:
// 定义 游戏引擎 对象
var gGameBox = {
rows: 20, // 行数
cols: 20, // 列数
allTds: [], // 存储所有的td元素对象
food: null, // 食物对象
snake: null, // 蛇对象
timer: null, // 定时器
// 方法: 清空环境
clear: function() {
for (var i = 0; i < gGameBox.allTds.length; i++) {
for (var j = 0; j < gGameBox.allTds[i].length; j++) {
gGameBox.allTds[i][j].className = "";
}
}
},
// 方法:支持键盘控制
keyControl: function() {
// onkeydown 键盘按下事件
window.onkeydown = function(e) {
// 获取按键编码
var c = e.keyCode;
if (c == 37)
{
// 左
if (gGameBox.snake.direct == "right")
{
// 当前是往右走,不能掉头,终止函数
return ;
}
gGameBox.snake.direct = "left";
}
else if (c == 38)
{
// 上
if (gGameBox.snake.direct == "down")
{
return ;
}
gGameBox.snake.direct = "up";
}
else if (c == 39)
{
// 右
if (gGameBox.snake.direct == "left")
{
return ;
}
// 改变蛇的方向
gGameBox.snake.direct = "right";
}
else if (c == 40)
{
if (gGameBox.snake.direct == "up")
{
return ;
}
// 下
gGameBox.snake.direct = "down";
}
}
},
// 方法: 游戏开始
start: function() {
gGameBox.init(); // 游戏初始化
gGameBox.food = new Food(); // 创建食物
gGameBox.snake = new Snake(); // 创建蛇
// 支持键盘控制
gGameBox.keyControl();
// 启动游戏时,定时移动蛇
gGameBox.timer = setInterval(function() {
// 1. 清空棋盘
gGameBox.clear();
// 2. 蛇移动
gGameBox.snake.move();
// 3. 显示食物
gGameBox.food.show();
}, 500);
//gGameBox.snake.fresh();
},
// 初始化
init: function() {
// 场景布置好, 用表格来做
var oTable = document.createElement("table");
for (var i = 0; i < gGameBox.rows; i++)
{
// 创建tr
var oTr = document.createElement("tr");
// 每一行,定义1个空数组
var arr = [];
for (var j = 0; j < gGameBox.cols; j++) {
// 创建td
var oTd = document.createElement("td");
oTr.appendChild(oTd);
// 将td放到空数组中
arr.push(oTd);
}
// 将当前行所有的td,压入到 allTds 属性中
gGameBox.allTds.push(arr);
oTable.appendChild(oTr);
}
// 添加到body
document.body.appendChild(oTable);
}
};
食物
因为食物可能在不断地创建,所以采用 (构造函数)的方式,更合适些。
(扩展) 产生不同的食物
function Food() {
// 坐标
this.x = 0;
this.y = 0;
// 一开始就随机位置
this.change();
}
// 方法1: 出现在环境中
Food.prototype.show = function() {
gGameBox.allTds[this.y][this.x].className = "food";
}
// 方法2: 改变位置, 随机的
Food.prototype.change = function() {
this.x = parseInt(Math.random() * gGameBox.cols);
this.y = parseInt(Math.random() * gGameBox.rows);
this.show();
}
蛇
因为蛇可能需要手动创建,可能有多条蛇,所以 采用 构造函数的方式 更合适些。
(扩展) 蛇的颜色、蛇的大小、蛇的初始位置 都可以改,也可以继承的方式来实现不同的蛇
function Snake() {
// 存储蛇 所有节点坐标, 同时也存储了蛇的长度 this.arr.length
// 默认蛇头 this.arr[0] 节点
this.arr = [
{x: 5, y: 1},
{x: 4, y: 1},
{x: 3, y: 1},
{x: 2, y: 1},
{x: 1, y: 1}
];
// 当前移动方向: left, right, down, up
this.direct = "down";
// 创建完就刷新到页面上
this.fresh();
}
// 方法1: 更新到页面上 fresh 刷新
Snake.prototype.fresh = function() {
// 给所有蛇节点,都添加样式
for (var i = 0; i < this.arr.length; i++)
{
// this.arr[i] 是蛇节点对象
var x = this.arr[i].x;
var y = this.arr[i].y;
gGameBox.allTds[y][x].className = "snake"
}
}
// 方法2: 移动
Snake.prototype.move = function() {
// 蛇头坐标
var x = this.arr[0].x;
var y = this.arr[0].y;
// 思路: 根据当前蛇的方向,来分情况处理
if (this.direct == "right")
{
// 4 3 2 1 0
// (1,1) (2,1) (3,1) (4,1) (5,1)
// (2,1) (3,1) (4,1) (5,1) (6,1)
// (2,1) (3,1) (4,1) (5,1) (6,1)
// 在 蛇头 增加新点 (6,1), 删除蛇尾
x++;
}
else if (this.direct == "down")
{
y++;
}
else if (this.direct == "left")
{
x--;
}
else if (this.direct == "up")
{
y--;
}
if (x >= gGameBox.cols || y >= gGameBox.rows || x < 0 || y < 0)
{
clearInterval(gGameBox.timer);
console.log("GG啦~");
alert("GG啦~");
return ;
}
if (x == gGameBox.food.x && y == gGameBox.food.y)
{
// 吃到食物了,增加1个点
this.arr.unshift({x: x, y: y});
// 食物更改位置
gGameBox.food.change();
this.fresh();
return ;
}
// 在蛇头增加新点
this.arr.unshift({x: x, y: y});
// 删除蛇尾
this.arr.pop();
// 将新蛇刷新到页面上
this.fresh();
}
启动游戏
gGameBox.start();
项目开发总结
构造函数名 首字母建议 大写
变量名不要写错
注意语法
建议,自己完整地、从零开始、再写三遍。
因为编程就是1个技能,就像打篮球一样,需要不断练习才能熟练掌握。