HTML
<!DOCTYPE html>
<html>
<head>
<title> Rock Climbing </title>
<script>
var
cObj,
cContext,
ctx,
imgObj,
rectPO,
svgPO,
img,
imgArr = [],
paddleImgSrcArr = [],
asteroidImgSrcArr = [],
monImgSrcArr = [],
laserImgArr = [];
var
successBin = [],
goArr = [],
dotArr = [],
zipLineArr = [],
a = 0;
var
xStart0,
yStart0,
x0Dir,
y0Dir,
xStart1,
yStart1,
x1Dir,
y1Dir,
x0Offset,
y0Offset,
uShipXPos,
uShipYPos;
var
redrawCon;
var
mouseXStart,
mouseYStart,
mouseXEnd,
mouseYEnd,
mouseYR,
mouseXR,
mouseTR,
opcode;
// -- QA array
var
allQAArr,
onscreenList,
answerList,
chosenQAObj,
indexObjArr,
chosenPos,
newSetFlag;
var
clipX = 00, // -- offset of the cropped image to the real image
clipY = 2400,
clipW = 600,
clipH = 3000,
imgX = 0, // -- position the entire block
imgY = 0,
imgW = 600,
imgH = 3000,
clipXLimit = 0,
clipYLimit = 1000,
scrollDir = 1; // -- 1, go up; 0, stay still; -1, go down
// -- color code arr
var
colorVArr = [ "#006400", "#fa99ff", "#d69D70", "#3d6f87", "#06a578", "#f8a894", "#bcbcbcb", "#1f3a56", "#c2a6ba" ];
// -- gui
var
scoreDOM,
pScore,
zLDOM,
zLNum;
// -- status flags
var
canonMF,
newLF;
// -- image
var
img;
// -- soccer ball image
var
sbImg;
// -- hit box of end point of kick zip line
var
endXPos,
endYPos;
// --
var
playerArr = [],
playerWB = 0,
sbStill = 1,
selectedPlayerId = 0;
// --
var
goalBoxArr,
newGame;
// -- gui
var
team0Score,
team1Score,
guiText,
chosenHaloImg,
teamScoreArr;
...