海底大冲关

离岛121
277 阅读3分钟

我正在参加掘金社区游戏创意投稿大赛个人赛，详情请看：游戏创意投稿大赛

需求描述

在大海的深处有一条勇敢的小鱼，突破捕鱼人的层层围堵，向着心中的 ONE PRICE 游去。但为了抓住他，捕鱼人不断进化武器，选择捕鱼网来进行抓捕，请你帮助它躲避捕鱼网的围堵吧~

image.png

下面的资料将为你提供帮助：

任务步骤

1. 技术栈选项

微信小游戏开发平台

2. 海底大冲关游戏项目初始化

  • 打开微信公众平台，完成小游戏账号注册
  • 利用提供的图片、音频资源完成项目结构初始化
  • 类的创建：海底世界类、海平面类、按钮类、鱼类、分数类、音乐类

海底世界类:

import { DataBus } from "../databus.js"
let databus = new DataBus()
//要绘制海底的图片
const seaimgsrc = "images/background.png"
const seawidth = 800
const seaheight = 600
export class Seabed {
  constructor() {
    this.x = 0;
    this.y = 0;
    this.img = wx.createImage()
    this.img.src = seaimgsrc;
    this.w = seawidth
    this.h = seaheight
  }
  //绘制海底
  render() {
    databus.ctx.drawImage(this.img, this.x, this.y, this.w, this.h, 0, 0, databus.canvas.width, databus.canvas.height)
  }
}

海平面类

import { DataBus } from "../databus.js"
let databus = new DataBus()
//要绘制海底的图片
const sealevelimgsrc = "images/sealevel.png"
const sealevelwidth = 800
const sealevelheight = 27
export class Sealevel {
  constructor() {
    this.x = 0;
    this.y = 0;
    this.img = wx.createImage()
    this.img.src = sealevelimgsrc;
    this.w = sealevelwidth
    this.h = sealevelheight
  }
  //绘制海平面
  render() {
    databus.ctx.drawImage(this.img, this.x, this.y, this.w, this.h, 0, databus.canvas.height-this.h,this.w, this.h)
  }
}

按钮类

import { DataBus } from "../databus.js"
let databus = new DataBus()
//要绘制button的图片
const buttonimgsrc = "images/start_button.png"
const buttonwidth = 64
const buttonheight = 64
export class Button {
  constructor() {
    this.x = 0;
    this.y = 0;
    this.img = wx.createImage()
    this.img.src = buttonimgsrc;
    this.w = buttonwidth
    this.h = buttonheight
  }
  //绘制按钮
  render() {
    databus.ctx.drawImage(this.img, this.x, this.y, this.w, this.h,(databus.canvas.width-this.w)/2,(databus.canvas.height-this.h)/2, this.w, this.h)
  }
}

分数类

import { DataBus } from "../databus.js"
let databus = new DataBus()
export class Score{
  constructor(){
      this.score=0
  }
  //绘制分数
  render(){
    databus.ctx.font="30px 华文彩云"
    databus.ctx.fillStyle="#fff"
    databus.ctx.fillText("count:"+this.score,0,100,200)
  }
}

音乐类

let instance
export class Music{
   constructor(){
      if(instance){
        return instance
      }
      instance=this
      this.bgmAudio=wx.createInnerAudioContext()
      this.bgmAudio.src="audios/bgm.mp3"
      this.bgmAudio.loop=true
      this.playBgm()
      //死亡音乐、通关音乐
   }
   playBgm(){
      this.bgmAudio.play()
   }
}

3. 鱼类编码

鱼在海面游动，如果没有点击会进行下落，这里会进行自由落体，公式如下：

image.png

鱼类编码如下：

