Desktop Surface Game HTML Markup

Free HTML5 Game Tutorial for Beginners: Page 33

Shared Style Sheet Horizontal Only Style Sheet Desktop Horizontal HTML Markup
Body Tag for Desktop Game

Free Online Game Development Course: Design with HTML5

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%;
}  
	

Horizontal Only Style Sheet

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

div.content{
width:90%;
}

canvas#cv{
float:left;
}

div.output{
float:right;
width:40%;
}

img#im{
width:80%;
}

#eText{
font-size:110%;
}

button{
width:30%; 
float:left; 
margin-right:1%; 
margin-top:2%;
padding-top:2%;
padding-bottom:2%;  
}

Desktop Horizontal 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-desktop.css); 
</style>  

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

	
<body 
onload="loadGame(0)" 
onresize="resizeCanvasDesktop()" 
onunload="stopGame()"
>
 
<div 
class="content" 
id="eContent"
>

<canvas 
id="cv"  
onclick="javascript:mouseMoveCanvas(event)">

Canvas is not supported in your browser.

</canvas>

<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>
  
<div 
class="info"
>
Tap to Select Digits.
Drop Digits in 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> 
 
<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>  

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.

You Finished the Course!

Tap the download button, or the right pointing arrow, to download the game's assets including JavaScript, graphics, style sheets, HTML markup, XML, and DTD files. Continue reading to see the mobile and desktop versions of the game. Optionally tap the Free Game Course icon, then select one of the Surface Game icons toward the bottom of the page to play either version of the game.

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