吃了 1000+ 个月饼

悟空聊架构

发布于 2023-09-21 19:48:32

1450

发布于 2023-09-21 19:48:32

文章被收录于专栏：悟空聊架构 | 公众号悟空聊架构 | 公众号

你好，我是悟空。

一、背景

中秋节快到了，想做一个关于中秋的小游戏，然后将小游戏发布到公网上，这样大家就都可以玩了，独乐乐不如众乐乐，说干就干。

体验地址：http://game.passjava.cn

二、功能实现

2.1 需求

控制小兔子吃月饼。
如果吃到了五仁月饼则游戏结束。五仁并没错😁
如果吃到了其他月饼则得分。
将游戏部署到网站上。
可以分享游戏地址给其他小伙伴。

先看效果图：

玩法规则：

用手指按住飞行的兔子进行左右移动。
碰到五仁的月饼则游戏结束。
碰到其他月饼 1 次则得 1 分。

三、代码说明

3.1 初始化

function Ship(ctx){
 gameMonitor.im.loadImage(['static/img/player.png']);
 this.width = 80;
 this.height = 80;
 this.left = gameMonitor.w/2 - this.width/2;
 this.top = gameMonitor.h - 2*this.height;
 this.player = gameMonitor.im.createImage('static/img/player.png');

 this.paint = function(){
  ctx.drawImage(this.player, this.left, this.top, this.width, this.height);
 }

 this.setPosition = function(event){
  if(gameMonitor.isMobile()){
   var tarL = event.changedTouches[0].clientX;
   var tarT = event.changedTouches[0].clientY;
  }
  else{
   var tarL = event.offsetX;
   var tarT = event.offsetY;
  }
  this.left = tarL - this.width/2 - 16;
  this.top = tarT - this.height/2;
  if(this.left<0){
   this.left = 0;
  }
  if(this.left>320-this.width){
   this.left = 320-this.width;
  }
  if(this.top<0){
   this.top = 0;
  }
  if(this.top>gameMonitor.h - this.height){
   this.top = gameMonitor.h - this.height;
  }
  this.paint();
 }

 this.controll = function(){
  var _this = this;
  var stage = $('#gamepanel');
  var currentX = this.left,
   currentY = this.top,
   move = false;
  stage.on(gameMonitor.eventType.start, function(event){
   _this.setPosition(event);
   move = true;
  }).on(gameMonitor.eventType.end, function(){
   move = false;
  }).on(gameMonitor.eventType.move, function(event){
   event.preventDefault();
   if(move){
    _this.setPosition(event); 
   }
   
  });
 }

 this.eat = function(foodlist){
  for(var i=foodlist.length-1; i>=0; i--){
   var f = foodlist[i];
   if(f){
    var l1 = this.top+this.height/2 - (f.top+f.height/2);
    var l2 = this.left+this.width/2 - (f.left+f.width/2);
    var l3 = Math.sqrt(l1*l1 + l2*l2);
    if(l3<=this.height/2 + f.height/2){
     foodlist[f.id] = null;
     if(f.type==0){
      gameMonitor.stop();
      $('#gameoverPanel').show();

      setTimeout(function(){
       $('#gameoverPanel').hide();
       $('#resultPanel').show();
       gameMonitor.getScore();
      }, 2000);
     }
     else{
      $('#score').text(++gameMonitor.score);
      $('.heart').removeClass('hearthot').addClass('hearthot');
      setTimeout(function() {
       $('.heart').removeClass('hearthot')
      }, 200);
     }
    }
   }
   
  }
 }
}

这段代码是一个简单的 HTML5 游戏的前端代码，使用了Canvas元素来创建游戏画布和动画。游戏的主要功能包括玩家控制一个飞船抢月饼，吃到不同类型的月饼得分，并且在一定条件下游戏结束。以下是对代码的主要部分进行的解释：

function Ship(ctx)：这是一个构造函数，用于创建飞船对象。它接受一个上下文对象 ctx 作为参数，用于绘制飞船。
function Food(type, left, id)：这是另一个构造函数，用于创建月饼对象。它接受三个参数：type 表示月饼的类型（0 或 1），left 表示月饼的水平位置，id 表示月饼的唯一标识。
function ImageMonitor()：这是一个用于管理图片加载的对象，包括创建和预加载图片。
var gameMonitor 对象：这是游戏主控制对象，包括游戏的各种属性和方法。它负责初始化游戏，管理游戏的状态，绘制背景、飞船、月饼等元素，以及处理用户输入。

