JS Red Square dodge game: who can stick to 60 seconds?

March 26, 2016 419 point heat 0 liked it 0 comments

A popular classic small game, a long time ago there are foreign experts with JS code to write out, now special collection to share here. Game making can be so simple! Mouse control to move the red box, do not let the blue square touch it, see how long you can play, want to use js to write the game friends can also refer to.

If you can reach more than 18 seconds, you are a genius.
It is said that pilots of the U.S. air force are forced to take two minutes.

Attach source code

 "< HTML > < HTML > < HTML > < HTML > < HTML > < head > < title > www.ewceo.com escapa! Red square game < / Title > < title > < game < title > < meta http-equiv = content-type content content < text / HTML; charset = GB2312" > < script type < text / JavaScript "> 
 isns4 = (document...com.escapa! Red square game < / Title > < meta http-equiv = content-type content content content content type content < text / HTML; HTML; charset = GB2312" > < script type < script type < text / JavaScript "> 
 isns4 = (document.document.document.com.com escapa! Red square game < / Title > < title > < meta http-equiv = content-type = content-type content type content type content type content layers)? True: false; 
isIE4 = (document.all && !document.getElementById) ? true : false; 
isIE5 = (document.all && document.getElementById) ? true : false; 
isNS6 = (!document.all && document.getElementById) ? true : false; 
var curX, curY, curX2, curY2, boxX, boxY, moving=0, touch=0; 
var gametime=0, started=0, speed; 
var starttime, endtime, finaltime=0;  //pass finaltime to popup window to ask for initials 
var enemyxdir = new Array(1,1,1,1); 
var enemyydir = new Array(1,1,1,1); 
if (isNS4 || isNS6){ 
document.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN|Event.MOUSEMOVE); 
} 
document.onmousedown = start; 
document.onmousemove = checkLocation; 
document.onmouseup = stop;  
function startclock() {var today = new Date(); starttime = today.getTime();} 
function endclock() {var today = new Date(); endtime = today.getTime();} 
function calctime() {var time = (endtime - starttime - 0)/1000;    return time;} 
function giveposX(divname) { 
    if (isNS4) var posLeft = document.layers[divname].left;  
    else if (isIE4 || isIE5) var posLeft = document.all(divname).style.pixelLeft; 
    else if (isNS6) var posLeft = parseInt(document.getElementById(divname).style.left + ""); 
    return posLeft; 
} 
function giveposY(divname) { 
    if (isNS4) var posTop = document.layers[divname].top;  
    else if (isIE4 || isIE5) var posTop = document.all(divname).style.pixelTop; 
    else if (isNS6) var posTop = parseInt(document.getElementById(divname).style.top + ""); 
    return posTop; 
} 
function setposX(divname, xpos) { 
    if (isNS4) document.layers[divname].left = xpos;  
    else if (isIE4 || isIE5) document.all(divname).style.pixelLeft = xpos; 
    else if (isNS6) document.getElementById(divname).style.left = xpos; 
} 
function setposY(divname, ypos) { 
    if (isNS4) document.layers[divname].top = ypos; 
    else if (isIE4 || isIE5) document.all(divname).style.pixelTop = ypos;  
    else if (isNS6) document.getElementById(divname).style.top = ypos; 
} 
function givesize(divname, dimension) { 
    var divsize = 0; 
        if (dimension == 'y') { 
            if (isNS4) divsize = document.layers[divname].clip.height; 
            else if (isIE4 || isIE5) divsize = document.all(divname).style.pixelHeight; 
             else if (isNS6) divsize = parseInt(document.getElementById(divname).style.height + ""); 
        } 
        else if (dimension == 'x') { 
            if (isNS4) divsize = document.layers[divname].clip.width; 
            else if (isIE4 || isIE5) divsize = document.all(divname).style.pixelWidth;  
            else if (isNS6) divsize = parseInt(document.getElementById(divname).style.width + ""); 
        } 
    return divsize; 
} 
// check to see if 'box' is touching 'enemy1' 
function checktouching(num) { 
    var enemy = "enemy" + num + "" 
    var difX = giveposX('box') - giveposX(enemy) - 0;  // -0 converts to integer 
    var difY = giveposY('box') - giveposY(enemy) - 0; 
    // set touch = 1 if it is touching an enemy 
    if (difX > (-1 * givesize('box', 'x')) && difX < givesize(enemy, 'x') && difY > (-1 * givesize('box', 'y')) && difY < givesize(enemy, 'y')) { 
        touch = 1; 
    } 
    else touch = 0;  
} 
function movenemy(num,step_ x,step_ y){ 
    var enemy = "enemy" + num + "" 
    var enemyx = givesize(enemy, 'x'); 
    var enemyy = givesize(enemy, 'y'); 
    if (giveposX(enemy) >= (450 - enemyx) || giveposX(enemy) <= 0) { 
        enemyxdir[num] = -1 * enemyxdir[num]; 
        } 
    if (giveposY(enemy) >= (450 - enemyy) || giveposY(enemy) <= 0) { 
        enemyydir[num]  = -1 * enemyydir[num]; 
        } 
    var newposx = giveposX(enemy) + (step_ x*enemyxdir[num]) + 0; 
    var newposy = giveposY(enemy) + (step_ y*enemyydir[num]) + 0; 
    setposX(enemy, newposx); 
    setposY(enemy, newposy); 
    checktouching(num + ""); 
    if (touch == 1) { 
        stop(); reset(); 
        } 
} 
function movenemies() { 
    gametime = gametime + 1 
    if (gametime >= 0 && gametime < 100) speed = 80;  
    else if (gametime >= 100 &&  gametime < 200) speed = 60; 
    else if (gametime >= 200 &&  gametime < 300) speed = 40; 
    else if (gametime >= 300 &&  gametime < 400) speed = 30; 
    else if (gametime >= 400 &&  gametime < 500) speed = 20; 
    else speed = 10; 
    // window.status = "speed:  " + speed + "   gametime: " + gametime;  
    movenemy(0,-10,12); 
    movenemy(1,-12,-20); 
    movenemy(2,15,-13); 
    movenemy(3,17,11); 
    setTimeout(movenemies,speed); 
} 
function start(e) { 
    if (started == 0) {    movenemies();     startclock();     started = 1;    } 
    curX = (isNS4 || isNS6) ? e.pageX : window.event.x ; 
    curY = (isNS4 || isNS6) ? e.pageY :  window.event.y ; 
    curX2 = eval(curX - 40); 
    curY2 = eval(curY - 40); 
    boxX = eval(curX - 20); 
    boxY = eval(curY - 20); 
    var boxleft = giveposX('box'); 
    var boxtop = giveposY('box'); 
    if (curX > boxleft && curX2 < boxleft && curY > boxtop && curY2 < boxtop) { 
        moving = 1; 
        setposX('box', boxX);  
        setposY('box', boxY); 
        if (isNS4 || isNS6){ 
        document.captureEvents(Event.MOUSEMOVE); 
        } 
    } 
} 
function stop(e){ 
    moving=0; 
    if (isNS4 || isNS6){ 
    document.releaseEvents(Event.MOUSEMOVE); 
    } 
} 
function reset(e){ 
    endclock(); 
    moving=0; 
    if (isNS4 || isNS6){ 
      You can also hold on to (
) event (
) 
 '
) 
'! '); 
//        var entername = window.confirm('Enter your name?'); 
//            if (entername) { 
//            window.open("?" + finaltime,'winwin','width=300,height=500,left=40,top=40,status=1,resizable'); 
//            document.location.reload(); 
//            } 
//            else document.location.reload();  
            window.close(); 
        } 
} 
function checkLocation(e){ 
        curX = (isNS4 || isNS6) ? e.pageX : window.event.x ; 
        curY = (isNS4 || isNS6) ? e.pageY : window.event.y ; 
        boxX = eval(curX - 20); 
        boxY = eval(curY - 20); 
    checktouching('1');  
    if (moving == 1 && touch == 0){ 
            setposX('box',boxX); 
            setposY('box',boxY); 
            if (curY > 69 && curX > 69 && curY < 381 && curX < 381) return false; 
            else stop(); reset(); 
    } 
    else if (touch == 1){ 
    stop(); reset();  
    } 
} 
</SCRIPT> 
<META content="MSHTML 6.00.2800.1106" name=GENERATOR></HEAD> 
<BODY text=#000000 bgColor=#ffffff leftMargin=0 topMargin=0 marginwidth="0" 
marginheight="0"> 
<DIV id=box 
style="LEFT: 205px; WIDTH: 40px; POSITION: absolute; TOP: 205px; HEIGHT: 40px; BACKGROUND-COLOR: #990000; layer-background-color: #990000"> 
<TABLE  height=40 width=40> 
  <TBODY> 
  <TR> 
    <TD></TD></TD></TR></TBODY></TABLE></DIV> 
