<!DOCTYPE html>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Pseudo3D Engine</title>
</head><body>
<style>
body {
background-color: #6ab5fb;
}
</style>
<div id="cnt">
<svg id="svg" width="8000" height="6000"></svg>
</div>
<div id="values"></div>
<div id="last"><input type="hidden" class="lastid" value="1"></div>
<script>
function calcBottom(objcount, ofset, firstx, firsty, length, width, height) {
var screen = document.getElementById("svg");
var resolutionx = screen.width.baseVal.value;
var resolutiony = screen.height.baseVal.value;
var centx = resolutionx / 2;
var centy = resolutiony / 2;
var originx = centx;
var originy = ofset;
firsty = firsty + originy;
firstx = firstx + originx;
var secx = firstx + width;
var secy = firsty;
if(firsty > originy) {
var foury = firsty + length;
var thirdy = foury;
}
else {
var foury = firsty - length;
var thirdy = foury;
}
if(firsty > originy) {
if(firstx > originx ) {
var fourx = (firstx - originx) / (firsty - originy);
fourx = (foury - originy) * fourx;
fourx = fourx + originx;
}
else {
var fourx = (foury - originy) / (firsty-originy);
fourx = fourx * ( originx - firstx);
fourx = originx - fourx;
}
}
else {
if(firstx > originx ) {
var fourx = (originy - foury) / (originy - firsty);
fourx = fourx / (originx + firstx);
fourx = fourx + originx;
}
else {
var fourx = (originy - foury) / (originy - firsty);
fourx = fourx / (originx - ( originx - firstx));
fourx = originx - fourx;
}
}
if(secy > originy) {
if(secx > originx) {
var thirdx = (secx - originx) / (secy - originy);
thirdx = (thirdy - originy) * thirdx;
thirdx = thirdx + originx;
}
else {
var thirdx = (thirdy - originy) / (secy-originy);
thirdx = thirdx * ( originx - secx);
thirdx = originx - thirdx;
}
}
else {
if(secx > originx ) {
var thirdx = (originy - thirdy) / (originy - secy);
thirdx = thirdx / (originx + thirdx);
thirdx = thirdx + originx;
}
else {
var thirdx = (originy - thirdy) / (originy - secy);
thirdx = thirdx / (originx - ( originx - secx));
thirdx = originx - thirdx;
}
}
if(firstx > originx) {
foury = (firstx - originx) / (firsty - originy);
foury = (fourx - originx) / foury;
foury = foury + originy;
}
else {
foury = (originx - fourx) / (originx - firstx);
foury = foury * (firsty - originy);
foury = foury + originy;
}
if(secx > originx) {
thirdy = (secx - originx) / (secy - originy);
thirdy = (thirdx - originx) / thirdy;
thirdy = thirdy + originy;
}
else {
thirdy = (originx - thirdx) / (originx - secx);
thirdy = thirdy * (secy - originy);
thirdy = thirdy + originy;
}
return '<polygon id="a' + objcount + '" points="' + firstx.toString() + ',' + firsty.toString() + ' ' + secx.toString() + ',' + secy.toString() + ' ' + thirdx.toString() + ',' + thirdy.toString() + ' ' + fourx.toString() + ',' + foury.toString() + '" style="fill:none;stroke:rgb(255,255,255);stroke-width:3"></polygon>';
}
function calcTop(objcount, ofset, firstx, firsty, length, width, height) {
var screen = document.getElementById("svg");
var resolutionx = screen.width.baseVal.value;
var resolutiony = screen.height.baseVal.value;
var centx = resolutionx / 2;
var centy = resolutiony / 2;
var originx = centx;
var originy = ofset;
firsty = firsty + originy;
firstx = firstx + originx;
var secx = firstx + width;
var secy = firsty;
if(firsty > originy) {
var foury = firsty + length;
var thirdy = foury;
}
else {
var foury = firsty - length;
var thirdy = foury;
}
if(firsty > originy) {
if(firstx > originx ) {
var fourx = (firstx - originx) / (firsty - originy);
fourx = (foury - originy) * fourx;
fourx = fourx + originx;
}
else {
var fourx = (foury - originy) / (firsty-originy);
fourx = fourx * ( originx - firstx);
fourx = originx - fourx;
}
}
else {
if(firstx > originx ) {
var fourx = (originy - foury) / (originy - firsty);
fourx = fourx / (originx + firstx);
fourx = fourx + originx;
}
else {
var fourx = (originy - foury) / (originy - firsty);
fourx = fourx / (originx - ( originx - firstx));
fourx = originx - fourx;
}
}
if(secy > originy) {
if(secx > originx) {
var thirdx = (secx - originx) / (secy - originy);
thirdx = (thirdy - originy) * thirdx;
thirdx = thirdx + originx;
}
else {
var thirdx = (thirdy - originy) / (secy-originy);
thirdx = thirdx * ( originx - secx);
thirdx = originx - thirdx;
}
}
else {
if(secx > originx ) {
var thirdx = (originy - thirdy) / (originy - secy);
thirdx = thirdx / (originx + thirdx);
thirdx = thirdx + originx;
}
else {
var thirdx = (originy - thirdy) / (originy - secy);
thirdx = thirdx / (originx - ( originx - secx));
thirdx = originx - thirdx;
}
}
if(firstx > originx) {
foury = (firstx - originx) / (firsty - originy);
foury = (fourx - originx) / foury;
foury = foury + originy;
}
else {
foury = (originx - fourx) / (originx - firstx);
foury = foury * (firsty - originy);
foury = foury + originy;
}
if(secx > originx) {
thirdy = (secx - originx) / (secy - originy);
thirdy = (thirdx - originx) / thirdy;
thirdy = thirdy + originy;
}
else {
thirdy = (originx - thirdx) / (originx - secx);
thirdy = thirdy * (secy - originy);
thirdy = thirdy + originy;
}
firsty = firsty - height;
secy = secy - height;
if(firstx > originx) {
foury = (firstx - originx) / (firsty - originy);
foury = (fourx - originx) / foury;
foury = foury + originy;
}
else {
foury = (originx - fourx) / (originx - firstx);
foury = foury * (firsty - originy);
foury = foury + originy;
}
if(secx > originx) {
thirdy = (secx - originx) / (secy - originy);
thirdy = (thirdx - originx) / thirdy;
thirdy = thirdy + originy;
}
else {
thirdy = (originx - thirdx) / (originx - secx);
thirdy = thirdy * (secy - originy);
thirdy = thirdy + originy;
}
return '<polygon id="b' + objcount + '" points="' + firstx.toString() + ',' + firsty.toString() + ' ' + secx.toString() + ',' + secy.toString() + ' ' + thirdx.toString() + ',' + thirdy.toString() + ' ' + fourx.toString() + ',' + foury.toString() + '" style="fill:none;stroke:rgb(255, 255, 255);stroke-width:1"></polygon>';
}
function fixit(id) {
var whole = document.getElementById('poly' + id);
var content = whole.outerHTML;
whole.outerHTML = "";
var screen = document.getElementById("svg");
screen.innerHTML = screen.innerHTML + content;
}
function activate(id) {
fixit(id);
}
function decideIt(ofset, firsty, firstx) {
var screen = document.getElementById("svg");
var resolutionx = screen.width.baseVal.value;
var centx = resolutionx / 2;
firstx = firstx + centx;
var decide = 0;
if(firsty < ofset && firstx > centx) {
decide = 3;
}
else if(firsty < ofset && firstx < centx) {
decide = 2;
}
else if(firsty > ofset && firstx > centx) {
decide = 0;
}
else if(firsty > ofset && firstx < centx) {
decide = 1;
}
return decide;
}
function decideB(id, ofset) {
var bobj = document.getElementById("b" + id);
var by = bobj.points[0].y;
var decide = 0;
if(by > ofset) {
decide = 0;
}
else {
decide = 1;
}
return decide;
}
function sideFront(id, red, green, blue) {
var aobj = document.getElementById("a" + id);
var bobj = document.getElementById("b" + id);
return '<polygon id="c' + id + '" points="' + bobj.points[3].x + ',' + bobj.points[3].y + ' ' + bobj.points[2].x + ',' + bobj.points[2].y + ' ' + aobj.points[2].x + ',' + aobj.points[2].y + ' ' + aobj.points[3].x + ',' + aobj.points[3].y + '" style="fill:rgb(' + (red - 60) + ', ' + (green - 60) + ', ' + (blue - 60) + ');stroke:rgb(' + (red - 60) + ', ' + (green - 60) + ', ' + (blue - 60) + ');stroke-width:1" onclick="activate(' + id + ')"></polygon>';
}
function sideBack(id, red, green, blue) {
var aobj = document.getElementById("a" + id);
var bobj = document.getElementById("b" + id);
return '<polygon id="d' + id + '" points="' + bobj.points[0].x + ',' + bobj.points[0].y + ' ' + bobj.points[1].x + ',' + bobj.points[1].y + ' ' + aobj.points[1].x + ',' + aobj.points[1].y + ' ' + aobj.points[0].x + ',' + aobj.points[0].y + '" style="fill:rgb(' + (red - 30) + ', ' + (green - 30) + ', ' + (blue - 30) + ');stroke:rgb(' + (red - 30) + ', ' + (green - 30) + ', ' + (blue - 30) + ');stroke-width:1" onclick="activate(' + id + ')"></polygon>';
}
function sideRight(id, red, green, blue) {
var aobj = document.getElementById("a" + id);
var bobj = document.getElementById("b" + id);
return '<polygon id="e' + id + '" points="' + bobj.points[1].x + ',' + bobj.points[1].y + ' ' + aobj.points[1].x + ',' + aobj.points[1].y + ' ' + aobj.points[2].x + ',' + aobj.points[2].y + ' ' + bobj.points[2].x + ',' + bobj.points[2].y + '" style="fill:rgb(' + (red - 15) + ', ' + (green - 15) + ', ' + (blue - 15) + ');stroke:rgb(' + (red - 15) + ', ' + (green - 15) + ', ' + (blue - 15) + ');stroke-width:1" onclick="activate(' + id + ')"></polygon>';
}
function sideLeft(id, red, green, blue) {
var aobj = document.getElementById("a" + id);
var bobj = document.getElementById("b" + id);
return '<polygon id="f' + id + '" points="' + bobj.points[0].x + ',' + bobj.points[0].y + ' ' + aobj.points[0].x + ',' + aobj.points[0].y + ' ' + aobj.points[3].x + ',' + aobj.points[3].y + ' ' + bobj.points[3].x + ',' + bobj.points[3].y + '" style="fill:rgb(' + (red - 45) + ', ' + (green - 45) + ', ' + (blue - 45) + ');stroke:rgb(' + (red - 45) + ', ' + (green - 45) + ', ' + (blue - 45) + ');stroke-width:1" onclick="activate(' + id + ')"></polygon>';
}
function redoBottom(id, red, green, blue) {
var aobj = document.getElementById("a" + id);
return '<polygon id="aa' + id + '" points="' + aobj.points[0].x + ',' + aobj.points[0].y + ' ' + aobj.points[1].x + ',' + aobj.points[1].y + ' ' + aobj.points[2].x + ',' + aobj.points[2].y + ' ' + aobj.points[3].x + ',' + aobj.points[3].y + '" style="fill:rgb(' + (red - 100) + ', ' + (green - 100) + ', ' + (blue - 100) + ');stroke:rgb(' + (red - 100) + ', ' + (green - 100) + ', ' + (blue - 100) + ');stroke-width:1" onclick="activate(' + id + ')"></polygon>';
}
function redoTop(id, red, green, blue) {
var bobj = document.getElementById("b" + id);
return '<polygon id="bb' + id + '" points="' + bobj.points[0].x + ',' + bobj.points[0].y + ' ' + bobj.points[1].x + ',' + bobj.points[1].y + ' ' + bobj.points[2].x + ',' + bobj.points[2].y + ' ' + bobj.points[3].x + ',' + bobj.points[3].y + '" style="fill:rgb(' + red + ', ' + green + ', ' + blue + ');stroke:rgb(' + red + ', ' + green + ', ' + blue + ');stroke-width:1" onclick="activate(' + id + ')"></polygon>';
}
// wireframe
function sideFrontW(id) {
var aobj = document.getElementById("a" + id);
var bobj = document.getElementById("b" + id);
return '<polygon id="c' + id + '" points="' + bobj.points[3].x + ',' + bobj.points[3].y + ' ' + bobj.points[2].x + ',' + bobj.points[2].y + ' ' + aobj.points[2].x + ',' + aobj.points[2].y + ' ' + aobj.points[3].x + ',' + aobj.points[3].y + '" style="fill:none;stroke:rgb(255, 255, 255);stroke-width:2"></polygon>';
}
function sideBackW(id) {
var aobj = document.getElementById("a" + id);
var bobj = document.getElementById("b" + id);
return '<polygon id="d' + id + '" points="' + bobj.points[0].x + ',' + bobj.points[0].y + ' ' + bobj.points[1].x + ',' + bobj.points[1].y + ' ' + aobj.points[1].x + ',' + aobj.points[1].y + ' ' + aobj.points[0].x + ',' + aobj.points[0].y + '" style="fill:none;stroke:rgb(255, 255, 255);stroke-width:2"></polygon>';
}
function sideRightW(id) {
var aobj = document.getElementById("a" + id);
var bobj = document.getElementById("b" + id);
return '<polygon id="e' + id + '" points="' + bobj.points[1].x + ',' + bobj.points[1].y + ' ' + aobj.points[1].x + ',' + aobj.points[1].y + ' ' + aobj.points[2].x + ',' + aobj.points[2].y + ' ' + bobj.points[2].x + ',' + bobj.points[2].y + '" style="fill:none;stroke:rgb(255, 255, 255);stroke-width:2"></polygon>';
}
function sideLeftW(id) {
var aobj = document.getElementById("a" + id);
var bobj = document.getElementById("b" + id);
return '<polygon id="f' + id + '" points="' + bobj.points[0].x + ',' + bobj.points[0].y + ' ' + aobj.points[0].x + ',' + aobj.points[0].y + ' ' + aobj.points[3].x + ',' + aobj.points[3].y + ' ' + bobj.points[3].x + ',' + bobj.points[3].y + '" style="fill:none;stroke:rgb(255, 255, 255);stroke-width:2"></polygon>';
}
function redoBottomW(id) {
var aobj = document.getElementById("a" + id);
return '<polygon id="aa' + id + '" points="' + aobj.points[0].x + ',' + aobj.points[0].y + ' ' + aobj.points[1].x + ',' + aobj.points[1].y + ' ' + aobj.points[2].x + ',' + aobj.points[2].y + ' ' + aobj.points[3].x + ',' + aobj.points[3].y + '" style="fill:none;stroke:rgb(255, 255,255);stroke-width:2"></polygon>';
}
function redoTopW(id) {
var bobj = document.getElementById("b" + id);
return '<polygon id="bb' + id + '" points="' + bobj.points[0].x + ',' + bobj.points[0].y + ' ' + bobj.points[1].x + ',' + bobj.points[1].y + ' ' + bobj.points[2].x + ',' + bobj.points[2].y + ' ' + bobj.points[3].x + ',' + bobj.points[3].y + '" style="fill:none;stroke:rgb(255, 255, 255);stroke-width:2"></polygon>';
}
function makeNew(objcount, ofset, firstx, firsty, length, width, height) {
var screen = document.getElementById("svg");
var bottom = calcBottom(objcount, ofset, firstx, firsty, length, width, height);
var top = calcTop(objcount, ofset, firstx, firsty, length, width, height);
screen.innerHTML = screen.innerHTML + bottom + top;
var red = (Math.floor(Math.random() * 255));
var green = (Math.floor(Math.random() * 255));
var blue = (Math.floor(Math.random() * 255));
var front = sideFront(objcount, red, green, blue);
// var back = sideBack(objcount, red, green, blue);
var right = sideRight(objcount, red, green, blue);
var left = sideLeft(objcount, red, green, blue);
var retop = redoTop(objcount, red, green, blue);
var rebottom = redoBottom(objcount, red, green, blue);
var stepa = '<g id="poly' + objcount + '">';
var decide = decideIt(ofset, firsty, firstx);
if(decide == 0) {
var stepb = left + front;
var bdeci = decideB(objcount, ofset);
if (bdeci == 0) { var stepc = retop; }
}
if(decide == 1) {
var stepb = right + front;
var bdeci = decideB(objcount, ofset);
if (bdeci == 0) { var stepc = retop; }
}
if(decide == 2) {
var stepb = right + front + rebottom;
}
if(decide == 3) {
var stepb = left + front + rebottom;
}
var stepd = '</g>';
screen.innerHTML = screen.innerHTML + stepa + stepb + stepc + stepd;
}
function selectionBox(objcount, ofset, firstx, firsty, length, width, height) {
var screen = document.getElementById("svg");
var bottom = calcBottom(objcount, ofset, firstx, firsty, length, width, height);
var top = calcTop(objcount, ofset, firstx, firsty, length, width, height);
screen.innerHTML = screen.innerHTML + bottom + top;
var front = sideFrontW(objcount);
// var back = sideBackW(objcount);
var right = sideRightW(objcount);
var left = sideLeftW(objcount);
// var retop = redoTopW(objcount);
// var rebottom = redoBottomW(objcount);
screen.innerHTML = screen.innerHTML + left + right + front;
}
function saveNewValue(id, ofset, firstx, firsty, length, width, height) {
var valuesdiv = document.getElementById("values");
valuesdiv.innerHTML = valuesdiv.innerHTML + '<div id="' + id + '"><input type="hidden" class="ofset" value="' + ofset + '"><input type="hidden" class="firstx" value="' + firstx + '"><input type="hidden" class="firsty" value="' + firsty + '"><input type="hidden" class="length" value="' + length + '"><input type="hidden" class="width" value="' + width + '"><input type="hidden" class="height" value="' + height + '"></div>';
}
// function changeValue(id, ofset, firstx, firsty, length, width, height) {
// var iddiv = document.getElementById(id);
// iddiv.innerHTML = valuesdiv.innerHTML + '<input type="hidden" class="ofset" value="' + ofset + '"><input type="hidden" class="firstx" value="' + firstx + '"><input type="hidden" class="firsty" value="' + firsty + '"><input type="hidden" class="length" value="' + length + '"><input type="hidden" class="width" value="' + width + '"><input type="hidden" class="height" value="' + height + '">';
// }
function place() {
var ofset = document.getElementById("select").getElementsByClassName("ofset")[0];
var firstx = document.getElementById("select").getElementsByClassName("firstx")[0];
var firsty = document.getElementById("select").getElementsByClassName("firsty")[0];
var length = document.getElementById("select").getElementsByClassName("length")[0];
var width = document.getElementById("select").getElementsByClassName("width")[0];
var height = document.getElementById("select").getElementsByClassName("height")[0];
var count = document.getElementById("last").getElementsByClassName("lastid")[0];
makeNew(parseInt(count.value), parseInt(ofset.value), parseInt(firstx.value), parseInt(firsty.value), parseInt(length.value), parseInt(width.value), parseInt(height.value));
count.value = parseInt(count.value) + 1;
length.value = 50 + (Math.floor(Math.random() * 150));
width.value = 50 + (Math.floor(Math.random() * 250));
height.value = 50 + (Math.floor(Math.random() * 300));
}
function grass(ofset) {
var screen = document.getElementById("svg");
screen.innerHTML = screen.innerHTML + '<polygon points="0,' + (ofset) + ' ' + (screen.width.baseVal.value) + ',' + (ofset) + ' ' + (screen.width.baseVal.value) + ',' + (screen.height.baseVal.value) + ' 0,' + (screen.height.baseVal.value) + '" style="fill:rgb(16,143,3);stroke:rgb(16,143,3);stroke-width:1"></polygon>';
}
function start() {
var screen = document.getElementById("svg");
screen.width.baseVal.value = window.screen.availWidth + (window.screen.availWidth * 0.1);
screen.height.baseVal.value = window.screen.availHeight + (window.screen.availHeight * 0.1);
var ofset = 200;
grass(ofset);
makeNew(0, ofset, -340, 210, 480, 620, 10);
var random = 50 + (Math.floor(Math.random() * 551));
selectionBox("select", ofset, 1, 500, 100, 100, random);
saveNewValue("select", ofset, 1, 500, 100, 100, random);
}
setInterval(frame, 100);
function frame() {
function move(id, keyc) {
var speed = 15;
if(keyc == 65) {
//left
var actobj = document.getElementById('aselect').outerHTML = '';
var bctobj = document.getElementById('bselect').outerHTML = '';
var cctobj = document.getElementById('cselect').outerHTML = '';
// var dctobj = document.getElementById('dselect').outerHTML = '';
var ectobj = document.getElementById('eselect').outerHTML = '';
var fctobj = document.getElementById('fselect').outerHTML = '';
var ofset = document.getElementById("select").getElementsByClassName("ofset")[0];
var firstx = document.getElementById("select").getElementsByClassName("firstx")[0];
var firsty = document.getElementById("select").getElementsByClassName("firsty")[0];
var length = document.getElementById("select").getElementsByClassName("length")[0];
var width = document.getElementById("select").getElementsByClassName("width")[0];
var height = document.getElementById("select").getElementsByClassName("height")[0];
firstx.value = parseInt(firstx.value) - speed;
selectionBox("select", parseInt(ofset.value), parseInt(firstx.value), parseInt(firsty.value), parseInt(length.value), parseInt(width.value), parseInt(height.value));
}
if(keyc == 87) {
//up
var actobj = document.getElementById('aselect').outerHTML = '';
var bctobj = document.getElementById('bselect').outerHTML = '';
var cctobj = document.getElementById('cselect').outerHTML = '';
// var dctobj = document.getElementById('dselect').outerHTML = '';
var ectobj = document.getElementById('eselect').outerHTML = '';
var fctobj = document.getElementById('fselect').outerHTML = '';
var ofset = document.getElementById("select").getElementsByClassName("ofset")[0];
var firstx = document.getElementById("select").getElementsByClassName("firstx")[0];
var firsty = document.getElementById("select").getElementsByClassName("firsty")[0];
var length = document.getElementById("select").getElementsByClassName("length")[0];
var width = document.getElementById("select").getElementsByClassName("width")[0];
var height = document.getElementById("select").getElementsByClassName("height")[0];
firsty.value = parseInt(firsty.value) - speed;
selectionBox("select", parseInt(ofset.value), parseInt(firstx.value), parseInt(firsty.value), parseInt(length.value), parseInt(width.value), parseInt(height.value));
}
if(keyc == 68) {
//right
var actobj = document.getElementById('aselect').outerHTML = '';
var bctobj = document.getElementById('bselect').outerHTML = '';
var cctobj = document.getElementById('cselect').outerHTML = '';
// var dctobj = document.getElementById('dselect').outerHTML = '';
var ectobj = document.getElementById('eselect').outerHTML = '';
var fctobj = document.getElementById('fselect').outerHTML = '';
var ofset = document.getElementById("select").getElementsByClassName("ofset")[0];
var firstx = document.getElementById("select").getElementsByClassName("firstx")[0];
var firsty = document.getElementById("select").getElementsByClassName("firsty")[0];
var length = document.getElementById("select").getElementsByClassName("length")[0];
var width = document.getElementById("select").getElementsByClassName("width")[0];
var height = document.getElementById("select").getElementsByClassName("height")[0];
firstx.value = parseInt(firstx.value) + speed;
selectionBox("select", parseInt(ofset.value), parseInt(firstx.value), parseInt(firsty.value), parseInt(length.value), parseInt(width.value), parseInt(height.value));
}
if(keyc == 83) {
//down
var actobj = document.getElementById('aselect').outerHTML = '';
var bctobj = document.getElementById('bselect').outerHTML = '';
var cctobj = document.getElementById('cselect').outerHTML = '';
// var dctobj = document.getElementById('dselect').outerHTML = '';
var ectobj = document.getElementById('eselect').outerHTML = '';
var fctobj = document.getElementById('fselect').outerHTML = '';
var ofset = document.getElementById("select").getElementsByClassName("ofset")[0];
var firstx = document.getElementById("select").getElementsByClassName("firstx")[0];
var firsty = document.getElementById("select").getElementsByClassName("firsty")[0];
var length = document.getElementById("select").getElementsByClassName("length")[0];
var width = document.getElementById("select").getElementsByClassName("width")[0];
var height = document.getElementById("select").getElementsByClassName("height")[0];
firsty.value = parseInt(firsty.value) + speed;
selectionBox("select", parseInt(ofset.value), parseInt(firstx.value), parseInt(firsty.value), parseInt(length.value), parseInt(width.value), parseInt(height.value));
}
}
document.onkeydown = checkKey;
function checkKey(e) {
e = e || window.event;
if (e.keyCode == '65') {
move("1", "65");
}
else if (e.keyCode == '87') {
move("1", "87");
}
else if (e.keyCode == '68') {
move("1", "68");
}
else if (e.keyCode == '83') {
move("1", "83");
}
else if (e.keyCode == '80') {
place();
}
}
}
start();
</script>
</body></html>