Mobile Surface Game HTML Markup

Free HTML5 Game Tutorial for Beginners: Page 32

Shared Style Sheet Vertical Only Style Sheet Vertical HTML Markup
Body Tag for Mobile Game

Responsive Web Design

This tutorial series was originally written before responsive Web design became common. The game design uses much of the same source code yet different HTML layouts. One Web page displays the mobile version of the game and another page displays the desktop game.

Most free Web and game development tutorials, at SevenThunderSoftware.com, scale and arrange nicely for desktop and mobile devices. Styles change based on device orientation, screen width, and other properties. Designers can display the same Web page on different devices. It's best to prepare one Web page to run the game on a set of devices and desktops. Use different style sheets or flexible styles.

Unfortunately the Surface Game uses slightly different source code for desktop and mobile devices. The HTML markup is slightly different too. Players can drag digits across the screen on mobile phones. Players tap and drop digits on desktop computers. The product requirements view specification includes separate horizontal and vertical layouts for computers and mobile devices, respectively.

Separate view specifications provide some insight into the needs of mobile versus desktop game players. However it's more efficient and versatile to use the same source code and HTML Web page, with different style sheets or flexible styles.

Shared Style Sheet

The style sheet surface-game.css is shared by both the vertical and horizontal layout of the Surface Game. The following listing includes all of surface-game.css.

body,canvas{
background-color:#000099;
color:white;
font-family:verdana, arial, sans-serif;
}

h1{ 
font-family:Impact, Charcoal, sans-serif; 
font-weight:normal; 
font-size:x-large; 
}
 
div.content{
margin-left:auto; 
margin-right:auto;
}
 
img#im{
clear:both; 
width:100%;
} 
  
div.info{
color:white; 
clear:both;
width:100%;
text-align:center; 
font-weight:bold; 
}
  
#eText{
color:white; 
font-weight:bold;
width:100%; 
text-align:center; 
}
  
button{
color:white;
border:solid 1px blue; 
background: #1929e0;  
background: -moz-linear-gradient(top,  #1929e0,  #137fff);    
background: -webkit-linear-gradient(top,  #1929e0, #137fff); 
background: -o-linear-gradient(top,  #1929e0, #137fff);    
background: linear-gradient(top,  #1929e0, #137fff);
}
 
a{
color:white;
}
a:link{
color:white;
}
a:visited{
color:white;
}
a:hover{
color:white; 
font-weight:bold;
}
a:active{
color:white;
}
 
.fl{
float:left;
}
 
.fr{
float:right;
}
 
.ctr{
float:none;
text-align:center;
}
  
.blk{
clear:both; 
width:100%;
}  
 

Vertical Only Style Sheet

The style sheet surface-game-mobile.css applies only to the vertical layout of the Surface Game. The following listing includes all of surface-game-mobile.css.

div.content{
width:96%; 
} 
 
div.output,div.info,#eText{
 width:100%;
}
  
div.output {
clear:both; 
}

div.info{
font-size:120%;
}
  
#eText,p{ 
 font-size:200%;
}

button{  
width:30%;
float:left;
margin-left:3%;
font-weight:bold;
font-size:220%;
padding:4%;
margin-top:4%;
}

Mobile Vertical HTML Markup

Style sheets for the Surface Game are loaded with the following short listing.

<style type="text/css">   
@import url(styles/surface-game.css);   
@import url(styles/surface-game-mobile.css); 
</style>  

The following listing includes all of the pertinent markup for the Surface Game vertical version.

 
<body 
onload="loadGame(1)" 
onresize="resizeCanvasMobile()" 
onunload="stopGame()"
>
 
<div class="content">
 
<canvas id="cv"  
onmousemove="javascript:mouseMoveCanvas(event)">
Canvas is not supported in your browser.
</canvas> 
 
<div class="info">
Drag and drop digits to 
the white answer box.
</div>
 
<div class="blk">

<button 
onclick="javascript:reset()">
Reset Answer
</button> 
 
<button 
onclick="javascript:tapAnswer()">
Final Answer!
</button>

<button 
onclick="javascript:tapNext()">
Next Question
</button>

</div>
 
<div class="output">

<div id="eText">  

Find the area of the square. 
Both the width and height are 23 units each.
</div> 

<img 
id="im" 
src="assets/l1q1.gif" 
alt="Surface Game Graphic" 
/>
 
</div>  
 
<audio 
id="aTapped"
>
<source 
src="assets/dink.mp3" 
type="audio/mpeg"
/>
<source 
src="assets/dink.ogg"  
type="audio/ogg" 
/>          
</audio>
  
<audio 
id="aRight"
>          
<source 
src="assets/right.mp3" 
type="audio/mpeg"
/>
<source 
src="assets/right.ogg"  
type="audio/ogg" 
/>          
</audio> 

<audio 
id="aLevel"
>          
<source 
src="assets/level.mp3" 
type="audio/mpeg"
/>
<source 
src="assets/level.ogg"  
type="audio/ogg" 
/>          
</audio>  

For the next section, tap the image icon containing text which says Next Lesson, or the right pointing arrow at the bottom of the page.

Previous Page Next Page
Copyright © 2015 Seven Thunder Software. All Rights Reserved.