<DIV id=enemy0 
style="LEFT: 270px; WIDTH: 60px; POSITION: absolute; TOP: 60px; HEIGHT: 50px; BACKGROUND-COLOR: #000099;  layer-background-color: #000099"> 
<TABLE height=50 width=60> 
  <TBODY> 
  <TR> 
    <TD></TD></TR></TBODY></TABLE></DIV> 
<DIV id=enemy1 
style="LEFT: 300px; WIDTH: 100px; POSITION: absolute; TOP: 330px; HEIGHT: 20px; BACKGROUND-COLOR: #000099;  layer-background-color: #000099"> 
<TABLE height=20 width=100> 
  <TBODY> 
  <TR> 
    <TD>?</TD></TR></TBODY></TABLE></DIV> 
<DIV id=enemy2 
style="LEFT: 70px; WIDTH: 30px; POSITION: absolute; TOP: 320px; HEIGHT: 60px; BACKGROUND-COLOR: #000099;  layer-background-color: #000099"> 
<TABLE height=60 width=30> 
  <TBODY> 
  <TR> 
    <TD>?</TD></TR></TBODY></TABLE></DIV> 
<DIV id=enemy3 
style="LEFT: 70px; WIDTH: 60px; POSITION: absolute; TOP: 70px; HEIGHT: 60px; BACKGROUND-COLOR: #000099;  layer-background-color: #000099"> 
<TABLE height=60 width=60> 
  <TBODY> 
  <TR> 
    <TD>?</TD></TR></TBODY></TABLE></DIV> 