这段代码的主要功能是创建一个基于Canvas的小游戏，其中玩家通过触摸或鼠标控制飞船来抢夺不同类型的月饼，吃到月饼会得分，但如果吃到某种特殊类型的月饼，游戏将结束。

游戏主要流程如下：

初始化游戏画布和事件监听。
绘制背景图。
创建飞船对象，并通过玩家的输入来控制飞船的位置。
生成月饼对象，并让它们下落。
检测飞船是否吃到月饼，根据月饼类型进行得分或结束游戏。
循环运行游戏，不断更新画面。

这段代码还包含了一些事件处理函数，以及一些用于加载和显示分数的逻辑。此外，还包括一些用于在不同设备上设置触摸和鼠标事件的条件判断。

3.2 创建和管理图像资源

function Food(type, left, id){
 this.speedUpTime = 300;
 this.id = id;
 this.type = type;
 this.width = 50;
 this.height = 50;
 this.left = left;
 this.top = -50;
 this.speed = 0.04 * Math.pow(1.2, Math.floor(gameMonitor.time/this.speedUpTime));
 this.loop = 0;

 var p = this.type == 0 ? 'static/img/food1.png' : 'static/img/food2.png';
 this.pic = gameMonitor.im.createImage(p);
}
Food.prototype.paint = function(ctx){
 ctx.drawImage(this.pic, this.left, this.top, this.width, this.height);
}
Food.prototype.move = function(ctx){
 if(gameMonitor.time % this.speedUpTime == 0){
  this.speed *= 1.2;
 }
 this.top += ++this.loop * this.speed;
 if(this.top>gameMonitor.h){
   gameMonitor.foodList[this.id] = null;
 }
 else{
  this.paint(ctx);
 }
}

这段代码定义了一个名为 Food 的 JavaScript 构造函数和两个原型方法 paint 和 move，用于创建和管理游戏中的月饼对象。让我逐步解释这些代码：

Food 构造函数：
- speedUpTime：加速时间间隔，以毫秒为单位，用于控制月饼下落速度的加速。
- id：月饼的唯一标识。
- type：月饼的类型，通常用于区分不同种类的月饼。
- width 和 height：月饼的宽度和高度。
- left 和 top：月饼的初始位置，left 表示水平位置，top 表示垂直位置。
- speed：月饼下落的速度，初始值基于时间的函数。
- loop：一个计数器，用于控制月饼下落的速度。
- 接受三个参数：type 表示月饼的类型（0 或 1），left 表示月饼的水平位置，id 表示月饼的唯一标识。
- 设置了月饼对象的各种属性，包括：
- 根据 type 的不同选择加载不同的月饼图片，将图片对象存储在 pic 属性中。
Food.prototype.paint 方法：
- 这是一个原型方法，用于在 Canvas 上绘制月饼图像。
- 接受一个 ctx 参数，表示绘图上下文，通常是一个 Canvas 上下文对象。
- 使用 ctx.drawImage 方法绘制月饼图像，以 pic 属性表示的图片为源图像，绘制到指定的位置 (this.left, this.top)，并指定宽度和高度为 this.width 和 this.height。
Food.prototype.move 方法：
- 这是另一个原型方法，用于更新月饼的位置，模拟月饼下落的动画效果。
- 首先检查是否达到了加速时间间隔（speedUpTime）的整数倍，如果是，就将 speed 值乘以 1.2，以加速月饼的下落速度。
- 更新 top 属性，使月饼沿垂直方向下落，速度由 speed 控制。
- 如果月饼超出游戏界面底部（top 大于游戏界面的高度 gameMonitor.h），则将该月饼对象从游戏中移除（通过将 gameMonitor.foodList[this.id] 设置为 null），否则调用 paint 方法绘制月饼。

这些代码片段通常用于游戏开发中，用于创建并控制游戏中的物体行为，如月饼下落和绘制。这个构造函数和方法是一个月饼对象的蓝图，可以用于创建多个月饼实例，每个实例具有不同的属性和行为。

