×
Namespaces

Variants
Actions

Click and hit : A simple game using WRT

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata
Tested with
Devices(s): Nokia 5230
Article
Created: girishpadia (05 Mar 2011)
Last edited: hamishwillee (12 Aug 2012)

Contents

Introduction

This game is very simple. It is intended to show the basic use of nested < div > tag and moving its position on the screen using Javascript. It also describes how the CSS (Cascading Style Sheet) can be more effective using each < div > tag's ID attribute. In this game the screen is divided into three parts as follow:

  1. Container : The area which is colored Red.
  2. ClickMe  : The small area within the container with black color.
  3. Counter  : The area with Green color which counts Hits on "ClickMe" area and if not then the Miss.


You can see the initial screen as shown in the following figure.

You can see the initial screen as shown in the following figure.

The Game Logic

You can see the above screen when you start the game. Now you have to touch the black area on screen. If you are successful to touch the black area then the black area will move onto a random position. Your successful Hit will be incremented by 1. If you cannot touch the black area properly then the "Miss" will be incremented by 1. This way the game will count each Hit and Miss on the black area on the screen. The black area will keep moving on the screen at random position.

How to create project

Please download and install the Nokia Web SDK. Create a new project in it. Replace the files, index.html,basic.css and basic.js with the code below.

Index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Click and Hit Gane</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script language="javascript" type="text/javascript" src="basic.js"></script>
<link rel="stylesheet" href="basic.css" type="text/css" />
<meta name="Generator" content="Nokia WDE 3.0.0" />
</head>
<body onclick="MissCount();">
<h2>Click and Hit</h2>
<div id="container" align="center">
<div id="clickme" align="center" onclick="HitCount();"></div>
</div>
<br />
<div id="counter" align="center">
Hit : 0 Miss : 0
</div>
</body>
</html>

basic.css

/* Defining style sheet for container id */
#container
{
width:300px; /* Defining width */
height:400px; /* Defining height */
border:1; /* Border is defined with value 1 */
background-color:Red; /* Setting background color */
}
/* Defining style sheet for clickme id */
#clickme
{
width:20px; /* Defining width */
height:20px; /* Defining height */
border=1; /* Border is defined with value 1 */
background-color:Black; /* Setting background color */
position:absolute; /* The clicking object postion is defined as absolute. */
}
 
/* Defining style sheet for counter id */
#counter
{
width:300px; /* Defining width */
height:30px; /* Defining height */
border=1; /* Border is defined with value 1 */
background-color:Green; /* Setting background color */
font-size:16px; /* Font size is 16px */
font-weight:300; /* font weight is set 300 */
vertical-align:middle; /* Vertical alignment is set to middle */
}

basic.js

/* Defining Glabla variable starts */ 
var hit=0;
var miss=0;
var x=0;
var y=0;
 
/* Defining Glabla variable ends here */
function init()
{
// Add your code stpes here
}
 
/* Function getXY is to get random value of x position and y position.
* The value of x is assigned to left position of clickme div object.
* The value of y is assigned to top position of clickme div object.
*/

 
function getXY()
{
x = Math.floor(Math.random()* 250)+20 ; // Random number will be generated between (0 to 250)+20
y = Math.floor(Math.random()* 350)+20 ;// Random number will be generated between (0 to 350)+20
 
document.getElementById('clickme').style.left = x+"px"; // Value of x assigned to left position.
document.getElementById('clickme').style.top = y+"px"; // Value of y assigned to top position.
}
 
/* Function HitCount is called whenever user successfully clicks on the clickme div object */
function HitCount()
{
hit++; // Variable hit is incremented by 1.
if(miss >=0)
miss--;
printVal();
getXY();
}
/* Function HitCount is called whenever user unsuccessful to click on the clickme div object */
function MissCount()
{
miss++; // Variable miss is incremented by 1.
printVal(); // Function printVal is called.
}
 
 
function printVal()
{
// Values of conter div tag is set by Hit and Miss variables.
document.getElementById('counter').innerHTML = "Hit : "+hit+" Miss : "+miss;
 
}

Tested On device

The game is tested on Nokie 5230

File Download

File:ScreenPosition.zip

Another Image

Article 8 image2.PNG

This page was last modified on 12 August 2012, at 23:18.
41 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×