机器翻译正文由机器翻译自项目原始文档（英文），排版经程序统一处理，可能存在偏差，请以原项目仓库为准。

[!警告]
该项目仍处于“Alpha”阶段。可能会频繁出现重大更改。欢迎并感谢所有反馈。

功能

• 小巧：仅 ~4KB（压缩并 gzip 处理）。
• 简单的 API：只有少量函数用于绘制形状和一些实用工具。
• ZzFX：使用 ZzFX 播放或创建音效。
• 可扩展：使用或创建 插件 来添加功能或修改引擎。
• 游乐场：访问或安装 游乐场 Web 应用来编码和分享游戏（甚至可离线）。

入门

你可以在 Playground 中玩转 Litecanvas，无需安装任何东西。

如果你想在本地测试，只需使用其中一个安装选项。

HTML/CDN

创建一个 HTML 文件，并添加一个 <script> 标签，使用以下 CDN 链接之一：

Unpkg

<script src="https://unpkg.com/litecanvas"></script>

jsDelivr

<script src="https://cdn.jsdelivr.net/npm/litecanvas"></script>

ESM 模板

对于熟悉 Node/NPM 的人，我们有一个 基本模板。

应用程序编程接口

基本游戏结构

litecanvas({
    // This is required only in ESM format.
    // Note: the next examples will assume that you are
    // testing through the playground or the CDN
    loop: { init, update, draw },
})

function init() {
    // this functions is called one time only
    // before the game starts
}

function update(dt) {
    // this functions is called 60 times per second
    // your game logic goes here
}

function draw() {
    // this functions is called 60 times per second
    // your game rendering goes here
}

注意：如果你通过 NPM 安装，你需要先导入该包：

import litecanvas from "litecanvas"

设置游戏屏幕的宽度和高度

// example: a game screen size equal to 480x360
litecanvas({
    width: 480,
    height: 360,
})

颜色

Litecanvas 有一个默认调色板，包含 4 种颜色：

每次 Litecanvas 的函数需要颜色时，你应该使用这些颜色中的一种，通过它的索引。

// example: draw a white rectangle
let color = 3
rectfill(0, 0, 32, 32, color)

注意：您可以使用 pal() 功能自定义颜色调色板。示例

打印消息

litecanvas()

function draw() {
    // clear and fill the game screen with color #0 (black)
    cls(0)

    // print a gray (color #1) text at x=0, y=0
    text(0, 0, 'Hello!!!', 1)

    // use \n to break text lines
    text(0, 30, 'multi\nline\ntext')
}

默认情况下，文本为白色（颜色 #3）。

实时演示

绘制形状

您可以使用以下函数来绘制形状：

• rect(x, y, width, height, color) 绘制矩形轮廓
• rectfill(x, y, width, height, color) 绘制填充颜色的矩形
• circ(x, y, radius, color) 绘制圆形轮廓
• circfill(x, y, radius, color) 绘制填充颜色的圆形
• oval(x, y, rx, ry, color) 绘制椭圆轮廓
• ovalfill(x, y, rx, ry, color) 绘制填充颜色的椭圆

litecanvas()

function draw() {
    cls(0)

    // draw a color filled rectangle at x=10 and y=20
    // with width=32 and height=32
    // and color=3 (white)
    rectfill(10, 20, 32, 32, 3)

    // draw a circle outline at x=64 and y=96
    // with radius=50
    // and color=1 (gray)
    circ(64, 96, 50, 1)
}

实时演示

绘制精灵

litecanvas({
    width: 128,
})

// you can create sprites with strings
// each visible char is a pixel
// numbers are colors
// dots are transparent pixels
let smile = `
    .333333.
    33333333
    33033033
    33033033
    33333333
    30333303
    33000033
    .333333.`

function draw() {
    cls(0)

    spr(
        0,
        0, // position X Y
        smile // the pixels
    )
}

实时演示

创建和绘制图像

litecanvas()

