Skip to content

Instantly share code, notes, and snippets.

@rafszul

rafszul/SVG-oids.svg

Last active December 28, 2020 18:41
Show Gist options
  • Save rafszul/0e2e4138a72823f99dc5 to your computer and use it in GitHub Desktop.
Save rafszul/0e2e4138a72823f99dc5 to your computer and use it in GitHub Desktop.
Download ZIP
SVG-oids - A game written in SVG and JavaScript. check it out here http://ie.microsoft.com/testdrive/Graphics/SVGoids/Default.xhtml
Raw
index.html
<!DOCTYPE html>
<html id="demohtml" xmlns="http://www.w3.org/1999/xhtml" class="testdrive">
<head>
<!-- Copyright © Microsoft Corporation. All Rights Reserved. -->
<title>SVG–oids</title>
<meta name="t_omni_demopage" content="1" /><meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="description" content="This re-creation of a classic 1979 arcade game shows what can be done with a little bit of SVG, JavaScript, and programming skill." />
<link rel="Stylesheet" type="text/css" href="../../Includes/Styles/OldTestDrive.css" />
<link rel="stylesheet" type="text/css" href="../../Includes/Styles/ReturnAndShareControls.css" />
<link rel="shortcut icon" href="../../Includes/Image/FavIcon.ico" />
<style id="inlinecss" title="democss" type="text/css">
/*<![CDATA[*/
#_debugWindow
{
display: none;
}
#GameCenterer
{
text-align: center;
}
#GameContainer
{
margin: auto;
text-align: left;
border: 2px solid #000;
padding: 5px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-o-border-radius: 20px;
border-radius: 20px;
width: 800px;
height: 570px;
background-color: #e9e9e9;
}
/*]]>*/
</style>
</head>
<body id="demobody" onload="StartGame()">
<div id="fullbodywrap">
<div id="ReturnAndShareControls"></div>
<table id="headertable" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="heading">
<h1 id="demobodyh1">SVG–oids</h1>
</td>
</tr>
</table>
<div id="demoactions">
This re-creation of a classic 1979 arcade game shows what can be done with a little bit of SVG, JavaScript, and programming skill. Use the up and down keys to move, the left and right keys to rotate, and the spacebar to fire. Press the “n” key to play in a nebula.
</div>
<div id="demoContentCenterer">
<div id="demoContentWrapper">
<div id="GameContainer">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width='800px' height='600px' border='2px' id="svgroot">
<title>SVG-oids</title>
<description>A game written in SVG and JavaScript.</description>
<g id="insertBgHere"/>
<image id="clippy" width="34" height="70" xlink:href="clippy.png" x="0" y="0" display="none" style="z-index:-1000"/>
<image id="captionBox" width="154" height="200" xlink:href="captionBox.png" x="0" y="0" display="none"/>
<g id="gameOverText" display="none">
<path stroke-opacity="1" fill-opacity="1" stroke-width="1" stroke="#000000" fill="none" id="svg_1" d="M281,198 l-63,1 l-2,64 l61,-1 l-1,-36 l-42,-1 l0,13 "/>
<path stroke-opacity="1" fill-opacity="1" stroke-width="1" stroke="#000000" fill="none" id="svg_2" d="M297,265 l31,-71 l33,69 "/>
<path stroke-opacity="1" fill-opacity="1" stroke-width="1" stroke="#000000" fill="none" id="svg_3" d="M316,229 l28,-2 "/>
<path stroke-opacity="1" fill-opacity="1" stroke-width="1" stroke="#000000" fill="none" id="svg_4" d="M378,265 l1,-68 l26,31 l23,-33 l3,69 "/>
<path stroke-opacity="1" fill-opacity="1" stroke-width="1" stroke="#000000" fill="none" id="svg_5" d="M453,194 l0,65 l33,0 "/>
<path stroke-opacity="1" fill-opacity="1" stroke-width="1" stroke="#000000" fill="none" id="svg_6" d="M454,195 "/>
<path stroke-opacity="1" fill-opacity="1" stroke-width="1" stroke="#000000" fill="none" id="svg_7" d="M450,194 l30,-1"/>
<path stroke-opacity="1" fill-opacity="1" stroke-width="1" stroke="#000000" fill="none" id="svg_8" d="M457,225 "/>
<path stroke-opacity="1" fill-opacity="1" stroke-width="1" stroke="#000000" fill="none" id="svg_9" d="M456,225 l11,0 "/>
<path stroke-opacity="1" fill-opacity="1" stroke-width="1" stroke="#000000" fill="none" id="svg_10" d="M223,280 l-1,65 l44,0 l-1,-69z"/>
<path stroke-opacity="1" fill-opacity="1" stroke-width="1" stroke="#000000" fill="none" id="svg_11" d="M285,278 l27,69 l24,-71"/>
<path stroke-opacity="1" fill-opacity="1" stroke-width="1" stroke="#000000" fill="none" id="svg_12" d="M396,281 l-38,0 l0,61 l36,1"/>
<path stroke-opacity="1" fill-opacity="1" stroke-width="1" stroke="#000000" fill="none" id="svg_14" d="M415,281 l-1,63"/>
<path stroke-opacity="1" fill-opacity="1" stroke-width="1" stroke="#000000" fill="none" id="svg_15" d="M413,283 l29,0 l9,6 l1,23 l-13,5 l-21,-1 l34,26"/>
<path stroke-opacity="1" fill-opacity="1" stroke-width="1" stroke="#000000" fill="none" id="svg_16" d="M357,309 l21,0 "/>
<circle stroke-opacity="1" fill-opacity="1" stroke-width="1" stroke="#000000" fill="none" id="svg_17" r="52" cy="426" cx="347"/>
<path stroke-opacity="1" fill-opacity="1" stroke-width="1" stroke="#000000" fill="none" id="svg_18" d="M317,411 l16,-16 "/>
<path stroke-opacity="1" fill-opacity="1" stroke-width="1" stroke="#000000" fill="none" id="svg_19" d="M319,396 l10,13 "/>
<path stroke-opacity="1" fill-opacity="1" stroke-width="1" stroke="#000000" fill="none" d="M359,412 l16,-16"/>
<path stroke-opacity="1" fill-opacity="1" stroke-width="1" stroke="#000000" fill="none" d="M361,397 l10,13"/>
<path stroke-opacity="1" fill-opacity="1" stroke-width="1" stroke="#000000" fill="none" id="svg_22" d="M316,445 l6,-10 l42,-1 l5,12 "/>
</g>
<text id="scoreboard" x="670" y="25" font-family="Eras Light ITC" font-size="20">Score: 0</text>
<text id="highScore" x="350" y="10" font-family="Eras Light ITC" font-size="14">High Score:</text>
<polygon id="spaceship" points="0,0 0,0 0,0"/>
<polygon id="livesRemaining1" points="10,30 26,30 18,10"/>
<polygon id="livesRemaining2" points="30,30 46,30 38,10"/>
<polygon id="livesRemaining3" points="50,30 66,30 58,10"/>
<g id="titleText">
<path stroke-width="5" stroke="#000000" fill-opacity="0" fill="#ff0000" id="svg_2" d="m55,189l123,-74l-82,76l81,86l-159,70l101,-77l-64,-81z"/>
<path stroke-width="5" stroke="#000000" fill="none" id="svg_5" d="m189,119l55,147l42,-146l-41,218l-56,-219z"/>
<path stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="none" id="svg_6" d="m383,117l-77,35l-3,193l153,-113l-115,24l60,-3l-91,80l17,-172l56,-44z"/>
<line fill="none" stroke-dasharray="null" stroke-width="5" stroke="#000000" id="svg_10" y2="264" x2="503" y1="265" x1="450"/>
<path stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="none" id="svg_11" d="m519,237l13,98l38,5l20,-13l-14,-97l-35,-17l-22,24z"/>
<path stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="none" id="svg_12" d="m608,221l8,125"/>
<path stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="none" id="svg_13" d="m643,222l8,123l53,-41l-10,-60l-51,-22z"/>
<path stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="none" id="svg_14" d="m759,212l-47,30l49,62l-102,57"/>
</g>
<text id="levelText" display="none" x="350" y="250" font-family="Eras Light ITC" font-size="20">Level: </text>
<text id="fps" x="400" y="300" font-family="Eras Light ITC" font-size="20" display="none">FPS: </text>
</svg>
</div>
<div id="_debugWindow"></div>
</div>
</div>
<div id="demodetails">
<div>SVG-oids was written by IE’s own Andy Zeigler over a weekend shortly after we got SVG working in the IE9 Web platform.</div>
</div>
</div>
<script type="text/javascript">
//<![CDATA[
document.title = "SVG–oids";
//]]>
</script>
<script type="text/javascript" src="vector2.js"></script>
<script type="text/javascript" src="debugLog.js"></script>
<script type="text/javascript" src="game.js"></script>
<script type="text/javascript" src="../../includes/script/TestDriveCommon.js"></script>
<script type="text/javascript" src="../../Includes/Script/ReturnAndShareControls.js"></script>
</body>
</html>
Display the source blob
Display the rendered blob
Raw
SVG-oids.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment