极速快3精准计划|极速快3有规律吗
用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

519

主題

893

帖子

1萬

積分

管理員

Rank: 9Rank: 9Rank: 9

積分
12055
2018-1-5 17:59:00 Rolan 管理員 樓主 454255
快速上手安裝開發工具
前往 開發者工具下載頁面 ,根據自己的操作系統下載對應的安裝包進行安裝。

你的第一個小游戲
新建項目選擇小程序項目,選擇代碼存放的硬盤路徑。 目前小游戲不提供公開注冊,可點擊體驗小游戲使用無 AppID 模式。 給你的項目起一個好聽的名字,最后,勾選“建立游戲快速啟動模板”(注意:你要選擇一個空的目錄才會有這個選項),點擊確定,你就得到了你的第一個小游戲了。

點擊頂部菜單編譯就可以在 IDE 預覽你的第一個小游戲。


真機預覽
點擊工具上的編譯按鈕,可以在工具的左側模擬器界面看到這個小游戲的表現。點擊預覽按鈕,通過微信的掃一掃在手機上體驗你的第一個小游戲。


文件結構
小游戲只有以下兩個必要文件:
  • game.js 小游戲入口文件
  • game.json 配置文件

配置
小游戲開發者通過在根目錄編寫一個 game.json 文件進行配置,開發者工具和客戶端需要讀取這個配置,完成相關界面渲染和屬性設置。


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 來完成創建畫布、繪制圖形、顯示圖片以及響應用戶交互等基礎功能。

創建 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 對象的寬高,但這也會導致 Canvas 內容的清空和渲染上下文的重置。
[JavaScript] 純文本查看 復制代碼
canvas.width = 300
canvas.height = 300

顯示圖片
通過 wx.createImage() 接口,可以創建一個 Image 對象。Image 對象可以加載圖片。當 Image 對象被繪制到 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 上繪制的內容都將顯示在屏幕上。而第二次、第三次等后幾次調用 wx.createCanvas 創建的都會是離屏 Canvas。在離屏 Canvas 上繪制的內容僅僅只是繪制到了這個離屏 Canvas 上,并不會顯示在屏幕上。
以如下代碼為例,運行后會發現屏幕上并沒有在 (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 回調函數的頻率,以降低性能消耗。

觸摸事件
響應用戶與屏幕的交互是游戲中必不可少的部分,小游戲參照 DOM 中的 TouchEvent 提供了以下監聽觸摸事件的 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#
贊一個
發新帖
您需要登錄后才可以回帖 登錄 | 立即注冊
极速快3精准计划 竞彩足球奖金计算器 老重时时彩走势图片 时时彩龙虎怎么刷流水 云尚时时彩平台 澳门21点详细玩法 时时彩之稳赚不赔法 马会绝密资料 创富彩票平台下载 广东时时开奖结果 pk10大了就输小了就赢