js实现简单贪吃蛇游戏
编程心得
最近一段时间对于js部分理解起来比较吃力，掌握的内容少之又少，在编程的过程中也是属于懵懵懂懂的状态，凭借对白天老师所讲解的部分记忆，又在课后时间查询，借鉴，思考，坎坎坷坷的先码出一些代码，以此为记。
一、编程思路
1、 找对象
① 蛇对象：
属性：长度，起点位置（x，y），当前方向
方法：渲染，更新（按键控制，变长）
②食物对象
属性：大小，背景颜色
方法：渲染，改变位置
③游戏引擎
属性：行数，列数，游戏场景，蛇，食物
方法：初始化（清空场景，启动游戏）
2、实现对象
二、代码实现过程
【js实现简单贪吃蛇游戏】定义【游戏引擎】对象
var gGameBox = {
rows: 20,// 行数
cols: 20,// 列数
allTds: [], // 存储所有的td元素对象
// 方法： 游戏开始
start: function() {
gGameBox.init();
// 游戏初始化
},
// 初始化
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);
}
};
推荐阅读
- 关于QueryWrapper|关于QueryWrapper,实现MybatisPlus多表关联查询方式
- MybatisPlus使用queryWrapper如何实现复杂查询
- python学习之|python学习之 实现QQ自动发送消息
- 科学养胃，别被忽悠，其实真的很简单
- 孩子不是实现父母欲望的工具——林哈夫
- opencv|opencv C++模板匹配的简单实现
- Node.js中readline模块实现终端输入
- java中如何实现重建二叉树
- 松软可口易消化，无需烤箱超简单，新手麻麻也能轻松成功~
- 人脸识别|【人脸识别系列】| 实现自动化妆