<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>