Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >吃了 1000+ 个月饼

吃了 1000+ 个月饼

作者头像
悟空聊架构
发布于 2023-09-21 11:48:32
发布于 2023-09-21 11:48:32
21900
代码可运行
举报
运行总次数:0
代码可运行

你好,我是悟空。

一、背景

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

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

二、功能实现

2.1 需求

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

先看效果图:

玩法规则:

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

三、代码说明

3.1 初始化

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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元素来创建游戏画布和动画。游戏的主要功能包括玩家控制一个飞船抢月饼,吃到不同类型的月饼得分,并且在一定条件下游戏结束。以下是对代码的主要部分进行的解释:

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

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

游戏主要流程如下:

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

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

3.2 创建和管理图像资源

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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 构造函数和两个原型方法 paintmove,用于创建和管理游戏中的月饼对象。让我逐步解释这些代码:

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

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

3.3 管理和加载图像资源

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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 的对象,用于管理和加载图像资源。以下是代码的主要功能解释:

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

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

3.4 绘制月饼

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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 映射到服务器上的指定目录。这个配置文件的关键部分:

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

这个配置文件的效果是将 game.passjava.cn 域名映射到 /home/ubuntu/jay/game/moon 目录,并默认返回 index.html 文件。这通常用于托管静态网站或 Web 应用程序。请确保 Nginx 正确配置,以便处理这个虚拟主机的请求。

然后再添加一个域名解析

就可以在线访问了,快来试下吧~

game.passjava.cn

