|
跟大家分享一下贪吃蛇的代码过程
javascript 语言内部机制。必须弄清如下概念：js中变量的作用域，变量传递方式，函数的定义环境与执行环境，闭包，函数的四种调用方式（一般函数，对象的方 法，apply，call），以及四种调用方式下，‘this'指向的是谁。这部分内容你会在《javascript语言精粹》中详细了解。另外，你必须 理解json。 JavaScript是一种轻语言。前半部分主要学习了变量声明、各种数据类型、函数、对象、作用域、运算符、条件语句和循环语句，重点注意变量声明、函数作用域的提升和条件语句的应用，这一部分要多加练习，熟练运用，不能靠死记硬背，需要活学活用。后面部分只要是学习DOM模型，这里面需要学会找节点，弄懂各级节点之间的关系以及怎么根据它们的位置关系通过执行相关代码返回相应的值（牢记查找元素的相关方法）；根据节点位置的不同，在其相关位置替换、插入或者删除节点；熟悉了解标准库里面的Number对象、String对象、Array对象，学会使用一些相关的属性与方法；JSON格式与String格式之间的相互转换。总的来说，JavaScript这一部分是我们学习前端内容中最重要的部分，必须记忆加练习结合才能熟练掌握本部分内容。 ---------------------
以下是html代码 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="map"></div>
<script src="js/index.js"></script>
</body>
</html>
以下是盒子的css代码 给盒子设置宽高和背景颜色 #map {
width: 800px;
height: 600px;
background-color: lightgray;
position: relative;
}
以下是js代码 分为几个部分 是食物对象---蛇对象---游戏对象
// ---------------------Tools--------------------------
;(function () {
var Tools = {
getRandom: function (min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
}
// 暴露Tools给window
window.Tools = Tools;
})()
// -----------------------Food---------------------------
;(function () {
// 局部作用域
var position = 'absolute';
// 记录上一次创建的食物，为删除做准备
var elements = [];
function Food(options) {
options = options || {};
this.x = options.x || 0;
this.y = options.y || 0;
this.width = options.width || 20;
this.height = options.height || 20;
this.color = options.color || 'green';
}
// 渲染
Food.prototype.render = function (map) {
// 删除之前创建的食物
remove();
// 随机设置x和y的值
this.x = Tools.getRandom(0, map.offsetWidth/this.width - 1) * this.width;
this.y = Tools.getRandom(0, map.offsetHeight/this.height - 1) * this.height;
// 动态创建div 页面上显示的食物
var div = document.createElement('div');
map.appendChild(div);
elements.push(div);
// 设置div的样式
div.style.position = position;
div.style.left = this.x + 'px';
div.style.top = this.y + 'px';
div.style.width = this.width + 'px';
div.style.height = this.height + 'px';
div.style.backgroundColor = this.color;
}
function remove() {
for (var i = elements.length - 1; i >= 0; i--) {
// 删除div
elements.parentNode.removeChild(elements);
// 删除数组中的元素
// 删除数组元素
// 第一个参数，从哪个元素开始删除
// 第二个参数，删除几个元素
elements.splice(i, 1);
}
}
// 把Food构造函数 让外部可以访问
window.Food = Food;
})()
// ---------------------------Snake----------------------
;(function () {
var position = 'absolute';
// 记录之前创建的蛇
var elements = [];
function Snake(options) {
options = options || {};
// 蛇节 的大小
this.width = options.width || 20;
this.height = options.height || 20;
// 蛇移动的方向
this.direction = options.direction || 'right';
// 蛇的身体(蛇节) 第一个元素是蛇头
this.body = [
{x: 3, y: 2, color: 'red'},
{x: 2, y: 2, color: 'blue'},
{x: 1, y: 2, color: 'blue'}
];
}
Snake.prototype.render = function (map) {
// 删除之前创建的蛇
remove();
// 把每一个蛇节渲染到地图上
for (var i = 0, len = this.body.length; i < len; i++) {
// 蛇节
var object = this.body;
//
var div = document.createElement('div');
map.appendChild(div);
// 记录当前蛇
elements.push(div);
// 设置样式
div.style.position = position;
div.style.width = this.width + 'px';
div.style.height = this.height + 'px';
div.style.left = object.x * this.width + 'px';
div.style.top = object.y * this.height + 'px';
div.style.backgroundColor = object.color;
}
}
// 私有的成员
function remove() {
for (var i = elements.length - 1; i >= 0; i--) {
// 删除div
elements.parentNode.removeChild(elements);
// 删除数组中的元素
elements.splice(i, 1);
}
}
// 控制蛇移动的方法
Snake.prototype.move = function (food, map) {
// 控制蛇的身体移动（当前蛇节 到 上一个蛇节的位置）
for (var i = this.body.length - 1; i > 0; i--) {
this.body.x = this.body[i - 1].x;
this.body.y = this.body[i - 1].y;
}
// 控制蛇头的移动
// 判断蛇移动的方向
var head = this.body[0];
switch(this.direction) {
case 'right':
head.x += 1;
break;
case 'left':
head.x -= 1;
break;
case 'top':
head.y -= 1;
break;
case 'bottom':
head.y += 1;
break;
}
// 2.4 判断蛇头是否和食物的坐标重合
var headX = head.x * this.width;
var headY = head.y * this.height;
if (headX === food.x && headY === food.y) {
// 让蛇增加一节
// 获取蛇的最后一节
var last = this.body[this.body.length - 1];
this.body.push({
x: last.x,
y: last.y,
color: last.color})
// 随机在地图上重新生成食物
food.render(map);
}
}
// 暴露构造函数给外部
window.Snake = Snake;
})()
//----------------------Game---------------------------
;(function () {
var that; // 记录游戏对象
function Game(map) {
this.food = new Food();
this.snake = new Snake();
this.map = map;
that = this;
}
Game.prototype.start = function () {
// 1 把蛇和食物对象，渲染到地图上
this.food.render(this.map);
this.snake.render(this.map);
// 2 开始游戏的逻辑
// 2.1 让蛇移动起来
// 2.2 当蛇遇到边界游戏结束
runSnake();
// 2.3 通过键盘控制蛇移动的方向
bindKey();
// 2.4 当蛇遇到食物 --- 在snake的move方法中处理
}
// 通过键盘控制蛇移动的方向
function bindKey() {
// document.onkeydown = function () {};
document.addEventListener('keydown', function (e) {
// console.log(e.keyCode);
// 37 - left
// 38 - top
// 39 - right
// 40 - bottom
switch (e.keyCode) {
case 37:
this.snake.direction = 'left';
break;
case 38:
this.snake.direction = 'top';
break;
case 39:
this.snake.direction = 'right';
break;
case 40:
this.snake.direction = 'bottom';
break;
}
}.bind(that), false);
}
// 私有的函数 让蛇移动
function runSnake() {
var timerId = setInterval(function () {
// 让蛇走一格
// 在定时器的function中this是指向window对象的
// this.snake
// 要获取游戏对象中的蛇属性
this.snake.move(this.food, this.map);
this.snake.render(this.map);
// 2.2 当蛇遇到边界游戏结束
// 获取蛇头的坐标
var maxX = this.map.offsetWidth / this.snake.width;
var maxY = this.map.offsetHeight / this.snake.height;
var headX = this.snake.body[0].x;
var headY = this.snake.body[0].y;
if (headX < 0 || headX >= maxX) {
alert('Game Over');
clearInterval(timerId);
}
if (headY < 0 || headY >= maxY) {
alert('Game Over');
clearInterval(timerId);
}
}.bind(that), 150);
}
// 暴露构造函数给外部
window.Game = Game;
})()
// -------------------调用------------------
;(function () {
var map = document.getElementById('map');
var game = new Game(map);
game.start();
})()
| 
收藏
淘帖
踩
