Html5 Game Development Strategy (Canvas settings)

To draw a game scene on the page, we must have a canvas ).

Let's talk about how to set the canvas ~

Xiami? You will be there long ago? Canvas. getContext ("2d ")?

Then you are wrong. You can learn more here. Let's continue.

First, we need to know the canvas resolution settings.

In general, the standard 4: 3 Resolution of the game is 800X600, 1024X768. 960X540, 1366X768.

Suppose we want to stretch a 800X600 canvas to 1024X768. What should we do?

Do you directly set the width and height of the canvas to 1024X768? This is obviously not a stretch.

In fact, this involves a key point: hardware scaling.

Css is used in general front-end operations, which is no exception here.

Suppose we have such an element:

<canvas id="gameCanvas" width="800" height="600"></canvas>

Then we add the following css:

#gameCanvas{    width: 1024px;    height: 768px;}

If you draw something in the canvas, you will find that, wow ~ Actually scaled!

In addition, the zooming here is the hardware zooming, so the performance will be very high (provided that the device supports hardware acceleration ).

Through the above method, we know how to scale hardware. If you have already bound a mouse event before, you will find that, how can I use the mouse to retrieve the X and Y displayed in the X and Y figures? What should I do?

This is because we set the size to 1024X768 while the actual size is X. During this period, the image in the canvas has been scaled proportionally. Therefore, we need to manually calculate to make up for the difference.

Pseudo formula: Mouse X * (canvas width/css setting width) = map the mouse to the X position of the resolution used for painting

Insert the formula to calculate (assuming the current cursor is at 550X300): 550 * (800/1024) ≈ 430

Therefore, it is calculated that the current X position of the mouse points to the 430 position drawn in the canvas.

The Y position of the mouse is the same.

Okay ~ We have introduced how to scale hardware and how to get the point pointed by the mouse.

Next, let's use the above two methods to achieve a year-on-year scaling effect!

What is yoy scaling? See the figure below:

We can see that no matter how we scale the browser, the aspect ratio of the canvas remains unchanged.

This is what we need. Let's implement it now!

Step 1: Calculate the original aspect ratio. Assume that our canvas has a x resolution. So the aspect ratio is: 800/600 ≈ 1.33

Step 2: Define a function to calculate the zoom value based on the width and height of the upper layer element. Calculate the zooming value and the original width and height. Displays the elements in the upper element center.

Function resize () {// obtain the canvas Element var canvas = document. getElementById ("gameCanvas"); // upper-layer element of the canvas Element var pe = canvas. parentElement | canvas. parentNode | document. body; // the width and height of the upper layer of the Canvas Element var pw = pe. clientWidth; var ph = pe. clientHeight; // the width and height of the canvas Element var width = canvas. width; var height = canvas. height; // scaling value var scaling = Math. min (pw/width, ph/height); // you can specify the new width and height of the canvas. style. width = (width * scaling) + "px"; canvas. style. height = (height * scaling) + "px"; // if the current canvas is in the body, it is displayed in the center if (pe = document. body) {canvas. style. marginTop = (ph-height * scaling)/2) + "px"; canvas. style. marginLeft = (pw-width * scaling)/2) + "px" ;}// bind the event window. addEventListener ("resize", resize, false); // force the single-screen application mode if (pe = document. body) {var ss = document. createElement ("style"); ss. innerHTML = "html, body {margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden;}"; document. getElementByTagName ("head "). item (0 ). appendChild (ss );}

That's all !~

The final year-on-year scaling plus the previous mouse position calculation is a perfect adaptive application resolution !~

This is a simple but often overlooked process.

In addition, when using the Fullscreen API in combination with this method, some computing errors may occur. You only need to modify a small part of the above Code to solve this problem. Leave it as a job ~! If you are not sure, leave salt in your comments ~~~~

Put the lastDemoEnd ~ Please look forward to the next article ~