点击 阅读原文 即可跳转到游戏界面!

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2023-09-15 09:20,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 悟空聊架构 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
微信小程序 案例二 飞机大战
提供了一个通过JavaScript 和 HTML的canvas元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。
万少
2025/02/08
1810
微信小程序 案例二 飞机大战
JavaScript 进阶教程(2)---面向对象实战之贪吃蛇小游戏
上篇文章:https://blog.csdn.net/qq_23853743/article/details/108034430
AlbertYang
2020/09/08
1.4K0
JavaScript 进阶教程(2)---面向对象实战之贪吃蛇小游戏
从零开始学 Web 之 JavaScript 高级(一)原型,贪吃蛇案例
由来:构造函数的问题。如果一个构造函数中有一个匿名方法,那么每实例化一个对象,然后在对象调用这个方法的时候,由于每个对象的方法都是各自的,所以每次调用这个方法的时候都会在内存中开辟一块空间存储这个方法,这样就造成内存资源的浪费。
Daotin
2018/08/31
7180
java贪吃蛇小游戏(详解)[通俗易懂]
首先给出代码下载地址(含素材):https://share.weiyun.com/8hkvy1Ja
全栈程序员站长
2022/09/07
1.8K0
java贪吃蛇小游戏(详解)[通俗易懂]
用原生JavaScript写一个贪吃蛇
看到掘金上有这样一种效果,感觉很好看,就是那种毛玻璃效果,于是想试试写一个登录页面并且实现遮罩,但是写成了开始游戏,可是光一个开始游戏也没意思,干脆写一个小游戏吧,直接试试贪吃蛇。
JanYork_简昀
2022/06/06
8250
用原生JavaScript写一个贪吃蛇
vanilla-tilt.js平滑3D倾斜库的使用
💂作者简介: THUNDER王,一名热爱财税和SAP ABAP编程以及热爱分享的博主。目前于江西师范大学会计学专业大二本科在读,同时任汉硕云(广东)科技有限公司ABAP开发顾问。在学习工作中,我通常使用偏后端的开发语言ABAP,SQL进行任务的完成,对SAP企业管理系统,SAP ABAP开发和数据库具有较深入的研究。 💅文章概要:vanilla-tilt.js是Javascript中一个平滑的3D倾斜库,可以让网页的一些控件变得动态起来,本篇文章主要讲述了如何下载及在网页代码中配置vanilla库。
THUNDER王
2023/02/23
2K0
vanilla-tilt.js平滑3D倾斜库的使用
vue封装一个简单的div框选时间的组件
技术需要积累,有时间我把我之前写的还不错的组件都开源出来。并尝试vue和react 两种方式的组件封装。今天简单写下鼠标框选div选中效果的封装吧。
Java帮帮
2019/05/15
1.7K0
vue封装一个简单的div框选时间的组件
干货 | 如何实现jQuery响应式瀑布流 ?
开门见山,本文介绍响应式的瀑布流的实现方法。 最终效果图如下,改变浏览器大小效果更棒哦~ 以下我们将每个瀑布流盒子简称为box 使用数组记录每个box宽和高 ---- 设置不同屏幕宽度下每一行box的数量 使用$(window).width()获取屏幕宽度 根据不同屏幕宽度设置每一行box的数量 得到每个box的宽度 这里使用最傻的方法计算,有待优化 1 2 3 4 5 6var num = 4; //每行box数量 if ($(window).width() <= 500) num = 1; if
腾讯NEXT学位
2019/01/18
2K0
干货 | 如何实现jQuery响应式瀑布流 ?
写了个小游戏,揭秘碰撞检测
checkCollision就是检测两个物体产生碰撞的方法,如果产生了碰撞就返回true,否则返回false,这是一段非常简单的判断碰撞逻辑,基本可以这个万能公式解决碰撞问题
Maic
2025/02/12
1241
写了个小游戏,揭秘碰撞检测
🎉中秋佳节:简单实现月饼雨
中秋佳节,是中国传统的重要节日之一。在这个特殊的日子里,人们会赏月、吃月饼、赏花灯等。而在现代科技的加持下,我们可以通过编写代码来实现一个有趣的效果——月饼雨。本文将介绍如何使用技术手段实现这一特效。
can4hou6joeng4
2023/11/16
2340
微信小游戏1
游戏内容介绍 游戏作品内容准确介绍〔包括但不限于:游戏背景、扮演角色、游戏角色(NPC)、场景、主要情节、玩法、功能(系统)、主要特点、游戏使用方法等〕,须逐项详细说明并配必要图片。
达达前端
2019/07/26
5.5K0
微信小游戏1
【HarmonyOS Next之旅】基于ArkTS开发(三) -> 兼容JS的类Web开发(七) -> JS动画(二)
通过createAnimator创建一个动画对象,通过设置参数options来设置动画的属性。
枫叶丹
2025/03/06
550
【HarmonyOS Next之旅】基于ArkTS开发(三) -> 兼容JS的类Web开发(七) -> JS动画(二)
【HarmonyOS之旅】基于ArkTS开发(三) -> 兼容JS的类Web开发(七) -> JS动画(二)
通过createAnimator创建一个动画对象,通过设置参数options来设置动画的属性。
枫叶丹
2025/03/04
740
【HarmonyOS之旅】基于ArkTS开发(三) -> 兼容JS的类Web开发(七) -> JS动画(二)
js手写俄罗斯方块
代码如下 html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/k.css"/> </head> <body> <div class="k"> <div class="main-box">
连小壮
2018/08/31
1.6K0
微信小游戏爆发式增长,如何保证小游戏的版本迭代又快又稳?
导语 | 以《羊了个羊》为代表的微信小游戏在去年多次刷屏,引爆全网。近期又有几款微信小游戏成为热门,一度让“微信小游戏”热度指数上涨 20% 以上。微信小游戏市场一直都充满着希望与竞争,开发者如何在爆品争霸中脱颖而出呢?在小游戏开发中有哪些传统开发经验可以借鉴与学习呢?我们特邀腾讯云 TVP、计算机作家/讲师 李艺老师,在他新书《微信小游戏开发》的基础上带我们看看在微信小游戏项目开发中,从架构师角度如何应用面向对象和软件设计思想和设计模式。 作者简介 李艺,腾讯云 TVP、日行一课联合创始人兼 CTO,极
TVP官方团队
2023/02/17
6860
微信小游戏爆发式增长,如何保证小游戏的版本迭代又快又稳?
Canvas实现网页协同画板
画板协同: 简单来说就是使用canvas开发一个可以多人共享的画板,都可以在上面作画画板,并且画面同步显示 canvas白板相关使用参考我之前的文章:Canvas网页涂鸦板再次增强版
不愿意做鱼的小鲸鱼
2022/09/30
1.9K0
Canvas实现网页协同画板
手把手教你利用JS给图片打马赛克
不过, 元素本身并没有绘制能力(它仅仅是图形的容器) - 您必须使用脚本来完成实际的绘图任务
@超人
2021/07/05
1.6K0
手把手教你利用JS给图片打马赛克
WPF 不遮挡任务栏最大化和全屏显示
在窗体不去边框的情况下,不遮挡任务栏最大化 MainWindow.xaml.cs using System; using System.Windows; using System.Windows.Threading; namespace thzSoftware { /// <summary> /// MainWindow.xaml 的交互逻辑 /// </summary> public partial class MainWindow : Window {
zls365
2020/12/15
4.4K0
Power BI 玩贪食蛇游戏
原理是HTML+CSS+JS,把下方度量值放到HTML Content视觉对象,点击开始,按上下左右就可以开玩了。
wujunmin
2025/03/24
700
Power BI 玩贪食蛇游戏
【 图形游戏 Tetris 】原生 JavaScript 做小游戏
俄罗斯方块 (俄罗斯开发经典游戏) 游戏简介 《俄罗斯方块》(Tetris, 俄文:Тетрис)是一款由俄罗斯人阿列克谢·帕基特诺夫于1984年6月发明的休闲游戏。 该游戏曾经被多家公司代理过。经过多轮诉讼后,该游戏的代理权最终被任天堂获得。任天堂对于俄罗斯方块来说意义重大,因为将它与GB搭配在一起后,获得了巨大的成功。《俄罗斯方块》的基本规则是移动、旋转和摆放游戏自动输出的各种方块,使之排列成完整的一行或多行并且消除得分。 名字起源 顾名思义,俄罗斯方块自然是俄罗斯人发明的。这人叫阿列克谢·帕基特诺夫
QUXINGDONG.COM
2018/04/17
1.3K0
相关推荐
微信小程序 案例二 飞机大战
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验