An old college ICT project (for the module "Client-side Customisation of Web Pages") in which I produced a small interactive murder-mystery adventure game using HTML, CSS and JavaScript.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

61 lines
6.3 KiB

<html>
<head>
<title>Photo Finished | A Case for Bear</title>
<link rel = "stylesheet" href = "CSS/IntroLayout.css">
<link rel = "stylesheet" href = "CSS/AllPages.css">
<script type = "text/javascript" src = "JS/FrontPage.js"></script>
</head>
<body>
<div id = "Container">
<div id = "ContentPane">
<h1>Photo Finished</h1>
<h2 class = "Light">A Case for Bear</h2>
<h3>The Setting</h3>
<p class = "Story">The village of Littleden sits in the middle of nowhere. A quiet place, some would like to proclaim, on the English coast, more than half an hour’s drive away from all the troubles of the city. Too quiet, others would say, save for the odd case of vandalism or other youth crime. On rare occasions, however, a more serious crime occurs. A robbery, a murder, maybe an arson, but such crimes are so rare that the local police’s senses seem to have dulled somewhat, if they were even there to begin with.<p>
<h3>Bear</h3>
<p class = "Story">One of the newer arrivals to Littleden. Not a great deal is known about her, other than she was a city girl from the other end of the country, and that she is never seen without the steel gauntlet on her left hand.</p>
<p class = "Story">When she came to the village, Bear’s first order of business, to everyone’s surprise, was to open a gym. Despite the perceived lack of demand, the business has done well for itself, in part thanks to events and youth programs of her devising that have helped to reduce the crime rate. For that, many applaud her, while those less trusting of her are willing to merely tolerate her. For now.</p>
<p class = "Story">As the gym’s proprietor, there’s no mistaking that Bear works out. What takes people by surprise when they first meet her, however, is that although she likes to keep her body in peak condition, she keeps her mind sharp as well. This has been a boon in solving many of the village’s more complex cases, such that she is often called upon when the police are stumped. Usually the majority of the time.</p>
<h3>The Incident</h3>
<p class = "Story">It is Sunday. It is a day of gray skies and torrential rain. Despite the horrible weather, Bear is visiting a friend’s house on the other side of the village when a ear-splitting scream pierces the air. She steps outside to investigate and traces the screams to a single-storey house next door. She bangs on the door, which is answered by a tearful young woman who doesn’t appear much older than 25. She’s quick to tell Bear that there’s been a murder.</p>
<p class = "Story">The girl steps aside in at Bear’s request and she enters the house. Noticing the broken window in the dining room, she approaches for closer inspection and finds the victim on the floor, staring at the ceiling with lifeless eyes. Bear recognises his face: Darren Perceptor, a semi-popular photoblogger that she had been following of late. He won’t be looking at much any more.</p>
<p class = "Story">A deafening thunderclap goes right through Bear. She decides to step away and speak to the girl again. She is joined by another girl, almost identical to the first aside from the hair. One had her artificially red hair bunched up and fanned out at the back like a peacock’s tail while the other girl kept her flowing blue locks loose. Bear offers to take them to her friend’s house, both to shelter them from the storm and to keep them both away from the scene of the crime until the police arrive. Along the way, the red-haired girl introduces herself as Hephaesta and her twin sister Poseida. Bear chooses not to question their names.</p>
<p class = "Story">Once inside, Bear’s friend informs her that the one road leading up to the estate has been blocked. That last lightning strike had felled a tree that subsequently blocked the road right in front of the police car heading here. It could be some time before they can even get here.</p>
<p class = "Story">She asks the sisters their side of the story over fresh cups of tea. Hephaesta tells her that she was taking a shower when she heard her sister’s scream. Poseida, meanwhile, claims that she was asleep in her room when the murder took place and that the sound of breaking glass and the thud that followed prompted her to check on Darren, who was working on a personal project at the time.</p>
<p class = "Story">Bear finishes her drink and excuses herself to check on the status of that roadblock. She heads out into the kitchen and quietly exits out of the back door. Her friend catches her vaulting the waist-high wall between the two houses and enquires as to what she’s playing at.
'Something’s a little off here,' Bear answers, trusting her friend not to mention any of what she tells her. 'And I think it might be wise to look into this as soon as anyone can.'</p>
<p class = "Story">'Hold up.' Her friend protests. 'You make a rule of waiting until the police ask for you.'</p>
<p class = "Story">Bear nods in agreement. 'This is looking like one of those rare exceptions. Don't worry about it, the chief owes me big time, so it should be worth the gamble. Keep those two busy for me, will you?' Without waiting for an answer, she turns to the house and makes her way to the back door, which leads directly into the dining room.</p>
<h3>HOW TO PLAY</h3>
<p class = "Story">Each room has a number of clues, highlighted in blue. Click these to investigate them. Connected rooms are shown in green. Click these to travel to another room.</p>
<p class = "Story">Some clues offer a question. Answer questions correctly to increase your score.</p>
<p class = "Story">You can travel directly to other rooms without having to go through the rooms in between by clicking them on the map, but only if they have already been visited at least once</p>
<p class = "Story">Once all clues have been investigated, you must decide who to accuse. You can choose either sister, neither or both. But choose wisely.</p>
<center><input type = "Button" name = "btnAnswer" value = "Let's get on with it, then..." onClick = "OpenGameWindow()"></center>
</div>
</div>
</body>
</html>