// lets create a flag of Japan
let japanFlag = paint(
    48,
    32, // the image width and height

    // we call theses operations once to create a image
    function () {
        // lets modify the litecanvas palette to white and red
        pal(['#fff', '#bd0029'])

        // lets draw the flag
        cls(0) // the white
        circfill(24, 16, 8, 1) // the sun

        // reset the palette
        pal()
    },
    {
        // you can scale your image
        // by default, scale=1
        scale: 4,
    }
)

function draw() {
    cls(0)

    // draw the our generated japanFlag image
    image(
        W / 2 - japanFlag.width / 2, // game screen center X
        H / 2 - japanFlag.height / 2, // game screen center Y
        japanFlag // the image
    )
}

实时演示

注意：当你需要每次以相同的方式绘制某物时，它非常有用。通过这种方式，你可以创建该绘图的图像，起到一种缓存的作用。

你也可以绘制 PNG/JPG 图像文件，但你需要先加载它们：

litecanvas()

let myImage

function init() {
    // load a image from its URL
    let img = new Image()
    img.onload = () => {
        myImage = img
    }
    img.src = 'https://litecanvas.js.org/icons/icon-128.png'
}

function draw() {
    cls(0)

    if (!myImage) {
        // if not loaded, show this message
        text(10, 10, 'Loading image...')
    } else {
        // when loaded, draw the image file
        image(0, 0, myImage)
    }
}

实时演示

如果你需要加载多个资源（图片、字体、音乐等），我推荐你使用 资源加载插件。

键盘

litecanvas()

function update() {
    if (iskeydown('space')) {
        // checks if the spacebar key is down
    }

    if (iskeypressed('a')) {
        // checks if the "a" key was pressed
    }

    // Returns the last key pressed in your keyboard.
    let key = lastkey()
}

注意：您可以调用 iskeydown() 或 iskeypressed()（无参数）来检查任何密钥。

点击和触摸

litecanvas()

let x, y

function tapped(tapX, tapY) {
    // this function is called when a click or a touch happens
    // tapX and tapY is where the tap happened
    x = tapX
    y = tapY
}

function draw() {
    cls(0)

    if (x != null) {
        // Draw a white circle wherever you tap
        circfill(x, y, 32, 3)
    }
}

鼠标光标

使用 MX 和 MY 变量（由 Litecanvas 自动声明）来跟踪鼠标光标的位置。

litecanvas()

function draw() {
    cls(0)

    // draw a white circle in the mouse cursor's position
    circfill(MX, MY, 32, 3)
}

Litecanvas 的变量

像 MX 和 MY，Litecanvas 也声明了这些其他变量：

• W：游戏画布的宽度
• H：游戏画布的高度
• T：自游戏开始以来的秒数
• PI：大约 3.14 弧度（或 180 度）
• TAU：大约 6.28 弧度（或 360 度）

还有更多！

你可以在我们的 cheatsheet 上找到 litecanvas 提供的所有内容的完整列表。

演示

在游乐场尝试一些演示：

• 弹跳球
• 滚动器
• 3D 投影
• 渲染基准

在 samples 文件夹中查看其他演示

贡献

1. 分叉这个仓库并克隆它。
2. 安装依赖项： npm i
3. 创建一个新分支并进行你的更改。
4. 格式化代码： npm run format
5. 如果需要，在 tests 目录下创建新的测试。
6. 使用 npm run test 进行测试
7. 创建你的拉取请求。
8. 完成！

注意：你需要在你的电脑上安装 Node.JS。

灵感

• floppy：面向初学者的微型游戏引擎。
• PICO-8：用于制作、分享和玩小型游戏的幻想主机。
• js13kGames：一个 JavaScript 编程竞赛，文件大小限制为 13 千字节。
• raylib：一个简单且易于使用的游戏开发库。
• p5.js/Processing：一个创意编码库。
• Pygame Zero：一个适用于 Python 3 的零模板游戏编程框架。