Click here to Skip to main content
15,884,388 members
Articles / Web Development / XHTML

SilverStunts - A data driven game in Silverlight

Rate me:
Please Sign up or sign in to vote.
4.85/5 (11 votes)
31 Dec 2007BSD16 min read 70.1K   774   57  
The article discusses the concepts of data driven web games. An example game 'SilverStunts' is presented and described in technical details.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>SilverStunts Game!</title>

	<script type="text/javascript" src="silverlight.js"></script>

	<script type="text/javascript">

	window.onload = function()
	{
		document.getElementById('SilverlightControl').focus();
	}
	
	function initSilverLightControl(sender, args)
	{
		sender.Content.page.PrintConsoleEvent = OnPrintConsole;
		sender.Content.page.ShowWorldXAMLEvent = OnShowWorldXAML;
		sender.Content.page.RequestEntitiesSourceEvent = OnRequestEntitiesSource;
		sender.Content.page.PublishEntitiesSourceEvent = OnPublishEntitiesSource;
		sender.Content.page.OpenScriptEditorEvent = OnOpenScriptEditor;
		sender.Content.page.UpdateIDEEvent = OnUpdateIDE;
	}

	// contains calls to silverlight.js, example below loads Page.xaml
	function createSilverlight(xaml, host, id)
	{
		Silverlight.createObject(
			xaml, 
			document.getElementById(host), 
			id,
			{
				width:'100%', 
				height:'100%',
				version:'1.1'
			},
			{ 
				onLoad: initSilverLightControl
			},
			null
		);
	}
	
	var ide;
	function OpenIDE()
	{
		ide = window.open('ide.html', 'ide', 'width=1000,height=400,scrollbars=no,toolbar=no,directories=no,status=no,menubar=no,resizable=yes');
	}
	
	function EvalExpression(line, force)
	{
		var control = document.getElementById('SilverlightControl');
		var res = control.Content.page.EvalExpression(line, force);
	}
	
	function EvalEntities(code)
	{
		var control = document.getElementById('SilverlightControl');
		var res = control.Content.page.EvalEntities(code);
	}

	function EvalLogic(code)
	{
		var control = document.getElementById('SilverlightControl');
		var res = control.Content.page.EvalLogic(code);
	}

	function EvalForeground(xaml)
	{
		var control = document.getElementById('SilverlightControl');
		var res = control.Content.page.EvalForeground(xaml);
	}

	function EvalBackground(xaml)
	{
		var control = document.getElementById('SilverlightControl');
		var res = control.Content.page.EvalBackground(xaml);
	}
	
	var consoleContent = "Silver Console 1.0 <font color=&quot;lightblue&quot;>[Python]</font><br/>===========================<br/>";
	function OnPrintConsole(sender, args)
	{
		consoleContent += args.message;
		UpdateConsole();
	}

	function OnShowWorldXAML(sender, args)
	{
		if (!ide || ide.closed) return false;
		return ide.UpdateClipboard(args.xaml);
	}

	function OnRequestEntitiesSource(sender, args)
	{
		if (!ide || ide.closed) return null;
		args.source = ide.RequestEntitiesSource();
	}
	
	function OnPublishEntitiesSource(sender, args)
	{
		if (!ide || ide.closed) return null;
		ide.PublishEntitiesSource(args.source);
	}

	function OnOpenScriptEditor(sender, args)
	{
		if (ide && !ide.closed) return null;
		OpenIDE();
	}

	function OnUpdateIDE(sender, args)
	{
		if (!ide || ide.closed) return null;
		UpdateIDE();
	}
	
	function UpdateConsole()
	{
		if (!ide || ide.closed) return false;
		return ide.UpdateConsole(consoleContent);
	}

	function UpdateEntities()
	{
		if (!ide || ide.closed) return false;
		var control = document.getElementById('SilverlightControl');
		var entitiesSource = control.Content.page.GetEntitiesSource();
		return ide.UpdateEntities(entitiesSource);
	}
	
	function UpdateLogic()
	{
		if (!ide || ide.closed) return false;
		var control = document.getElementById('SilverlightControl');
		var logicSource = control.Content.page.GetLogicSource();
		return ide.UpdateLogic(logicSource);
	}

	function UpdateForeground()
	{
		if (!ide || ide.closed) return false;
		var control = document.getElementById('SilverlightControl');
		var foregroundSource = control.Content.page.GetForegroundSource();
		return ide.UpdateForeground(foregroundSource);
	}

	function UpdateBackground()
	{
		if (!ide || ide.closed) return false;
		var control = document.getElementById('SilverlightControl');
		var backgroundSource = control.Content.page.GetBackgroundSource();
		return ide.UpdateBackground(backgroundSource);
	}
	
	function OnConsoleReady()
	{
		UpdateConsole();
	}
	
	function OnEntitiesTabReady()
	{
		UpdateEntities();
	}

	function OnLogicTabReady()
	{
		UpdateLogic();
	}

	function OnForegroundTabReady()
	{
		UpdateForeground();
	}

	function OnBackgroundTabReady()
	{
		UpdateBackground();
	}
	
	function UpdateIDE()
	{
		UpdateForeground();
		UpdateBackground();
		UpdateLogic();
		UpdateEntities();
		UpdateConsole();
	}
	
	</script>

	<style type="text/css">
		#SilverlightControlHost { width: 1000px; height: 600px; border: solid 1px black; }
		#info { width: 1000px; height: 200px; }
		body {font-family: Arial; }
		p { font-size: 8pt; }
		#help { position: absolute; left: 600px; top: 10px;}
	</style>
</head>
<body>
	<div id="info">
	<h1>SilverStunts Game (prototype)</h1>
	<p>
	You need: <a href="http://www.microsoft.com/silverlight/downloads.aspx">SilverLight 1.1 Alpha September Refresh</a> to run the game.<br/>
	Please use <a href="http://firefox.com">Firefox</a> to see this page. Under Internet Explorer there are some issues with keyboard shortcuts.<br/>
	<br/>
	Tested on Windows XP &amp; Vista in Firefox 2.0<br/>
	<br/>
	Want more? <a href="">Read article</a> | <a href="silverstunts02_src.zip">Download source code</a> | <a href="mailto:antonin@hildebrand.cz">Contact author</a><br/>
	<br/>
	Enjoy and a happy New Year! :-)
	</div>
	
	<img id="help" src="images/help.png"/>

	<div id="SilverlightControlHost">

		<script type="text/javascript">
			createSilverlight("Page.xaml", "SilverlightControlHost", "SilverlightControl");
		</script>

	</div>
</body>
</html>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The BSD License


Written By
Web Developer
Czech Republic Czech Republic
I'm a former game developer. I'm excited about web technologies.
Currently, I work on rich internet application powered by ExtJS (client) and Ruby on Rails (server).

Comments and Discussions