3.3 管理和加载图像资源

function ImageMonitor(){
 var imgArray = [];
 return {
  createImage : function(src){
   return typeof imgArray[src] != 'undefined' ? imgArray[src] : (imgArray[src] = new Image(), imgArray[src].src = src, imgArray[src])
  },
  loadImage : function(arr, callback){
   for(var i=0,l=arr.length; i<l; i++){
    var img = arr[i];
    imgArray[img] = new Image();
    imgArray[img].onload = function(){
     if(i==l-1 && typeof callback=='function'){
      callback();
     }
    }
    imgArray[img].src = img
   }
  }
 }
}

这段代码定义了一个名为 ImageMonitor 的对象，用于管理和加载图像资源。以下是代码的主要功能解释：

ImageMonitor 对象是一个工具，用于加载和缓存图像资源，以提高游戏或应用程序中的性能和效率。
imgArray 是一个空数组，用于存储已加载的图像，以便之后可以快速地重用它们，避免不必要的网络请求。
createImage(src) 方法是 ImageMonitor 对象的一个属性，用于创建图像对象，并在 imgArray 中缓存它们。它接受一个图像的路径 src 作为参数。
- 首先，它检查 imgArray 数组中是否已经存在具有相同路径 src 的图像。如果存在，它直接返回缓存的图像对象。
- 如果图像不存在于缓存中，它创建一个新的 Image 对象，将指定路径 src 赋值给它，然后将新的图像对象存储在 imgArray[src] 中，并返回它。
loadImage(arr, callback) 方法也是 ImageMonitor 对象的一个属性，用于预加载图像资源。它接受两个参数：
- arr 是一个包含图像路径的数组，表示需要加载的图像资源。
- callback 是一个回调函数，用于在所有图像加载完成后执行。
- 方法通过遍历 arr 数组中的图像路径，为每个图像路径创建一个新的 Image 对象，并设置加载完成后的回调函数 imgArray[img].onload。
- 如果在遍历结束后（即所有图像都已加载）且提供了有效的 callback 函数时，执行该回调函数。

这个 ImageMonitor 对象的主要目的是优化图像资源的加载，以确保游戏或应用程序在运行时可以快速访问这些资源，而无需多次下载相同的图像。这对于提高性能和用户体验非常有用，特别是在需要大量图像资源的应用中，如游戏。

3.4 绘制月饼

这个 genorateFood 函数是一个用于在游戏中生成月饼的功能。生成月饼的频率由 genRate 控制，随机生成月饼的类型和位置，然后将月饼对象添加到一个数组中。

genorateFood : function(){
  var genRate = 50; //产生月饼的频率
  var random = Math.random();
  if(random*genRate>genRate-1){
   var left = Math.random()*(this.w - 50);
   var type = Math.floor(left)%2 == 0 ? 0 : 1;
   var id = this.foodList.length;
   var f = new Food(type, left, id);
   this.foodList.push(f);
  }
 },

四、环境部署

如果要部署到自己的网站，需要添加 Nginx 配置，做一个静态代理。

这是一个 Nginx 服务器的配置文件片段，用于配置一个虚拟主机，将域名 game.passjava.cn 映射到服务器上的指定目录。这个配置文件的关键部分：

server 块：定义了一个服务器块，用于配置虚拟主机。这个服务器块监听端口 80，表示通过 HTTP 协议访问。
listen 80;：指定服务器监听的端口号，这里是 80，表示通过 HTTP 默认端口访问。
server_name game.passjava.cn;：指定了这个虚拟主机的域名为 game.passjava.cn。当用户访问这个域名时，Nginx 将使用这个服务器块来处理请求。
location / 块：定义了一个请求匹配规则，对所有请求都生效。这是一个根目录位置块，它配置了如何处理位于根目录的请求。
- root /home/ubuntu/jay/game/moon;：指定了服务器上的根目录路径，即请求的文件应该在哪个目录中查找。在这里，根目录路径是 /home/ubuntu/jay/game/moon。
- index index.html;：指定了默认的索引文件为 index.html。如果用户请求的是一个目录而不是具体的文件，Nginx 将尝试查找并返回该目录下的 index.html 文件。