Записи

<table width="500" height="600" class="colorborder" align="center" >
 <tr>
 <td width="500" align="center">
<div style="text-align: center;" id="ver15divSlot" >point=0</div>
 </td>
 </tr>
<tr><td id="ver15snowpanel" class="colorborder" width="500" height="600">
<script>
for (i=1; i<4; i++) {
document.write('<img style="height: 100px; position: absolute; z-index: 25; top: 0px; left: 0px;
 cursor:pointer;" id="ver15imgSlot'+i+'" src="/jgame/stepmania/slot'+i+'.png" >');
}
for (i=1; i<21; i++) {
document.write('<img style="height: 100px; position: absolute; z-index: 25; top: 0px; left: 0px;
 cursor:pointer;" id="ver15imgLeft'+i+'" src="/jgame/stepmania/arr1.png" >');
}
for (i=1; i<21; i++) {
document.write('<img style="height: 100px; position: absolute; z-index: 25; top: 0px; left: 0px;
 cursor:pointer;" id="ver15imgBottom'+i+'" src="/jgame/stepmania/arr2.png" >');
}
for (i=1; i<21; i++) {
document.write('<img style="height: 100px; position: absolute; z-index: 25; top: 0px; left: 0px;
 cursor:pointer;" id="ver15imgRight'+i+'" src="/jgame/stepmania/arr3.png" >');
}
</script>
</td></tr>
 <tr>
 <td width="500" align="center">
 <input value="start" onclick="ver15menaClick()" type="button">
 </td>
 </tr>
</table>

<script>
 var ver15xLeft = [250, 250, 250, 250, 250, 250, 250, 250, 250, 250, 250, 250, 250, 250, 250, 250, 250, 250, 250, 250];
 var ver15xBottom = [250, 250, 250, 250, 250, 250, 250, 250, 250, 250, 250, 250, 250, 250, 250, 250, 250, 250, 250, 250];
 var ver15xRight = [250, 250, 250, 250, 250, 250, 250, 250, 250, 250, 250, 250, 250, 250, 250, 250, 250, 250, 250, 250];
 var ver15xLeftFlag = [false, false, false, false, false, false, false, false,
 false, false, false, false, false, false, false, false, false, false, false, false];
 var ver15xBottomFlag = [false, false, false, false, false, false, false, false,
 false, false, false, false, false, false, false, false, false, false, false, false];
 var ver15xRightFlag = [false, false, false, false, false, false, false, false,
 false, false, false, false, false, false, false, false, false, false, false, false];
 for (var i = 0; i < 20; i=i+1) { 
 ver15xLeft[i] = 500;
 ver15xBottom[i] = 500;
 ver15xRight[i] = 500;
 }
 function getRandomInt(min, max) {
 return Math.floor(Math.random() * (max - min)) + min;
 } 
 function getModTop(num1, num2) {
 var tmptop = 0;
 if (num1 > num2) tmptop = num1 - num2;
 if (num2 > num1) tmptop = num2 - num1;
 return tmptop;
 } 
//add
function getOffset(elem) {
 if (elem.getBoundingClientRect) {
 return getOffsetRect(elem)
 } else {
 return getOffsetSum(elem)
 }
}
function getOffsetSum(elem) {
 var top=0, left=0
 while(elem) {
 top = top + parseInt(elem.offsetTop)
 left = left + parseInt(elem.offsetLeft)
 elem = elem.offsetParent
 }
 return {top: top, left: left}
}
function getOffsetRect(elem) {
 var box = elem.getBoundingClientRect()
 var body = document.body
 var docElem = document.documentElement
 var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop
 var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft
 var clientTop = docElem.clientTop || body.clientTop || 0
 var clientLeft = docElem.clientLeft || body.clientLeft || 0
 var top = box.top + scrollTop - clientTop
 var left = box.left + scrollLeft - clientLeft
 return { top: Math.round(top), left: Math.round(left) }
}
//end add
function ver15menaClick() {
for (var i = 0; i < 20; i=i+1) {
 ver15xLeft[i] = 500;
 ver15xBottom[i] = 500;
 ver15xRight[i] = 500;
}
for (var i = 0; i < 20; i=i+1) {
 ver15xLeftFlag[i] = false;
 ver15xBottomFlag[i] = false;
 ver15xRightFlag[i] = false;
}
 countLeft = 0;
 countBottom = 0;
 countRight = 0;
 gamepoint = 0;
 document.getElementById('ver15divSlot').innerHTML = "point=" + gamepoint;
}
function ver15update() {
var ver15elm = document.getElementById('ver15snowpanel');
var ver15coords = getOffset(ver15elm);
for (i=0; i<3; i++) {
 document.getElementById('ver15imgSlot'+eval(i+1)).style.top = 200 + ver15coords.top + "px";
 document.getElementById('ver15imgSlot'+eval(i+1)).style.left = (i+1)*100 + ver15coords.left + "px";
 } 
for (var i = 0; i < 20; i=i+1) {
 document.getElementById('ver15imgLeft'+eval(i+1)).style.top = ver15xLeft[i] + ver15coords.top + "px";
 document.getElementById('ver15imgLeft'+eval(i+1)).style.left = 100 + ver15coords.left + "px";
 document.getElementById('ver15imgBottom'+eval(i+1)).style.top = ver15xBottom[i] + ver15coords.top + "px";
 document.getElementById('ver15imgBottom'+eval(i+1)).style.left = 200 + ver15coords.left + "px";
 document.getElementById('ver15imgRight'+eval(i+1)).style.top = ver15xRight[i] + ver15coords.top + "px";
 document.getElementById('ver15imgRight'+eval(i+1)).style.left = 300 + ver15coords.left + "px";
 }
 requestAnimationFrame(ver15update); 
}
ver15update();

var ver15timer = setInterval(ver15Anim, 10);
var ver15timertagflag = 0;
var ver15timertagflagstep = 100;
var countLeft = 0;
var countBottom = 0;
var countRight = 0;
var gamepoint = 0;
function ver15Anim() {
ver15timertagflag ++; if (ver15timertagflag > ver15timertagflagstep) ver15timertagflag = 0;
for (var i = 0; i < 20; i=i+1) {
 if (ver15xLeftFlag[i]) {ver15xLeft[i] = ver15xLeft[i] - 1; if (ver15xLeft[i]===25) ver15xLeftFlag[i] = false}
 if (ver15xBottomFlag[i]) {ver15xBottom[i] = ver15xBottom[i] - 1; if (ver15xBottom[i]===25) ver15xBottomFlag[i] = false}
 if (ver15xRightFlag[i]) {ver15xRight[i] = ver15xRight[i] - 1; if (ver15xRight[i]===25) ver15xRightFlag[i] = false}
}
 if (ver15timertagflag === ver15timertagflagstep) {
 var temprnd = getRandomInt(1, 4);
 if (temprnd === 1) if (countLeft < 20) {var tmpNumLeft = 0; while (ver15xLeftFlag[tmpNumLeft]||(ver15xLeft[tmpNumLeft]===25))
 {tmpNumLeft++}; ver15xLeftFlag[tmpNumLeft] = true; countLeft++;} else {temprnd = 2;};
 if (temprnd === 2) if (countBottom < 20) {var tmpNumBottom = 0; while (ver15xBottomFlag[tmpNumBottom]||(ver15xBottom[tmpNumBottom]===25))
 {tmpNumBottom++}; ver15xBottomFlag[tmpNumBottom] = true; countBottom++;} else {temprnd = 3;};
 if (temprnd === 3) if (countRight < 20) {var tmpNumRight = 0; while (ver15xRightFlag[tmpNumRight]||(ver15xRight[tmpNumRight]===25))
 {tmpNumRight++}; ver15xRightFlag[tmpNumRight] = true; countRight++;}
 }
}
////presskey
window.addEventListener("keydown", ver15logdown);
function ver15logdown(event){
 if (event.key === "ArrowLeft") {document.getElementById('ver15imgSlot1').style.border = "2px solid red"; 
 var ver15coordsButL = getOffset(document.getElementById('ver15imgSlot1'));
 for (var i = 0; i < 20; i=i+1) { 
 var ver15coordsArL = getOffset(document.getElementById('ver15imgLeft'+eval(i+1)));
 if (getModTop(ver15coordsButL.top, ver15coordsArL.top) < 15) {ver15xLeftFlag[i] = false; ver15xLeft[i] = 500; countLeft--;
 gamepoint+=10;document.getElementById('ver15divSlot').innerHTML = "point=" + gamepoint;} 
 }
 }
 if (event.key === "ArrowDown") {document.getElementById('ver15imgSlot2').style.border = "2px solid red";
 var ver15coordsButB = getOffset(document.getElementById('ver15imgSlot2'));
 for (var i = 0; i < 20; i=i+1) { 
 var ver15coordsArB = getOffset(document.getElementById('ver15imgBottom'+eval(i+1)));
 if (getModTop(ver15coordsButB.top, ver15coordsArB.top) < 15) {ver15xBottomFlag[i] = false; ver15xBottom[i] = 500; countBottom--;
 gamepoint+=10;document.getElementById('ver15divSlot').innerHTML = "point=" + gamepoint;} 
 }
}
 if (event.key === "ArrowRight") {document.getElementById('ver15imgSlot3').style.border = "2px solid red";
 var ver15coordsButR = getOffset(document.getElementById('ver15imgSlot3'));
 for (var i = 0; i < 20; i=i+1) { 
 var ver15coordsArR = getOffset(document.getElementById('ver15imgRight'+eval(i+1)));
 if (getModTop(ver15coordsButR.top, ver15coordsArR.top) < 15) {ver15xRightFlag[i] = false; ver15xRight[i] = 500; countRight--;
 gamepoint+=10;document.getElementById('ver15divSlot').innerHTML = "point=" + gamepoint;}
 }
}
}
window.addEventListener("keyup", ver15logUp);
function ver15logUp(event){
document.getElementById('ver15imgSlot1').style.border = "0px solid red"; 
document.getElementById('ver15imgSlot2').style.border = "0px solid red";
document.getElementById('ver15imgSlot3').style.border = "0px solid red";
}

</script>