<TABLE cellSpacing=0 cellPadding=0 border=0><!-- row 1 --> 
  <TBODY> 
  <TR> 
    <TD width=50 bgColor=#000000 height=50> 
      <TABLE> 
        <TBODY> 
        <TR> 
           <TD></TD></TR></TBODY></TABLE></TD> 
    <TD width=50 bgColor=#000000 height=50> 
      <TABLE> 
        <TBODY> 
        <TR> 
          <TD></TD></TR></TBODY></TABLE></TD> 
    <TD width=50 bgColor=#000000 height=50> 
      <TABLE> 
        <TBODY> 
        <TR> 
          <TD></TD></TR></TBODY></TABLE></TD> 
    <TD width=50  bgColor=#000000 height=50> 
      <TABLE> 
        <TBODY> 
        <TR> 
          <TD></TD></TR></TBODY></TABLE></TD> 
    <TD width=50 bgColor=#000000 height=50> 
      <TABLE> 
        <TBODY> 
        <TR> 
          <TD></TD></TR></TBODY></TABLE></TD> 
    <TD width=50 bgColor=#000000 height=50> 
      <TABLE> 
        <TBODY> 
         <TR> 
          <TD></TD></TR></TBODY></TABLE></TD> 
    <TD width=50 bgColor=#000000 height=50> 
      <TABLE> 
        <TBODY> 
        <TR> 
          <TD></TD></TR></TBODY></TABLE></TD> 
    <TD width=50 bgColor=#000000 height=50> 
      <TABLE> 
        <TBODY> 
        <TR> 
          <TD></TD></TR></TBODY></TABLE></TD> 
     <TD width=50 bgColor=#000000 height=50> 
      <TABLE> 
        <TBODY> 
        <TR> 
          <TD></TD></TR></TBODY></TABLE></TD></TR><!-- row 2 --> 
  <TR> 
    <TD width=50 bgColor=#000000 height=50> 
      <TABLE> 
        <TBODY> 
        <TR> 
          <TD></TD></TR></TBODY></TABLE></TD> 
    <TD width=50 height=50> 
       <TABLE> 
        <TBODY> 
        <TR> 
          <TD></TD></TR></TBODY></TABLE></TD> 
    <TD width=50 height=50> 
      <TABLE> 
        <TBODY> 
        <TR> 
          <TD></TD></TR></TBODY></TABLE></TD> 
    <TD width=50 height=50> 
      <TABLE> 
        <TBODY> 
        <TR> 
          <TD></TD></TR></TBODY></TABLE></TD> 
     <TD width=50 height=50> 
      <TABLE> 
        <TBODY> 
        <TR> 
          <TD></TD></TR></TBODY></TABLE></TD> 
    <TD width=50 height=50> 
      <TABLE> 
        <TBODY> 
        <TR> 
          <TD></TD></TR></TBODY></TABLE></TD> 
    <TD width=50 height=50> 
      <TABLE> 
        <TBODY> 
        <TR> 
           <TD></TD></TR></TBODY></TABLE></TD> 
    <TD width=50 height=50> 
      <TABLE> 
        <TBODY> 
        <TR> 
          <TD></TD></TR></TBODY></TABLE></TD> 
    <TD width=50 bgColor=#000000 height=50> 
      <TABLE> 
        <TBODY> 
        <TR> 
          <TD></TD></TR></TBODY></TABLE></TD></TR><!-- row 3 --> 
  <TR> 
    <TD  width=50 bgColor=#000000 height=50> 
      <TABLE> 
        <TBODY> 
        <TR> 
          <TD></TD></TR></TBODY></TABLE></TD> 
    <TD width=50 height=50> 
      <TABLE> 
        <TBODY> 
        <TR> 
          <TD></TD></TR></TBODY></TABLE></TD> 
    <TD width=50 height=50> 
      <TABLE> 
        <TBODY> 
        <TR> 
           <TD></TD></TR></TBODY></TABLE></TD> 
    <TD width=50 height=50> 
      <TABLE> 
        <TBODY> 
        <TR> 
          <TD></TD></TR></TBODY></TABLE></TD> 
    <TD width=50 height=50> 
      <TABLE> 
        <TBODY> 
        <TR> 
          <TD></TD></TR></TBODY></TABLE></TD> 
    <TD width=50 height=50> 
      <TABLE> 
         <TBODY> 
        <TR> 
          <TD></TD></TR></TBODY></TABLE></TD> 
    <TD width=50 height=50> 
      <TABLE> 
        <TBODY> 
        <TR> 
          <TD></TD></TR></TBODY></TABLE></TD> 
    <TD width=50 height=50> 
      <TABLE> 
        <TBODY> 
        <TR> 
          <TD></TD></TR></TBODY></TABLE></TD> 
    <TD width=50  bgColor=#000000 height=50> 
      <TABLE> 
        <TBODY> 
        <TR> 
          <TD></TD></TR></TBODY></TABLE></TD></TR><!-- row 4 --> 
  <TR> 
    <TD width=50 bgColor=#000000 height=50> 
      <TABLE> 
        <TBODY> 
        <TR> 
          <TD></TD></TR></TBODY></TABLE></TD> 
    <TD width=50 height=50> 
      <TABLE> 
         <TBODY> 
        <TR> 
          <TD></TD></TR></TBODY></TABLE></TD> 
    <TD width=50 height=50> 
      <TABLE> 
        <TBODY> 
        <TR> 
          <TD></TD></TR></TBODY></TABLE></TD> 
    <TD width=50 height=50> 
      <TABLE> 
        <TBODY> 
        <TR> 
          <TD></TD></TR></TBODY></TABLE></TD> 
    <TD width=50  height=50> 
      <TABLE> 
        <TBODY> 
        <TR> 
          <TD></TD></TR></TBODY></TABLE></TD> 
    <TD width=50 height=50> 
      <TABLE> 
        <TBODY> 
        <TR> 
          <TD></TD></TR></TBODY></TABLE></TD> 
    <TD width=50 height=50> 
      <TABLE> 
        <TBODY> 
        <TR> 
           <TD></TD></TR></TBODY></TABLE></TD> 
    <TD width=50 height=50> 
      <TABLE> 
        <TBODY> 
        <TR> 
          <TD></TD></TR></TBODY></TABLE></TD> 
    <TD width=50 bgColor=#000000 height=50> 
      <TABLE> 
        <TBODY> 
        <TR> 
          <TD></TD></TR></TBODY></TABLE></TD></TR><!-- row 5 --> 
  <TR> 
    <TD  width=50 bgColor=#000000 height=50> 
      <TABLE> 
        <TBODY> 
        <TR> 
          <TD></TD></TR></TBODY></TABLE></TD> 
    <TD width=50 height=50> 
      <TABLE> 
        <TBODY> 
        <TR> 
          <TD></TD></TR></TBODY></TABLE></TD> 
    <TD width=50 height=50> 
      <TABLE> 
        <TBODY> 
        <TR> 
           <TD></TD></TR></TBODY></TABLE></TD> 
    <TD width=50 height=50> 
      <TABLE> 
        <TBODY> 
        <TR> 
          <TD></TD></TR></TBODY></TABLE></TD> 
    <TD width=50 height=50> 
      <TABLE> 
        <TBODY> 
        <TR> 
          <TD></TD></TR></TBODY></TABLE></TD> 
    <TD width=50 height=50> 
      <TABLE> 
         <TBODY> 
        <TR> 
          <TD></TD></TR></TBODY></TABLE></TD> 
    <TD width=50 height=50> 
      <TABLE> 
        <TBODY> 
        <TR> 
          <TD></TD></TR></TBODY></TABLE></TD> 
    <TD width=50 height=50> 
      <TABLE> 
        <TBODY> 
        <TR> 
          <TD></TD></TR></TBODY></TABLE></TD> 
    <TD width=50  bgColor=#000000 height=50> 
      <TABLE> 
        <TBODY> 
        <TR> 
          <TD></TD></TR></TBODY></TABLE></TD></TR><!-- row 6 --> 
  <TR> 
    <TD width=50 bgColor=#000000 height=50> 
      <TABLE> 
        <TBODY> 
        <TR> 
          <TD></TD></TR></TBODY></TABLE></TD> 
    <TD width=50 height=50> 
      <TABLE> 
         <TBODY> 
        <TR> 
          <TD></TD></TR></TBODY></TABLE></TD> 
    <TD width=50 height=50> 
      <TABLE> 
        <TBODY> 
        <TR> 
          <TD></TD></TR></TBODY></TABLE></TD> 
    <TD width=50 height=50> 
      <TABLE> 
        <TBODY> 
        <TR> 
          <TD></TD></TR></TBODY></TABLE></TD> 
    <TD width=50  height=50> 
      <TABLE> 
        <TBODY> 
        <TR> 
          <TD></TD></TR></TBODY></TABLE></TD> 
    <TD width=50 height=50> 
      <TABLE> 
        <TBODY> 
        <TR> 
          <TD></TD></TR></TBODY></TABLE></TD> 
    <TD width=50 height=50> 
      <TABLE> 
        <TBODY> 
        <TR> 
           <TD></TD></TR></TBODY></TABLE></TD> 
    <TD width=50 height=50> 
      <TABLE> 
        <TBODY> 
        <TR> 
          <TD></TD></TR></TBODY></TABLE></TD> 
    <TD width=50 bgColor=#000000 height=50> 
      <TABLE> 
        <TBODY> 
        <TR> 
          <TD></TD></TR></TBODY></TABLE></TD></TR><!-- row 7 --> 
  <TR> 
    <TD  width=50 bgColor=#000000 height=50> 
      <TABLE> 
        <TBODY> 
        <TR> 
          <TD></TD></TR></TBODY></TABLE></TD> 
    <TD width=50 height=50> 
      <TABLE> 
        <TBODY> 
        <TR> 
          <TD></TD></TR></TBODY></TABLE></TD> 
    <TD width=50 height=50> 
      <TABLE> 
        <TBODY> 
        <TR> 
           <TD></TD></TR></TBODY></TABLE></TD> 
    <TD width=50 height=50> 
      <TABLE> 
        <TBODY> 
        <TR> 
          <TD></TD></TR></TBODY></TABLE></TD> 
    <TD width=50 height=50> 
      <TABLE> 
        <TBODY> 
        <TR> 
          <TD></TD></TR></TBODY></TABLE></TD> 
    <TD width=50 height=50> 
      <TABLE> 
         <TBODY> 
        <TR> 
          <TD></TD></TR></TBODY></TABLE></TD> 
    <TD width=50 height=50> 
      <TABLE> 
        <TBODY> 
        <TR> 
          <TD></TD></TR></TBODY></TABLE></TD> 
    <TD width=50 height=50> 
      <TABLE> 
        <TBODY> 
        <TR> 
          <TD></TD></TR></TBODY></TABLE></TD> 
    <TD width=50  bgColor=#000000 height=50> 
      <TABLE> 
        <TBODY> 
        <TR> 
          <TD></TD></TR></TBODY></TABLE></TD></TR><!-- row 8 --> 
  <TR> 
    <TD width=50 bgColor=#000000 height=50> 
      <TABLE> 
        <TBODY> 
        <TR> 
          <TD></TD></TR></TBODY></TABLE></TD> 
    <TD width=50 height=50> 
      <TABLE> 
         <TBODY> 
        <TR> 
          <TD></TD></TR></TBODY></TABLE></TD> 
    <TD width=50 height=50> 
      <TABLE> 
        <TBODY> 
        <TR> 
          <TD></TD></TR></TBODY></TABLE></TD> 
    <TD width=50 height=50> 
      <TABLE> 
        <TBODY> 
        <TR> 
          <TD></TD></TR></TBODY></TABLE></TD> 
    <TD width=50  height=50> 
      <TABLE> 
        <TBODY> 
        <TR> 
          <TD></TD></TR></TBODY></TABLE></TD> 
    <TD width=50 height=50> 
      <TABLE> 
        <TBODY> 
        <TR> 
          <TD></TD></TR></TBODY></TABLE></TD> 
    <TD width=50 height=50> 
      <TABLE> 
        <TBODY> 
        <TR> 
           <TD></TD></TR></TBODY></TABLE></TD> 
    <TD width=50 height=50> 
      <TABLE> 
        <TBODY> 
        <TR> 
          <TD></TD></TR></TBODY></TABLE></TD> 
    <TD width=50 bgColor=#000000 height=50> 
      <TABLE> 
        <TBODY> 
        <TR> 
          <TD></TD></TR></TBODY></TABLE></TD></TR><!-- row 9 --> 
  <TR> 
    <TD  width=50 bgColor=#000000 height=50> 
      <TABLE> 
        <TBODY> 
        <TR> 
          <TD></TD></TR></TBODY></TABLE></TD> 
    <TD width=50 bgColor=#000000 height=50> 
      <TABLE> 
        <TBODY> 
        <TR> 
          <TD></TD></TR></TBODY></TABLE></TD> 
    <TD width=50 bgColor=#000000 height=50> 
      <TABLE> 
         <TBODY> 
        <TR> 
          <TD></TD></TR></TBODY></TABLE></TD> 
    <TD width=50 bgColor=#000000 height=50> 
      <TABLE> 
        <TBODY> 
        <TR> 
          <TD></TD></TR></TBODY></TABLE></TD> 
    <TD width=50 bgColor=#000000 height=50> 
      <TABLE> 
        <TBODY> 
        <TR> 
           <TD></TD></TR></TBODY></TABLE></TD> 
    <TD width=50 bgColor=#000000 height=50> 
      <TABLE> 
        <TBODY> 
        <TR> 
          <TD></TD></TR></TBODY></TABLE></TD> 
    <TD width=50 bgColor=#000000 height=50> 
      <TABLE> 
        <TBODY> 
        <TR> 
          <TD></TD></TR></TBODY></TABLE></TD> 
    <TD width=50  bgColor=#000000 height=50> 
      <TABLE> 
        <TBODY> 
        <TR> 
          <TD></TD></TR></TBODY></TABLE></TD> 
    <TD width=50 bgColor=#000000 height=50> 
      <TABLE> 
        <TBODY> 
        <TR> 
          <TD></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE> 
<div style="position: absolute; width: 285px;  Height: 293px; Z-index: 1; left: 467px; top: 32px "id = layer1" > 
; click and hold the red part to start: < br / > 
 drag the red block to avoid touching the blue part < br / > 
 and do not touch the black border area. < br / > 
 
 if you can reach more than 18 seconds, you are a genius. < br / > 
 it is said that US Air Force pilots are < br / > 
, who are required to stay for 2 minutes. < / div > 
 < / body > 
 < / HTML >

Gcod

Talking about the trivial matters of life and talking about the whole world, that's all

Article review