import "https://cdn.skypack.dev/@next2d/player@latest";

​

const root = next2d.createRootMovieClip(240, 240, 60, {

    "tagId": "container",

    "fullScreen": true

});

​

const { Sprite } = next2d.display;

const { MouseEvent } = next2d.events;

const {

    TextField,

    TextFormat,

    TextFormatAlign

} = next2d.text;

​

const sprite = root.addChild(new Sprite());

sprite.name  = "rect";

sprite.x     = 70;

sprite.y     = 20;

​

sprite

    .graphics

    .beginFill("#7EA1C4")

    .drawRect(0, 0, 100, 60);

​

​

const textFormat = new TextFormat();

textFormat.size  = 8;

textFormat.bold  = true;

textFormat.align = TextFormatAlign.CENTER;

​

const xCircle1 = root.addChild(new Sprite());

xCircle1.x     = 90;

xCircle1.y     = 170;

​

xCircle1

    .graphics

    .beginFill("#7EA1C4")

    .lineStyle(2, "#1B365C")

    .drawCircle(0, 0, 10, 10);

​

xCircle1.buttonMode = true;

xCircle1.addEventListener(MouseEvent.CLICK, (event) => 

{

    event.target.root.rect.scaleX += 0.1;

});

​

const xTextField1 = xCircle1.addChild(new TextField());

xTextField1.defaultTextFormat = textFormat;

​

xTextField1.x = -51;

xTextField1.y = -5;

xTextField1.text = "x++";

​

const xCircle2 = root.addChild(new Sprite());

xCircle2.x     = 90;

xCircle2.y     = 200;

​

xCircle2

    .graphics

    .beginFill("#7EA1C4")

    .lineStyle(2, "#1B365C")

    .drawCircle(0, 0, 10, 10);

​

xCircle2.buttonMode = true;

xCircle2.addEventListener(MouseEvent.CLICK, (event) => 

{

    event.target.root.rect.scaleX -= 0.1;

});

​

const xTextField2 = xCircle2.addChild(new TextField());

xTextField2.defaultTextFormat = textFormat;

​

xTextField2.x = -51;

xTextField2.y = -5;

xTextField2.text = "x--";

​

​

const yCircle1 = root.addChild(new Sprite());

yCircle1.x     = 150;

yCircle1.y     = 170;

​

yCircle1

    .graphics

    .beginFill("#7EA1C4")

    .lineStyle(2, "#1B365C")

    .drawCircle(0, 0, 10, 10);

​

yCircle1.buttonMode = true;

yCircle1.addEventListener(MouseEvent.CLICK, (event) => 

{

    event.target.root.rect.scaleY += 0.1;

});

​

const yTextField1 = yCircle1.addChild(new TextField());

yTextField1.defaultTextFormat = textFormat;

​

yTextField1.x = -51;

yTextField1.y = -5;

yTextField1.text = "y++";

​

const yCircle2 = root.addChild(new Sprite());

yCircle2.x     = 150;

yCircle2.y     = 200;

​

yCircle2

    .graphics

    .beginFill("#7EA1C4")

    .lineStyle(2, "#1B365C")

    .drawCircle(0, 0, 10, 10);

​

yCircle2.buttonMode = true;

yCircle2.addEventListener(MouseEvent.CLICK, (event) => 

{

    event.target.root.rect.scaleY -= 0.1;

});

​

const yTextField2 = yCircle2.addChild(new TextField());

yTextField2.defaultTextFormat = textFormat;

​

yTextField2.x = -51;

yTextField2.y = -5;

yTextField2.text = "y--";