【phaser.js学习笔记（3）】开发H5游戏“穿越小行星”并适配微信小游戏

最新推荐文章于 2024-09-15 07:57:39 发布

orangecsy

最新推荐文章于 2024-09-15 07:57:39 发布

阅读量2.8k

点赞数 2

本文链接：https://blog.csdn.net/orangecsy/article/details/80624250

版权

本文介绍了使用phaser.js v2.6.2开发HTML5游戏"穿越小行星"的过程，包括游戏架构、开始场景、游戏场景、结束场景的详细实现，并讲解了如何将游戏适配到微信小游戏，涉及屏幕适配、音频处理和事件监听等调整。

摘要由CSDN通过智能技术生成

这篇笔记主要记录使用phaser.js开发一个完整HTML5游戏的整个过程，并将web端程序适配到微信小游戏。

1、游戏基本架构

由于phaser社区目前仅有phaser2对微信小程序的支持，因此我选择phaser v2.6.2作为游戏的引擎。为便于开发调试，以单独的phaser.min.js方式引入文件。游戏主要分三个场景，开始场景，游戏场景和重新开始场景，index.html文件如下。

 
  <!DOCTYPE html 
  > 
 
 
  < 
  html 
  > 
 
 
  < 
  head 
  > 
 
 
  < 
  meta 
  charset= 
  "UTF-8" 
  > 
 
 
  < 
  title 
  >Game 
  </ 
  title 
  > 
 
 
  < 
  style 
  > 
 
 
  body { 
 
 
  background: 
  #000000; 
 
 
  margin: 
  0; 
 
 
  padding: 
  0; 
 

   } 
 
 
  canvas { 
 
 
  display: 
  block; 
 
 
  position: 
  absolute; 
 
 
  top: 
  50%; 
 
 
  left: 
  50%; 
 
 
  transform: 
  translate( 
  -50%, 
  -50%); 
 
 
  margin: 
  0; 
 

   } 
 

      
  < 
  / 
  style 
  > 
 
 
  </ 
  head 
  > 
 
 
  < 
  body 
  > 
 
 
  < 
  script 
  src= 
  "./js/phaser.min.js" 
  ></ 
  script 
  > 
 
 
  < 
  script 
  src= 
  "./js/start.js" 
  ></ 
  script 
  > 
 
 
  < 
  script 
  src= 
  "./js/game.js" 
  ></ 
  script 
  > 
 
 
  < 
  script 
  src= 
  "./js/restart.js" 
  ></ 
  script 
  > 
 
 
  </ 
  body 
  > 
 
 
  </ 
  html 
  > 
 

2、开始场景

开始场景需要星空背景、标题、开始按键和下方火焰，开发完成的效果如下。

