js高级面向对象之贪吃蛇
时间:2019-01-23
本文章向大家介绍js高级面向对象之贪吃蛇,主要包括js高级面向对象之贪吃蛇使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
html 部分
给一张地图 蛇活动的范围就在这个地图之内
<body>
<div id="map"></div>
</body>
css部分
地图的样式
<style>
#map {
width: 800px;
height: 600px;
background-color: grey;;
position: relative;
}
</style>
js部分
我们可以先分析下有哪几个对象
- 食物
- 蛇
- 游戏
一.食物的对象
((function () {
//保存每一个小方块,好删除小方块
var elements = [];
//食物的构造函数
function Food(width, height, color, x, y) {
this.width = width || 20;//食物的宽度 用户没有传入参数的话,默认20px
this.height = height || 20;//食物的高度 用户没有传入参数的话,默认20px
this.color = color || "yellow";//食物的颜色 用户没有传入参数的话,默认yellow
//随机的横纵坐标
this.x = x || 0;//食物的横坐标 用户没有传入参数的话,默认为0
this.y = y || 0;//食物的纵坐标 用户没有传入参数的话,默认为0
}
//在原型对象上添加方法---把食物显示在地图上
Food.prototype.init = function (map) {
//先删除在创建
remove();
//1.创建一个小盒子 -- 食物
var div = document.createElement("div");
//2.把div添加到map中去
map.appendChild(div);
//3.给小盒子设置样式
div.style.width = this.width + "px";
div.style.height = this.height + "px";
div.style.backgroundColor = this.color;
div.style.position = "absolute";
//随机数的坐标 不能超出地图的范围
this.x = parseInt(Math.random() * (map.offsetWidth / this.width)) * this.width;//食物的随机横坐标
this.y = parseInt(Math.random() * (map.offsetHeight / this.height)) * this.height;//食物的随机纵坐标
// console.log(this.x);
// console.log(this.y);
//设置食物随机出现的位置
div.style.left = this.x + "px";
div.style.top = this.y + "px";
//把div添加到数组中去
elements.push(div);
}
//封装删除食物的函数
function remove() {
for (var i = 0; i < elements.length; i++) {
//获取每一个小方块
var ele = elements[i]
//删除map中的小方块
ele.parentElement.removeChild(ele);
//删除数组中的小方块
elements.splice(i, 1)
}
}
//把Food暴露给window
window.Food = Food;
})());
二.小蛇的对象
((function () {
//用来存放小蛇的数组
var elements = [];
//1.小蛇的构造函数
function Snake(width, height, direnction) {
//小蛇每个部位的宽度
this.width = width || 20;
this.height = width || 20;
//小蛇的方向
this.direction = direnction || "right";
//小蛇每个部位在那个坐标点-----小蛇吃食物会变长
this.body = [
{x: 3, y: 1, color: "white"},//小蛇的头部
{x: 2, y: 1, color: "black"},//身体
{x: 1, y: 1, color: "black"}
]
}
//2.在原型中添加发方法---小蛇初始化---需要地图参数
Snake.prototype.init = function (map) {
//先删除小蛇
remove();
//遍历的创建div---小蛇的每个部位
for (var i = 0; i < this.body.length; i++) {
//1.创建div
var div = document.createElement("div");
//2.添加到地图中
map.appendChild(div);
var obj = this.body[i];//储存的是数组的每一个元素,也是对象
//3.设置div的样式
div.style.width = this.width + "px";
div.style.height = this.height + "px";
div.style.backgroundColor = this.body[i].color;
div.style.position = "absolute";
//横纵坐标
div.style.left = obj.x * this.width + "px";
div.style.top = obj.y * this.height + "px";
//把小蛇添加到数组
elements.push(div);
}
}
//暴露给window
window.Snack = Snake;
//3.添加一个让小蛇 移动的方法
Snake.prototype.move = function (map, food) {
//改变小蛇的身体坐标----》要循环小蛇的身体部位,头部要判断方向
for (var i = this.body.length - 1; i > 0; i--) {
//当i=2的时候,此时是第三块的坐标,把第2块的坐标给第3块的坐标
this.body[i].x = this.body[i - 1].x;
this.body[i].y = this.body[i - 1].y;
}
//判断小蛇头部坐标的位置
switch (this.direction) {
case "right":
this.body[0].x += 1;
break;
case "left":
this.body[0].x -= 1;
break;
case "top":
this.body[0].y -= 1;
break;
case "bottom":
this.body[0].y += 1;
break;
}
//最后:要判断小蛇是否吃到食物,----即判断蛇头的坐标
//获取蛇头的坐标
var headX = this.body[0].x * this.width;
var headY = this.body[0].y * this.height;
//食物的坐标
var foodX = food.x;
var foodY = food.y;
if (headX == foodX && headY == foodY) {
//1.重新初始化食物
food.init(map);
//2.获取小蛇最后的尾巴
var last = this.body[this.body.length - 1];
//3.添加到数组中
this.body.push({
x: last.x,
y: last.y,
color: last.color
})
}
};
//4.删除小蛇的函数
function remove() {
for (var i = elements.length - 1; i >= 0; i--) {
//存放每一个小蛇
var ele = elements[i];
//删除地图上面的
ele.parentNode.removeChild(ele);
//删除数组中的
elements.splice(i, 1);
}
}
})());
三.游戏的对象–显示小蛇,显示食物,并自动的跑起来
((function () {
//1.游戏的构造函数
function Game() {
this.food = new Food();//食物的对象
this.snake = new Snack();//小蛇的对象
this.map = document.getElementById("map");//地图对象
};
//2.初始化游戏对象---
Game.prototype.init = function () {
//显示食物和小蛇
this.food.init(this.map);
this.snake.init(this.map);
//调用自动移动的小蛇
this.runSnake(this.map, this.food);
//调用方向的方法
this.keyDown(this.map);
};
//3.添加原型的方法---是小蛇自动跑起来
Game.prototype.runSnake = function (map, food) {
//函数嵌套,this指向发生变化
var that = this;
//自动的移动
var timeId = setInterval(function () {
// console.log(this);//指向的window
this.snake.move(map, food)//移动
this.snake.init(map);//显示
//判断横纵坐标最大值
var maxX = map.offsetWidth / this.snake.width;
// console.log(maxX);
var maxY = map.offsetHeight / this.snake.height;
//获取蛇头坐标
var headX = this.snake.body[0].x;
// console.log(headX);
var headY = this.snake.body[0].y;
//判断横纵坐标是否撞墙
if (headX < 0 || headX >= maxX || headY < 0 || headY >= maxY) {
clearInterval(timeId);
alert("game over!");
}
;
//把这个函数的指向绑定在that的指向上面
}.bind(that), 200);
};
//4.添加原型方法--设置用户的按键,改变小蛇的移动方向
Game.prototype.keyDown = function () {
document.addEventListener("keydown", function (e) {
console.log(e.keyCode);//按键的值
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(this));
}
//暴露给window
window.Game = Game;
})());
最后调用游戏的方法就可以了
var game = new Game();
game.init();
- JSP面试题都在这里
- Java基础-07(01).总结private,this,封装,static,成员方法变量,局部变量匿名对象
- HTTP就是这么简单
- 重温二分查找算法(r4笔记第66天)
- 【不用框架】文件上传和下载
- JSP第七篇【简单标签、应用、DynamicAttribute接口】
- Java基础-07(02).总结private,this,封装,static,成员方法变量,局部变量匿名对象
- 通过shell脚本快速定位active session问题(r4笔记第65天)
- 01 整合IDEA+Maven+SSM框架的高并发的商品秒杀项目之业务分析与DAO层
- JSP第六篇【自定义标签之传统标签】
- 过滤器监听器面试题都在这里
- 02 整合IDEA+Maven+SSM框架的高并发的商品秒杀项目之Service层
- JSP第五篇【JSTL的介绍、core标签库、fn方法库、fmt标签库】
- java中的序列化 (r4笔记第64天)
- 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 数组属性和方法
- PyQt5 技巧篇-复选框绑定行内容,全选、清空、展示选中的内容功能实现演示,设置复选框选中,检查复选框选中状态
- PyQt5 技巧篇-QWidget、Dialog界面固定大小设置
- 力扣:地下城游戏,手把手教你做困难题
- RN布局
- 学会MySQL主从复制读写分离,看这篇就够了
- Canal+Kafka实现MySQL与Redis数据同步
- 超详细canal入门,看这篇就够了
- 详细讲解!RabbitMQ防止数据丢失
- 详细讲解!从秒杀聊到ZooKeeper分布式锁
- 正确使用 wait/notify/notify方法以及源码解析
- 秒杀商品超卖事故:Redis分布式锁请慎用!
- 3D开发是一个生态,ThingJS支持js,css,json,html外部资源引用
- 手把手教你实现xxl-job分布式任务调度平台搭建
- 在 vscode 中 debugger 调试
- MongoDB 的安装