Ruhua Yan's Blog

pageX and pageY:
Relative to the top left of the fully rendered content area in the browser. This reference point is below the url bar and back button in the upper left. This point could be anywhere in the browser window and can actually change location if there are embedded scrollable pages embedded within pages and the user moves a scrollbar.

screenX and screenY:
Relative to the top left of the physical screen/monitor, this reference point only moves if you increase or decrease the number of monitors or the monitor resolution.

clientX and clientY:
Relative to the upper left edge of the content area (the viewport) of the browser window. This point does not move even if the user moves a scrollbar from within the browser.

http://richyan.com/javascript/moveTriangle.js

var string =”Instruction (how to play): n \n\

1. Press ← and → to move the Green triangle. n \n\

2. Press ↑ to launch the arrows. Arrows will rise up. n \n\

3. The word will disappear when the arrow gets it.”;

var words = string.split(/\s+/);

var objBody = document.getElementsByTagName(“body”).item(0);

var conText = document.getElementById(“conText”);

var wordArray = new Array();

for(var i=0; i<words.length; i++){

wordArray[i] = createDiv(i, words[i]);

//console.log(“word “+words[i]);

}

function createDiv(n, divContent){

var wordDiv = document.createElement(“div”);

wordDiv.setAttribute(‘id’,”word”+n);

//wordDiv.style.border =’1px solid grey’;

//wordDiv.style.backgroundColor=”#009900″;

wordDiv.style.padding = “2px”;

if(divContent.trim()===”n”){ wordDiv.innerHTML=”<br />”; }else{

wordDiv.style.float=”left”;

wordDiv.innerHTML = divContent;

}

//wordDiv.onclick =function() { alert(wordDiv.offsetWidth); };

conText.appendChild(wordDiv);

return wordDiv;

}

var count=0;

var SPEED = 5;

window.addEventListener(“scroll”, setPositions, false);

window.addEventListener(“resize”, setPositions, false);

var keys = {

right: false,

left: false,

up: false

};

document.body.addEventListener(‘keydown’, function(evt){

if (evt.keyCode == 37) {

keys[“left”] = true;

} else if (evt.keyCode == 39) {

keys[“right”] = true;

}else if(evt.keyCode==38){

keys[“up”] =true;

}

if (keys[“right”] && keys[“up”]) {

moveTriangle(SPEED);

createArrow(count++);

}else if (keys[“left”] && keys[“up”]) {

moveTriangle(-SPEED);

createArrow(count++);

}else if(keys[“right”]) moveTriangle(SPEED);

else if(keys[“left”]) moveTriangle(-SPEED);

else if(keys[“up”]) {createArrow(count++);

}

});

document.body.addEventListener(‘keyup’, function(evt){

if (evt.keyCode == 37) {

keys[“left”] = false;

} else if (evt.keyCode == 39) {

keys[“right”] = false;

}else if(evt.keyCode==38){

keys[“up”] =false;

}

});

var vDir = 8;

var position;

var cont = window.document.querySelector(“#cont”);

var triangle = window.document.getElementById(“triangle”);

var space = cont.offsetWidth-triangle.offsetWidth-document.getElementById(“conRight”).offsetWidth;

var arrHeight = 20;

setPositions();

function setPositions(){

position = getPosition(cont);

var rand = Math.floor(Math.random() * 300);

triangle.style.left = (position.x +rand) +”px”;

}

function moveTriangle(speed){

triangle.style.visibility=”visible”;

var leftPos = parseInt(triangle.style.left);

if((leftPos < parseInt(position.x) ) && (speed<0)) speed=0;

if((leftPos >parseInt(position.x)+space) && (speed>0)) speed=0;

leftPos += speed;

triangle.style.left = leftPos +”px”;

}//end funtion moveTriangle

function createArrow(n){

//var objBody = document.getElementsByTagName(“body”).item(0);

var arrDiv = document.createElement(“div”);

var pos = getPosition(triangle);

arrDiv.setAttribute(‘id’,”arrow”+n);

arrDiv.style.position=”absolute”;

arrDiv.innerHTML = “|”;

arrDiv.style.top=(pos.y-arrHeight)+”px”;

arrDiv.style.left =pos.x+”px”;

objBody.appendChild(arrDiv);

launchArrow(arrDiv);

}

function launchArrow(arrDiv){

var topPos = parseInt(arrDiv.style.top);

var leftPos = parseInt(arrDiv.style.left);

if(topPos<=60) {

objBody.removeChild(arrDiv);

delete arrDiv;

return;

}

for(i=0, j=wordArray.length; i<j; i++){

var pos= getPosition(wordArray[i]);

if(pos===null) break;

else if(topPos < pos.y+arrHeight && pos.x<leftPos && pos.x +wordArray[i].offsetWidth>leftPos) {

//wordArray[i].innerHTML = “”;

conText.removeChild(wordArray[i]);

objBody.removeChild(arrDiv);

return;

}

}

arrDiv.style.top = (topPos – vDir) + “px”;

timerID = setTimeout(function(){launchArrow(arrDiv);}, 50);

}

function getPosition(el) {

var xPos = 0;

var yPos = 0;

while (el) {

if (el.tagName == “BODY”) {

// deal with browser quirks with body/window/document and page scroll

var xScroll = el.scrollLeft || document.documentElement.scrollLeft;

var yScroll = el.scrollTop || document.documentElement.scrollTop;

xPos += (el.offsetLeft – xScroll + el.clientLeft);

yPos += (el.offsetTop – yScroll + el.clientTop);

} else {

// for all other non-BODY elements

xPos += (el.offsetLeft – el.scrollLeft + el.clientLeft);

yPos += (el.offsetTop – el.scrollTop + el.clientTop);

}

el = el.offsetParent;

}

return {

x: xPos,

y: yPos

};

}