微信小程序开发|教程|文档|资源汇总_即速论坛

 找回密码
 立即注册

扫一扫,访问微社区

查看: 212391|回复: 1327

[小游戏开发] 微信小程序空中射击游戏源码

  [复制链接]

132

主题

242

帖子

4242

金钱

版主

小程序开发

Rank: 7Rank: 7Rank: 7

积分
0

优秀版主活跃会员最佳新人

发表于 2017-12-30 22:56:27 | 显示全部楼层 |阅读模式
小程序在线学习平台http://school.jisuapp.cn/
微信小游戏_空中射击游戏源码_测试

一、首先,先下载最新最新版的微信小程序开发工具(1.02.1801080)
传送门:https://mp.weixin.qq.com/debug/wxagame/dev/devtools/download.html?t=201818

二、创建你的第一个微信小游戏
备注:打开微信开发者工具,点击体验小游戏使用无 AppID 模式。给你的项目起一个好听的名字,最后,勾选“建立游戏快速启动模板”(注意:你要选择一个空的目录才会有这个选项),点击确定,你就得到了你的第一个小游戏了。ps:目前游戏类小程序还未开放注册哦!2018年1月15日微信公开课之后1个月内开放


三、这里选择添加小游戏项目文件时,直接选择了准备好的游戏包作为测试,填写项目名称(建议英文字母哦),确认。


四、进入小游戏的调试页面啦,这里简单看一下小游戏的文件结构

小游戏只有以下两个必要文件
[mw_shl_code=applescript,true]├── game.js
└── game.json[/mw_shl_code]
  • game.js 小游戏入口文件
  • game.json 配置文件


五、微信小游戏代码文件配置

基础文件配置:
小游戏开发者通过在根目录编写一个 game.json 文件进行配置,开发者工具和客户端需要读取这个配置,完成相关界面渲染和属性设置。
key 数据类型 说明 默认值
deviceOrientation String 支持的屏幕方向 portrait
showStatusBar Boolean 是否显示状态栏 false
networkTimeout Number 网络请求的超时时间,单位:毫秒 60000
networkTimeout.request Number wx.request 的超时时间,单位:毫秒 60000
networkTimeout.connectSocket Number wx.connectSocket 的超时时间,单位:毫秒 60000
networkTimeout.uploadFile Number wx.uploadFile 的超时时间,单位:毫秒 60000
networkTimeout.downloadFile Number wx.downloadFile 的超时时间,单位:毫秒 60000
workers String 多线程 Worker 配置项,详细请参考 Worker文档
deviceOrientation
说明
portrait 竖屏
landscape 横屏

deviceOrientation示例配置

[mw_shl_code=applescript,true]{
   
"deviceOrientation": "portrait",
    "networkTimeout": {
        "request": 5000,
        "connectSocket": 5000,
        "uploadFile": 5000,
        "downloadFile": 5000
    }
}[/mw_shl_code]

小游戏wx API调用:
你只能使用 JavaScript 来编写小游戏。小游戏的运行环境是一个 绑定了一些方法的 JavaScript VM。不同于浏览器,这个运行环境没有 BOM 和 DOM API,只有 wx API。
接下来我们将介绍如何用 wx API 来完成创建画布、绘制图形、显示图片以及响应用户交互等基础功能

1)创建 Canvas
调用 wx.createCanvas() 接口,可以创建一个 Canvas 对象。
[mw_shl_code=applescript,true]var
canvas = wx.createCanvas()[/mw_shl_code]
此时创建的 canvas 是一个上屏 Canvas,已经显示在了屏幕上,且与屏幕等宽等高。
[mw_shl_code=applescript,true]console
.log(canvas.width, canvas.height)[/mw_shl_code]
在整个小游戏代码中首次调用 wx.createCanvas() 创建的是上屏 Canvas,之后调用则创建的是离屏 Canvas。如果你的项目中使用了官方提供的 Adapter 即 weapp-adapter.js(关于什么是 Adpater 请参考官方教程 Adapter),那么你此时创建的会是一个离屏 Canvas。因为在 weapp-adapter.js 已经调用了一次 wx.createCanvas(),并把返回的 canvas 作为全局变量暴露出来。假设你的项目目录结构如下:
[mw_shl_code=applescript,true]├──
game.js
├── weapp-adapter.js
└── game.json[/mw_shl_code]
在 weapp-adapter.js 中已经调用了一次 wx.createCanvas(),并把返回的 canvas 作为全局变量暴露出来。
[mw_shl_code=applescript,true]// weapp-adapter

