Solutions to adaptive browser size changes in the location of common game elements in web games

A common feature of web games is that when you change the browser size, some element locations, such as chat boxes, automatically change with the browser, how can this function be implemented?

Ha, the solution is to listen to the changes on the stage and obtain the wide height of the changed stage. stagewidth, stage, stageheight), and then change the positions of each element on the stage based on the width and height of the new stage.

Code test:

<? XML version = "1.0" encoding = "UTF-8"?>
<S: Application xmlns: FX = "http://ns.adobe.com/mxml/2009"
Xmlns: S = "Library: // ns.adobe.com/flex/spark"
Xmlns: MX = "Library: // ns.adobe.com/flex/mx" addedtostage = "application1_1_addedtostagehandler (event)" minwidth = "955" minheight = "600">

<FX: SCRIPT>
<! [CDATA [
Protected function application1_addedtostagehandler (Event: Event): void
{
Stage. addeventlistener (event. Resize, resizehandler );
Changebtnpositon ();
}

Private function resizehandler (Event: Event): void
{
Trace (stage. stagewidth, stage. stageheight );
Changebtnpositon ();
}

Private function changebtnpositon (): void
{
BTN. x = (stage. stageWidth-btn.width)/2;
BTN. Y = (stage. stageHeight-btn.height)/2;
}
]>
</FX: SCRIPT>

<FX: declarations>
<! -- Place non-visual elements (such as services and value objects) Here -->

</FX: declarations>
<S: button id = "BTN" x = "251" Y = "288" width = "125" Height = "54" label = "This button is always centered"/>
</S: Application>

The Code test is correct.

Solutions to adaptive browser size changes in the location of common game elements in web games