|
JavaScript - Moving Hundreds To Thousands Of Drawn Lines Simultaneously.
Hi, I'm one of the main developers from Trackmill.com (which is a gaming website),
One of our main games is Free rider 2, Which we have converted to run via a database so people don't have to manually send around track codes so other people can evaluate their tracks. I am trying to build a track previewer in html5/javascript which will eventually replace our current one written in flash (which lags terribly on large tracks) I am stuck on 1 thing though, With the larger tracks there are up to thousands of lines that are drawn using lineTo() moveTo() etc. And when i move using the arrow keys, It requires the javascript to reload the track, and parse every single line again, Causing the screen to turn white whilst it does so. Is there a way i can use a similar method to the way it has been done in the flash version, where it is in a movieclip, which then instead of moving each line, it moves the movieclip instead. Script: Code: <html>
<head>
<script type="application/javascript">
var offsetx = -133;
var offsety = 135;
scale = 1;
var canvas;
var ctx;
var test;
function init() {
canvas = document.getElementById("game");
ctx = canvas.getContext("2d");
loadtrack();
}
function loadtrack()
{
canvas.width = canvas.width;
ctx.fillText("Loading track... Please wait.",10,16);
var request=new XMLHttpRequest;
request.open("GET","test.txt",false);
request.send();
var trackcode = request.responseText;
var type = trackcode.split("#");
var line = type[0].split(",");
var sline = type[1].split(",");
for(var i=0; i<line.length; i++)
{
var section = line[i].split(" ");
ctx.beginPath();
ctx.strokeStyle='black';
ctx.moveTo(parseInt(section[0],32)+offsetx+0.5, parseInt(section[1],32)+offsety+0.5);
ctx.stroke();
for(var j=0; j<section.length; j+=2)
{
ctx.lineTo(parseInt(section[j],32)+offsetx+0.5, parseInt(section[j+1],32)+offsety+0.5);
ctx.stroke();
}
}
for(var i=0; i<sline.length; i++)
{
var section = sline[i].split(" ");
ctx.beginPath();
ctx.strokeStyle='grey';
ctx.moveTo(parseInt(section[0],32)+offsetx+0.5, parseInt(section[1],32)+offsety+0.5);
ctx.stroke();
for(var j=0; j<section.length; j+=2)
{
ctx.lineTo(parseInt(section[j],32)+offsetx+0.5, parseInt(section[j+1],32)+offsety+0.5);
ctx.stroke();
}
}
}
function mousescroll(evt){
if (evt.detail <= 0){
scale += .05;
loadtrack();
} else {
scale -= .05;
loadtrack();
}
}
function doKeyDown(evt){
switch (evt.keyCode) {
case 37:
offsetx -= 5;
break;
case 39:
offsetx += 5;
break;
case 38:
offsety -= 5;
break;
case 40:
offsety += 5;
break;
}
loadtrack();
}
window.addEventListener('DOMMouseScroll', mousescroll, false);
window.addEventListener('keydown',doKeyDown,true);
</script>
</head>
<body onload="init()">
<canvas id="game" height="500" width="1200"></canvas>
</body>
</html>
Smaller tracks load fine, example: Code: 42 1i 5u a,8e a 8e -a 8e -u 8e -1i 92 -18 92 0 9m a aa 0 au -a au a,8e -1i 9m -26 au -1i aa -18 9m -1i 92 -18,6i a 84 a,b8 -a b8 a cg u d4 k do u do a do -a do -u cg -1i bs -18,do -u d4 -k bs -18,b8 -a bs -k bs 0 cg a d4 0 d4 -k,e2 k e2 -1i em -18,e2 -u em -k em u,fa -u fu -k gi -u fa -1i em -18,fu -k fu k fu u,gi k gi -u,fa -u em -k,6i a 5u a,gs -u gs 0 gs a i4 u jc a jc -u,gs -18 gs -u,gs -18 hg -1i hg 0 gs a,hg 0 i4 a io 0 jc a,io 0 io -1i jc -18 jc -u,jm a ku u li k m6 u m6 a,jm a jm -a ka -k ka 0 ku a li 0 li -k m6 -u m6 a,li -k ka -18 ku -1i m6 -u,mg a no u p0 a p0 -a oc -k no -u,oc -k p0 -u no -1i no -18 no -a,mg a n4 0 no a oc 0 no -a,qi a qi k r6 u r6 0 t2 u t2 a se 0 t2 -a,qi a qi -a,qi -1i qi 0,qi -1i rq -26 t2 -1i t2 -u t2 -a,r6 -18 rq -1i se -18 t2 -1i,se -18 se -k rq -a r6 -k r6 -18,qi -1i r6 -18,tc k u0 u,tc k tc 0 tc -18 u0 -1i u0 u,ua a vi u 10q a 10q -k 10q -1s 106 -26 106 -1i,ua a ua -a ua -u uu -k uu 0 vi a 106 0 106 -k 10q -u,ua -u vi -1i 106 -18 106 -1i,106 -k vi -u uu -k,114 a 12c u 130 k 11o 0 11o -a,114 a 114 -a 114 -u 12c -1i 13k -u 130 -k 130 -a 130 0 13k -a 13k -u,130 -k 12c -u 11o -k 114 -u,11o -k 11o -a,13u k 13u -u 13u -18 14i -1i 14i 0,13u k 14i u 14i 0,17m a 19i 1i 1es 1i 3d2 1i,pa a q8 a,8e a 9m u au a,e2 k em u,gi k fu u,42 1i -1mm 1i,17m a 14s a#9m -1i 9m -a aa 0,9m -a 92 0,bs 0 cg -a cg -u,cg -a d4 0,bs -k cg -u,em -k fa -a fa a fu 0,fa -a fu -k,em 0 fa a,hg 0 i4 -a io 0,hg -k i4 -u i4 -a,i4 -u io -k,ka 0 ku -a li 0,ku -a ku -u,ka -k ku -u,no -1i mg -u mg -a n4 0,mg -u no -a,no -u n4 -k,r6 -18 rq -u rq -a,rq -u se -18,tc -18 tc -1s u0 -1i,uu 0 vi -a vi -u,vi -a 106 0,11o -k 12c -a 12c a,12c -a 130 -k,130 0 12c a,14i -1i 156 -18 156 -k 14i -u##BMX# (you need to put that in test.txt in the same directory as the html file) But as soon as you load a large track, it lags. Would be quite useful if i could get a quick response as to how i could fix this. Similar TutorialsI'm trying to create a script that has a countdown and at each second, a div is created on the page with some content. How to run both functions at the same time at the click of a button? Thanks to the answer!
This may seem a bit of an unusual question, but I've been tossing around an idea in my head for an experimental collaborative art & music website. I've not started building the site at all, and I've only a little HTML and no scripting experience. I plan on most likely using a service like squarespace for the ease of updating and member system and other features. (I imagine a few around here scoff at that kind of service! But that's beside the present issue.) So I imagine that if javascript is capable of handling this, it's not an extremely complicated solution. For example: say I have a song I'd like users to be able to listen to, but I want to split the parts (drums, strings, guitars, vocals, etc.) among a few different audio files, all embedded within close proximity of each other (say arranged vertically in two columns) on the same page. I want this so that users are free to play around with the parts, dropping them, lowering & raising volume, even pulling them out of sync if they please. Now what I want is a single button that will trigger all of the audio files to begin playback simultaneously, say, above the embedded files and centered. Would this be possible? Could anyone offer assistance in setting up this kind of thing? Thanks in advance! I am trying to display some images in, say, 500ms intervals, but I want to loop through images, so I use a for loop and setTimeouts and function calls... Code: for (i=0;i<=5;i++)
{
setTimeout(DisplayTheImage, 500);
}
(a var that increments the image like image[x] is somewhere else) but I think all I accomplish is that while the above code calls the function 5 times alright, all five function calls occur simultaneously. Right? Eh, I want the function to be called 5 times, but at five different times, namely in 500ms intervals. I thought the function would wait to finish (500 ms) then another call and so on. How can I do that? Hello every body i have a problem with javascript i wrote a script which process the entry of a text area 1 and i made the script process only the first line of the entry i want a method to make the script to process all of the lines which the user enter it OR make a varibals to every line entered from the user i am so sorry about the weak language thank you in advance i have a program which gets values from different arrays and displays them on screen. how do i insert a break every 5 lines so its easier to read?
What is wrong with my code? I am trying to move a div and it wont work at all. Also my little <a> fix is really sloppy. Could I have some help with how I should fix that too? Thanks! Code: <html>
<head>
<script type="text/javascript">
var obj = document.getElementById("object");
var x = parseInt(obj.style.left);
var y = parseInt(obj.style.top);
function right(){
obj.style.left = "" + (x + 1) + "";
}
function left(){
}
</script>
</head>
<body>
<a href="" onclick="right();">
<div id="container" style="position:absolute; top:100px; left:50%; margin-left:-400px; width:800px; height:600px; border:3px solid #808080;">
<div id="object" style="position:relative; top:559; left:379; background-color:#CCCCCC; width:40px; height:40px; border:1px solid #696969;">
</div>
</div>
</a>
</body>
</html>
I am new to javascript but am proficient in .net languages. If I have a text file that is structured as follows; -35.889,150.984 -35.578,151.022 -35.449,150.993 I have two questions; 1. How can I read the text in that file into an array? I've tried Code: var file = "X:\ASP.Net\GoogleMaps\GMAP\MarkerCoordinates.txt"; //file:\\X:\ASP.Net\GoogleMaps\GMAP\MarkerCoordinates.txt $.get(file,function(txt) P.S. I tried the commented way above also and that didnt work I also tried using XMLHttprequest like so Code: var txtFile = new XMLHttpRequest();
txtFile.open("GET", "file:\\C:Gmap\test.txt", true);
2. How do you iterate through each line in the array? I'm not sure how to do a for-each in javascript, would be simple in .net Thank you, in advance, for any assistance Here I have a code to redirect a page to one of these three pages. But is there a limit to the amount of websites I can add? Code: <script type="text/javascript"> var urls = new Array(); urls[0] = "http://www.google.com"; urls[1] = "http://www.youtube.com"; urls[2] = "http://www.codingforums.com"; var random = Math.floor(Math.random()*urls.length); window.location = urls[random]; </script> Would I be allowed to have, say, hundreds of thousands of different sites? Or would the script stop working? Thanks. I'm making a graph in Canvas. I plot the grid with ctx.strokeStyle = '#ccc'; I then plot the data lines with ctx.strokeStyle = '#000';, and the GRID color then turns back to '#000' too! The same happens with any color. The same happens with lineWidth. The fillStyle of the labels is not affected. It happens even if I surround the code with save/restore. It happens in both Firefox and Chrome. Has anyone else had this problem? Is there any way around it? Hi, I'm noob , but i have nice idea i want to do it but i can't .. i tried many ways to do it .. but didn't work any of them .. the idea is move the foot to room no.1 .. but i want to see the foot moving on the red line to the room like this pic : I already looked at this http://codingforums.com/showthread.p...ht=moving+text thread and I know it's similar. I just don't know what I am doing wrong. My css puts the text where it needs to go, then the script is supposed to alter it's pixel position and so it should move, right? Code: <html>
<head>
<style>
item1 {position: absolute; left:20px; top:280px;}
item2 {position: absolute; right:20px; top:280px;}
</style>
</head>
<body>
<item1 id="item1" >item1</item1>
<item2 id="item2" >item2</item2>
<script type="text/javascript">
var i=0; var j=0;
var obj1=document.getElementById(item1);
var obj2=document.getElementById(item2);
obj1.style.visibility="visible";
obj2.style.visibility="visible";
//if (typeof obj1.style.left!="undefined" && obj2.style.right!="undefined")
//{
//loop from ParseInt to coordinates in center of screen
for (i=0;i<100;i++)
{
obj1.style.left=parseInt(obj.style.left) + i + "px";
document.write("<item1 id="item1">item1</item1>");
document.close();
}
//for (j=0;j<100;j++)
// {
// obj2.style.right=parseInt(obj2.style.right) + j + "px";
// document.write("<item2 id="item2" >item2</item2>");
// }
alert(i);
//}
</script>
</body>
</html>
Am I anywhere close? I am trying this on IE6 (I only have Windows 2000) and on Firefox 3.5.3. Hi there folks. I am a bit stuck with a little code. I am making a online yearbook entry and I wanted an image of myself animate/move from the top left hand to the bottom right of the screen. I also wanted to allow people reading it the option to change bg colour and text size - but I have managed to do those. The difficulty I am having is with moving the image, could anybody suggest any simple codes because I am new to this and don't want my head spinning before I go any further! Any help is greatly appreciated. Hello everyone. I am trying to make a flag with css and then move it with javascript. Code: <html>
<head>
<title>Flag</title>
<link rel="stylesheet" type="text/css" href="flag3.css" />
<script language="javascript">
Hmove=-100;
function moveObjRight(obj)
{
obj.style.left=Hmove;
Hmove+=4;
if(Hmove<900)
window.setTimeout("moveObjRight(" +obj.id+ ");", 0);
}
</script>
</head>
<body>
<h1>The flag of ___ by www</h1>
<div id="bar3">
<div id="bar2">
<div id="bar1">
</div>
<br />
<br />
<br />
<br />
</div>
<br />
<br />
<br />
<br />
</div>
<script language="JavaScript">
moveObjRight(bar3);
</script>
</body>
</html>
This is my code. The image is moving to the right, but i want it bounce from side-to-side in the browser window. Any help will be appreciated. Thank you. I'm trying to create something like: http://www.deliciouslysortedibiza.com/ But I want the links to move like it does in there. Does anyone know the easiest way I could achieve this? Since I'm fairly new to Javascript and all. Thanks ! Hello, I'm newbie in javascript, but i want to make an moving image. In time it should change to other image with other button. Also it could be changed by user. The change should be dynamic like moving from left to right. ^^ Any advices, tutorial links or smthing.. Thx Has anyone ever tried to break up a text area into 2 lines, but at the same time each line has a limited number of characters allowed in it ? i.e. line 1 = maxcharacters = 124 , line 2 = machcharacters = 1024 (Line 2 will therefore wrap until 1024 chracters are reached) ... including spaces as characters. Something along the lines of: Code: var maxLines = txtArea.rows;
var maxChars = txtArea.rows * txtArea.cols;
countChars.value = txtArea.value.length;
countLines.value = getLines(txtArea);
document.myForm.maxLines.value = maxLines;
document.myForm.maxChars.value = maxChars;
if((txtArea.value.length >= maxChars || getLines(txtArea) >= maxLines)
&& (window.event.keyCode == 10 || window.event.keyCode == 13))
{
while(getLines(txtArea) > maxLines)
txtArea.value = txtArea.value.substr(0,txtArea.value.length-2);
while(txtArea.value.length > maxChars)
txtArea.value = txtArea.value.substr(0,txtArea.value.length-2);
alert("chars and / or lines limit reached");
}
else if(txtArea.value.length > maxChars )
{
while(txtArea.value.length > maxChars)
{
txtArea.value = txtArea.value.substr(0,txtArea.value.length-1);
}
alert("chars limit reached");
}
else if (f (countLines.value > maxLines)
{
while(countLines.value > maxLines)
{
txtArea.value = txtArea.value.substr(0,txtArea.value.length-1);
}
alert("lines limit reached");
}
countChars.value = txtArea.value.length;
countLines.value = getLines(txtArea);
}
Thanks Hi. I have the following line in my HTML file <table class="bz_buglist" cellspacing="0" cellpadding="4" width="100%"> And I need to use javascript to change this line to <table id="main_table" class="bz_buglist" cellspacing="0" cellpadding="4" width="100%"> . I just need to add the ID part. How can I do this? Is there a method of replacing the line, or a way to "add attribute"? thanks! kev. wait... why am i here???
Say I have a <textarea> input and I want to strip all the blank lines (lines with only whitespace). I have this regular expression, why doesn't it do anything? I've tried different variations with the flags (m and g). Code: ... var output = input.replace(/^\s*$/gm, "notworking!"); ... The very same regex works fine in my text editor (Notepad2), and I can match all empty lines. Code: LINE1
LINE4 ^(line 3 has some spaces)
should become Code: LINE1 LINE4 And when I finally do get this to work, how would I remove the empty line? |
|||||||