import { DataBus } from "../databus.js"
let databus = new DataBus()
//要绘制鱼的图片
const fishimgsrc="images/fish1.png"
const fishwidth=41
const fishheight=30
export class Fish {
  constructor() {
    this.x = databus.canvas.height / 4;
      this.y = databus.canvas.height / 2;
      this.img=wx.createImage()
      this.img.src=fishimgsrc;
      this.w=fishwidth
      this.h=fishheight
      this.time=0  //下落时间
      this.newy=databus.canvas.height/2
  }
  //绘制鱼
  render() {
    const g=0.98/2.9
    //模拟重力加速度
    const offsetup=30
    const offsetY=(g*this.time*(this.time-offsetup))/2
    this.newy=this.y+offsetY
    this.time++
    databus.ctx.drawImage(this.img,0,0,this.w,this.h,this.x,this.newy,this.w,this.h)
  }
}

4. 渔网的运动

渔网障碍物为随机生成。

import { DataBus } from "../databus.js"
let databus = new DataBus()
//要绘制障碍物的图片
const width = 84
const  height = 406
export class Obstacle {
  constructor(top,src,imgtype) {
    this.x = databus.canvas.width;
    this.y = 0;
    this.img = wx.createImage()
    this.img.src = src;
    this.w = width
    this.h = height;
    this.top=top;
    this.imgtype = imgtype;
  
  }
  //绘制按钮
  render() {
    if(this.imgtype=="up"){
      this.y=this.top-this.h
    }
    else{
    this.y=this.top+(databus.canvas.height/3)
    }
    
    //判断
    databus.ctx.drawImage(this.img, 0, 0, this.w, this.h, this.x, this.y, this.w, this.h)
  }
}

5. 渔网和鱼的碰撞检测

根据下图理解碰撞检测方式。

image.png

当鱼和海平面碰撞之后代码如下：

import { DataBus } from "./databus.js"
import { Music } from "runtime/music.js"
import { Fish } from "player/fish.js"
import { Button } from "runtime/button.js"
import { Obstacle } from "runtime/obstacle.js"
import { Seabed } from "runtime/seabed.js"
import { Sealevel } from "runtime/sealevel.js"
import { Score } from "player/score.js"
let databus = new DataBus()
// let music = new Music()
export class Main {
  constructor() {
    this.canvas = wx.createCanvas()
    this.ctx = this.canvas.getContext("2d")
    //放到databus里面去
    databus.canvas = this.canvas;
    databus.ctx = this.ctx;
    this.init()
    this.registerEvent()
  }
  check() {
    //鱼 和 海平面 x=10  x=14 y=10 y=10
    const fishborder = {
      top: this.fish.y,
      bottom: this.fish.y + this.fish.h,
      left: this.fish.x,
      right: this.fish.x + this.fish.w
    }

 
    //鱼和海平面
    if (this.fish.newy + this.fish.h >= databus.canvas.height - this.sealevel.h) {
      databus.gameOver = false
      return
    }
     
  }
   
  init() {
    this.bg = new Seabed()
    this.Button = new Button()
    this.fish = new Fish()
    this.score = new Score()
    this.sealevel = new Sealevel()
    
    this.startgame()
  }
  startgame() {
    this.check()
    if (databus.gameOver) {
      this.bg.render()
      this.sealevel.render()
      this.fish.render()      
      this.score.render()
      let timer = requestAnimationFrame(() => this.startgame())
      databus.time = timer

    }
    else {
      console.log("game over")
      databus.gameOver = false
      this.Button.render()
      cancelAnimationFrame(databus.time)
      wx.triggerGC()
    }
  }
  registerEvent() {
    wx.onTouchStart(() => {
      console.log(databus.gameOver)
      if (!databus.gameOver) {
        console.log("游戏开始")
        databus.gameOver = true
        this.init()
      }
      else {
        this.fish.y = this.fish.newy
        this.fish.time = 0
      }
    })
  }
}

微信小游戏发布

上传代码：登录微信公众平台小程序，进入开发管理，开发版本中展示已上传的代码

提交审核

  • 非个人主体需提交：《广电总局版号批文》 、《文化部备案信息》、《计算机软件著作权登记证书》、《游戏自审自查报告》
  • 个人主体需提交：《计算机软件著作权登记证书》、《游戏自审自查报告》
avatar
文章
阅读
粉丝