Ruhua Yan's Blog

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

};

}