forked from vinod8990/Phaser_Multiscreen_Example
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
117 lines (104 loc) · 4.35 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE HTML>
<html>
<head>
<title>Phaser Full Screen Mobile Example</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1, IE=9">
<meta name="format-detection" content="telephone=no">
<meta name="HandheldFriendly" content="true" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="HandheldFriendly" content="true" />
<meta name="robots" content="noindex,nofollow" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="apple-mobile-web-app-title" content="Phaser App">
<meta name="viewport" content="initial-scale=1 maximum-scale=1 user-scalable=0 minimal-ui" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- non-retina iPhone pre iOS 7 -->
<link rel="apple-touch-icon" sizes="57x57" href="icons/app_icon_57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="icons/app_icon_60x60.png">
<!-- non-retina iPad pre iOS 7 -->
<link rel="apple-touch-icon" sizes="72x72" href="icons/app_icon_72x72.png">
<!-- non-retina iPad iOS 7 -->
<link rel="apple-touch-icon" sizes="76x76" href="icons/app_icon_76x76.png">
<!-- retina iPhone pre iOS 7 -->
<link rel="apple-touch-icon" sizes="114x114" href="icons/app_icon_114x114.png">
<!-- retina iPhone iOS 7 -->
<link rel="apple-touch-icon" sizes="120x120" href="icons/app_icon_120x120.png">
<!-- retina iPad pre iOS 7 -->
<link rel="apple-touch-icon" sizes="144x144" href="icons/app_icon_144x144.png">
<!-- retina iPad iOS 7 -->
<link rel="apple-touch-icon" sizes="152x152" href="icons/app_icon_152x152.png">
<link rel="apple-touch-icon" sizes="256x256" href="icons/app_icon_256x256.png">
<link rel="apple-touch-icon" sizes="512x512" href="icons/app_icon_512x512.png">
<link rel="apple-touch-icon" sizes="1024x1024" href="icons/app_icon_1024x1024.png">
<link rel="stylesheet" href="css/stylesheet.css" type="text/css" charset="utf-8" />
<script src="src/lib/phaser.js"></script>
<script src="src/lib/ScaleManager2.js"></script>
<script src="src/game/scene/Boot.js"></script>
<script src="src/game/scene/Preloader.js"></script>
<script src="src/game/scene/MainMenu.js"></script>
<script src="src/game/scene/Game.js"></script>
</head>
<body>
<div id="game"></div>
<div id="orientation"></div>
<script type="text/javascript">
(function () {
//By default we set
BasicGame.screen = "small";
BasicGame.srx = Math.max(window.innerWidth,window.innerHeight);
BasicGame.sry = Math.min(window.innerWidth,window.innerHeight);
BasicGame.logicWidth = 480;
BasicGame.logicHeight = 320;
var r = BasicGame.logicWidth/BasicGame.logicHeight;
if(BasicGame.srx >= 360){
BasicGame.screen = "small";
BasicGame.gameWidth = 360;
}
if(BasicGame.srx >= 480){
BasicGame.screen = "normal";
BasicGame.gameWidth = 480;
}
if(BasicGame.srx >= 720){
BasicGame.screen = "large";
BasicGame.gameWidth = 720;
}
if(BasicGame.srx >= 960){
BasicGame.screen = "xlarge";
BasicGame.gameWidth = 960;
}
if(BasicGame.srx >= 1440){
BasicGame.screen = "xxlarge";
BasicGame.gameWidth = 1440;
}
//If on deskop, we may need to fix the maximum resolution instead of scaling the game to the full monitor resolution
var device = new Phaser.Device();
if(device.desktop){
BasicGame.screen = "large";
BasicGame.gameWidth = 720;
}
device = null;
BasicGame.gameHeight = BasicGame.gameWidth/r;
//We need these methods later to convert the logical game position to display position, So convertWidth(logicWidth) will be right edge for all screens
BasicGame.convertWidth = function(value){
return value/BasicGame.logicWidth * BasicGame.gameWidth;
};
BasicGame.convertHeight = function(value){
return value/BasicGame.logicHeight * BasicGame.gameHeight;
};
var game = new Phaser.Game(BasicGame.gameWidth,BasicGame.gameHeight, Phaser.AUTO, 'game');
// Add the States your game has.
// You don't have to do this in the html, it could be done in your Boot state too, but for simplicity I'll keep it here.
game.state.add('Boot', BasicGame.Boot);
game.state.add('Preloader', BasicGame.Preloader);
game.state.add('MainMenu', BasicGame.MainMenu);
game.state.add('Game', BasicGame.Game);
// Now start the Boot state.
game.state.start('Boot');
})();
</script>
</body>
</html>