import Layout from "https://cdn.skypack.dev/minigame-canvas-engine";

import * as TWEEN from "https://cdn.skypack.dev/@tweenjs/tween.js@18.6.4";

​

/**

 * 只需要在Web端调试场景下引用

 * 引入minigame-canvas-engine-devtools之后，layoutDevtools会自动挂载到windows

 */

import LayoutDevTools from "https://cdn.skypack.dev/minigame-canvas-engine-devtools";

window.layoutDevtools.init(Layout);

​

const template = document.getElementById('template').innerHTML;

const style = eval(document.getElementById("style").innerHTML);

​

Layout.init(template, style);

​

let canvas = document.getElementById('canvas');

let context = canvas.getContext('2d');

​

// 设置canvas的尺寸和样式的container比例一致

canvas.style.width = 300 + 'px';

canvas.style.height = 300 + 'px';

canvas.width = 300;

canvas.height = 300;

​

Layout.updateViewPort(canvas.getBoundingClientRect());

Layout.layout(context);

​

const ball = Layout.getElementsByClassName('ball')[0];

// 将缓动系统的 update 逻辑加入 Layout 的帧循环

Layout.ticker.add(() => {

  TWEEN.update();

});

​

new TWEEN.Tween(ball.style)

  .to({ top: 250 }, 1000)

  .easing(TWEEN.Easing.Bounce.Out)

  .yoyo(true)

  .repeat(Infinity)

  .start();

​