chrome断网小游戏实现

代码部分都加了详细注释，我就不再详细多说了，主要就是几个主要的函数
Obstacle障碍物
NightMode昼夜更替
Cloud云朵
HorizonLine地面
Runner运动的配置
GameOverPanel游戏结束界面
DistanceMeter分数以及高分记录
CollisionBox碰撞检测
Trex恐龙

<script type="text/javascript">var div = document.querySelector('div');var spriteDefinition = {// 地面在精灵图中的位置HORIZON: { x: 2, y: 54 },// 云朵在精灵图中的位置CLOUD: { x: 86, y: 2 },STAR: { x: 645, y: 2 },//星星MOON: { x: 484, y: 2 },//月亮CACTUS_LARGE: { x: 332, y: 2 },  //大仙人掌CACTUS_SMALL: { x: 228, y: 2 },//小仙人掌PTERODACTYL: { x: 134, y: 2 }//翼龙},gameFrame = 600;FPS = 60,DEFAULT_WIDTH = 600,imgSprite = document.getElementById('sprite');// 障碍物，仙人掌和翼龙Obstacle.obstacles = [];//存储障碍物的数组Obstacle.obstacleHistory = [];//记录障碍物数组中障碍物的类型// 障碍物不能太密集也不能太稀疏，两个障碍物之间也应该有一个间距以供弹跳后的落脚// 因此设置一个障碍物最大间距系数Obstacle.MAX_GAP_COEFFICIENT = 1.5;// 每组障碍物的最大数量Obstacle.MAX_OBSTACLE_LENGTH = 3;// 相邻的障碍物类型的最大重复数Obstacle.MAX_OBSTACLE_DUPLICATION = 2;Obstacle.types = [{type: 'CACTUS_SMALL',//小仙人掌width: 17,//宽height: 35,//高yPos: 105,//在画布上的y坐标multipleSpeed: 4,minGap: 120,    //最小间距minSpeed: 0    //最低速度},{type: 'CACTUS_LARGE',//大仙人掌width: 25,height: 50,yPos: 90,multipleSpeed: 7,minGap: 120,minSpeed: 0},{type: 'PTERODACTYL',//翼龙width: 46,height: 40,yPos: [100, 75, 50],//有高，中，低三个高度multipleSpeed: 999,minSpeed: 8.5,minGap: 150,numFrames: 2,//有两个动画帧frameRate: 1000 / 6,//动画帧切换速率，这里为一秒6帧speedOffset: 0.8 //速度修正}];// 绘制障碍物构造函数Obstacle.dimensions={WIDTH:600};// dimensions 屏幕尺寸  gapCoefficient 障碍物间隙  opt_xOffset 障碍物水平偏移量function Obstacle(canvas,type, spriteImgPos, gapCoefficient, speed, opt_xOffset) {// console.log(opt_xOffset);this.canvas = canvas;this.ctx = canvas.getContext('2d');this.spritePos = spriteImgPos;// 障碍物类型this.typeConfig = type;this.gapCoefficient = gapCoefficient;// 每个障碍物数量（1-3）this.size = getRandomNum(1, Obstacle.MAX_OBSTACLE_LENGTH);this.dimensions =Obstacle.dimensions;// 表示该障碍物是否可以被移除this.remove = false;// 水平坐标this.xPos = this.dimensions.WIDTH + (opt_xOffset || 0);this.yPos = 0;this.width = 0;this.gap = 0;this.speedOffset = 0;//速度修正// 障碍物的动画帧this.currentFrame = 0;// 动画帧切换的计时器this.timer = 0;this.init(speed);}Obstacle.prototype = {init: function (speed) {// console.log(this.typeConfig);// 如果随机障碍物是翼龙，则只出现一只// 翼龙的multipleSpeed是999，远大于speedif (this.size > 1 && this.typeConfig.multipleSpeed > speed) {this.size = 1;}//障碍物的总宽度等于单个障碍物的宽度乘以个数this.width = this.typeConfig.width * this.size;// 若障碍物的纵坐标是一个数组// 则随机选取一个if (Array.isArray(this.typeConfig.yPos)) {var yPosConfig = this.typeConfig.yPos;this.yPos = yPosConfig[getRandomNum(0, yPosConfig.length - 1)];} else {this.yPos = this.typeConfig.yPos;}this.draw();// 对翼龙的速度进行修正，让它看起来有的飞得快一些，有的飞的慢一些if (this.typeConfig.speedOffset) {this.speedOffset = Math.random() > 0.5 ? this.typeConfig.speedOffset : -this.typeConfig.speedOffset;}// 障碍物之间的间隙，与游戏速度有关this.gap = this.getGap(this.gapCoefficient, speed);},// 障碍物之间的间隔，gapCoefficient为间隔系数getGap: function (gapCoefficient, speed) {var minGap = Math.round(this.width * speed + this.typeConfig.minGap * gapCoefficient);var maxGap = Math.round(minGap * Obstacle.MAX_GAP_COEFFICIENT);return getRandomNum(minGap, maxGap);},// 判断障碍物是否移出屏幕外isVisible: function () {return this.xPos + this.width > 0;},draw: function () {// 障碍物宽高var sourceWidth = this.typeConfig.width;var sourceHeight = this.typeConfig.height;//根据障碍物数量计算障碍物在精灵图导航的x坐标// this.size的取值范围为1-3var sourceX = (sourceWidth * this.size) * (0.5 * (this.size - 1)) + this.spritePos.x;// console.log(sourceX);// 如果当前动画帧大于0，说明障碍物类型是翼龙// 更新翼龙的精灵图x坐标使其匹配第二帧动画if (this.currentFrame > 0) {sourceX += sourceWidth * this.currentFrame;};// console.log(this.xPos, this.yPos);this.ctx.drawImage(imgSprite,sourceX, this.spritePos.y,sourceWidth * this.size, sourceHeight,this.xPos, this.yPos,sourceWidth * this.size, sourceHeight);},// 单个障碍物的移动update: function (deltaTime, speed) {// 如果障碍物还没有移出屏幕外if (!this.remove) {// 如果有速度修正则修正速度if (this.typeConfig.speedOffset) {speed += this.speedOffset;}// 更新x坐标this.xPos =this.xPos- Math.floor((speed * FPS / 1000) * deltaTime);// console.log(this.xPos);// Update frameif (this.typeConfig.numFrames) {this.timer += deltaTime;if (this.timer >= this.typeConfig.frameRate) {// 在两个动画帧之间来回切换以达到动画效果this.currentFrame = this.currentFrame == this.typeConfig.numFrames - 1 ? 0 : this.currentFrame + 1;this.timer = 0;}}this.draw();if (this.isVisible()) {this.remove = true;}}},// 管理多个障碍物移动updateObstacles: function (deltaTime, currentSpeed) {// 障碍物列表，保存一个障碍物列表的副本var updateObstacles = Obstacle.obstacles.slice(0);for (var i = 0; i < Obstacle.obstacles.length; i++) {var obstacle = Obstacle.obstacles[i];obstacle.update(deltaTime, currentSpeed);// 移除被标记为删除的障碍物if (obstacle.remove) {updateObstacles.shift();}}Obstacle.obstacles = updateObstacles;if (Obstacle.obstacles.length > 0) {// 获取障碍物列表中的最后一个障碍物var lastObstacle = Obstacle.obstacles[Obstacle.obstacles.length - 1];// 若满足条件则添加障碍物if (lastObstacle &&lastObstacle.isVisible() &&(lastObstacle.xPos + lastObstacle.width + lastObstacle.gap) <this.dimensions.WIDTH) {this.addNewObstacle(currentSpeed);}} else {// 若障碍物列表中没有障碍物则立即添加this.addNewObstacle(currentSpeed);}},// 随机添加障碍addNewObstacle: function (currentSpeed) {// 随机选取一种类型的障碍var obstacleTypeIndex = getRandomNum(0, Obstacle.types.length - 1);var obstacleType = Obstacle.types[obstacleTypeIndex];// 检查随机取到的障碍物类型是否与前两个重复// 或者检查其速度是否合法，这样可以保证游戏在低速时不出现翼龙// 如果检查不通过则重新再选一次直到通过为止if (this.duplicateObstracleCheck(obstacleType.type) || currentSpeed < obstacleType.minSpeed) {this.addNewObstacle(currentSpeed);} else {// 检查通过后，获取该值在精灵图中的坐标var obstacleSpritePos = this.spritePos[obstacleType.type];// 生成新的障碍物并存入数组Obstacle.obstacles.push(new Obstacle(this.canvas, obstacleType, obstacleSpritePos, this.dimensions, this.gapCoefficient, currentSpeed, obstacleType.width));// 同时将障碍物类型存入histo数组// 该方法向数组开头添加一个或者更多元素，并返回长度Obstacle.obstacleHistory.unshift(obstacleType.type);}// 若history数组的长度大于1，则清空最前面的两个if (Obstacle.obstacleHistory.length > 1) {Obstacle.obstacleHistory.splice(Obstacle.MAX_OBSTACLE_DUPLICATION);}},// 检查障碍物是否超过允许的最大重复数duplicateObstracleCheck: function (nextObstacleType) {var duplicateCount = 0;// 与history数组中的障碍物类型比较，最大只允许重得两次for (var i = 0; i < Obstacle.obstacleHistory.length; i++) {duplicateCount = Obstacle.obstacleHistory[i] === nextObstacleType ? duplicateCount + 1 : 0;}return duplicateCount >= Obstacle.MAX_OBSTACLE_DUPLICATION;}};// 昼夜更替效果NightMode.config = {FADE_SPEED: 0.035,//淡入淡出的速度HEIGHT: 40,//月亮的高度MOON_SPEED: 0.25,//月亮的速度NUM_STARS: 2,//星星的数量STAR_SIZE: 9,//星星的宽度STAR_SPEED: 0.3,//星星的速度STAR_MAX_Y: 70,//星星在画布上出现的位置WIDTH: 20//半个月度宽度};// 月亮在不同时期有不同的位置NightMode.phases = [140, 120, 100, 60, 40, 20, 0];// 时间记录NightMode.invertTimer = 0;// 是否可以进行昼夜交替NightMode.inverted = false;// 用于控制样式切换NightMode.invertTrigger = false;// 黑夜持续的时间NightMode.INVER_FADE_DURATION = 5000;// 黑夜构造函数function NightMode(canvas, spritePos, containerWidth) {this.canvas = canvas;this.ctx = canvas.getContext('2d');this.spritePos = spritePos;this.containerWidth = containerWidth;this.xPos = containerWidth - 50;//月亮的x坐标this.yPos = 30;//月亮的y坐标this.currentPhase = 0;this.opacity = 0;this.stars = [];//用于储存星星this.drawStars = false;//是否绘制星星this.placeStars();//放置星星};NightMode.prototype = {update: function (activated) {// 若夜晚模式处于激活状态并且opacity=0时// 对月亮周期进行更新if (activated && this.opacity == 0) {this.currentPhase++;if (this.currentPhase >= NightMode.phases.length) {this.currentPhase = 0;}}// 淡入if (activated && (this.opacity < 1 || this.opacity == 0)) {this.opacity += NightMode.config.FADE_SPEED;} else if (this.opacity > 0) {this.opacity -= NightMode.config.FADE_SPEED;}// 当opacity大于0时移动月亮的位置if (this.opacity > 0) {this.xPos = this.updateXPos(this.xPos, NightMode.config.MOON_SPEED);// 移动星星if (this.drawStars) {for (var i = 0; i < NightMode.config.NUM_STARS; i++) {this.stars[i].x = this.updateXPos(this.stars[i].x, NightMode.config.STAR_SPEED);};}this.draw();} else {this.opacity = 0;this.placeStars();}this.drawStars = true;},updateXPos: function (currentPos, speed) {if (currentPos < -NightMode.config.WIDTH) {currentPos = this.containerWidth;} else {currentPos -= speed;}return currentPos;},draw: function () {// 周期为3时画满月var moonSourceWidth = this.currentPhase == 3 ? NightMode.config.WIDTH * 2 : NightMode.config.WIDTH;var moonSourceHeight = NightMode.config.HEIGHT;// 从精灵图上获取月亮正确的形状var moonSourceX = this.spritePos.x + NightMode.phases[this.currentPhase];// console.log(moonSourceX);var moonOutputWidth = moonSourceWidth;var starSize = NightMode.config.STAR_SIZE;var starSourceX = spriteDefinition.STAR.x;this.ctx.save();// 画布透明度随之变化this.ctx.globalAlpha = this.opacity;if (this.drawStars) {for (var i = 0; i < NightMode.config.NUM_STARS; i++) {this.ctx.drawImage(imgSprite,starSourceX, this.stars[i].sourceY,starSize, starSize,Math.round(this.stars[i].x), this.stars[i].y,NightMode.config.STAR_SIZE, NightMode.config.STAR_SIZE);}}this.ctx.drawImage(imgSprite,moonSourceX, this.spritePos.y,moonSourceWidth, moonSourceHeight,Math.round(this.xPos), this.yPos,moonOutputWidth, NightMode.config.HEIGHT);this.ctx.globalAlpha = 1;this.ctx.restore();},placeStars: function () {// 将画布分为若干组var segmentSize = Math.round(this.containerWidth / NightMode.config.NUM_STARS);for (var i = 0; i < NightMode.config.NUM_STARS; i++) {this.stars[i] = {};// 每组星星位置随机this.stars[i].x = getRandomNum(segmentSize * i, segmentSize * (i + 1));this.stars[i].y = getRandomNum(0, NightMode.config.STAR_MAX_Y);this.stars[i].sourceY = spriteDefinition.STAR.y + NightMode.config.STAR_SIZE * i;}},invert: function (deltaTime) {this.update(NightMode.inverted);// 黑夜持续时间为5秒if (NightMode.invertTimer > NightMode.INVER_FADE_DURATION) {NightMode.invertTimer = 0;NightMode.invertTrigger = false;// 切换类NightMode.inverted = div.classList.toggle('inverted', NightMode.invertTrigger)} else if (NightMode.invertTimer) {NightMode.invertTimer += deltaTime;} else {// 每700米触发黑夜，NightMode.invertTrigger = !(gameFrame % 500);if (NightMode.invertTrigger && NightMode.invertTimer === 0) {NightMode.invertTimer += deltaTime;NightMode.inverted = div.classList.toggle('inverted', NightMode.invertTrigger);}}},reset: function () {this.currentPhase = 0;this.opacity = 0;this.update(false);}};//  云朵构造函数Cloud.config = {HEIGHT: 14,//云朵sprite的高度MAX_CLOUD_GAP: 400,//两朵云之间最大的间隙MAX_SKY_LEVEL: 30,//云朵 的最大高度MIN_CLOUD_GAP: 100,//两朵云之间的最小间隙MIN_SKY_LEVEL: 71,//云朵的最小高度WIDTH: 46,//云朵sprite的宽度MAX_CLOUDS: 6,//最多云朵数量CLOUD_FREQUENCY: 0.5//云朵出现频率};// 储存云朵Cloud.clouds = [];function getRandomNum(min, max) {return Math.floor(Math.random() * (max - min + 1)) + min;}// canvas用于绘制的画布// spritePos在雪碧图中的坐标// containerWidth容器宽度function Cloud(canvas, spritePos, containerWidth) {this.canvas = canvas;this.ctx = canvas.getContext('2d');this.spritePos = spritePos;this.xPos = containerWidth;//云朵初始x坐标在屏幕外this.yPos = 0;//云朵初始高度this.remove = false;//是否移除// console.log(this.spritePos.x);// 云朵之间的间隙400-100this.cloudGap = getRandomNum(Cloud.config.MAX_CLOUD_GAP, Cloud.config.MIN_CLOUD_GAP);this.init();}// 主要逻辑代码在Cloud的原型链中Cloud.prototype = {init: function () {// 设置云朵的高度为随机30-71this.yPos = getRandomNum(Cloud.config.MAX_SKY_LEVEL, Cloud.config.MIN_SKY_LEVEL);this.draw();},draw: function () {// 不使用save和restore下一次绘制会在第一次绘制的基础上继续绘制，添加过后第二次绘制会回归初始化this.ctx.save();var sourceWidth = Cloud.config.WIDTH,sourceHeight = Cloud.config.HEIGHT;this.ctx.drawImage(imgSprite,this.spritePos.x, this.spritePos.y,sourceWidth, sourceHeight,this.xPos, this.yPos,sourceWidth, sourceHeight);this.ctx.restore();},// 添加云朵并控制其移动updateClouds: function (speed) {var numClouds = Cloud.clouds.length;if (numClouds) {for (var i = numClouds - 1; i >= 0; i--) {Cloud.clouds[i].update(speed);};var lastCloud = Cloud.clouds[numClouds - 1];// 若当前存在的云朵数量小于最大云朵数量// 并且云朵位置大于间隙时// 随机添加云朵// 云朵数量小于设定最大值，屏幕宽度-初始坐标大于最后一个云朵if (numClouds < Cloud.config.MAX_CLOUDS &&(DEFAULT_WIDTH - lastCloud.xPos) > lastCloud.cloudGap &&Cloud.config.CLOUD_FREQUENCY > Math.random()) {this.addCloud();};// 过滤掉已经移出屏幕外的云朵Cloud.clouds = Cloud.clouds.filter(function (obj) {return !obj.remove;});} else {this.addCloud();}},update: function (speed) {// 仅绘制符合条件的云朵if (!this.remove) {// 向左移动this.xPos -= Math.ceil(speed);this.draw();if (!this.isVisible()) {this.remove = true;}}},// 判断云朵是否移除屏幕外isVisible: function () {return this.xPos + Cloud.config.WIDTH > 0;},// 将云朵添加至数组addCloud: function () {var cloud = new Cloud(this.canvas, spriteDefinition.CLOUD, DEFAULT_WIDTH);Cloud.clouds.push(cloud);}};// canvas地面绘制在画布上// spritpos 地面在精灵图上的坐标function HorizonLine(canvas, spritePos) {this.spritePos = spritePos;this.canvas = canvas;this.ctx = canvas.getContext("2d");this.sourceDimensions = {};this.dimensions = HorizonLine.dimensions;// 在精灵图坐标为2处和602处分别为不同的地形this.sourceXPos = [this.spritePos.x, this.spritePos.x + this.dimensions.WIDTH];this.xPos = [];//地面在画布中的x坐标this.yPos = 0;//地面在画布中的y坐标this.bumpThreshold = 0.5;  //随机地形系数this.setSourceDimesions();this.draw();}HorizonLine.dimensions = {WIDTH: 600,   //宽600HEIGHT: 12,   //高12像素YPOS: 127    //在画布中的位置};// HorizonLine原型中的方法HorizonLine.prototype = {setSourceDimesions: function () {for (var dimension in HorizonLine.dimensions) {this.sourceDimensions[dimension] = HorizonLine.dimensions[dimension];this.dimensions[dimension] = HorizonLine.dimensions[dimension];}//地面在画布上的位置this.xPos = [0, HorizonLine.dimensions.WIDTH];//0,600this.yPos = HorizonLine.dimensions.YPOS;},//随机地形getRandomType: function () {return Math.random() > this.bumpThreshold ? this.dimensions.WIDTH : 0;},draw: function () {//要绘制的图像，图像将要被绘制的区域的左上角的坐标，图像所要绘制区域的大小，所要绘制的图像区域的左上角坐标，图像区域所要绘制的画布大小this.ctx.drawImage(imgSprite,this.sourceXPos[0], this.spritePos.y,this.sourceDimensions.WIDTH, this.sourceDimensions.HEIGHT,this.xPos[0], this.yPos,this.dimensions.WIDTH, this.dimensions.HEIGHT);this.ctx.drawImage(imgSprite,this.sourceXPos[1], this.spritePos.y,this.sourceDimensions.WIDTH, this.sourceDimensions.HEIGHT,this.xPos[1], this.yPos,this.dimensions.WIDTH, this.dimensions.HEIGHT);},updateXPos: function (pos, increment) {var line1 = pos,line2 = pos === 0 ? 1 : 0;this.xPos[line1] -= increment;this.xPos[line2] = this.xPos[line1] + this.dimensions.WIDTH;// 若第一段地面完全移出canvas外if (this.xPos[line1] <= -this.dimensions.WIDTH) {// 则将其移动至canvas外右侧this.xPos[line1] += this.dimensions.WIDTH * 2;// 同时将第二段地面移动至canvas内this.xPos[line2] = this.xPos[line1] - this.dimensions.WIDTH;// 随机选择地形this.sourceXPos[line1] = this.getRandomType() + this.spritePos.x;}},update: function (deltaTime, speed) {//FPS每秒传真率(刷新率)var increment = Math.floor(speed * (FPS / 1000) * deltaTime);if (this.xPos[0] <= 0) {// 交换地面一和地面二this.updateXPos(0, increment);} else {this.updateXPos(1, increment);}this.draw();},reset: function () {this.xPos[0] = 0;this.xPos[1] = HorizonLine.dimensions.WIDTH;}};//不写onload方法就显示不出图片window.onload = function () {var canvas = document.createElement('canvas'),a = document.getElementById('runner-container'),ctx = canvas.getContext('2d');canvas.id = 'c';canvas.width = 600;canvas.height = 150;a.appendChild(canvas);// console.log(spriteDefinition.CLOUD.x);var speed = 3;var h = new HorizonLine(canvas, spriteDefinition.HORIZON);var cloud = new Cloud(canvas, spriteDefinition.CLOUD, DEFAULT_WIDTH);var night = new NightMode(canvas, spriteDefinition.MOON, DEFAULT_WIDTH);var obstacle = new Obstacle(canvas,Obstacle.types[0] ,spriteDefinition,  0.6, 1);// console.log(obstacle);var startTime = 0;var deltaTime;(function draw(time) {gameFrame++;if (speed < 13.5) {speed += 0.01;}// 清空矩形区域内的绘图ctx.clearRect(0, 0, 600, 150);time = time || 0;deltaTime = time - startTime;h.update(deltaTime, speed);cloud.updateClouds(0.2);night.invert(deltaTime);obstacle.updateObstacles(deltaTime, speed);// console.log(speed);startTime = time;window.requestAnimationFrame(draw, canvas);})();};
</script>

参考了博客园逐影的文章，讲的非常详细。

chrome断网小游戏实现相关推荐

微软游戏服务器断网,微软大规模更新了Edge浏览器内置的断网小游戏
真正做到"无网冲浪". 先告诉大家一个冷知识:微软的Edge浏览器在断网的时候也可以冲浪. 我指的是浏览器内置的"断网小游戏". 去年,微软Edge浏览器在一次 ...
断网小游戏“滑板冲浪”
2020年5月26日,微软官方宣布,从Microsoft Edge浏览器(基于Chromium)83.0.478.37版本开始,用户可以体验微软版断网小游戏了! 在断网时点击页面上的导航按键或者输入这 ...
一键断网/实现游戏瞬间.物理辅助
介绍: 一键断网/实现游戏瞬间支持任何FPS游戏网盘下载地址: https://zijiewangpan.com/lBTX18qXzkl 图片:
炉石战棋一键断网小工具(python)
通过pyqt5编写的界面,通过os对防火墙入站规则进行开启与关闭注意事项: 1.对程序路径进行符号转换,否则失效 2.关闭相关杀毒软件测试 3.以管理员身份运行,打包文件exe时同理开启管理员模式 ...
edge自带断网游戏
在没有网络时你会不会很无聊?博主告诉你一个edge浏览器自带的断网小游戏,让你在断网时也能玩游戏! 网址: 打开edge://surf这个断网游戏网站即可游玩: 作弊码既隐藏模式: 输入microso ...
Microsoft Edge 内置小游戏的彩蛋
自从互联网诞生以来,就难免会遇到断网这类事件的发生.用过 Chrome 浏览器的朋友都知道 Chrome 中内置了一款断网小游戏:dino,只需在浏览器地址栏中输入:chrome://dino/ 就可 ...
Chrome小游戏《Boxel Rebound》
Boxel Rebound是一款和Google浏览器断网小恐龙类似的弹跳小游戏游戏特色: 操作简单,一个空格键即可"嗨到中毒" 可自制赛道,赛道可分享给其它玩家游戏免费,BG ...
edge浏览器自带冲浪小游戏的打开方法
edge83版本之后,冲浪游戏作为彩蛋出现在edge浏览器中,游戏玩法简单又非常有趣,也是我很喜欢的游戏.玩家在断网时可以游玩在edge浏览器的地址栏中输入edge://surf即可进入冲浪游戏,右 ...
使用cocoscreator打包vivo小游戏踩坑
使用cocoscreator打包vivo小游戏踩坑首先打开cocos creator的官方文档首先打开cocos creator官网然后打开文档打开cocoscreator的文档下面是图片打开 ...

chrome断网小游戏实现

chrome断网小游戏实现相关推荐

最新文章

热门文章