最新时时彩平台演示 中新时时彩要不要交税 新时时彩三星组六技巧 最新时时彩源码修改 新时时彩遗漏走势图 新时时彩预测方法 新时时彩计算器 新时时彩开奖皇冠网址 新时时彩组三怎么玩 最新时时彩后四稳赚 新时时彩官方开奖网站 新时时彩人工计划 新时时彩开奖漏洞 新时时彩最长遗漏 新时时彩中奖顺序 360新时时彩技巧-轴承资讯 新时时彩停售 最新时时彩杀号高手 新时时彩三星走势图 玩新时时彩有什么技巧 新时时彩3星和尾走势 新时时彩后一公式 重新时时彩网站 新时时彩遗漏统计软件 吉林新时时彩走势图 新时时彩中奖怎么查 新时时彩是什么地方 新时时彩中奖怎么查 新时时彩下载手机版下载 新时时彩贴吧 最新时时彩计划软件 大赢家新时时彩 新时时彩注册送彩金 新时时彩组选投注技巧 新时时彩走势图 新时时彩万能5码 新时时彩模拟 新疆新时时彩往期开奖号码 新时时彩的玩法 新时时彩稳赚计划 最新时时彩70注 新时时彩返奖率 新时时彩杀号定胆360 新时时彩后二杀号 新时时彩振幅走势 最新时时彩教程 新时时彩后台软件 新时时彩几点开始 新时时彩日赚几百 最新时时彩注册送20
用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

517

主题

888

帖子

1万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
11817
快速上手安装开发工具
前往 开发者工具下载页面 ,根据自己的操作系统下载对应的安装包进行安装。

你的第一个小游戏
新建项目选择小程序项目,选择代码存放的硬盘路径。 目前小游戏不提供公开注册,可点击体验小游戏使用无 AppID 模式。 给你?#21335;?#30446;起一个好听的名字,最后,勾选“建立游戏快速启动模板”(注意:你要选择一个空的目录才会有这个选项),点击确定,你就得到了你的第一个小游戏了。

点击顶部菜单编译就可以在 IDE 预览你的第一个小游戏。


真机预览
点击工具上的编译按钮,可以在工具的左侧模拟器界面看到这个小游戏的表现。点击预览按钮,通过微信的扫一扫在?#21482;?#19978;体验你的第一个小游戏。


文件结构
小游戏只有以下两个必要文件:
  • game.js 小游戏入口文件
  • game.json 配置文件

配置
小游戏开发者通过在根目录编写一个 game.json 文件进?#20449;?#32622;,开发者工具和客户端需要读取这个配置,完成相关界面渲染和属性设置。


deviceOrientation


示例配置
[JavaScript] 纯文本查看 复制代码
{
    "deviceOrientation": "portrait",
    "networkTimeout": {
        "request": 5000,
        "connectSocket": 5000,
        "uploadFile": 5000,
        "downloadFile": 5000
    }
}
wx API

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

创建 Canvas
调用 wx.createCanvas() 接口,可以创建一个 Canvas 对象。
[JavaScript] 纯文本查看 复制代码
var canvas = wx.createCanvas()
此时创建的 canvas 已经显示在了屏幕上,且与屏幕等宽等高。
[JavaScript] 纯文本查看 复制代码
console.log(canvas.width, canvas.height)
但是由于没有在 canvas 上进行绘制,所以 canvas 是透明的。使用 2d 渲染上下文的进行简单的绘制,可以在屏幕左上角看到一个 100x100 的红色矩形。
[JavaScript] 纯文本查看 复制代码
var context = canvas.getContext('2d')
context.fillStyle = 'red'
context.fillRect(0, 0, 100, 100)
通过 Canvas.getContext() 方法可以获取 2d 或 WebGL 渲染上下文 RenderingContext,调用渲染上下文的绘制方法可以在 Canvas 上进行绘制。小游戏基本上支持 2d 和 WebGL 1.0 所有的属性和方法,详情请见 RenderingContext。由于使用 WebGL 的绘制过程较为复杂,所以本文中的示例代码都以 2d 渲染上下文的绘制方法编写。
通过设置 width 和 height 属性可以改变 Canvas 对象的宽高,但这?#19981;?#23548;致 Canvas 内容的清空和渲染上下文的重置。
[JavaScript] 纯文本查看 复制代码
canvas.width = 300
canvas.height = 300

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

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

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

触摸?#24405;?/font>
响应用户与屏幕的?#25442;?#26159;游戏中必不可少的部分,小游戏参照 DOM 中的 TouchEvent 提供了以?#24405;?#21548;触摸?#24405;?#30340; API:
[JavaScript] 纯文本查看 复制代码
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)


微信小游戏资讯+教程



微信小游戏Demo

分享至 : QQ空间
17 人收藏
有问题请在本站内搜索相应关键词,假如无法解决请在综合交流区内发帖咨询,发帖时请提供详细的问题描述、相关图片及代码。
还可以加QQ交流群咨询:536592077。
2018-1-29 11:49:15 shepherd 新手上路
沙发
赞一个
学习下

赞一个
66666
2018-10-7 21:07:42 w祥38 新手上路
6#
赞一个
发新帖
您需要登录后才可以回帖 登录 | 立即注册
新时时彩软件
摩纳哥2平方公里多大 二分彩 北京快三开奖 三国杀十周年版本 罗马2全面战争原画 英国纽卡斯尔一年天气 龙的财富电子 大乐透13072 不给糖就捣蛋怎么玩 赫罗纳对西班牙人预测 欢乐球吃球为什么没了 网球冠军女