Continued working on a UI redesign.
This commit is contained in:
Jonathan Bernard
parent
e2c79c796d
commit
104a0f9957
141
snake/arrow.svg
Normal file
141
snake/arrow.svg
Normal file
@ -0,0 +1,141 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
width="100"
|
||||
height="100"
|
||||
id="svg2"
|
||||
version="1.1"
|
||||
inkscape:version="0.48.4 r9939"
|
||||
sodipodi:docname="arrow.svg">
|
||||
<defs
|
||||
id="defs4" />
|
||||
<sodipodi:namedview
|
||||
id="base"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="2.83"
|
||||
inkscape:cx="61.871531"
|
||||
inkscape:cy="32.299483"
|
||||
inkscape:document-units="px"
|
||||
inkscape:current-layer="layer1"
|
||||
showgrid="false"
|
||||
units="px"
|
||||
showguides="true"
|
||||
inkscape:guide-bbox="true"
|
||||
inkscape:snap-global="false"
|
||||
guidetolerance="20"
|
||||
inkscape:window-width="1360"
|
||||
inkscape:window-height="716"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="1">
|
||||
<sodipodi:guide
|
||||
orientation="1,0"
|
||||
position="10,11.696429"
|
||||
id="guide2987" />
|
||||
<sodipodi:guide
|
||||
orientation="1,0"
|
||||
position="20,11.026786"
|
||||
id="guide2989" />
|
||||
<sodipodi:guide
|
||||
orientation="1,0"
|
||||
position="30,8.75"
|
||||
id="guide2991" />
|
||||
<sodipodi:guide
|
||||
orientation="1,0"
|
||||
position="40,9.3191965"
|
||||
id="guide2993" />
|
||||
<sodipodi:guide
|
||||
orientation="1,0"
|
||||
position="50,8.8169643"
|
||||
id="guide2995" />
|
||||
<sodipodi:guide
|
||||
orientation="1,0"
|
||||
position="60,9.5535715"
|
||||
id="guide2997" />
|
||||
<sodipodi:guide
|
||||
orientation="1,0"
|
||||
position="70,9.4754465"
|
||||
id="guide2999" />
|
||||
<sodipodi:guide
|
||||
orientation="1,0"
|
||||
position="80,10.602679"
|
||||
id="guide3001" />
|
||||
<sodipodi:guide
|
||||
orientation="1,0"
|
||||
position="90,10.279018"
|
||||
id="guide3003" />
|
||||
<sodipodi:guide
|
||||
orientation="0,1"
|
||||
position="87.175781,10"
|
||||
id="guide3005" />
|
||||
<sodipodi:guide
|
||||
orientation="0,1"
|
||||
position="87.269531,20"
|
||||
id="guide3007" />
|
||||
<sodipodi:guide
|
||||
orientation="0,1"
|
||||
position="87.28125,30"
|
||||
id="guide3009" />
|
||||
<sodipodi:guide
|
||||
orientation="0,1"
|
||||
position="87.085938,40"
|
||||
id="guide3011" />
|
||||
<sodipodi:guide
|
||||
orientation="0,1"
|
||||
position="87.136719,50"
|
||||
id="guide3013" />
|
||||
<sodipodi:guide
|
||||
orientation="0,1"
|
||||
position="87.324219,60"
|
||||
id="guide3015" />
|
||||
<sodipodi:guide
|
||||
orientation="0,1"
|
||||
position="87.347656,70"
|
||||
id="guide3017" />
|
||||
<sodipodi:guide
|
||||
orientation="0,1"
|
||||
position="87.273438,80"
|
||||
id="guide3019" />
|
||||
<sodipodi:guide
|
||||
orientation="0,1"
|
||||
position="87.167969,90"
|
||||
id="guide3021" />
|
||||
</sodipodi:namedview>
|
||||
<metadata
|
||||
id="metadata7">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(0,-952.3609)">
|
||||
<path
|
||||
style="fill:#ffffff;stroke:none"
|
||||
d="m 0,40 10,0 0,-10 10,0 0,-10 10,0 0,-10 10,0 0,-10 20,0 0,10 10,0 0,10 10,0 0,10 10,0 0,10 10,0 0,10 -30,0 0,50 -40,0 0,-50 -30,0 z"
|
||||
id="path3873"
|
||||
inkscape:connector-curvature="0"
|
||||
transform="translate(0,952.3609)"
|
||||
sodipodi:nodetypes="ccccccccccccccccccccccccc" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.8 KiB |
@ -1,28 +1,133 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset=utf-8>
|
||||
<link href='http://fonts.googleapis.com/css?family=Press+Start+2P' rel='stylesheet' type='text/css'>
|
||||
<link href="snake.css" type="text/css" rel="stylesheet">
|
||||
<script src="snake.js" type="application/javascript"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class=corner></div><div class=corner></div><div class=corner></div><div class=corner></div>
|
||||
<div id=container>
|
||||
<div class=corner></div><div class=corner></div><div class=corner></div><div class=corner></div>
|
||||
<header><h1>SNAKE</h1></header>
|
||||
<section id=description>
|
||||
Play SNAKE! You are the <span style="color: #88F">BLUE</span>
|
||||
<header><h1>SNAKE</h1></header><!--
|
||||
|
||||
--><section id=description>
|
||||
<h4>Play SNAKE!</h4>
|
||||
<p>You are the <span style="color: #88F">BLUE</span>
|
||||
snake. Eat the <span style="color: green">GREEN</span> food to
|
||||
grow longer! But be careful! Don't run into the walls or
|
||||
yourself!
|
||||
<section>
|
||||
<section id=levelSelect>
|
||||
</section>
|
||||
<section id=gameContainer>
|
||||
</section>
|
||||
<section id=controls>
|
||||
</section>
|
||||
<section id=editorControls>
|
||||
yourself!</p>
|
||||
</section><!--
|
||||
|
||||
--><section id=levelSelect>
|
||||
<h4>Level Select</h4>
|
||||
<h5>Beginner</h5>
|
||||
<ol>
|
||||
<li levelNum=0 class=selected>Hello Snake!</li>
|
||||
<li levelNum=1>Room to Grow</li>
|
||||
<li levelNum=2>North and South</li>
|
||||
<li levelNum=3>4 Small Rooms</li>
|
||||
<li levelNum=4>Polka Dots</li>
|
||||
<li levelNum=5>Toaster Face</li>
|
||||
<li levelNum=6>Wierd Walls</li>
|
||||
<li levelNum=7>Maze 1</li>
|
||||
<li levelNum=8>Spiral</li>
|
||||
<li levelNum=9>Feast and Famine</li>
|
||||
<li levelNum=10>Maze 2</li>
|
||||
</ol>
|
||||
<h5>Classic Nibbles</h5>
|
||||
</section><!--
|
||||
|
||||
--><section id=gameContainer>
|
||||
<canvas id=snakeCanvas tabIndex=1></canvas>
|
||||
</section><!--
|
||||
|
||||
--><section id=controls>
|
||||
<h4>Controls</h4>
|
||||
<ul><li><img src="arrow.svg" class="arrow up">
|
||||
<img src="arrow.svg" class="arrow down">
|
||||
<img src="arrow.svg" class="arrow left">
|
||||
<img src="arrow.svg" class="arrow right">: Move </li>
|
||||
<li>ENTER: (Re)start.</li>
|
||||
<li>PAUSE: (Un)Pause</li>
|
||||
</ul>
|
||||
</section><!--
|
||||
|
||||
--><section id=options>
|
||||
<h4>Options</h4>
|
||||
<button>Level Editor
|
||||
<div class=corner></div><div class=corner></div>
|
||||
<div class=corner></div><div class=corner></div></button>
|
||||
</section><!--
|
||||
|
||||
--><section id=editorControls>
|
||||
<label>Speed</label><input type=text id=speed>
|
||||
<label>Rows</label><input type=text id=rows>
|
||||
<label>Columns</label><input type=text id=cols>
|
||||
<input type=checkbox id=hasGoal><label>Winning Score</label><!--
|
||||
--><input type=text id=targetScore>
|
||||
<label>Growth</label><input type=text id=growthFactor>
|
||||
<label>Growth Increase</label><!--
|
||||
--><input type=text id=growthFactorIncrease>
|
||||
</section>
|
||||
</div>
|
||||
<div class=debug-aspect>
|
||||
<span class=wide-only>wide</span>
|
||||
<span class=landscape-only>landscape</span>
|
||||
<span class=even-only>even</span>
|
||||
<span class=portrait-only>portrait</span>
|
||||
<span class=tall-only>tall</span>
|
||||
</div>
|
||||
<div class=debug-size>
|
||||
<span class=small-only>small</span>
|
||||
<span class=medium-only>medium</span>
|
||||
<span class=large-only>large</span>
|
||||
<span class=ultralarge-only>ultralarge</span>
|
||||
</div>
|
||||
|
||||
<script type="application/javascript">
|
||||
var canvas = document.getElementById("snakeCanvas");
|
||||
canvas.width = canvas.clientWidth;
|
||||
canvas.height = canvas.clientHeight;
|
||||
|
||||
var loadLevel = function(event) {
|
||||
var levelEl = event.target;
|
||||
document.querySelector("#levelSelect li.selected").className = "";
|
||||
levelEl.className = "selected";
|
||||
var levelNum = parseInt(levelEl.getAttribute("levelNum"));
|
||||
Snake.initialize(levelData[levelNum]); };
|
||||
|
||||
var levelData = [
|
||||
// Level 1: Hello Snake!
|
||||
{"board":[1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,1,1,0,0,0,2,0,0,0,0,1,1,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1],"rows":10,"cols":10,"fps":2},
|
||||
// Level 2: Room to Grow
|
||||
{"board":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,2,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],"rows":16,"cols":16,"fps":3},
|
||||
// Level 3: North and South
|
||||
{"board":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,2,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,1,1,1,1,1,1,1,1,1,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],"rows":15,"cols":15,"fps":3},
|
||||
// Level 4: Four Small Rooms
|
||||
{"board":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,2,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,1,0,0,0,0,0,0,1,1,0,0,0,0,0,0,1,0,0,0,0,0,0,1,1,0,0,0,0,0,0,1,0,0,0,0,0,0,1,1,0,0,0,0,0,0,1,0,0,0,0,0,0,1,1,0,0,0,0,0,0,1,0,0,0,0,0,0,1,1,1,1,1,0,1,1,1,1,1,1,1,0,1,1,1,0,0,0,0,0,0,1,0,0,0,0,0,0,1,1,0,0,0,0,0,0,1,0,0,0,0,0,0,1,1,0,0,0,0,0,0,1,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,1,0,0,0,0,0,0,1,1,0,0,0,0,0,0,1,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],"rows":15,"cols":15,"fps":3},
|
||||
// Level 5: Polka Dots
|
||||
{"board":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,1,0,0,0,1,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,1,0,0,0,1,0,0,0,1,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,0,0,0,1,0,0,0,1,0,0,0,1,1,1,0,0,0,0,2,0,0,0,0,0,0,0,0,1,1,0,0,1,0,0,0,1,0,0,0,1,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,0,0,0,1,0,0,0,1,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,1,0,3,0,1,0,0,0,1,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,0,0,0,1,0,0,0,1,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],"rows":15,"cols":15,"fps":3},
|
||||
// Level 6: Toaster Face
|
||||
{"board":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,1,0,0,0,0,0,1,1,1,0,0,1,0,1,0,0,0,1,0,1,0,0,1,1,0,0,0,0,0,0,1,0,0,0,0,0,0,1,1,1,0,0,1,0,0,0,0,0,1,0,0,1,1,1,0,0,1,1,1,1,1,1,1,1,1,0,0,1,1,0,0,0,0,0,0,1,0,0,0,0,0,0,1,1,1,0,0,1,2,0,0,0,0,1,0,0,1,1,1,0,0,1,1,1,0,0,0,1,1,1,0,0,1,1,0,0,0,1,0,0,0,0,0,1,0,0,0,1,1,1,0,0,0,0,0,1,0,0,0,0,0,1,1,1,0,0,1,0,1,1,1,1,1,0,1,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,0,0,1,0,0,1,0,0,1,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],"rows":15,"cols":15,"fps":3},
|
||||
// Level 7: Wierd Walls
|
||||
{"board":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,2,0,0,0,0,0,0,0,0,0,0,0,1,1,0,1,0,0,0,1,1,1,1,1,1,1,0,1,1,0,1,0,1,0,0,0,0,0,0,0,0,0,1,1,0,1,0,1,0,1,0,0,0,1,1,1,0,1,1,0,1,0,1,0,1,0,1,0,0,0,0,0,1,1,0,1,0,1,0,1,0,1,0,1,0,0,0,1,1,0,1,0,1,0,1,0,1,0,1,0,1,0,1,1,0,0,0,1,0,1,0,1,0,1,0,1,0,1,1,0,0,0,0,0,1,0,1,0,1,0,1,0,1,1,0,1,1,1,0,0,0,1,0,1,0,1,0,1,1,0,0,0,0,0,0,0,0,0,1,0,1,0,1,1,0,1,1,1,1,1,1,1,0,0,0,1,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],"rows":15,"cols":15,"fps":3},
|
||||
// Level 8: Maze 1
|
||||
{"board":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,1,0,0,0,0,0,0,1,1,0,1,1,1,1,0,1,0,1,1,0,1,0,1,1,0,0,0,0,0,0,1,0,0,0,0,1,0,1,1,0,1,1,0,1,1,1,1,1,0,1,1,0,1,1,0,1,2,0,0,0,0,0,0,0,0,1,0,1,1,0,1,0,1,1,1,0,1,1,1,0,1,0,1,1,0,1,0,0,1,0,0,0,0,1,0,0,0,1,1,0,1,1,0,1,0,1,1,0,0,0,1,0,1,1,0,0,0,0,0,0,1,1,0,1,0,0,0,1,1,0,1,1,1,1,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,1,1,1,1,1,0,0,1,1,0,1,1,1,0,1,1,0,0,0,1,1,0,1,1,0,0,0,0,0,0,0,0,1,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],"rows":15,"cols":15,"fps":3},
|
||||
// Level 9: Spiral
|
||||
{"board":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,2,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,1,1,1,1,1,1,1,1,1,1,0,0,1,1,0,0,0,0,0,0,0,0,0,0,1,0,0,1,1,0,1,1,1,1,1,1,1,1,0,1,0,0,1,1,0,1,0,0,0,0,0,0,1,0,1,0,0,1,1,0,1,0,1,1,1,1,0,1,0,1,0,0,1,1,0,1,0,1,3,0,1,0,1,0,1,0,0,1,1,0,1,0,1,0,0,0,0,1,0,1,0,0,1,1,0,1,0,1,0,0,0,0,0,0,1,0,0,1,1,0,1,0,1,1,1,1,1,1,1,1,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,1,1,1,1,1,1,1,1,1,1,1,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],"rows":15,"cols":15,"fps":3},
|
||||
// Level 10: Feast and Famine
|
||||
{"board":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,1,0,0,0,0,0,0,1,1,0,0,0,0,0,0,1,0,0,0,0,0,0,1,1,2,0,0,0,0,0,1,0,0,0,0,0,0,1,1,0,0,0,0,0,0,1,0,0,0,0,0,0,1,1,0,0,0,0,0,0,1,0,0,0,0,0,0,1,1,0,0,0,0,0,0,1,0,0,0,0,0,0,1,1,0,0,0,0,0,0,1,0,0,0,0,0,0,1,1,0,0,0,0,0,0,1,0,3,0,3,0,3,1,1,0,0,0,0,0,0,1,0,0,3,0,3,0,1,1,0,0,0,0,0,0,1,0,3,0,3,0,3,1,1,0,0,0,0,0,0,1,0,0,3,0,3,0,1,1,0,0,0,0,0,0,0,0,3,0,3,0,3,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],"rows":15,"cols":15,"fps":3},
|
||||
// Level 11: Maze 2
|
||||
{"board":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,1,1,1,1,1,1,1,1,1,1,1,1,1,0,1,1,0,1,0,0,0,0,0,0,0,1,0,0,0,1,0,1,1,0,1,0,1,0,1,0,0,0,1,0,1,0,0,0,1,1,0,1,0,0,1,1,0,1,1,1,0,1,1,1,0,1,1,0,1,1,0,1,1,0,0,0,1,0,0,1,0,0,1,1,0,1,0,0,0,1,1,1,0,0,1,0,1,0,1,1,1,0,0,0,1,0,0,1,1,1,0,0,0,1,0,0,1,1,0,1,0,0,1,0,0,0,0,1,1,1,1,1,0,1,1,0,0,1,0,0,0,1,1,0,1,0,0,0,0,0,1,1,1,0,1,1,1,1,1,1,0,1,0,1,1,1,1,1,1,0,0,0,0,0,0,1,1,0,1,0,0,0,0,0,1,1,0,1,1,1,1,0,0,0,0,1,1,1,1,1,0,1,1,0,1,0,0,0,1,1,1,1,0,0,0,1,0,0,1,1,0,0,0,1,0,0,0,0,0,0,1,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],"rows":17,"cols":17,"fps":3}];
|
||||
|
||||
// Add listeners for each of the level list items.
|
||||
var levelLis = document.querySelectorAll("#levelSelect li");
|
||||
for (var i = 0; i < levelLis.length; ++i) {
|
||||
levelLis[i].addEventListener("click", loadLevel); }
|
||||
|
||||
loadLevel({target: document.querySelector("#levelSelect li.selected")});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
100
snake/snake.scss
100
snake/snake.scss
@ -24,6 +24,10 @@ html {
|
||||
font-family: "Press Start 2P";
|
||||
}
|
||||
|
||||
ol > li { margin-left: 4em; }
|
||||
#levelSelect > h5 { margin-left: 0.5rem; }
|
||||
ul { list-style: none; }
|
||||
|
||||
.corner {
|
||||
border-style: solid;
|
||||
position: absolute;
|
||||
@ -72,7 +76,37 @@ body {
|
||||
|
||||
header {
|
||||
text-align: center;
|
||||
& > h1 { padding-top: 0.5rem; } } } }
|
||||
& > h1 { padding-top: 0.5rem; } }
|
||||
|
||||
section { transition: 1s; }
|
||||
section p, section ol, section ul { margin-left: 0.5rem; }
|
||||
section#editorControls { display: none; } }
|
||||
|
||||
section#levelSelect {
|
||||
overflow: auto;
|
||||
|
||||
ol {
|
||||
font-size: 80%;
|
||||
|
||||
li {
|
||||
cursor: pointer;
|
||||
&.selected { color: $accent2; } } } }
|
||||
|
||||
section#controls {
|
||||
li { margin-top: 0.5rem; }
|
||||
|
||||
.arrow {
|
||||
width: 1rem; height: 1rem;
|
||||
|
||||
&.right { transform: rotate(90deg); }
|
||||
&.down { transform: rotate(180deg); }
|
||||
&.left { transform: rotate(270deg); } } } }
|
||||
|
||||
h2, h3, h4 {
|
||||
color: $accent1;
|
||||
text-decoration: underline; }
|
||||
|
||||
h5 { color: $accent1; }
|
||||
|
||||
button {
|
||||
background-color: $out;
|
||||
@ -110,25 +144,49 @@ button {
|
||||
|
||||
@include forAspect(wide) {
|
||||
body {
|
||||
width: 73rem;
|
||||
margin-top: 2rem;
|
||||
|
||||
height: 37rem;
|
||||
margin-top: 4rem;
|
||||
width: 73rem;
|
||||
|
||||
#container {
|
||||
height: 35rem;
|
||||
width: 71rem;
|
||||
|
||||
section { margin: 0.5rem; }
|
||||
section {
|
||||
display: inline-block;
|
||||
vertical-align: top; }
|
||||
|
||||
section#gameContainer {
|
||||
width: 30rem;
|
||||
margin-left: 20rem;
|
||||
margin-right: 20rem; }
|
||||
|
||||
#snakeCanvas {
|
||||
width: 30rem;
|
||||
height: 30rem; }
|
||||
|
||||
section#description, section#levelSelect, section#controls,
|
||||
section#options {
|
||||
position: absolute;
|
||||
width: 19rem; }
|
||||
|
||||
section#description { left: 0.5rem; }
|
||||
section#levelSelect { right: 0.5rem; }
|
||||
section#controls { left: 0.5rem; top: 13.5rem; }
|
||||
section#options { left: 0.5rem; top: 20rem; }
|
||||
|
||||
section#levelSelect { height: 29rem; }
|
||||
section#levelSelect h5 { margin-top: 1rem; } } }
|
||||
|
||||
|
||||
section#description, section#levelSelect, section#controls {
|
||||
width: 18rem; } } }
|
||||
}
|
||||
|
||||
@include forAspect(landscape) {
|
||||
body {
|
||||
width: 73rem;
|
||||
height: 37rem;
|
||||
margin-top: 4rem;
|
||||
margin-top: 2rem;
|
||||
|
||||
#container {
|
||||
height: 35rem;
|
||||
@ -147,6 +205,34 @@ button {
|
||||
margin-right: auto; }
|
||||
}
|
||||
|
||||
|
||||
.debug-size, .debug-aspect {
|
||||
position: fixed;
|
||||
background: #333;
|
||||
color: #CCC; }
|
||||
|
||||
.debug-aspect {
|
||||
left: 0;
|
||||
bottom: 0; }
|
||||
|
||||
.debug-size {
|
||||
right: 0;
|
||||
bottom: 0; }
|
||||
|
||||
.small-only, .medium-only, .large-only, .ultralarge-only, .wide-only,
|
||||
.landscape-only, .even-only, .portrait-only, .tall-only {
|
||||
display: none; }
|
||||
|
||||
@include forSize(small) { .small-only { display: inline; } }
|
||||
@include forSize(medium) { .medium-only { display: inline; } }
|
||||
@include forSize(large) { .large-only { display: inline; } }
|
||||
@include forAspect(ultraLarge) { .ultralarge-only { display: inline; } }
|
||||
@include forAspect(wide) { .wide-only { display: inline; } }
|
||||
@include forAspect(landscape) { .landscape-only { display: inline; } }
|
||||
@include forAspect(even) { .even-only { display: inline; } }
|
||||
@include forAspect(portrait) { .portrait-only { display: inline; } }
|
||||
@include forAspect(tall) { .tall-only { display: inline; } }
|
||||
|
||||
/* @include forSize(medium) {
|
||||
html { font-size: 80%; }
|
||||
body {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user