Eat Doug吃豆豆小游戏纯js代码

一个前端小游戏demo（没有美化），简单的而又淳朴
效果图：

利用面向对象编程思想实现
简单说一下思路：

第一步：获取元素map地图（这是地图一个简单的div，所有元素都要利用appendChild()方法渲染到它的上面）
第二步：对象（吃豆豆，抽象出各个对象），用了es6的类声明方式
糖豆人类
BeansMan = {

}
BeansMan的方法 render(渲染) move(移动)
豆豆类
Beans = {

}
Beans的方法 render(渲染) remover(删除)
障碍类
Obstacles = {

}
Obstacles的方法 render(渲染)
游戏对象
Game = {
糖豆人实例对象
豆豆实例对象
障碍实例对象
}
Game方法 render(渲染) start(游戏逻辑，移动，结束游戏，胜利)
工具类Tools
getRandom() – 两个数之间随机整数数
代码：
首先是html
1.index.html 里面就简单创建一个div当地图

<!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>Eat Doug吃豆豆</title><link rel="stylesheet" href="./css/index.css">
</head>
<body><div id="box"><div class="txt"><h1>Eat Doug吃豆豆</h1><p>说明：不能碰触黑色墙体，不能出界，吃完即为胜利</p></div><div class="map"></div></div><script src="./js/Tools.js"></script><script src="./js/BeansMan.js"></script><script src="./js/Obstacles.js"></script><script src="./js/Beans.js"></script><script src="./js/Game.js"></script><script src="./js/main.js"></script>
</body>
</html>

CSS代码
index.css

*{margin: 0;padding: 0;
}
#box{margin: 0 auto;width: 800px;
}
#box .map{position: relative;width: 100%;height: 800px;background-color: rgba(114, 112, 110, 0.3);
}
#box .txt{color: rgb(121, 126, 126);text-align: center;padding: 20px 0;
}

js代码（所有的类都用立即执行函数包裹，对外通过window暴露一个属性）
Tools.js工具类

(function (window, undefined) {// 工具类var Tools = {// 两个数之前的随机整数getRandom(min,max){min = Math.ceil(min);max = Math.floor(max);return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值 }}window.Tools = Tools;
})(window, undefined);

BeansMan.js糖豆人类

(function (window, undefined) {// 糖豆人类let ps = 'absolute';let br = 50;class BeansMan {constructor(map, target) {target = target instanceof Object ? target : {};this.width = target.width || 20;this.height = target.height || 20;this.color = target.color || 'yellow';this.left = target.left || 20;this.top = target.top || 20;this.direction = 'right';this.eles = [];}rander() {let ele = document.createElement('div');ele.style.position = ps;ele.style.borderRadius = br + '%';ele.style.width = this.width + 'px';ele.style.height = this.height + 'px';ele.style.backgroundColor = this.color;ele.style.left = this.left + 'px';ele.style.top = this.top + 'px';map.appendChild(ele);this.eles.push(ele);}move() {switch (this.direction) {case "right":this.left += this.width;break;case "left":this.left -= this.width;break;case "top":this.top -= this.height;break;case "bottom":this.top += this.height;break;}}remove() {for (let i = 0; i < this.eles.length; i++) {map.removeChild(this.eles[i]);}this.eles = [];}}window.BeansMan = BeansMan;
})(window, undefined)

Beans.js豆豆类

(function (window, undefined) {let ps = 'absolute';let br = 50;// 豆豆类class Beans{constructor(map,target){target = target instanceof Object ? target : {};this.obstacles = new Obstacles;this.width = target.width || 20;this.height = target.height || 20;this.color = target.color || 'white';this.left = target.left || 0;this.top = target.top || 0;this.eles = [];}rander() {// this.left = Tools.getRandom(0, map.clientWidth / this.width) * this.width || 0;// this.top = Tools.getRandom(0, map.clientHeight / this.height) * this.height || 0;for(let i = this.obstacles.height; i < map.clientHeight; i += this.obstacles.height + this.height){for(let j = 0; j < map.clientWidth; j += this.width*2){if( j == 0 && i == this.obstacles.height ){continue;}let ele = document.createElement('div');ele.style.width = this.width + 'px';ele.style.height = this.height + 'px';ele.style.left = j + 'px';ele.style.top = i + 'px';ele.style.backgroundColor = this.color;ele.style.position = ps;ele.style.borderRadius = br + '%';map.appendChild(ele);this.eles.push(ele);}}}remove(i) {// console.log(i);map.removeChild(this.eles[i]);this.eles.splice(i, 1);}}window.Beans = Beans;
})(window, undefined)

Obstacles.js障碍类

(function (window, undefined) {let ps = 'absolute';// 障碍类class Obstacles {constructor(map,target){this.beansMan = new BeansMan;target = target instanceof Object ? target : {};this.width = target.width || 20;this.height = target.height || 20;this.color = target.color || 'black';this.left = target.left || 0;this.top = target.top || 0;this.eles = [];}rander() {for(let i = 0; i < map.clientHeight; i += this.beansMan.height + this.height){// 随机位置（行）ranlet ran = Tools.getRandom(0, map.clientWidth / this.width) * this.width;for(let j = 0; j < map.clientWidth; j += this.width){if(j == ran && i != 0){continue;}var ele = document.createElement('div');ele.style.width = this.width + 'px';ele.style.height = this.height + 'px';ele.style.left = j + 'px';ele.style.top = i + 'px';ele.style.backgroundColor = this.color;ele.style.position = ps;map.appendChild(ele);this.eles.push(ele);}}}}window.Obstacles = Obstacles;
})(window, undefined)