canvas = wx.createCanvas()[/mw_shl_code]
如果你在 require weapp-adapter.js 之后再调用 wx.createCanvas(),那么创建的 Canvas 会是一个离屏的 Canvas,因为此时已经不是对该 API 的首次调用。
[mw_shl_code=applescript,true]require
(
'./weapp-adapter')
var myCanvas = wx.createCanvas()[/mw_shl_code]

2)在 Canvas 上进行绘制
但是由于没有在 canvas 上进行绘制,所以 canvas 是透明的。使用 2d 渲染上下文的进行简单的绘制,可以在屏幕左上角看到一个 100x100 的红色矩形。
[mw_shl_code=applescript,true]var
context = canvas.getContext(
'2d')
context.fillStyle = 'red'
context.fillRect(0, 0, 100, 100)[/mw_shl_code]
通过 Canvas.getContext() 方法可以获取 2d 或 WebGL 渲染上下文 RenderingContext,调用渲染上下文的绘制方法可以在 Canvas 上进行绘制。小游戏基本上支持 2d 和 WebGL 1.0 所有的属性和方法,详情请见 RenderingContext。由于使用 WebGL 的绘制过程较为复杂,所以本文中的示例代码都以 2d 渲染上下文的绘制方法编写。
通过设置 width 和 height 属性可以改变 Canvas 对象的宽高,但这也会导致 Canvas 内容的清空和渲染上下文的重置。
[mw_shl_code=applescript,true]canvas.width =
300
canvas.height = 300[/mw_shl_code]

3)显示图片
通过 wx.createImage() 接口,可以创建一个 Image 对象。Image 对象可以加载图片。当 Image 对象被绘制到 Canvas 上时,图片才会显示在屏幕上。
[mw_shl_code=applescript,true]var
image = wx.createImage()[/mw_shl_code]
设置 Image 对象的 src 属性可以加载一张本地图片或网络图片,当图片加载完毕时会执行注册的 onload 回调函数,此时可以将 Image 对象绘制到 Canvas 上。
[mw_shl_code=applescript,true]image.onload =
function () {
    console.log(image.width, image.height)
    context.drawImage(image, 0, 0)
}
image.src = 'logo.png'[/mw_shl_code]

4)创建多个 Canvas
在整个小游戏运行期间,首次调用 wx.createCanvas 接口创建的是一个上屏 Canvas。在这个 canvas 上绘制的内容都将显示在屏幕上。而第二次、第三次等后几次调用 wx.createCanvas 创建的都会是离屏 Canvas。在离屏 Canvas 上绘制的内容仅仅只是绘制到了这个离屏 Canvas 上,并不会显示在屏幕上。
以如下代码为例,运行后会发现屏幕上并没有在 (0, 0) 的位置显示 100x100 的红色矩形。因为我们是在一个离屏的 Canvas 绘制的。
[mw_shl_code=applescript,true]var
screenCanvas = wx.createCanvas()
var offScreenCanvas = wx.createCanvas()
var offContext = offScreenCanvas.getContext('2d')
offContext.fillStyle = 'red'
offContext.fillRect(0, 0, 100, 100)[/mw_shl_code]
为了让这个红色矩形显示在屏幕上,我们需要把离屏的 offScreenCanvas 绘制到上屏的 screenCanvas 上。
[mw_shl_code=applescript,true]var
screenContext = screenCanvas.getContext(
'2d')
screenContext.drawImage(offScreenCanvas, 0, 0)[/mw_shl_code]

5)动画
在 JavaScript 中,一般通过 setInterval/setTimeout/requestAnimationFrame 来实现动画效果。小游戏对这些 API 提供了支持:
  • setInterval()
  • setTimeout()
  • requestAnimationFrame()
  • clearInterval()
  • clearTimeout()
  • cancelAnimationFrame()
