<!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>Story Board</title>
<script type="text/javascript">
var scene = 0;
function changeImg(num)
{
if (scene==0)
{
alert("Your journey begins at a fork in the road.");
scene=1;
}
else if (scene==1)
{
if(num==1)
{
alert("You have arrived at a cute little house in the woods.");
scene=2;
}
else if (num ==2)
{
alert("You are standing on the bridge overlooking a peaceful stream.");
scene=3;
}
}
else if (scene==2)
{
if(num==1)
{
alert("Peeking through the window, you see a witch inside the house.");
scene=4;
}
else if (num ==2)
{
alert("Sorry, a witch lives in the house and you just became part of her stew.");
scene=5;
}
}
else if (scene==4)
{
if(num==1)
{
scene=8;
}
else if (num ==2)
{
alert("Sorry, a witch lives in the house and you just became part of her stew.");
scene=5;
}
}
else if (scene==5)
{
scene=0;
}
else if (scene==3)
{
if(num==1)
{
alert("Sorry, a troll lives on the other side of the bridge and you just became his lunch.");
scene=6;
}
else if (num ==2)
{
alert("Your stare is interrupted by the arrival of a huge troll.");
scene=7;
}
}
else if (scene==6)
{
scene=0;
}
else if (scene==7)
{
if(num==1)
{
alert("Sorry, a troll lives on the other side of the bridge and you just became his lunch.");
scene=6;
}
else if (num ==2)
{
scene=9;
}
}
document.getElementById("img").src ="scene"+scene+".png";
}
</script>
</head>
<body>
<div style="margin: 0 auto; text-align:center">
<img src="scene0.png" alt="Choose your path" id="img"/>
<br />
<input type="button" id="decision1" value="1" onclick="changeImg(1)" />
<input type="button" id="decision2" value="2" onclick="changeImg(2)" />
</div>
</body>
</html>
Wednesday, April 29, 2009
Stick Figure Storyboard with Javascript
Assume that all pictures are in the same folder with the HTML page...
Subscribe to:
Post Comments (Atom)
There are better ways to do this, in terms of code optimisation, efficiency and readability. You might want to try using Switch statement :)
ReplyDelete