JavaScript面向对象编程小游戏---贪吃蛇
1 面向对象编程思想在程序项目中有着非常明显的优势:
1- 1 代码可读性高.由于继承的存在，即使改变需求，那么维护也只是在局部模块
1- 2 维护非常方便并且成本较低。
2 这个demo是采用了面向对象的编程思想. 用JavaScript 语言编写的游戏小程序--贪吃蛇.
代码注释详细,逻辑清晰 . 非常适合新手前端开发者, 锻炼JavaScript语言的面向对象的编程思想.
该小Demo已上传GitHub,欢迎下载! 觉得好的话,随手给个star, 您的star是我最大的动力!
https://github.com/XingJYGo/snakePlay#javascript-经典面向对象demo-贪吃蛇
代码展示:
代码结构:
--index.html 地图页面,展示蛇和食物,进行游戏
--food.js 构造食物对象
--game.js 构造游戏对象
--snake.js 构造蛇对象
--tool.js 常用数据工具封装
--index.html 地图页面
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#map{
width: 500px;
height: 500px;
background-color: lightblue;
position: relative;
} </style>
</head>
<body>
<div id="map"> </div>
<button id="btn">模拟蛇吃到食物</button>
<script src="tool.js"></script>
<script src="food.js"></script>
<script src="snake.js"></script>
<script src="game.js"></script>
<script> ////==========前后方向设定后 ==================
var game = new Game();
game.start(); </script> </body>
</html>
--food.js 构造食物对象
// 封装一个食物对象
//沙箱模式
(function(){
var container; //用于存储之前的食物
function Food(option) {
//防止用户不传参数会报错
option = option || {};
this.width = option.width || 20;
this.height = option.height || 20;
this.bgc = option.bgc || 'orange';
this.x = option.x || 0;
this.y = option.y || 0;
this.borderRadius = option.borderRadius |10;
} Food.prototype.render = function () {
//每一次渲染新的之前就把原来的移除掉
if(container){
map.removeChild(container);
}
// 创建食物对象
var food = document.createElement('div');
//存到全局变量里
container = food;
food.style.width = this.width + 'px';
food.style.height = this.height + 'px';
food.style.backgroundColor = this.bgc;
food.style.position = 'absolute';
//获得随机位置
//由于要让食物的位置在每一个格子里面,所有获取随机数的算法要重新计算
this.x = Tool.getRandom(0, (map.offsetWidth/ this.width-1)) * this.width;
this.y = Tool.getRandom(0, (map.offsetHeight/ this.height-1)) * this.height;
food.style.left = this.x + 'px';
food.style.top = this.y + 'px';
food.style.borderRadius = this.borderRadius + 'px';
//渲染上食物
map.appendChild(food);
} //因为要在全局使用Food,需要把Food拿到全局中
window.Food = Food;
})();
--game.js 构造游戏对象
(function () {
// 1 由于游戏对象要控制蛇和食物,
// 所以游戏对象应该拥有蛇的实例和食物的实例
//存储定时器的id
var timeid;
function Game() {
this.snake = new Snake();
this.food = new Food();
}
//2 开始游戏
Game.prototype.start = function () {
this.snake.render();
this.food.render();
// 2-1 游戏一开始,蛇和食物就渲染出来
timeid = setInterval(function () {
//2-2 -1 蛇的数据改变
this.snake.move();
// 2-3 判断蛇是否到达边界
var snakeHead = this.snake.body[0];
//2-3-1 求蛇头可以移动的水平/垂直坐标的最大位置
var maxX = map.offsetWidth/this.snake.width -1;
var maxY = map.offsetHeight/this.snake.height -1;
if (snakeHead.x <0 ||snakeHead.x > maxX ||snakeHead.y <0 ||snakeHead.y > maxY){
clearInterval(timeid);
alert("gave over");
//注:当X超出范围,代码应立即终止,
// 防止2-2-2 渲染出下一个盒子.展示出来
return;
}
//2-4 蛇吃食物
//依据: 蛇头的坐标 和 食物的坐标重合
var snakeX = snakeHead.x * this.snake.width;
var snakeY = snakeHead.y * this.snake.height;
var foodX = this.food.x;
var foodY = this.food.y;
//如果符合条件, 证明吃到了食物
if (snakeX === foodX && snakeY === foodY){
// 2-4-1 食物消失, 渲染新食物
this.food.render();
// 2-4-2 蛇,变长
// 其实就是往snake.body.push个新对象
// bug: 为了解决新添加蛇节闪下的问题, 把蛇的最后一节对象,作为新的对象.
var last = this.snake.body[this.snake.body.length -1];
this.snake.body.push({
x:last.x,
y:last.y,
col:last.col
})
// this.snake.body.push(last);
// 注:last本身已经在数组中了,
}
//2-2 -2渲染到页面上,真正看到的蛇动起来
this.snake.render();
}.bind(this), 150)
// 3 给页面注册键盘按下的事件
// 3-1 监听用户是否按下了上,下,左,右的按键
document.onkeydown = function(e){
// console.log(this);
e = e || window.event;
console.log(e.keyCode);
// 左37 上38 右39 下40
switch(e.keyCode){
case 37:
//3-11 需要找到蛇,修改蛇的direction属性
//防止原地掉头
if(this.snake.direction === 'right'){
return;
}
this.snake.direction = 'left';
break;
case 38:
if(this.snake.direction === 'bottom'){
return;
}
this.snake.direction = 'top';
break;
case 39:
if(this.snake.direction === 'left'){
return;
}
this.snake.direction = 'right';
break;
case 40:
if(this.snake.direction === 'top') return; //如果if中只有一行代码就可以不写花括号,然后这一行代码要紧跟在if后面记得加分号
this.snake.direction = 'bottom';
break;
}
}.bind(this);
};
//2-2 蛇变量赋予全局
window.Game = Game;
})();
--snake.js 构造蛇对象
(function () {
var arr = []; //用于存储蛇的每一节数据
// 1 创建蛇对象
function Snake(option) {
option = option || {};
this.width = option.width || 20;
this.height = option.height || 20;
this.body = [
{x: 3, y: 2, col: 'green'},//蛇头的位置和颜色
{x: 2, y: 2, col: 'orange'},//蛇头身体的位置和颜色
{x: 1, y: 2, col: 'orange'}];
this.direction = option.direction || 'right';
}
//2 渲染蛇的方法
Snake.prototype.render = function () {
// 2-3 为了防止多个sanke渲染到页面上,一渲染之前先清除掉原来的
for (var i = 0; i < arr.length; i++) {
map.removeChild(arr[i]);//移除页面上的蛇节
}
arr.splice(0,arr.length);//蛇节都被移除掉了,那么数组中也应该都移除.
//2-1 根据body中的个数,动态的创建蛇节
this.body.forEach(function (item, index) {
//2-0 动态的创建蛇节
var snakeNode = document.createElement('div');
//2-4 遍历添加蛇节新数据
arr.push(snakeNode);
snakeNode.style.width = this.width + 'px';
snakeNode.style.height = this.height + 'px';
snakeNode.style.position = 'absolute';
snakeNode.style.left = item.x * this.width + 'px';
snakeNode.style.top = item.y * this.height + 'px';
snakeNode.style.backgroundColor = item.col;
map.appendChild(snakeNode);
}.bind(this))
// 2-2 上面的this是在snake里面,指向snake.`
// 否则,默认指向window
};
//3 蛇移动的方法:body 头数组赋值给身体.
Snake.prototype.move = function () {
//3-1 蛇后面的数据给前面
for (var i = this.body.length -1; i >0; i--) {
this.body[i].x = this.body[i - 1].x;
this.body[i].y = this.body[i - 1].y;
}
// 3-2暂时蛇头往右走
// this.body[0].x +=1;
//
//3-2蛇头一定的位置,要根据蛇的方向来决定
switch(this.direction){
case 'left':
this.body[0].x -= 1;
break;
case 'right':
this.body[0].x += 1;
break;
case 'top':
this.body[0].y -= 1;
break;
case 'bottom':
this.body[0].y += 1;
break;
}
};
//赋予全局变量
window.Snake = Snake;
})();
--tool.js 常用数据工具封装
//用于存放一些常用的功能性的函数
// function getRandom(){
//
// }
var Tool = {
//获取min - max之间的随机整数
getRandom: function(min, max){
return Math.floor(Math.random() * (max - min + 1)) + min;
}
}
// Tool.getRandom()
JavaScript面向对象编程小游戏---贪吃蛇的更多相关文章
- 使用JavaScript实现简单的小游戏-贪吃蛇
最近初学JavaScript,在这里分享贪吃蛇小游戏的实现过程, 希望能看到的前辈们能指出这个程序的不足之处. 大致思路 首先要解决的问题 随着蛇头的前进,尾巴也要前进. 用键盘控制蛇的运动方向. 初 ...
- 第一个windows 小游戏 贪吃蛇
最近用dx尝试做了一个小的贪吃蛇游戏,代码放到github上面:https://github.com/nightwolf-chen/MyFreakout 说一下自己实现的过程: 首先,我把蛇这个抽象成 ...
- JavaScript 小游戏 贪吃蛇
贪吃蛇 代码: <!DOCTYPE html><html><head> <meta charset="UTF-8"> <met ...
- 分享几个原生javascript面向对象设计小游戏
一.序言 不知大家是不是和我一样,当初都有个梦想.学编程,就是想开发游戏.结果进入大学学习之后,才知道搞的是数据库应用程序开发!在此,本人就分享下业余时间做的几个小游戏吧!本打算想用winform或w ...
- Win32小游戏--贪吃蛇
近日里学习了关于win32编程的相关知识,利用这些知识制作了一款贪吃蛇小游戏,具体细节还是分模块来叙述 前期准备:在网上找到一些贪吃蛇的游戏素材图片,以及具体的逻辑框图 在正式写功能之前,先把一系列环 ...
- 用Canvas制作小游戏——贪吃蛇
今天呢,主要和小伙伴们分享一下一个贪吃蛇游戏从构思到实现的过程~因为我不是很喜欢直接PO代码,所以只copy代码的童鞋们请出门左转不谢. 按理说canvas与其应用是老生常谈了,可我在准备阶段却搜索不 ...
- python【控制台】小游戏--贪吃蛇
传统贪吃蛇相信大家都玩过,也是一款很老很经典的游戏,今天我们用python控制台实现 项目有很多bug没有解决,因为本人一时兴起写的一个小游戏,所以只是实现可玩部分功能,并没有花较多的时间和精力去维护 ...
- 手把手教学h5小游戏 - 贪吃蛇
简单的小游戏制作,代码量只有两三百行.游戏可自行扩展延申. 源码已发布至github,喜欢的点个小星星,源码入口:game-snake 游戏已发布,游戏入口:http://snake.game.yan ...
- Java_GUI小游戏--贪吃蛇
贪吃蛇游戏:是一条蛇在封闭围墙里,围墙里随机出现一个食物,通过按键盘四个光标键控制蛇向上下左右四个方向移动,蛇头撞倒食物,则食物被吃掉,蛇身体长一节,接着又出现食物,等待蛇来吃,如果蛇在移动中撞到墙或 ...
随机推荐
- 【学习笔记】LCT link cut tree
大概就是供自己复习的吧 1. 细节讲解 安利两篇blog: Menci 非常好的讲解与题单 2.模板 把 $ rev $ 和 $ pushdown $ 的位置记清 #define lc son[x][ ...
- 如何实现session共享
http://www.cnblogs.com/xiehuiqi220/p/3592300.html 首先我们应该明白,为什么要实现共享,如果你的网站是存放在一个机器上,那么是不存在这个问题的,因为会话 ...
- OD 实验(九) - 对一个程序的破解
程序: 运行程序 点击 About 这是要注册的 点击 Register 输入邮箱和注册码,点击 Register Now 逆向: 用 OD 打开程序 右键 -> 查找 -> 所有参考文本 ...
- 如何在Oracle中向Collection类型的变量中逐条插入数据
这篇文章将要介绍如果需要生成一个新的Collection并且向其中添加数据的方法. procedure insert_object(d in dept_array, d2 out dept_array ...
- 5 matplotlib-绘制精美的图表
matplotlib 是python最著名的绘图库,它提供了一整套和matlab相似的命令API,十分适合交互式地进行制图.而且也可以方便地将它作为绘图控件,嵌入GUI应用程序中. 它的文档相当完备, ...
- 浅谈AVL树,红黑树,B树,B+树原理及应用（转）
出自:https://blog.csdn.net/whoamiyang/article/details/51926985 背景:这几天在看<高性能Mysql>,在看到创建高性能的索引,书上 ...
- Kibana安装（图文详解）（多节点的ELK集群安装在一个节点就好）
对于Kibana ,我们知道,是Elasticsearch/Logstash/Kibana的必不可少成员. 前提: Elasticsearch-2.4.3的下载(图文详解) Elasticsearch ...
- .NET 等宽、等高、等比例、固定宽高生成缩略图 类
#region 根据原图片生成等比缩略图 /// <summary> /// 根据源图片生成缩略图 /// </summary> /// <param name=&quo ...
- pip / conda 导出和安装环境组件 requirements.txt
pip 批量导出包含环境中所有组件的requirements.txt文件 pip freeze > requirements.txt pip 批量安装requirements.txt文件中包含的 ...
- 后端生成二维码 - C#生成二维码（QR）
最近在github上找到一个相对比较好的C#二维码生成类库.在这里和大家分享一下. github地址:https://github.com/codebude/QRCoder 把解决方案下载下来,编译生 ...