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