|
JavaScript - Optimization For Masters
Ok, I have some extensive animation going on in this script. I have all the behavior I want out of this script. A 3D carousel interface, each window in the carousel is a separate UI window. It uses active scrolling for navs and content...like (iphone).
The problem is that I have optimized to my best and still cant gain any performance out of IE. It runs pretty fast in FF, and in Safari. I have reversed loops, I have vared all my Math, I have stripped equations, could do more I guess, and I have made attempts at preventing even bubbling. I have minimized the use of <img> tags as well. I have even cached most methods and use a constructor method to create new HTML elements. At this point I am starting to feel like I am getting into techniques and areas of JS I just don't understand well. Here is example of a method I would like to optimize: Code:
this.anim = function () {
var s = Math.sin(s3D.A * .01);
var c = Math.cos(s3D.A * .01);
var xs = Math.round((s * this.x) + (c * this.z));
var zs = Math.round((s * this.z) - (c * this.x));
var ysSpeed = Math.round((s3D.Y - this.ys) / (s3D.speed * .1));
this.ys += ysSpeed;
var D = nw / (nw + zs);
var w = Math.round(D * (nw * s3D.zOOm));
var h = Math.round(w * s3D.HW);
var Zac = Math.round(this.Z * nw * this.ac);
var Zas = Math.round((this.Z * nw) * this.as);
var calcOTop = px(Math.round(nh * .5 + this.ys * D - (h * .5)));
var calcOtcTop = px(Math.round((h * .1 *D) - (w * .550)));
var calcOleft = px(Math.round(nw * .5 + xs * D - (w * .5)));
var calcOzindex = Math.round(D * 9);
var pxW = px(w);
var pxH = px(h);
var barHeight = px(Math.round(h * .2));
var barFontSize = px(Math.round(.031 * w));
var otvHeight = px(Math.round(h * .091));
var oMenuHeight = "90%";
var calcOMenuLeft = px(Math.round(w * .1 *D -(w *.480)));
var centerOtop = px(Math.round(nh * .4 + this.ys));
var centerOleft = "50%";
var floatLogotop = px(Math.round((nh * .68) + (this.ys + 20)));
var floatLogoleft = "50%";
if(this.Z > .4 && this.dZ || this.pZ > 0){
var s3Dspeed = Math.round(s3D.A -= xs / 50);
//s3Dspeed;
}
if(this.dZ){
this.Z *= 1.01;
this.x = Zac;
this.z = Zas;
}
if(this.Z > .8 && this.dZ){
this.dZ = false;
this.pZ = s3D.temp;
fadeOpacity("closeButton1"+newNID, 0, 100, 500);
fadeOpacity("closeButton2"+newNID, 0, 100, 500);
}
if(this.dZ == false && this.Z > .4){
if(this.pZ > 0) {
this.pZ--;
} else {
this.Z *= .995;
this.x = Zac;
this.z = Zas;
}
}
Any Help? This is a fairly nasty piece of calculation. Any way to make this run faster? Similar TutorialsSo, this code does what it's supposed to do (check an array for dis-allowed input and supply the appropriate keyboard for touchscreen users) but I was worried that maybe this wasn't the most succinct logic... Code:
kb=2,kp=1;
for(var i in Setup.DisAllowed){
if(Setup.DisAllowed[i]==0)
kp=0;
if(Setup.DisAllowed[i]==1||Setup.DisAllowed[i]==2)
kb--;
}
if(kp)APP.Module('KeyPad');
if(kb)APP.Module('KeyBoard');
if(kp&&kb)APP.Module('AlphaNumeric');
Keeping in mind the Setup.DisAllowed array and APP.Module method are fixed in stone, would anyone recommend a better way to use the array to select the necessary keyboard? The following is inside a loop: Code: store1 = (Employees[i][3]==1)?'selected="true"':''; store2 = (Employees[i][3]==2)?'selected="true"':''; store3 = (Employees[i][3]==3)?'selected="true"':''; store4 = (Employees[i][3]==4)?'selected="true"':''; myTable+= '<td><select id="store' + i + '" onchange="" style="color:'+color1+' ; width:125px ; height:35px" >' +'<option ' + store1 + ' value="1">Pasadena</option>' +'<option ' + store2 + ' value="2">Alvin</option>' +'<option ' + store3 + ' value="3">Angleton</option>' +'<option ' + store4 + ' value="4">Bay City</option>' +'</select></td>' I originally came up with the idea in a similar part of the app that allowed choosing between employees and would ideally prefer something similar: Code: function BUILD_EMP_SELECTOR(){
empSelector = '<select id="empSelect" onchange="UPDATE_EMP();">';
for (i=1 ; i<AllEmployees.length ; i++){
Booleanselect = (i==me)?'selected="true"':'';
empSelector += '<option ' + Booleanselect + ' value="' + i + '">' + AllEmployees[i] + '</option>';
}
empSelector += '</select>';
ID('employee').innerHTML = empSelector;
}
The problem I'm having is that I would like to optimize the part of the first code that chooses which store a particular employee is at. I've also come up with this, but I'm not sure if its the best solution, or if it's even any better than my first: Code: store1=store2=store3=store4='';sel='selected="true"';
Employees[i][3]==1&&(store1=sel);
Employees[i][3]==2&&(store2=sel);
Employees[i][3]==3&&(store3=sel);
Employees[i][3]==4&&(store4=sel);
Also, while I would have to hard code additional stores +'<option ' + store5 + ' value="5">Elsewhere</option>' I would rather not have to add an additional "else if store5=" if possible. I know this is mostly code, and not much question, but what I'm looking for is mostly your opinions/recommendations... i am building a graphing calculator, it works but it is slow. graph.graph(equ) is the main function it graphs. i think that this is the problomatic area. Code: var initgraph = function( canvasid )
{
var graph =
{
}
;
graph.logmsg = [];
var dlog;
graph.curlog = ( document.getElementById( "dlog" ) ) ? document.getElementById( "dlog" ) : null;
if ( graph.curlog === null ){
graph.dlog = function()
{
}
;
}
else{
graph.dlog = dlog = function( str )
{
graph.logmsg.push( str );
var temp = graph.logmsg.join( "\n" );
graph.curlog.value = temp;
return str;
}
;
}
//alert( 'debbuging log initalized' );
graph.canvas = document.getElementById( canvasid );
graph.dlog( "canvas found" );
graph.dlog( "width: " + ( graph.w = parseInt( document.defaultView.getComputedStyle( graph.canvas, null ).width, 10 ) ) );
graph.dlog( "height: " + ( graph.h = parseInt( document.defaultView.getComputedStyle( graph.canvas, null ).height, 10 ) ) );
graph.h2 = Math.round( graph.h / 2 );
graph.w2 = Math.round( graph.w / 2 );
graph.dlog( "computed styles calculated" );
graph.ctx = graph.canvas.getContext( "2d" );
graph.dlog( 'canvas context gained' );
graph.ctx.fillStyle = "#E0FFFF";
graph.dlog( 'styles set' );
graph.ctx.translate( graph.w2, graph.h2 );
graph.ctx.stroke();
graph.ctx.save();
graph.dlog( 'canvas context saved' );
graph.ctx.beginPath();
graph.dlog( 'axis postitions have been calculated' );
graph.lg = [];
graph.gs = [];
graph.dlog( 'arrays initialized' );
graph.goodsize = 1;
if( graph.h < 200 || graph.w < 200 ){
alert( "Canvas for graph is too small.\n Minimum recomended size is 200 X 200, recomended size is 500 X 500.\nSize is " + graph.h + " X " + graph.w + ".\n Graphs may be hard to see or they may be pointless." );
graph.goodsize = 0;
}
else{
graph.dlog( "graph is big enuf" );
}
if( graph.h != graph.w ){
alert( "The canvas is not square. Graph may not look right." );
graph.goodsize = 0;
}
else{
graph.dlog( 'graph is square' );
}
graph.lineTo = function( x, y ){
graph.ctx.lineTo( x, - y );
return graph;
}
;
graph.moveTo = function( x, y ){
graph.ctx.moveTo( x, - y );
return graph;
}
;
graph.dot = function( xx, yy )
{
if( ( typeof xx !== "number" || typeof yy !== "number" ) || Math.abs( xx ) > graph.w2 || Math.abs( yy ) > graph.h2 )
{
graph.dlog( "Dot (" + xx + ", " + yy + ") will not fit on the graph. Will not attempt to graph." );
return graph;
}
graph.ctx.fillStyle='#2B167B';
yy = 0 - Math.round( yy );
xx = Math.round( xx );
graph.ctx.fillRect( xx - 1, yy + 1, 3, 3 );
return graph;
}
;
graph.dlog( 'basic graphing methods created' );
graph.da = function( axes,ticks,orgin )/////////////////////////////////////////////////////////////////////////////////////////
{
// if ( clr === true )
// {
// graph.ctx.clearRect( - graph.w2, - graph.h2, graph.h, graph.w );
// } // old stuf.
graph.ctx.strokeStyle = "#2B167B";
if( axes ){
graph.moveTo( - graph.w2, 0 );
graph.lineTo( graph.w2, 0 );
graph.moveTo( 0, - graph.h2 );
graph.lineTo( 0, graph.h2 );
//alert('axes')
}
if( ticks ){
var j = - 3;
var i = - graph.w2;
for( i; i <= graph.w2; i += 10 )
{
graph.ctx.moveTo( i, j+0.5 );
graph.ctx.lineTo( i, j +5.5 );
}
j = - 3;
i = - graph.h2;
for( i; i <= graph.h2; i += 10 )
{
graph.ctx.moveTo( j+0.5, i );
graph.ctx.lineTo( j + 5.5, i );
}
// alert('ticks')
}
if( orgin ){
graph.dot( 0, 0)
// alert('orgin')
}
graph.ctx.stroke();
graph.ctx.beginPath();
return graph;
}
;
graph.dlog( 'axis drawing method initialized' );
graph.clrAll = function(){
graph.gs = [];
graph.ctx.fillStyle="#eoffff"
graph.ctx.fillRect( -graph.w2, -graph.h2, graph.w, graph.h );
graph.ctx.beginPath();
graph.dlog('graph cleared');
return graph;
}
graph.clrAll();
graph.dlog( 'axes drawn' );
graph.ec = function( /*y=*/equ ){
if( typeof equ !== "string" )
{
alert( "Equation must be a string." );
return false;
}
equ = equ.replace( /\|([^\|]+)\|/g, "Math.abs($1)" );
equ = equ.replace( /([a-z0-9\.\-]+)\s*\^\s*([a-z0-9\.\-]+)/, "Math.pow($1,$2)" );
// eventually this will allow for normal human syntax equations and not only javascript syntax ones
return equ;
}
;
graph.dlog( 'equation interpreter initialized' );
graph.graph = function( /*y=*/equ ){
equ = graph.ec( equ );
graph.ctx.strokeStyle='#800000';
if( equ === false )
{
alert( 'Pass equation as a string without the "y=", "f(x)=", "g(x)=" or similar.' );
return graph;
}
var a=graph.lg;
graph.gs[graph.gs.length] = equ;
var i = 0;
for( var x = 0 - graph.w2; x <= graph.w2; x ++ )
{
try
{ var a=graph.lg;
graph.lg[x] = eval(equ);
}
catch( e )
{
alert(graph.dlog("Bad syntax!"));
return graph
}
if( isNaN( graph.lg[x] ) || Math.abs( graph.lg[x] ) > graph.h2 )
{
if(isNaN(graph.lg[x])){
i=0}
}
else{
if( i === 0 ){
graph.moveTo( x, graph.lg[x] )
i = 1;
}
else{
graph.lineTo( x, graph.lg[x])
graph.ctx.stroke();
}
}
}
dlog('graphed '+equ);
return graph;
}
;
graph.dlog( 'main graphing object initialized. \ngraph library finished. exiting grafit.js' );
return graph;
}
// ---------------------------------------
;
it is used in this way Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
<link rel='stylesheet' href="jsgraphcalcstyle.css" type="text/css" />
<title>Javascript graphing calculator</title>
<script type="text/javascript" src="untitled1.js">
</script>
</head>
<body>
<script type="text/javascript" src='clik.js'>
</script>
<form id="form" action='javascript:graf()' onsubmit="graf()" name="form">
<h1>Javascript Graphing Calculator</h1>
<div id="fakepad" class='back'>
<div id='back'>
<table summary="main structure">
<tr>
<td colspan="4"><canvas id="screen" class='back' title='Graph' width="500" height="500"></canvas></td>
</tr>
<tr>
<td colspan="2">
<span class="mem">f</span>(x) =
<input type="text" class='back' id="equat" accesskey="f" />
</td>
<td><button type="button" id="enter" value="Graph" onclick="graf()" accesskey="g">
<span class="mem">G</span>raph</button>
</td>
<td>
<!--
<input type="button" id="clear" value="Clear" onclick="graph.clrAll();">-->
<button type="button" id='clear' value='clear' onclick="clr();" accesskey="c">
<span class="mem">C</span>lear</button>
</td>
</tr>
<tr>
<td rowspan="2">
<input type="checkbox" id="showaxes" value="yes" checked='checked' onclick="clik()" accesskey="a" />
<label for="showaxes">Show <span class='mem'>a</span>xes</label>
<!-- results in Show axes with the a underlined-->
<br />
<input type='checkbox' id='showticks' value='yes' checked='checked' onclick='clik()' accesskey="t" />
<label for="showticks">Show <span class='mem'>t</span>ick marks</label>
<!-- results in Show tick marks with the t underlined-->
<br />
<input type="checkbox" id="showorgin" value="yes" disabled="disabled" onclick='da()' accesskey="o" />
<label for='showorgin' id='orginlab' class='dis'>Show <span class="mem">o</span>rgin</label>
<!-- results in Show orgin with the o underlined-->
<br />
</td>
<td><!--spacer--></td><!--spacer-->
<td><!--spacer--></td><!--spacer-->
</tr>
</table>
</div>
</div><!--inline div, requier <br>-->
<br />
finish the function above and press Graph to graph it.<br />
Each tick mark on the graph is 10 units.
<div id='debug' class="c2">
<textarea id='dlog' class="back" cols='70' rows="7" readonly="readonly">
</textarea><br />
<p class="c1">debugging log</p>
</div><span><br />
<input type='button' id='dbut' onclick="dis()" value="Show debugging log" /></span>
</form><script type="text/javascript" src='init.js'>
</script>
</body>
</html>
Hey guys, I'm new both to this forum and javascript, I have made this small game to get me used to the canvas element, and basically just to entertain myself. http://beta.amando-filipe.co.cc/pong.html Right, take a look at the source code, I had to make that big Start() function so it would work on firefox, I am used to google chrome and apparently even badly made javascript runs on it, so I had to do a quick fix for firefox, what is the other way? Apparently I can't call functions inside the start function with events, like onmousedown etc. Here is the lates code, not yet uploaded to the site: Code: <!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="http://i.imgur.com/N7PTg.png">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>canvasPong</title>
<style type='text/css'>
body{background-color:#333; text-align:center;}
#text{width:750px;text-align:left;margin:0 auto;color:#FFF;}
.painted{background-color:#222;border-ballRadius:5px; -moz-border-ballRadius:5px; padding:5px; margin: 5px;}
iframe{background-color:#999;padding:5px;border-ballRadius:5px; -moz-border-ballRadius:5px;}
</style>
<script type='text/javascript'>
var ballSpeedX = 1;
var ballSpeedY = 1; //5
var pause = false;
var lost = false;
var pts = 0;
timer = false;
var time = 0;
var scoreset = false;
function Start() { /* System variables */
var frameDelay = 20;
var players = document.getElementById('players');
var playerInfo = players.getContext('2d');
var screen = document.getElementById('screen'); // Set up animation screen
var ctx = screen.getContext('2d'); // Set up animation screen
var out = document.getElementById('out'); // Set up information screen
var writeTo = out.getContext('2d'); // Set up information screen
var WIDTH = document.getElementById('screen').width;
var HEIGHT = document.getElementById('screen').height;
var WWIDTH = document.getElementById('out').width;
var WHEIGHT = document.getElementById('out').height; /* END */
/* Coordinate variables */
/* Colour related variables */
var R = 0;
var G = 0;
var B = 0; /* end */
/* Object variables */
var ballRadius = 10;
var ballX = ballRadius + 2;
var ballY = ballRadius + 2; /* end */
var lap = 0; /* end */
var paddleY = 0;
var prevPadY = 0;
var paddleWidth = 10;
var paddleHeight = 60;
var padDistToWall = 5;
var paddleX = WIDTH - padDistToWall - paddleWidth;
var mousemoved = false;
var speed;
var key = 0;
var highScores = [0, 0, 0, 0, 0];
highScores.length = 5;
var usr = ["", "", "", "", ""];
usr.length = 5;
var pify = 8;
var playerY = 20;
function bounce() {
if (pts >= 10) {
lost = true;
}
if (lost === true) {
frameDelay = 10000;
paddleY += 0;
ballSpeedX += 0;
ballSpeedY += 0;
writeCtx("You lost", 200, 150, 'purple', 50);
writeCtx("Press space bar to start new game", 180, 210, 'purple', 15);
if (scoreset === false) {
checkScore();
}
} else if (pause === true) {
frameDelay = 10000;
ballSpeedX += 0;
ballSpeedY += 0;
paddleY += 0;
writeCtx("Paused", 200, 150, 'purple', 50);
writeCtx("Press space bar to resume", 195, 210, 'purple', 15);
} else {
ballX += ballSpeedX;
ballY += ballSpeedY;
if (ballX - ballRadius <= 0) {
ballSpeedX *= -1;
} else {
ballSpeedX *= 1;
}
if (ballY + ballRadius >= HEIGHT || ballY - ballRadius <= 0) {
ballSpeedY *= -1;
} else {
ballSpeedY *= 1;
}
if (ballY >= paddleY && ballY <= paddleY + paddleHeight && ballX + ballRadius > paddleX && ballX - ballRadius < paddleX + paddleWidth) { // Hits paddle horizontally
if (speed >= 30) {
ballSpeedX += 0;
ballSpeedY += 0;
} else {
ballSpeedX += Math.random();
ballSpeedY += Math.random() + 0.2;
}
ballSpeedX *= -1;
R = randomNum(100, 255);
G = randomNum(100, 255);
}
if(ballX >= paddleX && ballX <= paddleX + paddleWidth && ballY + ballRadius > paddleY && ballY - ballRadius < paddleY + paddleHeight){
ballSpeedY *= -1;
}
if (ballX + ballRadius >= WIDTH) {
pts += 1;
ballX = 20;
ballY = randomNum(20, 380);
writeCtx("OOOPS!", 200, 150, 'purple', 50);
}
}
}
function randomNum(min, max) {
var Xz = Math.random() * max;
while (Xz < min) {
Xz = Math.random() * max;
}
return Math.round(Xz);
}
function paddle() {
ctx.beginPath();
ctx.fillStyle = '#00CD00';
if (paddleY === undefined) {
paddleY = 0;
}
if (paddleY + paddleHeight >= HEIGHT) {
paddleY = HEIGHT - paddleHeight;
}
if (paddleY < 0) {
paddleY = 0;
}
ctx.fillRect(paddleX, paddleY, paddleWidth, paddleHeight);
}
function rect(x, y, w, h) {
ctx.beginPath();
ctx.rect(x, y, w, h);
ctx.fill();
}
function write(what, whereX, whereY, colour, size) {
writeTo.textBaseline = 'top';
writeTo.fillStyle = colour;
writeTo.font = "bold " + size + "px sans-serif";
writeTo.fillText(what, whereX, whereY);
}
function writeCtx(whatt, whereXt, whereYt, colourt, sizet) {
ctx.textBaseline = 'top';
ctx.fillStyle = colourt;
ctx.font = "bold " + sizet + "px sans-serif";
ctx.fillText(whatt, whereXt, whereYt);
}
function writePlayerInfo(whatz, whereXz, whereYz, colourz, sizez) {
playerInfo.textBaseline = 'top';
playerInfo.fillStyle = colourz;
playerInfo.font = "bold " + sizez + "px sans-serif";
playerInfo.fillText(whatz, whereXz, whereYz);
}
function clear() {
ctx.clearRect(0, 0, WIDTH, HEIGHT);
writeTo.clearRect(0, 0, WWIDTH, WHEIGHT);
playerInfo.clearRect(0, 0, WWIDTH, WHEIGHT);
}
function round(x, y, rad, shape, colour) {
ballRadius = rad;
ctx.beginPath();
ctx.fillStyle = colour;
ctx.arc(x, y, rad, 0, Math.PI * 180, false);
ctx.fill();
}
function delay(millis) {
var date = new Date();
var curDate = null;
do {
curDate = new Date();
}
while (curDate - date < millis);
}
function checkScore() {
if ((time / 1000) > highScores[0] && (time / 1000) > highScores[1]) {
scoreset = true;
for (n = highScores.length; n > 0; n--) {
highScores[n] = highScores[n - 1]; // Scroll down.
usr[n] = usr[n - 1];
}
highScores[0] = (time / 1000);
usr[0] = prompt("You have set a new record, insert a nickname to save your score", "");
} else if ((time / 1000) > highScores[1] && (time / 1000) > highScores[2]) {
scoreset = true;
for (n = highScores.length; n > 1; n--) {
highScores[n] = highScores[n - 1]; // Scroll down.
usr[n] = usr[n - 1];
}
highScores[1] = time / 1000;
usr[1] = prompt("You have set a new record, insert a nickname to save your score", "");
} else if ((time / 1000) > highScores[2] && (time / 1000) > highScores[3]) {
scoreset = true;
for (n = highScores.length; n > 2; n--) {
highScores[n] = highScores[n - 1]; // Scroll down.
usr[n] = usr[n - 1];
}
highScores[2] = time / 1000;
usr[2] = prompt("You have set a new record, insert a nickname to save your score", "");
} else if ((time / 1000) > highScores[3] && (time / 1000) > highScores[4]) {
scoreset = true;
for (n = highScores.length; n > 3; n--) {
highScores[n] = highScores[n - 1]; // Scroll down.
usr[n] = usr[n - 1];
}
highScores[3] = time / 1000;
usr[3] = prompt("You have set a new record, insert a nickname to save your score", "");
} else if ((time / 1000) > highScores[4]) {
scoreset = true;
for (n = highScores.length; n > 4; n--) {
highScores[n] = highScores[n - 1]; // Scroll down.
usr[n] = usr[n - 1];
}
highScores[4] = time / 1000;
usr[4] = prompt("You have set a new record, insert a nickname to save your score", "");
}
}
function draw() {
clear();
round(ballX, ballY , ballRadius, 0, 'rgb(' + R + ',' + G + ',' + B + ')');
write('Ball X: ' + Math.round(ballX) + 'px', 2, 2, 'white', 12);
write('Ball Y: ' + Math.round(ballY) + 'px', 2, 14, 'white', 12);
write("pad height: " + Math.round(paddleY) + 'px', 2, 26, 'white', 12);
write('Balls lost: ' + pts + "/10", 2, 38, 'white', 12);
write("ball speed: " + (speed * 100) + "px/s", 2, 50, 'white', 12);
write("time: " + time / 1000 + "s", 2, 62, 'white', 12);
writePlayerInfo('Highscores', 29, 4, 'white', 16);
playerY = 20;
for (u = 0; u < highScores.length; u++) {
if (highScores[u] !== 0) {
writePlayerInfo(usr[u] + ", " + highScores[u] + 's', 8, playerY, 'white', 12);
playerY += 12;
}
}
speed = Math.round(Math.abs(Math.sqrt(ballSpeedX * ballSpeedX + ballSpeedY * ballSpeedY)));
if (mousemoved === false) {
writeCtx("Hello there, the computer is now controlling the paddle.", 10, 50, 'red', 22);
writeCtx("Move the mouse over the paddle to start playing.", 40, 80, 'red', 22);
writeCtx("Speed increases whenever the ball touches the paddle.", 10, 110, 'red', 22);
writeCtx("Use the space bar to pause.", 120, 140, 'red', 22);
paddleY = ballY ;
paddleY -= paddleHeight / 2;
}
paddle();
bounce();
}
function init() { // Set up stuff
draw();
return setInterval(draw, frameDelay);
}
function setStuff(e) {
timer = true;
mousemoved = true;
if (pause === true || lost === true) {
paddleY = paddleY;
} else {
prevPadY = paddleY;
paddleY = e.pageY - screen.offsetTop - 10 - (paddleHeight / 2);
}
}
function count() {
if (timer === true && lost === true) {
time += 0;
} else if (timer === true && pause === false && lost === false) {
time += 100;
}
}
init();
setInterval(count, 100);
screen.addEventListener('mousemove', setStuff, true);
}
function checkKey(event) {
key = event.keyCode;
if (key == 32 && lost === true) {
ballSpeedX = 5;
ballSpeedY = 5;
time = 0;
pts = 0;
lost = false;
scoreset = false;
} else if (key == 32 && pause === false) {
pause = true;
} else if (key == 32 && pause === true) {
pause = false;
}
}
function show_hide(what) {
var object = document.getElementById(what);
if (object.style.display == 'none') {
object.style.display = 'block';
} else {
object.style.display = 'none';
}
}
//]]>
</script>
</head>
<body>
<body onload="Start()" onkeydown="checkKey(event);">
<div id="text">canvasPong is the classic pong game done with the HTML5 canvas element.<br/>
You can only lose 10 balls, the person that lasts the longest time wins!<br/><br/>
<div class="painted" onclick="show_hide('brow');">Browser compatibility(click to show/hide):</div>
<ul id="brow" style="display:none">
<li>Google chrome: Good.</li>
<li>Safari: Works.</li>
<li>Firefox v3.5 and over: Laggy.</li>
<li>Untested but likely to work on: Opera and IE9+.</li><br/>
</ul>
<div class="painted" onclick="show_hide('bug');">Bugs and things to be fixed(click to show/hide):</div>
<ul id="bug" style="display:none;">
<li>Only your score is stored, working on saving ALL scores.</li>
<li>Sometimes the ball goes mad when it touches the paddle</li>
<li>"OOPS" is too fast</li>
<li>Ball physics could be better, I hate maths.</li>
</ul>
Coded by Amando Abreu<br/>
Last edited: 30/12/2010, 01:00</div>
<canvas id="players" width="150" height="400" style="border:2px solid blue;"></canvas>
<canvas id="screen" width="600" height="400" style="border:2px solid blue;"></canvas>
<canvas id="out" width="150" height="400" style="border:2px solid blue;"></canvas> <br/> <iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fbeta.amando-filipe.co.cc%2Fpong.html&layout=standard&show_faces=false&width=450&action=like&font=arial&colorscheme=light&height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:35px;" allowTransparency="true"></iframe>
</body>
</html>
What else could be optimized for optimal performance? thanks a lot. Hey guys, While I know you cannot use javascript for SEO, I need something similar. What I need is something like a search and replace program or something that does this: it takes aspects of the filename and incorparates it into the meta tags. For example, if a file was named "1x9.html" I would want it to edit the meta tag Season 1 Episode 9 I was just wondering if you guys know if such a thing exists. Like I would write a script or something in the program, saying for it to search and replace meta tags in file names, and it would 1. Analyze the filename (for this example it will be "1x9.html" 2. Input " Season 1 Episode 9 " into the meta tags (analyzing the first character in "1x9" as [Season] [First Character] , analyzing the "x" in 1x9 as [Episode] and analyzing the last character in "1x9" as [Last Character] I need to do this for like 80 thousand files, and I cannot do it 1 by 1. All of the elements that need to be in the meta tags already exist in the webpage contents or webpage filename. I was wondering if you guys know the best way for me to go about this? Hi, I managed to make a jquery drop down navigation system. I'm needing an opinion on the code as I suspect it could be alot cleaner and more efficient. A couple of niggling usability problems bug me - when a main link is in its active state and it is clicked on again it will slide up and then down again - I'd prefer it if it just stayed down and didn't move anywhere. The major thing that bugs me is if you think it breaks usability etiquette becuase the buttons move everywhere. If you think this is the case I will not use it. I understand there are forums for usability testing but if anyone has their opinions I'd be happy to hear them. You can view the navigation system he http://www.jrcreativedesign.co.uk/nav.html Thanks very much for your time and consideration. |
|||||||