start.js为入口文件，内容如下。

 
  let 
  game; 
 
  // 全局游戏设置 
 
  const 
  gameOptions = { 
 
  // 初始分数 
 
  scoreInit: 
  1000, 
 
  // 本局分数 
 
  score: 
  0, 
 
  // 屏幕宽高 
 
  width: 
  750, 
 
  height: 
  1334, 
 
  // 重力 
 
  gravity: 
  200, 
 
  // 墙 
 
  rectWidth: 
  100, 
 
  wallWidth: 
  5, 
 
  // 地球 
 
  earthRadius: 
  100, 
 
  // 飞船速度 
 
  speed: 
  600 
 
   } 
 
  window. 
  onload = () 
  => { 
 
  // 配置信息 
 
  const 
  config = { 
 
  // 界面宽度，单位像素 
 
  // width: 750, 
 
  width: 
  gameOptions. 
  width, 
 
  // 界面高度 
 
  height: 
  gameOptions. 
  height, 
 
  // 渲染类型 
 
  renderer: 
  Phaser. 
  AUTO, 
 
  parent: 
  'render' 
 
   }; 
 
  // 声明游戏对象 
 
  game = 
  new 
  Phaser. 
  Game( 
  config); 
 
  // 添加状态 
 
  game. 
  state. 
  add( 
  'start', 
  Start); 
 
  game. 
  state. 
  add( 
  'game', 
  Game); 
 
  game. 
  state. 
  add( 
  'restart', 
  Restart); 
 
  // 开始界面 
 
  game. 
  state. 
  start( 
  'start'); 
 
   } 
 
  class 
  Start 
  extends 
  Phaser. 
  State { 
 
  // 构造器 
 
  constructor() { 
 
  super( 
  "Start"); 
 
   } 
 
  // 预加载 
 
  preload() { 
 
  // 图片路径 
 
  const 
  images = { 
 
  'earth' 
  : 
  './assets/img/earth.png', 
 
  'sat1' 
  : 
  './assets/img/sat1.png', 
 
  'sat2' 
  : 
  './assets/img/sat2.png', 
 
  'sat3' 
  : 
  './assets/img/sat3.png', 
 
  'rocket' 
  : 
  './assets/img/rocket.png', 
 
  'play' 
  : 
  './assets/img/play.png', 
 
  'title' 
  : 
  './assets/img/title.png', 
 
  'fire' 
  : 
  './assets/img/fire.png', 
 
  'over' 
  : 
  './assets/img/over.png', 
 
  'restart' 
  : 
  './assets/img/restart.png', 
 
  'particle1' 
  : 
  './assets/img/particulelune1.png', 
 
  'particle2' 
  : 
  './assets/img/particulelune2.png', 
 
  'station' 
  : 
  './assets/img/station.png' 
 
   }; 
 
  // 载入图片 
 
  for ( 
  let 
  name 
  in 
  images) { 
 
  this. 
  load. 
  image( 
  name, 
  images[ 
  name]); 
 
   } 
 
  // 载入天空盒 
 
  this. 
  load. 
  spritesheet( 
  'skybox', 
  './assets/img/stars.png', 
  480, 
  640, 
  5); 
 
  // 音乐路径 
 
  const 
  audios = { 
 
  'bgMusic' 
  : 
  './assets/audio/music.mp3', 
 
  'jump' 
  : 
  './assets/audio/jump.wav', 
 
  'explosion' 
  : 
  './assets/audio/explosion.mp3' 
 
   } 
 
  // 载入音乐 
 
  for( 
  let 
  name 
  in 
  audios){ 
 
  this. 
  load. 
  audio( 
  name, 
  audios[ 
  name]); 
 
       } 
 
   } 
 
  create() { 
 
  // 播放背景音乐 
 
  const 
  bgMusic = 
  this. 
  add. 
  audio( 
  'bgMusic', 
  0.3, 
  true); 
 
  bgMusic. 
  play(); 
 
  // 屏幕比例系数 
 
  const 
  screenWidthRatio = 
  gameOptions. 
  width / 
  480; 
 
  const 
  screenHeightRatio = 
  gameOptions. 
  height / 
  640; 
 
  // 星星闪烁 
 
  const 
  skybox = 
  game. 
  add. 
  sprite( 
  0, 
  0, 
  'skybox'); 
 
  skybox. 
  width = 
  gameOptions. 
  width; 
 
  skybox. 
  height = 
  gameOptions. 
  height; 
 
  const 
  twinkle = 
  skybox. 
  animations. 
  add( 
  'twinkle'); 
 
  skybox. 
  animations. 
  play( 
  'twinkle', 
  3, 
  true); 
 
  // 标题 
 
  const 
  title = 
  this. 
  add. 
  sprite( 
  gameOptions. 
  width / 
  2, 
  gameOptions. 
  height / 
  5, 
  'title'); 
 
  title. 
  width *= 
  screenWidthRatio; 
 
  title. 
  height *= 
  0.8 * 
  screenHeightRatio; 
 
  title. 
  anchor. 
  set( 
  0.5); 
 
  this. 
  add. 
  tween( 
  title). 
  to( 
 
   { 
  y: 
  gameOptions. 
  height / 
  4}, 
 
  1500, 
 
  Phaser. 
  Easing. 
  Sinusoidal. 
  InOut, 
 
  true, 
  0, - 
  1, 
  true); 
 
  // 开始按钮 
 
  const 
  startButton = 
  this. 
  add. 
  group(); 
 
  startButton. 
  x = 
  this.