Game.js游戏类

(function (window, undefined) {class Game {constructor(map) {this.beansMan = new BeansMan;this.beans = new Beans;this.obstacles = new Obstacles;// that = this;}rander() {this.beansMan.rander(map);this.beans.rander(map);this.obstacles.rander(map);this.start();this.bindKey();}start(){let timer = setInterval(() => {this.beansMan.move();this.beansMan.remove(map);this.beansMan.rander(map);let maxX = map.clientWidth / this.beansMan.width * this.beansMan.width - this.beansMan.width;let maxY = map.clientHeight / this.beansMan.height * this.beansMan.height - this.beansMan.height;// 糖豆人位置let bx = this.beansMan.left;let by = this.beansMan.top;// console.log(bx);for (let i = 0; i < this.beans.eles.length; i++) {// console.log(this.beans.eles[i].offsetLeft);if (this.beans.eles[i].offsetLeft === bx && this.beans.eles[i].offsetTop === by) {this.beans.remove(i);}}// 游戏结束条件if (bx < 0 || bx > maxX || by < 0 || by > maxY) {clearInterval(timer);alert('Game Over');}for(let i = 0; i < this.beans.eles.length; i++){if(bx === this.obstacles.eles[i].offsetLeft && by === this.obstacles.eles[i].offsetTop){clearInterval(timer);alert('Game Over');}}// 游戏胜利条件if(this.beans.eles.length == 0){clearInterval(timer);alert('恭喜你吃到最后一个，游戏胜利');}}, 150);}bindKey() {let that = this;document.onkeydown = function (e) {// console.log(that.beansMan.direction);switch (e.keyCode) {case 37:that.beansMan.direction = 'left';break;case 38:that.beansMan.direction = 'top';break;case 39:that.beansMan.direction = 'right';break;case 40:that.beansMan.direction = 'bottom';break;}}}}window.Game = Game;
})(window, undefined)

main.js(主要是通过game对象来开始游戏)

var map = document.querySelector('#box .map');
var game = new Game(map);
game.rander();

Eat Doug吃豆豆小游戏纯js代码相关推荐

Snake贪吃蛇小游戏纯js代码
Snake贪吃蛇小游戏纯js代码先给个效果图,一样的简单而又纯朴,回归贪吃蛇最原始的状态还是先分析一下,使用面向对象编程真的降低了编程的难度(只要前期把思路想好,各个类,属性,方法抽象出来),就真 ...
HTML + CSS + JS 10 分钟实现一个吃豆豆小游戏（给女朋友玩）
今天江哥手把手带大家实现一个吃豆豆游戏关注江哥不迷路,带你编程上高速知识点 HTML + CSS + JS 实现思路:类似贪吃蛇游戏玩法,W A S D,控制方向,实现吃豆豆废话不多说,直接上 ...
基于 Python 制作吃豆豆小游戏（文档和源码~）
游戏简介: 玩家通过 ↑↓←→ 键控制游戏的主角吃豆人吃掉藏在迷宫内的所有豆子,并且不能被鬼魂抓到. 若能顺利吃完迷宫内的所有豆子并且不被鬼魂抓到,则游戏胜利,否则游戏失败. 实现过程~: Step1 ...
c语言吃豆豆小游戏代码,高手帮我改下我的吃豆豆游戏吧
该楼层疑似违规已被系统折叠隐藏此楼查看此楼 void LOST(){ flag=0; move=NO; clrscr(); getch(); clrscr(); false1 ...
python 苹果试玩_python实现吃苹果小游戏
本文实例为大家分享了python实现吃苹果小游戏的具体代码,供大家参考,具体内容如下 1.公共类模块 import pygame from pygame.rect import Rect def pr ...
【Python游戏】Python各大游戏合集（3）：飞翔的小鸟、俄罗斯方块、24点小游戏、吃豆豆小游、扫雷 | 附带源码
相关文件关注小编,私信小编领取哟! 当然别忘了一件三连哟~~ 公众号:Python日志可以关注小编公众号,会不定时的发布一下Python小技巧,还有很多资源可以免费领取哟!! 源码领取:加Pyth ...
JS青蛙吃害虫小游戏
下载地址 JS青蛙吃害虫小游戏是一款简单的HTML5喂青蛙小游戏源码,可以当做微信小程序. dd:
html+css+js实现狼吃羊小游戏
html+css+js实现狼吃羊小游戏一.总结一句话总结:给动的元素下标记,这里表现为将要活动的标签动态增加class,这是一种很好的思想. 1.如何实现棋子走动的时候简单精确定位? 用重构坐标系 ...
香肠派对电脑版_6款好玩的吃鸡小游戏，和平精英、香肠派对、迷你攻势、、、...
沐沐带你发现好游戏! 只有你想不到, 没有我找不到的好游戏! 「良心好游戏推荐」搜罗了好玩的微信小游戏大全, 模拟经营游戏.恐怖游戏.消除游戏.休闲游戏.益智游戏.解密游戏.烧脑游戏.解谜游戏大全. ...
C语言实现扫雷小游戏纯小白非黑窗口
C语言实现一个普通的扫雷小游戏纯小白所编(含代码非黑窗口!) 扫雷主要功能 1.创建一个图形界面 2.了解扫雷游戏的原理 3.随机生成雷的位置 4.为整个数组加密,并在雷周围的位置加一 5.导入图 ...

Eat Doug吃豆豆小游戏纯js代码

Eat Doug吃豆豆小游戏纯js代码相关推荐

最新文章

热门文章