body {\n background: #333333;\n width: 100%;\n}\n\n.passage .title { display: none } \n\n#block {\n background: orange;\n position: absolute;\n top: 200px;\n left: 200px;\n width: 150px;\n height: 150px;\n}\n#dot {\n background: yellow;\n position: absolute;\n top: 500px;\n left: 500px;\n width: 150px;\n height: 150px;r\n}\n\n#sidebar { display: none;}\n\n#storyAuthor{font-size:90%;}\n\nh1, h3 {display: none;}\n\n#footer {display: none;}\n\n#floater { display: none; }
The Relationship
(function(){\n\nvar positionX = 200;\nvar positionY = 200;\n\nvar dotX = 500;\nvar dotY = 500;\n\nvar block = document.createElement("div");\nblock.id = "block";\ndocument.body.appendChild(block);\n\nvar dot = document.createElement("div");\ndot.id = "dot";\ndocument.body.appendChild(dot);\n\ndocument.addEventListener("keypress", function(event) {\nvar keyCode = ('which' in event) ? event.which : event.keyCode;\n switch(keyCode) {\n case 119:\n positionY -= 14;\n dotY -= 14;\n $('block').style.top = positionY + "px";\n update();\n break;\n case 97:\n positionX -= 14;\n dotX -= 14;\n $('block').style.left = positionX + "px";\n update();\n break;\n case 115:\n positionY += 14;\n dotY += 14;\n $('block').style.top = positionY + "px";\n update();\n break;\n case 100:\n positionX += 14;\n dotX += 14;\n $('block').style.left = positionX + "px";\n update();\n break;\n }\n});\n\nfunction update()\n{\n $('dot').style.top = dotX + "px";\n $('dot').style.left = dotY +"px";\n}\n\n}())