Hello i urgently need help or ideas with this question.
i have a 4 images to display in a web page,
a. when a pay button is clicked it loads 10 tokens enabling the player to play 10 times
b. when a play button is clicked, it randomises the images. If three of the randomly generated images appear, then the player wins else the user can player for 10 times (press play button) before the game exits.
THANKS
This code is basic as needed. You are free to modify this according to what purpose you need.
Hope it helps and good day to you...
<?xml version="1.0" encoding="UTF-8"?>
<?xml-sylesheet type="text/css" href="#internal"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>Image Effect</title>
<script type="text/javascript">
/* <![CDATA[ */
var counter= 10;
function game(e) {
e = e ? e : window.event;
t = e.target ? e.target : e.srcElement;
var imgs = [];
imgs[0] = new Image();
imgs[0].src = 'image0.jpg';
imgs[1] = new Image();
imgs[1].src = 'image1.jpg';
imgs[2] = new Image();
imgs[2].src = 'image2.jpg';
var counts = document.forms['frm1'];
_img = document.getElementsByTagName('img');
if (( t.name ) && (t.name == 'btn')) {
counter = counter - 1;
counter = ( counter == 0 ) ? 10 : counter;
if ( document.images ) {
var span_count = document.getElementsByTagName('span');
span_count['count'].innerText = counter;
for ( var x = 0; x <= imgs.length; x++ ) {
_img[x].src = imgs[Math.floor(Math.random()*3)].src;
}
}
}
}
function generate()
{
/* Ok, lets say, if the player matches the 3 images then he/she will be alerted -- you can extend the work from here and do other stuff that you need... */
/* Absolute URL is needed in the src attribute or this block will break (e.g. src="http://yoursite.com/images/yourImage.jpg") */
if ( _img[0].src == 'http://yoursite.com/image1.jpg' && _img[1].src == 'http://yoursite.com/image1.jpg' && _img[2].src == 'http://yoursite.com/image1.jpg' ) { alert('You win the game!');
window.location.reload();
/* Do your stuff from here... */ }
}
document.onkeypress = generate;
document.onclick = game;
/* ]]> */
</script>
<style type="text/css" id="internal" media="all">
/* <![CDATA[ */
/* Modules */
html, body {
height: 100%;
min-height: 600px;
min-width: 800px;
max-width: 1024px !important;
width: auto;
}
body {
background-color: #f5f5f5;
color: #405060;
font: normal 12pt/120% Verdana, Helvetica, Arial, sans-serif;
text-align: center;
}
/* Layers */
div { margin: 0; padding: 0; }
div.tube {
border: thin solid;
padding: 2% 3% 2% 3%;
position: relative;
text-align: left;
}
/* Images */
img {
border: 2px solid #405060;
display: block;
margin: 3% auto 3% auto;
padding: 0;
vertical-align: middle;
}
/* Table */
table {
border-collapse: collapse;
width: 100%;
}
th { font-variant: small-caps; text-align: left; color: #555; padding-left: 2%; white-space: nowrap; }
th span { color: #a00; }
td { width: auto; text-align: center; font-variant: small-caps; }
/* Layouts */
body #wrapper {
background-color: #ccc;
margin: 0 auto;
width: 100%;
}
div #my_Images {
background-color: #eee;
}
/* ]]> */
</style>
<link rev="start" href="./" title="Essential's Demo" />
</head>
<body>
<div id="wrapper">
<div class="tube">
<div id="my_Images">
<form action="javascript:void(0);" id="frm1">
<table summary=" Randomized images">
<caption>Randomly Generated Images</caption>
<tr>
<th colspan="2">This Demo Will Be Generated for <span id="count">10</span> Counts! </th>
<th><input type="button" value="Hit Me!" id="btn" name="btn" /></th>
</tr>
<tr>
<td><img src="image0.jpg" id="img0" alt="First Image" width="80" height="96" /></td>
<td><img src="image1.jpg" id="img1" alt="Second Image" width="80" height="96" /></td>
<td><img src="image2.jpg" id="img2" alt="Third Image" width="80" height="96" /></td>
</tr>
<tr>
<td colspan="2">This Document Is a Valid <strong><acronym title="Extensible HyperText Markup Language">Xhtml</acronym><sup>™</sup> 1.0 strict</strong></td>
</tr>
</table>
</form>
</div> <!-- #my_images -->
</div> <!-- tube -->
</div> <!-- #wrapper -->
</body>
</html>We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.