另外,还可以通过 wx.setPreferredFramesPerSecond() 修改执行 requestAnimationFrame 回调函数的频率,以降低性能消耗。

6)触摸事件
响应用户与屏幕的交互是游戏中必不可少的部分,小游戏参照 DOM 中的 TouchEvent 提供了以下监听触摸事件的 API:
  • wx.onTouchStart()
  • wx.onTouchMove()
  • wx.onTouchEnd()
  • wx.onTouchCancel()
[mw_shl_code=applescript,true]wx.onTouchStart(
function (e) {
    console.log(e.touches)
})

wx.onTouchMove(function (e) {
    console.log(e.touches)
})

wx.onTouchEnd(function (e) {
    console.log(e.touches)
})

wx.onTouchCancel(function (e) {
    console.log(e.touches)
})[/mw_shl_code]

7)全局对象
window 对象是浏览器环境下的全局对象。小游戏的运行环境中没有 BOM API,因此没有 window 对象。但是提供了全局对象 GameGlobal,所有全局定义的变量都是 GameGlobal 的属性。
[mw_shl_code=applescript,true]console
.log(GameGlobal.setTimeout === setTimeout)
console.log(GameGlobal.requestAnimationFrame === requestAnimationFrame)
// true[/mw_shl_code]
开发者可以根据需要把自己封装的类和函数挂载到 GameGlobal 上。
[mw_shl_code=applescript,true]GameGlobal.render =
function () {
    //省略方法的具体实现...
}

render()[/mw_shl_code]
GameGlobal 是一个全局对象,本身也是一个存在循环引用的对象。
[mw_shl_code=applescript,true]console
.log(GameGlobal === GameGlobal.GameGlobal)[/mw_shl_code]
console.log 无法在真机上将存在循环引用的对象输出到 vConsole 中。因此真机调试时请注释 console.log(GameGlobal) 这样的代码,否则将会产生这样的错误
[mw_shl_code=applescript,true]An
object width circular reference can
't be logged[/mw_shl_code]

是不是和小程序的开发类似啊!
最后,附上微信小游戏_空中射击游戏源码:
游客,如果您要查看本帖隐藏内容请回复



本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x

0

主题

14

帖子

492

金钱

新人求带

Rank: 1

积分
0
发表于 2018-1-11 10:06:59 | 显示全部楼层
感谢楼主分享哇!

0

主题

1

帖子

60

金钱

新人求带

Rank: 1

积分
0
发表于 2018-1-11 09:48:26 | 显示全部楼层
看看研究一下

0

主题

5

帖子

187

金钱

新人求带

Rank: 1

积分
0
发表于 2018-1-1 15:06:14 | 显示全部楼层
看看 怎么样

0

主题

2

帖子

15

金钱

新人求带

Rank: 1

积分
0
发表于 2018-1-8 02:43:03 | 显示全部楼层
啥也不说了,感谢楼主分享哇!

910

主题

2100

帖子

3万

金钱

管理员

论坛管理员

Rank: 9Rank: 9Rank: 9

积分
0

突出贡献优秀版主荣誉管理论坛元老

QQ
发表于 2018-1-8 20:18:35 | 显示全部楼层
正需要,支持楼主大人了!

0

主题

1

帖子

15

金钱

新人求带

Rank: 1

积分
0
发表于 2018-1-9 17:00:00 | 显示全部楼层
正需要,支持楼主大人了!

0

主题

5

帖子

23

金钱

新人求带

Rank: 1

积分
0
发表于 2018-1-10 01:37:23 | 显示全部楼层
确实是难得好帖啊,顶先

1

主题

4

帖子

240

金钱

新人求带

Rank: 1

积分
0
发表于 2018-1-10 02:15:05 | 显示全部楼层
额,看不懂在说神马~@_@

0

主题

1

帖子

15

金钱

新人求带

Rank: 1

积分
0
发表于 2018-1-10 10:46:06 | 显示全部楼层
想看看是什么样子~
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|小黑屋|微信小程序开发|教程|文档|资源汇总_即速论坛 ( 粤ICP备14097199号-1  

GMT+8, 2022-9-26 07:50 , Processed in 0.093035 second(s), 38 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表