Skip to content

Commit d1d6ebf

Browse files
committed
Auto Fullscreen (remove manual fullscreen option)
1 parent 21f49b9 commit d1d6ebf

File tree

7 files changed

+231
-384
lines changed

7 files changed

+231
-384
lines changed

README.md

Lines changed: 14 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,9 @@ Prince of Persia reimplementation written in HTML5 / JavaScript
1111

1212
- Browser: https://princejs.com
1313
- Use Landscape Mode (Single Tab, Disable Landscape Tab Bar in Browser Settings)
14-
- Force Fullscreen: https://princejs.com?fullscreen=true
1514
- Add to Home Screen to start as Fullscreen App
1615
- Reduced difficulty (50%):
17-
- https://princejs.com?strength=50&fullscreen=true
16+
- https://princejs.com?strength=50
1817
- Touch Controls (tap/drag area on screen):
1918

2019
![Mobile](assets/web/mobile.svg)
@@ -45,12 +44,11 @@ Url parameters are leveraged to save game state automatically (shortcut in brack
4544
- `time (t)`: Remaining Minutes (1-60, default: 60)
4645
- `strength (s)`: Guard Strength in "%" (0-100, default: 100)
4746
- `width (w)`: Game Width in "px" (default: 0 (fit to screen))
48-
- `fullscreen (f)`: Fullscreen mode (=100vh) (default: false)
4947
- `shortcut (_)`: Write url in shortcut version (default: false)
5048

5149
Default url looks as follows:
5250

53-
https://princejs.com?level=1&health=3&time=60&strength=100&width=0&fullscreen=false
51+
https://princejs.com?level=1&health=3&time=60&strength=100&width=0
5452

5553
Default shortcut url looks as follows:
5654

@@ -86,18 +84,18 @@ Custom levels can be played performing the following steps.
8684

8785
Converted levels from https://www.popot.org/custom_levels.php:
8886

89-
- [100](https://princejs.com?level=100): Tower of Revenge (own)
90-
- [101-114](https://princejs.com?level=101): [Prince of Persia Revisited](https://www.popot.org/custom_levels.php?mod=0000163)
91-
- [115-128](https://princejs.com?level=115): [Jaffar's House](https://www.popot.org/custom_levels.php?mod=0000220)
92-
- [129-142](https://princejs.com?level=129): [Ipank's Levels](https://www.popot.org/custom_levels.php?mod=0000151)
93-
- [143-156](https://princejs.com?level=143): [Barre's Alternative](https://www.popot.org/custom_levels.php?mod=0000189)
94-
- [157-170](https://princejs.com?level=157): [Miracles Don't Exist](https://www.popot.org/custom_levels.php?mod=0000098)
95-
- [171-184](https://princejs.com?level=171): [Babylon Tower Climb](https://www.popot.org/custom_levels.php?mod=0000109)
96-
- [185-198](https://princejs.com?level=185): [Lost in Errors](https://www.popot.org/custom_levels.php?mod=0000144)
97-
- [199-212](https://princejs.com?level=199): [Story Retold](https://www.popot.org/custom_levels.php?mod=0000146)
98-
- [213-226](https://princejs.com?level=213): [Prince of Persia Guard Revolt](https://www.popot.org/custom_levels.php?mod=0000162)
99-
- [227-240](https://princejs.com?level=227): [Return of Prince](https://www.popot.org/custom_levels.php?mod=0000207)
87+
- [100](https://princejs.com?level=100&strength=50): Tower of Revenge (own)
88+
- [101-114](https://princejs.com?level=101&strength=50): [Prince of Persia Revisited](https://www.popot.org/custom_levels.php?mod=0000163)
89+
- [115-128](https://princejs.com?level=115&strength=50): [Jaffar's House](https://www.popot.org/custom_levels.php?mod=0000220)
90+
- [129-142](https://princejs.com?level=129&strength=50): [Ipank's Levels](https://www.popot.org/custom_levels.php?mod=0000151)
91+
- [143-156](https://princejs.com?level=143&strength=50): [Barre's Alternative](https://www.popot.org/custom_levels.php?mod=0000189)
92+
- [157-170](https://princejs.com?level=157&strength=50): [Miracles Don't Exist](https://www.popot.org/custom_levels.php?mod=0000098)
93+
- [171-184](https://princejs.com?level=171&strength=50): [Babylon Tower Climb](https://www.popot.org/custom_levels.php?mod=0000109)
94+
- [185-198](https://princejs.com?level=185&strength=50): [Lost in Errors](https://www.popot.org/custom_levels.php?mod=0000144)
95+
- [199-212](https://princejs.com?level=199&strength=50): [Story Retold](https://www.popot.org/custom_levels.php?mod=0000146)
96+
- [213-226](https://princejs.com?level=213&strength=50): [Prince of Persia Guard Revolt](https://www.popot.org/custom_levels.php?mod=0000162)
97+
- [227-240](https://princejs.com?level=227&strength=50): [Return of Prince](https://www.popot.org/custom_levels.php?mod=0000207)
10098

10199
## Credits
102100

103-
- https://github.com/ultrabolido
101+
- https://github.com/ultrabolido

assets/web/game.css

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
html,
2+
body {
3+
width: 100%;
4+
height: 100%;
5+
margin: 0;
6+
padding: 0;
7+
background-color: black;
8+
}
9+
10+
@media (orientation: portrait) {
11+
html,
12+
body {
13+
overflow: hidden;
14+
}
15+
}
16+
17+
body,
18+
body * {
19+
-webkit-touch-callout: none;
20+
user-select: none;
21+
-webkit-user-select: none;
22+
overflow: hidden;
23+
}
24+
25+
canvas {
26+
width: 100% !important;
27+
height: 100% !important;
28+
object-fit: contain;
29+
}
30+
31+
.game {
32+
margin: auto;
33+
width: 100vw;
34+
height: calc(100vh - env(safe-area-inset-bottom, 0px));
35+
}
36+
37+
@media (orientation: portrait) {
38+
.game {
39+
height: 100%;
40+
}
41+
}
42+
43+
.game_container {
44+
display: block;
45+
touch-action: none;
46+
}
47+
48+
.flipped {
49+
transform: scaleY(-1);
50+
}

index.html

Lines changed: 1 addition & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
<link rel="apple-touch-icon" sizes="152x152" href="assets/web/touch-icon-152.png" />
1818
<link rel="apple-touch-icon" sizes="180x180" href="assets/web/touch-icon-180.png" />
1919
<link rel="manifest" href="site.webmanifest" />
20+
<link type="text/css" rel="stylesheet" href="assets/web/game.css" />
2021
<script src="lib/phaser.min.js"></script>
2122
<script src="src/Boot.js"></script>
2223
<script src="src/Preloader.js"></script>
@@ -49,40 +50,6 @@
4950
<script src="src/tiles/Star.js"></script>
5051
<script src="src/tiles/Sword.js"></script>
5152
<script src="src/tiles/Torch.js"></script>
52-
<style>
53-
html,
54-
body {
55-
width: 100%;
56-
height: 100%;
57-
margin: 0;
58-
padding: 0;
59-
background-color: black;
60-
}
61-
body,
62-
body * {
63-
-webkit-touch-callout: none;
64-
user-select: none;
65-
-webkit-user-select: none;
66-
}
67-
canvas {
68-
width: 100% !important;
69-
height: 100% !important;
70-
object-fit: contain;
71-
}
72-
.game {
73-
margin: auto;
74-
width: 100%;
75-
height: calc(100% - env(safe-area-inset-bottom, 0px));
76-
}
77-
@media all and (orientation: landscape) {
78-
.fullscreen.game {
79-
height: calc(100vh - env(safe-area-inset-bottom, 0px));
80-
}
81-
}
82-
.flipped {
83-
transform: scaleY(-1);
84-
}
85-
</style>
8653
</head>
8754
<body oncontextmenu="return false;">
8855
<div class="game" id="gameContainer"></div>

0 commit comments

Comments
 (0)