贪吃蛇游戏（面向对象）

游戏设计

对象：

1.地图

高度

宽度

原子--类似小的div

x--多少个原子

y--多少个原子

显示画布功能

2.食物

宽度--原子的大小

高度--原子的大小

功能，在地图上显示食物

3.蛇

body---头体尾 ---三个div（原子）

高度---原子的大小

宽度---原子的大小

功能：

1.运动

2.控制方向

3.遇到边界，游戏结束，重新开始

4.遇到食物

5.自己碰到自己，游戏结束，重新开始

4.升级规则

1.每升一级，有一个级别号

2.每升一级，速度加快

3.每升一级，挑战难度增大

业务流程实现

创建每个对象，相关使用

代码实现

html代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>贪吃蛇</title><script src="js/index.js"></script><style>body {margin: 0;padding: 0;}#main {margin: 100px;}.bnt {width: 100px;height: 40px;}.gtitle {font-size: 25px;font-weight: bold;}#gnum {color: red;}</style>
</head><body><div id="main"><h1>贪吃蛇</h1><input class="btn" type="button" value="开始游戏" id="begin"><input class="btn" type="button" value="暂停游戏" id="pause"><span class="gtitle">第<span id="gnum">1</span>关</span></div>
</body></html>

js代码：

   /*  !!!注意这里用的是load，不能用onloadonload可能会有元素没有加载完成，load是等所有的元素加载完后才执行 */window.addEventListener('load',function(){var main = document.getElementById('main');
var showcanvas =false;  //是否开启画布上的格子/* 地图对象的构造方法
atom：原子大小 宽高一样 10
x:横向原子数量
y:纵向原子数量 */
function Map(atom, xnum, ynum) {this.atom = atom; //20*20this.xnum = xnum;this.ynum = ynum;// 声明一个画布this.canvas = null;// 创建画布的方法this.create = function () {this.canvas = document.createElement("div");// canvas的基础样式this.canvas.style.cssText = "position:relative;top:40px;border:1px solid darkred;background:#fafafa";this.canvas.style.width = this.atom * this.xnum + 'px'; //画布的宽this.canvas.style.height = this.atom * this.ynum + 'px'; //画布的高// 给main追加子元素,就相当于把main当做父亲，然后通过main来显示this.canvas// appendChild里面要添加的是有效节点，而不是字符串，所以不能加引号！！！main.appendChild(this.canvas);if (showcanvas) {// 画出整个画布for (var y = 0; y < ynum; y++) {// 画一行for (var x = 0; x < xnum; x++) {var a = document.createElement('div');a.style.cssText = "border:1px solid #fafafa";a.style.width = this.atom + 'px';a.style.height = this.atom + 'px';a.style.backgroundColor = 'green';// 在画布里追加athis.canvas.appendChild(a);a.style.position = 'absolute';a.style.left = x * this.atom + 'px';a.style.top = y * this.atom + 'px';}}}}
}
// 创建食物对象的构造方法，将地图对象作为参数
function Food(map) {this.width = map.atom;this.height = map.atom;// 生成随机颜色的食物 floor--向下取整this.bgcolor = 'rgb(' + Math.floor(Math.random() * 200) + ',' + Math.floor(Math.random() * 200) + ',' + Math.floor(Math.random() * 200) + ')';// 保证食物不超出地图的范围this.x = Math.floor(Math.random() * map.xnum);this.y = Math.floor(Math.random() * map.ynum);this.flag = document.createElement('div');this.flag.style.width = this.width + 'px';this.flag.style.height = this.height + 'px';this.flag.style.backgroundColor = this.bgcolor;this.flag.style.borderRadius = '50%'; //圆形的食物this.flag.style.position = 'absolute';this.flag.style.left = this.x * this.width + 'px';this.flag.style.top = this.y * this.height + 'px';// 将食物追加到地图里面map.canvas.appendChild(this.flag);
}// 创建蛇
function Snake(map) {//设置宽、高this.width = map.atom;this.height = map.atom;//默认走的方向this.direction = 'right';this.body = [{ x: 2, y: 0 }, //蛇头{ x: 1, y: 0 }, //蛇身{ x: 0, y: 0 } //蛇尾];//显示蛇this.display = function () {for (var i = 0; i < this.body.length; i++) {//当吃到食物时，x===null,不能新建食物，不然会在0,0处新建一个;当x!=null时，才创建新的食物if (this.body[i].x != null) {var s = document.createElement('div');// 将蛇的节点保存到一个状态变量中，以便以后删除使用this.body[i].flag = s;// 设置蛇的样式s.style.width = this.width + 'px';s.style.height = this.height + 'px';s.style.backgroundColor = 'rgb(' + Math.floor(Math.random() * 200) + ',' + Math.floor(Math.random() * 200) + ',' + Math.floor(Math.random() * 200) + ')';s.style.borderRadius = '50%';// 设置位置s.style.position = 'absolute';s.style.left = this.body[i].x * this.width + 'px';s.style.top = this.body[i].y * this.height + 'px';map.canvas.appendChild(s);}}}//让蛇运动起来this.run = function () {/*   0{x:2,y:0}, //蛇头1{x:1,y:0}, //蛇身2{x:0,y:0} //蛇尾0 {x:2,y:0}, //蛇头1{x:2,y:0}, //蛇身2{x:1,y:0} //蛇尾*/// 将蛇前一格身体的X赋给后一格，这样蛇身整体向前挪动一格，目前蛇头位置还没变// for循环遍历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;}// 默认是向右走（right） 讨论left、up、down// 根据方向处理蛇头switch (this.direction) {case 'left': this.body[0].x -= 1;  //如果向左走 则蛇头为x-1（根据网页坐标系可知）break;case 'right': this.body[0].x += 1;  //如果向右走 则蛇头为x+1（根据网页坐标系可知）break;case 'up': this.body[0].y -= 1; //如果向上走 则蛇头为y-1break;case 'down': this.body[0].y += 1; //如果向下走 则蛇头为y+1break;}// 判断蛇头吃到食物，判断条件蛇头的xy和食物的xy重合if (this.body[0].x == food.x && this.body[0].y == food.y) {//蛇吃到食物后，加一节，在尾部加//加入空的元素，执行run方法时，之前蛇的尾部会赋值给这个空元素this.body.push({ x: null, y: null, flag: null });// 判断设置级别if(this.body.length > l.slength){l.set();}map.canvas.removeChild(food.flag); //蛇吃掉食物，删除食物food = new Food(map);  //食物被吃掉后，新建一个食物}// 判断是否出界，蛇头来判断if (this.body[0].x < 0 || this.body[0].x > map.xnum - 1 || this.body[0].y < 0 || this.body[0].y > map.ynum - 1) {clearInterval(timer); //清除定时器暂停游戏alert('game over');// 重新开始游戏restart(map, this);return false;   //var showcanvas = true;  //是否开启画布上的格子 等于false就是不开启}// 判断是否和自己重合// 为什么i是4，因为考虑到内存和效率的问题，能少循环几次就少循环几次，蛇的长度最短是3，围不成一个环for (var i = 4; i < this.body.length; i++) {if (this.body[0].x == this.body[i].x && this.body[0].y == this.body[i].y) {clearInterval(timer); //清除定时器暂停游戏alert('game over');// 重新开始游戏restart(map, this);return false;  }}// 将原来所有的都删掉for (var i = 0; i < this.body.length; i++) {if (this.body[i].flag != null) { //当吃到食物，flag是等于null，且不能删除// flag 是标记divmap.canvas.removeChild(this.body[i].flag);}}this.display();}}//设置级别对象
function Level() {this.num = 1; //第几级别this.speed = 300; //毫秒 ，每升一关，数量减少20， 速度逐渐加快this.slength = 10; //通过判断蛇的长度，来判断关卡级别this.set = function () {this.num++;if (this.speed <= 50) {this.speed = 50;} else {this.speed -= 50;}this.slength += 3; //蛇的长度每加3个就升一关this.display();start();  //重新开始，速度加快}this.display = function () {document.getElementById('gnum').innerHTML = this.num;}}
var l = new Level();
l.display();// 重新开始游戏
function restart(map, snake) {// 清除之前的蛇和食物for (var i = 0; i < snake.body.length; i++) {map.canvas.removeChild(snake.body[i].flag);}// 重建初始页面snake.direction = 'right';snake.body = [{ x: 2, y: 0 }, //蛇头{ x: 1, y: 0 }, //蛇身{ x: 0, y: 0 } //蛇尾];snake.display();map.canvas.removeChild(food.flag);food = new Food(map);}// 给body加键盘事件，上下左右
window.onkeydown = function (e) {var event = e || window.event; //兼容// console.log(event.keyCode);/*  键盘按键值：38(up)40(down)39(right)37(left)*/switch (event.keyCode) {case 38:if (snake.direction != 'down') { //防止蛇直接反方向掉头snake.direction = 'up';}break;case 40:if (snake.direction != 'up') {snake.direction = 'down';}break;case 37:if (snake.direction != 'right') {snake.direction = 'left';}break;case 39:if (snake.direction != 'left') {snake.direction = 'right';}break;}
}//创建地图对象
var map = new Map(20, 40, 20);
map.create();
var food = new Food(map); //构造食物对象
var snake = new Snake(map); //构造蛇对象
snake.display();var timer; //变量可以提升function start() {// 在使用之前清除定时器，保证不重复启动定时器clearInterval(timer);timer = setInterval(function () {snake.run();}, l.speed);
}
// 按下开始按钮，游戏就动起来，就是计时器启动
document.getElementById('begin').onclick = function () {start();
}
// 按下暂停按钮，游戏就停止起来，就是计时器停止
document.getElementById('pause').onclick = function () {// 在使用之前清除定时器，保证不重复启动定时器clearInterval(timer);// timer = setInterval(function () {// }, 300);
}})

贪吃蛇游戏（面向对象）相关推荐

Java项目:贪吃蛇游戏(java+swing)
源码获取:博客首页 "资源" 里下载! 功能简介: 贪吃蛇游戏大嘴鱼洁面类.完成大嘴鱼的界面的绘制: /*** 大嘴鱼洁面类.完成大嘴鱼的界面的绘制.*/ public clas ...
bat贪吃蛇游戏代码_C语言写个贪吃蛇游戏
贪吃蛇是个非常经典的游戏,用C语言来实现也是一个好玩的事情.这个游戏我写完后放在知乎,竟然点赞的人数超级多.我觉得大家喜欢,一个方面是因为写得简单,大家都能看得懂,一个可扩展性还是非常强的. 我试了说 ...
C语言写个贪吃蛇游戏
贪吃蛇是个非常经典的游戏,用C语言来实现也是一个好玩的事情.这个游戏我写完后放在知乎,竟然点赞的人数超级多.我觉得大家喜欢,一个方面是因为写得简单,大家都能看得懂,一个可扩展性还是非常强的. 我试了说 ...
matlab cat函数_如何用Matlab编写贪吃蛇游戏？（持续更新）
今后我们实验室的研究重点将会聚焦在"基于游戏的测评"和"教育游戏化"这两个主题上,因此很有必要研究实现"爆款"游戏的一些基本的技术方法.这篇 ...
php 实现贪吃蛇游戏,C++实现简单贪吃蛇游戏
我大概在一个多月前把自己上学期写的c代码的贪吃蛇游戏push到csdn上,并且说c风格的贪吃蛇写起来有些麻烦(贪吃蛇游戏的c语言实现),准备用面向对象的c++再写一遍.现在我们专业恰好刚教完了c++, ...
x x x x c程序语言,C语言写个贪吃蛇游戏
贪吃蛇是个非常经典的游戏,用C语言来实现也是一个好玩的事情.这个游戏我写完后放在知乎,竟然点赞的人数超级多.我觉得大家喜欢,一个方面是因为写得简单,大家都能看得懂,一个可扩展性还是非常强的. 我试了说 ...
原生JS实现贪吃蛇游戏
原生JS实现贪吃蛇游戏贪吃蛇游戏(原生JavaScript) 贪吃蛇游戏思路分析游戏思想: 面向对象的思想三个js文件分别代表三个对象三个对象相互独立,在HTML中控制全局使用面向对象思想的 ...
Java 贪吃蛇游戏引言
欢迎关注公众号: 贪吃蛇小游戏是一款十分经典的小游戏,适合用于新手的练习,花了近两个月的时间,终于可以运行出比较完善的贪吃蛇了,相比于CSDN中的大神,花个几天的时间就可以做出Java版本的贪吃蛇小游 ...
java毕业设计——基于java+J2ME的贪吃蛇游戏设计与实现（毕业论文+程序源码）——贪吃蛇游戏
基于java+J2ME的贪吃蛇游戏设计与实现(毕业论文+程序源码) 大家好,今天给大家介绍基于java+J2ME的贪吃蛇游戏设计与实现,文章末尾附有本毕业设计的论文和源码下载地址哦.需要下载开题报告P ...
初入Python(一) Pygame贪吃蛇游戏的编写与改进
贪吃蛇游戏是一款简单耐玩的休闲益智类游戏,利用pygame可以实现轻松编写,不需要辅佐图片等等元素,可以直接利用涂色方块表示,吃果子变长的原理也很容易实现,将body分为一块一块,每块有自己的位置属性 ...

贪吃蛇游戏（面向对象）

游戏设计

对象：

业务流程实现

代码实现

贪吃蛇游戏（面向对象）相关推荐

最新文章

热门文章