基于微信开发工具的微信游戏介绍（微信游戏开发）

文章对此进行了详细解释，以便您快速入门。首先安装开发工具，进入开发者工具下载页面，根据自己的操作系统下载相应的安装包进行安装。接下来，我们可以开发微信游戏。

你的第一个小游戏

为新项目选择applet项目，并选择存储代码的硬盘路径。目前小游戏不提供公开注册，可以点击体验小游戏使用免AppID模式。给你的项目取一个好听的名字，最后，选中“创建游戏快速启动模板”（注意:你必须选择一个空目录才能有这个选项），单击“确定”，你将得到你的第一个小游戏。

单击顶部菜单上的编译，在IDE中预览您的第一个游戏。

真机预览

点击工具上的编译按钮，在工具左侧的模拟器界面中查看这个小游戏的性能。点击预览按钮，通过微信扫一扫，在手机上体验你的第一个小游戏。

文件结构

游戏只有以下两个必要文件:

Game.js小游戏入口文件

Game.json配置文件

部署

游戏开发者在根目录下写一个game.json文件进行配置，开发者工具和客户端需要读取这个配置来完成相关的界面渲染和属性设置。

设备定位

样本配置

一个

2

三

四

五

六

七

八

九

{“device orientation“:“portrait“，“network time out“:{“request“:5000，“connect socket“:5000，“upload file“:5000，“download file“:5000 } } wx API

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

创建画布

您可以通过调用wx.createCanvas（）接口来创建画布对象。

一个

Varcanvas = wx.createCanvas（）此时创建的画布已经以与屏幕相同的宽度和高度显示在屏幕上。

一个

控制台。原木（画布。画布宽度。高度）但是因为它不是在画布上绘制的，所以画布是透明的。使用2d渲染上下文进行简单绘制时，您可以在屏幕左上角看到一个100x100的红色矩形。

一个

2

三

var context = canvas . get context（& # 39；2d & # 39）context.fillStyle = & # 39红色& # 39；context . fill rect（0，0，100，100）可以通过Canvas.getContext（）方法获取2d或WebGL的RenderingContext，并调用渲染上下文的drawing方法在画布上进行绘制。游戏基本支持2d和WebGL 1.0的所有属性和方法。详细信息请参见RenderingContext。由于使用WebGL的绘制过程比较复杂，本文中的示例代码都是用2d渲染上下文的绘制方法编写的。

您可以通过设置width和height属性来更改画布对象的宽度和高度，但这也将导致画布内容的清空和渲染上下文的重置。

一个

2

画布。宽度= 300画布。高度= 300显示图片。

您可以通过wx.createImage（）接口创建一个图像对象。图像对象可以加载图片。当图像对象被绘制在画布上时，图片将显示在屏幕上。

一个

VarImage = wx.createImage（）设置Image对象的src属性以加载本地映像或网络映像。加载图像时，将执行注册的onload回调函数。此时，可以在画布上绘制图像对象。

一个

2

三

四

五

image . onload = function（）{ console . log（image . width，image . height）context . draw image（image，0，0）} image . src = & # 39；logo.png & # 39创建多个画布

在整个游戏运行过程中，第一次调用wx.createCanvas接口会创建一个上部屏幕画布。在这块画布上绘制的所有内容都将显示在屏幕上。第二次和第三次调用wx.createCanvas将创建一个离屏画布。在屏幕外画布上绘制的内容仅在屏幕外画布上绘制，不会显示在屏幕上。

以下面的代码为例。运行后，您会发现屏幕上（0，0）的位置没有显示100x100的红色矩形。因为我们是在屏幕外的画布上画的。

一个

2

三

四

五

var screen canvas = wx . create canvas（）var offscreen canvas = wx . create canvas（）var off context = offscreen canvas . get context（& # 39；2d & # 39）off context . fill style = & # 39；红色& # 39；off context . fill rect（0，0，100，100）为了在屏幕上显示这个红色矩形，我们需要将屏幕外的offScreenCanvas绘制到上部屏幕的ScreenCanvas上。

一个

2

var screen context = screen canvas . get context（& # 39；2d & # 39）screen context . draw image（offscreen canvas，0，0）动画

在JavaScript中，动画效果一般通过setinterval/settimeout/requestanimationframe来实现。小游戏支持这些API:

setInterval（）

setTimeout（）

requestAnimationFrame（）

间隙（）

clearTimeout（）

cancelAnimationFrame（）

此外，还可以通过wx.setPreferredFramesPerSecond（）修改执行requestAnimationFrame回调函数的频率，以减少性能消耗。

触摸事件

响应用户与屏幕的交互是游戏的重要组成部分。关于DOM中的触摸事件，小游戏提供了以下API来监视触摸事件:

wx.onTouchStart（）

wx.onTouchMove（）

wx.onTouchEnd（）

wx.onTouchCancel（）

01

02

03

04

05

06

07

08

09

10

11

12

13

14

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 . ontouchcan

五款微信游戏的技术要点

《2048游戏在微信公众平台的开发和实现方法》，公众号2048。

相关视频:

0基础微信开发入门视频教程

以上是基于微信开发工具的微信游戏介绍的详细内容。更多资讯请关注主机参考其他相关文章！

这几篇文章你可能也喜欢：

• 了解如何用pixi.js开发微信游戏(pixijs微信游戏)
• 基于微信开发工具的微信游戏介绍(如何开发一款微信游戏)

本文由主机参考刊发，转载请注明：基于微信开发工具的微信游戏介绍（微信游戏开发） https://zhujicankao.com/104699.html