itch.io

Hi, 

I'm wondering if it is possible to save data client side or even server side (I doubt for this one) ? 

I did a quick search and it seems that it is possible to save some data locally : 

https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API#localStorage 

Does someone already did on a HTML5 Game here ?  some experience to share ? 

I think that my problem is solved, thank you ! : )

My game has a original resolution of 1024 / 720

here is the javascript code I use for get the body size and resize canvas.

function getBodySize() {

var w = window,

d = document,

e = d.documentElement,

g = d.getElementsByTagName('body')[0],

x = w.innerWidth || e.clientWidth || g.clientWidth,

y = w.innerHeight|| e.clientHeight|| g.clientHeight;

if (x != new_W || y != new_H) {

new_W = x;

new_H = y;

resizeCanvas();

}

}

function resizeCanvas() {

var new_canvas_W = W;

var new_canvas_H = H;

if (W > Body_W || H > Body_H) {

new_canvas_W = Body_W;

new_canvas_H = H / 1024 * Body_W;

if (H > Body_H) {

new_canvas_W = W / 720 * Body_H ;

new_canvas_H = Body_H;

}

}

if (new_canvas_W != canvas.width || new_canvas_H != canvas.height) {

canvas.width = new_canvas_W;

canvas.height = new_canvas_H;

}

stage.scaleX = new_canvas_W / 1024;

stage.scaleY = new_canvas_H / 720;

stage.update();

}

or see paste bin, its more readable https://pastebin.com/hdgnYSVX

I call it periodically in my game loop (every 100 ticks) and everywhere I can . I'm not sure.. but I think it is a bad idea to use the body width and height because its size seems to change after the canvas size has changed : I noticed that in landscape, the canvas grows up its width correctly then just after it grows up again a little more ..., 5 or 6 times. Also If you read the stackoverflow links I give, there is that really annoying problem which does that when you change the tablet orientation, depending of the brower and the model it doesn't act the same way and the body size.

but again, I really lacks of experience with all of this... Could you provide me the code you use for resize ?

Hi everyone, first post in the community,

I'm currently trying to do a little game using EaselJS but I really lack of knowledge about HTML5 and how to handle mobile device. I found some games on itch.io that works very well but they use a different framework like Phaser or Construct 2. For exemple, Tresure Hunter resize correctly in all the browser I tested (Safari, Chrome on windows desktop, Androïd).

Because they use the different framework, it's hard to figure out what they really does for resize correctly..

What I do for the moment is get the width and the height from the body of the itch.io for resize the canvas, but I think that's a bad idea.

Also, I think I've a problem that looks like the one described on Stack Overflow :

http://stackoverflow.com/questions/7919172/what-is...

Here is the meta tags I use in my index.html file :

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">

<meta name="apple-mobile-web-app-capable" content="yes">

<meta name="apple-mobile-web-app-status-bar-style" content="black">

<meta name="HandheldFriendly" content="true">

<meta name="mobile-web-app-capable" content="yes">

I admit I stoled these lines in the index.html file from the game Teasure Hunter, I don't understand everything

The canvas in a <div> :

<div>

<canvas id="canvas" width="1024" height="720" >

</canvas>

</div>

And Here is the CSS code I use :

html, body{

width: 100%;

height: 100%;

}

* {

margin: 0;

padding: 0;

}

body {

overflow: hidden;

margin: 0;

padding:0;

position:relative;

}

canvas {

touch-action: none;

display: block;

user-select: none;

margin-left: 0px;

margin-top: 0px;

background-color: black;

}

In advance, thanks for your help and sorry for my bad english ! :s