game.svg

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
		xmlns:xlink="http://www.w3.org/1999/xlink"
		version="1.1"
		baseProfile="basic"
		width="100%" height="100%"
		viewBox="0 0 1000 1000"
		preserveAspectRatio="xMidYMid meet"
		id="display"
		>
	<title>#F00 Baron</title>
	
	<desc>The Red Baron takes to the skies once again, to take down his arch nemesis, the Yellow Baron!</desc>
	
	<!--
		Distributed under the terms of the ISC license:
		
		Copyright (c) 2012 - Mel Collins <mel@raumkraut.net>
		
		Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
		
		THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
	-->
	
	<defs>
		<style type="text/css">
			<![CDATA[
				#display {
					font-family: sans-serif;
				}
				
				.player1 {
					color: #f00;
				}
				.player2 {
					color: #ff0;
				}
				
				.template {
					display: none;
				}
			]]>
		</style>
	</defs>
	
	<script type="text/ecmascript" xlink:href="game.js"></script>
	<script type="text/ecmascript">
		//<![CDATA[
		window.addEventListener('load', function() {
			// Init game
			var game = new f00baron.Game({
				 ground: document.getElementById('ground')
				,clouds: document.getElementById('clouds').getElementsByClassName('cloud')
				,explosion: document.getElementsByClassName('explosion template')[0]
			});
			game.add_player({
				 element: document.getElementById('player1')
				,controls: {
					// Player 1 - WSAD
					 87: 'engineOn'
					,83: 'engineOff'
					,65: 'rotateACW'
					,68: 'rotateCW'
					,32: 'fire' // Spacebar
					,18: 'fire' // alt
				}
				,scoreboard: document.getElementsByClassName('player1 score')[0]
			});
			game.add_player({
				 element: document.getElementById('player2')
				,controls: {
					// Player 2 - up/down/left/right
					 38: 'engineOn'
					,40: 'engineOff'
					,37: 'rotateACW'
					,39: 'rotateCW'
					,17: 'fire' // ctrl (both)
					,96: 'fire' // Numpad 0
				}
				,scoreboard: document.getElementsByClassName('player2 score')[0]
			});
			
			// Start main loop
			game.start();
		});
		//]]>
	</script>
	
	<defs>
		<clipPath id="clip-all">
			<rect x="0" y="0" width="100%" height="100%" />
		</clipPath>
	</defs>
	
	<g id="background" clip-path="url(#clip-all)">
		<defs>
			<linearGradient id="pattern-sky"
					x1="0" y1="0"
					x2="0" y2="100%"
					>
				<stop offset="0" stop-color="#04f" />
				<stop offset="1" stop-color="#8cf" />
			</linearGradient>
			<linearGradient id="pattern-mountain"
					x1="0" y1="0"
					x2="0" y2="100%"
					>
				<stop offset="0" stop-color="#fff" />
				<stop offset="0.1" stop-color="#fff" />
				<stop offset="0.3" stop-color="#888" />
				<stop offset="1" stop-color="#444" />
			</linearGradient>
			<linearGradient id="pattern-hill"
					x1="0" y1="0"
					x2="0" y2="100%"
					>
				<stop offset="0" stop-color="#4c4" />
				<stop offset="1" stop-color="#080" />
			</linearGradient>
			<linearGradient id="pattern-ground"
					x1="0" y1="0"
					x2="0" y2="100%"
					>
				<stop offset="0" stop-color="#840" />
				<stop offset="1" stop-color="#420" />
			</linearGradient>
		</defs>
		
		<rect id="sky"
				x="0" y="0"
				width="100%" height="100%"
				fill="url(#pattern-sky)"
				/>
		
		<g id="help">
			<defs>
				<symbol id="symbol-key"
						viewBox="0 0 100 100"
						width="20" height="20"
						overflow="visible"
						stroke="black" stroke-width="10"
						stroke-linejoin="round"
						fill="#dd8"
						>
					<path d="M -80,-70 L -60,-80 -60,40 -80,80 Z"/>
					<path d="M 60,-80 L 80,-70 80,80 60,40 Z"/>
					<path d="M -80,80 L -60,40 60,40 80,80 Z"/>
					<path d="M -60,-80 L 60,-80 60,40 -60,40 Z"/>
				</symbol>
				<symbol id="symbol-widekey"
						viewBox="0 0 200 100"
						width="40" height="20"
						overflow="visible"
						stroke="black" stroke-width="10"
						stroke-linejoin="round"
						fill="#dd8"
						>
					<path d="M -160,-70 L -140,-80 -140,40 -160,80 Z"/>
					<path d="M 140,-80 L 160,-70 160,80 140,40 Z"/>
					<path d="M -160,80 L -140,40 140,40 160,80 Z"/>
					<path d="M -140,-80 L 140,-80 140,40 -140,40 Z"/>
				</symbol>
				
				<symbol id="symbol-prop"
						viewBox="0 0 10 10"
						width="30" height="30"
						overflow="visible"
						stroke="black" stroke-width="1"
						stroke-linejoin="round"
						fill="#c82"
						>
					<path d="M -1,0 L -2,-6 Q 0,-9 2,-6 L 1,0 2,6 Q 0,9 -2,6 Z" />
					<circle cx="0" cy="0" r="2" fill="#888" />
				</symbol>
				
				<symbol id="symbol-uparrow"
						viewBox="0 0 10 10"
						width="10" height="10"
						overflow="visible"
						>
					<path d="M -2,8 L -2,2 -5,2 0,-8 5,2 2,2 2,8 Z" />
				</symbol>
				
				<symbol id="symbol-controls"
						overflow="visible"
						>
					<g class="engineOn" transform="translate(0,-100)">
						<use xlink:href="#symbol-prop"
								width="20" height="20"
								transform="translate(0,-50)"
								>
							<animateTransform
									attributeType="XML" attributeName="transform"
									type="rotate" additive="sum"
									from="0" to="360"
									dur="0.5s" repeatCount="indefinite"
									/>
						</use>
						<use xlink:href="#symbol-key"
								x="0" y="0"
								width="20" height="20"
								/>
					</g>
					<g class="engineOff">
						<use xlink:href="#symbol-prop"
								width="20" height="20"
								transform="translate(0,-50)"
								>
							<animateTransform
									attributeType="XML" attributeName="transform"
									type="rotate" additive="sum"
									from="0" to="360"
									dur="60s" repeatCount="indefinite"
									/>
						</use>
						<use xlink:href="#symbol-key"
								x="0" y="0"
								width="20" height="20"
								/>
					</g>
					<g class="fire" transform="translate(0,100)">
						<use xlink:href="#symbol-plane"
								x="-24" y="-35"
								/>
						<use xlink:href="#symbol-bullet"
								x="0" y="-39"
								>
							<animate attributeType="XML" attributeName="x"
									from="0" to="50"
									dur="0.5s" repeatCount="indefinite"
									/>
						</use>
						<use xlink:href="#symbol-widekey"
								x="-50" y="0"
								width="40" height="20"
								/>
						<text text-anchor="middle"
								x="0"
								>/</text>
						<use xlink:href="#symbol-widekey"
								x="50" y="0"
								width="40" height="20"
								/>
					</g>
					<g class="anticlockwise" transform="translate(-100,0)">
						<use xlink:href="#symbol-plane"
								x="0" y="40"
								>
							<animateTransform
									attributeType="XML" attributeName="transform"
									type="rotate" additive="sum"
									from="360" to="0"
									dur="2s" repeatCount="indefinite"
									/>
						</use>
						<use xlink:href="#symbol-key"
								x="0" y="0"
								width="20" height="20"
								/>
					</g>
					<g class="clockwise" transform="translate(100,0)">
						<use xlink:href="#symbol-plane"
								x="0" y="-40"
								>
							<animateTransform
									attributeType="XML" attributeName="transform"
									type="rotate" additive="sum"
									from="0" to="360"
									dur="2s" repeatCount="indefinite"
									/>
						</use>
						<use xlink:href="#symbol-key"
								x="0" y="0"
								width="20" height="20"
								/>
					</g>
				</symbol>
			</defs>
			
			<text x="500" y="100"
					stroke="#000" stroke-width="2"
					fill="#f00"
					text-anchor="middle"
					font-size="100" font-weight="bold"
					>#F00 Baron</text>
			<g class="player1 controls"
					transform="translate(280, 400)"
					font-weight="bold"
					>
				<use xlink:href="#symbol-controls" />
				<text text-anchor="middle"
						x="0" y="-100"
						>W</text>
				<text text-anchor="middle"
						x="0" y="0"
						>S</text>
				<text text-anchor="middle"
						x="-50" y="100"
						>Alt</text>
				<text text-anchor="middle"
						x="-100" y="0"
						>A</text>
				<text text-anchor="middle"
						x="100" y="0"
						>D</text>
			</g>
			<g class="player2 controls"
					transform="translate(720, 400)"
					font-weight="bold"
					>
				<use xlink:href="#symbol-controls" transform="scale(-1,1)"/>
				<g transform="translate(0,-4)">
					<use xlink:href="#symbol-uparrow"
							width="10" height="10"
							transform="translate(0,-100)"
							/>
					<use xlink:href="#symbol-uparrow"
							width="10" height="10"
							transform="rotate(180)"
							/>
					<use xlink:href="#symbol-uparrow"
							width="10" height="10"
							transform="translate(-100,0) rotate(-90)"
							/>
					<use xlink:href="#symbol-uparrow"
							width="10" height="10"
							transform="translate(100,0) rotate(90)"
							/>
				</g>
				<text text-anchor="middle"
						x="-53" y="100"
						>Ctrl</text>
				<text text-anchor="middle"
						x="50" y="100"
						>0 Ins</text>
			</g>
			<animate id="anim_helpFade"
					attributeType="CSS" attributeName="stroke-opacity"
					from="1" to="0"
					begin="3s" dur="2.5s"
					fill="freeze"
					/>
			<animate
					attributeType="CSS" attributeName="fill-opacity"
					from="1" to="0"
					begin="anim_helpFade.begin-1s" dur="3s"
					fill="freeze"
					/>
		</g>
		
		<g id="scores" 
				font-family="sans" font-size="80" font-weight="bold"
				stroke="#000" stroke-width="2"
				opacity="0"
				>
			<text class="player1 score"
					x="20" y="80"
					text-anchor="start"
					fill="currentColor"
					>0</text>
			<text class="player2 score"
					x="980" y="80"
					text-anchor="end"
					fill="currentColor"
					>0</text>
			<animate attributeType="XML" attributeName="opacity"
					from="0" to="1"
					begin="anim_helpFade.end" dur="0.2s"
					fill="freeze"
					/>
		</g>
		
		<g id="scenery"
				stroke="#000"
				stroke-width="5"
				stroke-linecap="round"
				stroke-linejoin="miter"
				>
			<g id="mountains"
					fill="url(#pattern-mountain)"
					>
				<path d="M -300,950 l 350,-250 L 400,950" />
				<path d="M 200,950 l 300,-200 l 20,-30 l 50,-10 L 800,950" />
				<path d="M 500,950 l 200,-250 l 100,-60 l 50,20 l 100,10 L 1100,950" />
				<path d="M -150,950 l 350,-350 l 70,70 l 40,-20 l 80,100 L 550,950" />
			</g>
			<g id="hills"
					fill="url(#pattern-hill)"
					>
				<path d="M 400,950 q 300,-200 600,0" />
				<path d="M 100,950 q 200,-300 400,0" />
				<path d="M -100,950 q 200,-200 400,0" />
				<path d="M 550,950 q 100,-100 200,0" />
				<path d="M 800,950 q 200,-200 400,0" />
			</g>
		</g>
	</g>
	
	<g id="board" clip-path="url(#clip-all)">
		<defs id="defs_plane">
			<linearGradient id="gradient-prop"
					gradientUnits="objectBoundingBox"
					x1="0%" y1="0%" x2="0%" y2="100%"
					>
				<stop offset="0" stop-color="#000" stop-opacity="0.4" />
				<stop offset="0.5" stop-color="#000" stop-opacity="1" />
				<stop offset="1" stop-color="#000" stop-opacity="0.5" />
			</linearGradient>
			
			<symbol id="symbol-plane"
					overflow="visible"
					fill="#fff"
					stroke="#000"
					stroke-width="1"
					stroke-linecap="round"
					stroke-linejoin="miter"
					>
				<circle class="pilot"
						style="fill: #a62;"
						cx="1" cy="-4"
						r="2.5"
						/>
				<line class="machinery"
						x1="10" y1="4"
						x2="12" y2="9"
						/>
				<line class="machinery"
						x1="15" y1="4"
						x2="12" y2="9"
						/>
				<circle class="machinery wheel"
						style="fill: #888;"
						cx="12" cy="9"
						r="2"
						/>
				<path class="fuselage"
						d="M -4,-4
							q 4,4 10,0
							L 18,-4
							q 1,0, 2,2
							l 0,4
							q 0,1 -2,2
							L -10,4
							Q -20,2 -20,-3
							l 0,-2
							q 4,-8 8,2
							Z"
						style="stroke-width: 1;"
						fill="currentColor"
						/>
				<path class="wing"
						d="
							M -18,0
							q -3,-1 0,-2
							l 5,0
							q 3,1 0,2
							Z"
						style="stroke-width: 1;"
						fill="currentColor"
						/>
				<rect class="machinery gun"
						style="fill: #888; stroke-width: 1;"
						x="8" y="-6" width="10" height="3"
						/>
				<line class="machinery"
						style="stroke-width: 1;"
						x1="3" y1="3" x2="8" y2="-10"
						/>
				<line class="machinery"
						style="stroke-width: 1;"
						x1="11" y1="3" x2="16" y2="-10"
						/>
				<path class="wing"
						d="
							M 7,-8
							q -3,-1 0,-3
							l 10,-1
							q 3,2 0,4
							Z"
						style="stroke-width: 1;"
						fill="currentColor"
						/>
				<path class="wing"
						d="
							M 2,5
							q -3,-1 0,-3
							l 10,-1
							q 3,2 0,4
							Z"
						style="stroke-width: 1;"
						fill="currentColor"
						/>
				<path class="machinery"
						style="fill: #888; stroke-width: 1;"
						d="M 20,-2
							a 2,2 0 0,1 0,4
							"
						/>
				<rect class="machinery propellor"
						style="stroke-width: 0;"
						x="20.5" y="-6" width="1.5" height="12"
						fill="url(#gradient-prop)"
						stroke="none"
						stroke-width="0"
						>
					<set id="animProp"
							attributeType="CSS" attributeName="opacity"
							to="0.7"
							begin="0s;animProp.end+0.1s"
							dur="0.1s"
							/>
				</rect>
			</symbol>
		</defs>
		<defs id="defs_bullet">
			<radialGradient id="gradient-bullet"
					gradientUnits="objectBoundingBox"
					cx="20%" cy="20%" r="90%"
					spreadMethod="pad"
					>
				<stop offset="0" stop-color="#fff" />
				<stop offset="0.1" stop-color="#fff" />
				<stop offset="1" stop-color="#888" />
			</radialGradient>
			
			<symbol id="symbol-bullet"
					style="
						overflow: visible;
						fill: #fff;
						stroke: #000;
						stroke-width: 1;
						stroke-linecap: round;
						stroke-linejoin: miter;
						"
					>
				<circle cx="0" cy="0" r="2"
						fill="url(#gradient-bullet)"
						stroke="none"
						/>
				<circle cx="0" cy="0" r="2"
						fill="currentColor" fill-opacity="0.1"
						/>
			</symbol>
		</defs>
		
		<svg id="player1"
				class="player1"
				x="50" y="935"
				overflow="visible">
			<g class="rotator" transform="rotate(-10)">
				<g class="sizer">
					<use xlink:href="#symbol-plane"
							class="plane scaler"
							transform="scale(1.5)"
							/>
				</g>
				<svg class="bullet template"
						x="39" y="-6"
						overflow="visible"
						>
					<g class="sizer">
						<use xlink:href="#symbol-bullet"
								class="scaler"
								transform="scale(2)"
								/>
					</g>
				</svg>
			</g>
		</svg>
		<svg id="player2"
				class="player2"
				x="950" y="935"
				overflow="visible">
			<g class="rotator" transform="rotate(190)">
				<g class="sizer">
					<use xlink:href="#symbol-plane"
							class="plane scaler"
							transform="scale(1.5,-1.5)"
							/>
				</g>
				<svg class="bullet template"
						x="39" y="6"
						overflow="visible"
						>
					<g class="sizer">
						<use xlink:href="#symbol-bullet"
								class="scaler"
								transform="scale(2)"
								/>
					</g>
				</svg>
			</g>
		</svg>
	</g>
	
	<g id="foreground" clip-path="url(#clip-all)">
		<defs>
			<svg class="explosion template"
					overflow="visible"
					fill="#fff"
					stroke="#000"
					stroke-width="1"
					stroke-linecap="round"
					stroke-linejoin="miter"
					>
				<g class="scaler" transform="scale(3)">
					<g class="debris">
						<use xlink:href="#symbol-prop"
								x="0" y="0"
								width="5" height="5"
								>
							<animateTransform
									attributeType="XML" attributeName="transform"
									type="rotate"
									from="0" to="360" repeatCount="indefinite"
									dur="0.5s"
									/>
							<animateMotion
									path="M 0,0 q 30,-70 60,60"
									begin="f00baron_start.begin" dur="2s"
									/>
						</use>
						<circle cx="0" cy="0" r="0.5" fill="#888">
							<animateMotion
									path="M 0,0 q 60,-30 120,40"
									begin="f00baron_start.begin" dur="2s"
									/>
						</circle>
						<use xlink:href="#symbol-bullet"
								x="0" y="0"
								transform="scale(0.5)"
								>
							<animateMotion
									path="M 0,0 q -20,-60 -50,60"
									begin="f00baron_start.begin" dur="2s"
									/>
						</use>
						<rect x="0" y="0" width="4" height="2"
								fill="currentColor"
								>
							<animateTransform
									attributeType="XML" attributeName="transform"
									type="rotate"
									from="0 2,1" to="360 2,1" repeatCount="indefinite"
									dur="1s"
									/>
							<animateMotion
									path="M 0,0 q -40,-20 -60,100"
									begin="f00baron_start.begin" dur="2s"
									/>
						</rect>
						<animate attributeType="XML" attributeName="opacity"
								from="1" to="0" fill="freeze"
								begin="f00baron_start.begin+1.5s" dur="0.5s"
								/>
					</g>
					<g class="cloud">
						<path d="M -17,0
								q -3,-7 4,-9
								q -1,-4 3,-5
								q 3,-4 8,-1
								q 4,-3 7,0
								q 6,-2 7,5
								q 5,0 4,6
								q 4,4 0,7
								q 2,5 -4,6
								q 0,6 -7,6
								q -3,3 -6,-1
								q -5,3 -7,-2
								q -3,0 -4,-3
								Q -20,5 -17,0
								Z"
								/>
						<path d="M 0,-9 q 4,-3 5,2"
								/>
						<path d="M 11,-1 q 3,2 -1,4 q 1,5 -4,4"
								/>
						<path d="M -10,-2 q -3,2 1,5 q -1,4 4,4 q 1,4 5,2"
								/>
						<animateTransform class="rotator"
								attributeType="XML" attributeName="transform"
								type="rotate"
								from="0" to="360"
								dur="60s" repeatCount="indefinite"
								/>
						<animateTransform
								attributeType="XML" attributeName="transform"
								type="scale" additive="sum"
								from="0" to="1" fill="freeze"
								begin="f00baron_start.begin" dur="0.2s"
								/>
					</g>
					<g class="explosion">
						<path d="M -20,-3 l
								10,-2  -3,-8  8,2
								 4,-7   3,7   7,-4
								-1,7   11,2  -7,5
								 7,8  -11,0   2,11
								-9,-7  -3,8  -4,-9
								-9,0    3,-7  Z"
								fill="#f00"
								>
							<animateTransform class="rotator"
									attributeType="XML" attributeName="transform"
									type="rotate"
									from="0" to="360" dur="60s"
									repeatCount="indefinite"
									/>
							<animateTransform class="anim-start"
									attributeType="XML" attributeName="transform"
									type="scale" additive="sum"
									from="0.5" to="1" fill="freeze"
									begin="indefinite" dur="0.1s"
									/>
							<animate
									attributeType="XML" attributeName="opacity"
									from="1" to="0" fill="freeze"
									begin="f00baron_start.end+0.2s" dur="0.5s"
									/>
						</path>
						<path d="M -4,0 l
								-3,-3  4,0   1,-4
								 3,3   3,-2  0,4
								 4,2  -3,2   1,3
								-4,0  -3,3  -1,-4
								-4,-1  Z"
								fill="#ff0"
								>
							<animateTransform class="rotator"
									attributeType="XML" attributeName="transform"
									type="rotate"
									from="360" to="0" dur="30s"
									repeatCount="indefinite"
									/>
							<animate
									attributeType="XML" attributeName="opacity"
									from="1" to="0" fill="freeze"
									begin="f00baron_start.end+0.2s" dur="0.2s"
									/>
						</path>
					</g>
					<animate class="anim-end"
							attributeType="XML" attributeName="opacity"
							from="1" to="0" fill="freeze"
							begin="f00baron_start.end+3s" dur="1s"
							/>
				</g>
			</svg>
		</defs>
		
		<g id="explosions">
		</g>
		<g id="clouds">
			<defs>
				<symbol id="symbol-cloud"
						style="
							overflow: visible;
							fill: #fff;
							stroke: #000;
							stroke-width: 5;
							stroke-linecap: round;
							stroke-linejoin: miter;
							"
						>
					<path d="M -100,30
								q -30,-10 -15,-40
								q -10,-30 20,-40
								q 10,-30 40,-20
								q 30,-20 50,5
								q 30,-20 50,10
								q 35,-10 40,20
								q 35,-5 30,30
								q 25,20 0,40
								q 5,25 -25,25
								q -20,25 -45,5
								q -20,20 -40,0
								q -20,25 -40,5
								q -25,15 -40,-10
								Q -110,55 -100,30
								Z"
							/>
					<path d="M -80,0
								q -5,-15 10,-20
								q 0,-25 20,-20
								q 10,-20 30,-5
								"
							/>
					<path d="M 40,40
								q 20,10 25,-10
								q 25,0 20,-25
								"
							/>
					<path d="M -40,30
								q 15,15 30,5
								"
							/>
					<path d="M 10,-10
								q 15,-20 30,-10
								"
							/>
				</symbol>
			</defs>
			
			<use xlink:href="#symbol-cloud"
					class="cloud"
					x="-1000"
					/>
			<use xlink:href="#symbol-cloud"
					class="cloud"
					x="-1000"
					/>
			<use xlink:href="#symbol-cloud"
					class="cloud"
					x="-1000"
					/>
		</g>
		
		<rect id="ground"
				x="0" y="950"
				width="100%" height="50"
				fill="url(#pattern-ground)"
				stroke="#000"
				stroke-width="5"
				/>
	</g>
</svg>