基于微信开发工具的微信游戏介绍(如何开发一款微信游戏)

文章很详细，让你快速入门。首先安装开发工具，进入开发者工具下载页面，根据自己的操作系统下载相应的安装包进行安装。接下来可以开发微信游戏。

你的第一个小游戏

新建项目选择applet项目，并选择存储代码的硬盘路径。目前小游戏不提供公开注册，可以使用AppID-free模式点击体验小游戏。给你的项目取一个好听的名字。最后勾选“创建游戏快速入门模板”(注意:你要选择一个空目录才有这个选项)，点击确定，你就得到你的第一个小游戏了。

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

真机预览

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

文件结构

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

Game.js小游戏入门文件

Game.json配置文件

部署

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

设备定位

示例配置

一个

2

三

四

五

六

七

八

九

{ 设备定位 : 肖像 ， 网络超时 :{ 请求 :5000， 连接插座 :5000， 上传文件 :5000， 下载文件 :5000 }}wx API

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

创建画布

调用wx.createCanvas()接口创建画布对象。

一个

Varcanvas = wx.createCanvas()此时创建的画布已经显示在屏幕上，并且与屏幕同宽同高。

一个

Console.log (canvas.width，canvas.height)。但是canvas是透明的，因为它不是画在画布上的。使用2d渲染上下文进行简单的绘制，您可以在屏幕的左上角看到一个100x100的红色矩形。

一个

2

三

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

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

一个

2

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

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

一个

Var = 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；Offcontext.fillrect (0，0，100，100)为了让这个红色矩形显示在屏幕上，我们需要将屏幕外的画布绘制到屏幕上的画布上。

一个

2

var screen context = screen canvas . get context( # 39；2d # 39)screen context . draw image(off screen canvas，0，0)动画

在JavaScript中，一般通过SetInterval/SetTimeout/RequestAnimationFrame来实现动画效果。小游戏为这些API提供支持:

setInterval()

setTimeout()

requestAnimationFrame()

clearInterval()

clearTimeout()

cancelAnimationFrame()

此外，还可以通过wx.setpreferredFrameServer()修改requestAnimationFrame回调函数的执行频率，以降低性能消耗。

触摸事件

响应用户与屏幕的交互是游戏必不可少的一部分。参考DOM中的TouchEvent，小游戏提供了以下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 . ontouchcancel(function(e){ console . log(e . touches)相关文章:

五个微信游戏的技术点

微信公众平台开发实现2048游戏的方法，公众2048

相关视频:

0基础微信开发入门视频教程以上是基于微信开发工具的微信游戏的介绍细节。请多关注主机参考其他相关文章！

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

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

本文由主机参考刊发，转载请注明：基于微信开发工具的微信游戏介绍(如何开发一款微信游戏) https://zhujicankao.com/79844.html