Html5 and Javascript : Juli 2014

Here is the source code. Feel free to use and modify.
This is a html, so you can copy to a note pad, save as html and play it.

<html><head><title>Smallest Billiard</title></head><body bgcolor="000"><div>
<div id="gamediv">
</div>
</div>
</body>
<script>
(function(){
var Game=null;
function Hole(xx, yy, ww, hh) {
 this.left=xx;
 this.top=yy;
 this.width=ww;
 this.height=hh;
 this.right=xx + ww;
 this.bottom=yy + hh;
 this.containsPoint=function(xx, yy) {
  if (xx < this.left) return false;
  if (xx > this.right) return false;
  if (yy < this.top) return false;
  if (yy > this.bottom) return false;
  return true;
 };
 this.containsRect=function(rct) {
  if (rct.left < this.left) return false;
  if (rct.right > this.right) return false;
  if (rct.top < this.top) return false;
  if (rct.bottom > this.bottom) return false;
  return true;
 };
 this.intersectsRect=function(rct) {
  if (rct.right < this.left) return false;
  if (rct.left > this.right) return false;
  if (rct.bottom < this.top) return false;
  if (rct.top > this.bottom) return false;
  return true;
 };
}
function Ball(idx, ballr) {
 this.id=idx;
 this.x=0;
 this.y=0;
 this.vx=0;
 this.vy=0;
 this.oX=0;
 this.oY=0;
 this.rotation=0;
 this.visible=true;
 this.firstHit=0;
 this.reset=function() {
  this.x=this.oX;
  this.y=this.oY;
  this.vx=this.vy=0;
  this.firstHit=0;
  this.visible=true;
 };
}
function Physics2D(ww, hh, br)
{
 var WALL=999; 
 var K=30;
 var FK=1/K;
 var L=0.2;
 var F=0.98;
 var W=5;
 var R=br;
 var RD=R*2;
 var RS=RD*RD;
 var WH=hh;
 var WW=ww;
 var WR=ww/2;
 var WB=hh/2;
 var WL=-WR;
 var WT=-WB;
 var inHole=[];
 var moving=false;
 var d,di,dx,dy,dd,m,am,bm,nx,ny,nd,sx,sy,sd,vx,vy,vd,qx,qy,qd,i,j,k,o,o2;
 function isHitHole(a, holes) {
  var ret=false;
  for (var h=0; h < holes.length; h++) {
   if (holes[h].containsPoint(a.x, a.y)) {
    ret=true;
    break;
   }
  }
  return ret;
 }
 function isHitWall(a) {
  if ((a.x-R) < WL) { a.vx*=-1; return true; }
  if ((a.x+R) > WR) { a.vx*=-1; return true; }
  if ((a.y-R) < WT) { a.vy*=-1; return true; }
  if ((a.y+R) > WB) { a.vy*=-1; return true; }
  return false;
 }
 function isCollide(a, b) {
  if (a.id==b.id) return false;
  dx=a.x-b.x;
  dy=a.y-b.y;
  dd=dx*dx+dy*dy;
  if (dd>RS) return false;
  d=Math.sqrt(dd);
  di=1/d;
  am=R;
  bm=R; 
  m=1/(am + bm);
  nx=dx*di;
  ny=dy*di;
  sd=(RD-d)*m;
  sx=nx*sd;
  sy=ny*sd;
  a.x+=sx*am;
  a.y+=sy*am;
  b.x-=sx*bm;
  b.y-=sy*bm;
  vx=a.vx-b.vx;
  vy=a.vy-b.vy;
  vd=vx*nx+vy*ny;
  if (vd>0) return true;
  qd=-(1+L)*vd*m;
  qx=nx*qd;
  qy=ny*qd;
  a.vx+=qx*am;
  a.vy+=qy*am;
  b.vx-=qx*bm;
  b.vy-=qy*bm;
  return true;
 }
 function step(ar, holes) {
  moving=false;
  for (k=0; k < K; k++) {
   for (i=0; i < ar.length; i++) {
    o=ar[i];
    if (o.visible) {
     if (o.vx != 0 || o.vy != 0) {
      o.x+=o.vx*FK;
      o.y+=o.vy*FK;
      moving=true;
     }
     if (isHitHole(o, holes)) {
      o.visible=false;
      inHole.push(o);
      Game.acceptMessage(["ballIntoHole", o]);
     } else {
      if (isHitWall(o)) {
       o.x+=o.vx*FK;
       o.y+=o.vy*FK;
       if (o.firstHit == 0) o.firstHit=WALL;
      }
      for (j=0; j < ar.length; j++) {
       o2=ar[j];
       if (ar[j].visible) {
        if (isCollide(o, o2)) {
         if (o.firstHit == 0) o.firstHit=o2.id;
         if (o2.firstHit == 0) o2.firstHit=o.id;
        }
       }
      }
     }
    }
   }
  }
  for (i=0; i < ar.length; i++) {
   o=ar[i];
   o.vx=Math.abs(o.vx) < 0.01 ? 0 : (o.vx * 0.99);
   o.vy=Math.abs(o.vy) < 0.01 ? 0 : (o.vy * 0.99);
  }
 }
 this.anyMovingBall=function() { return moving; };
 this.getBallInHole=function() { return inHole; };
 this.getNumBallInHole=function() { return inHole.length; };
 this.reset=function() { inHole.length=0; };
 this.update=function(balls, holes) { step(balls, holes); };
}
function Example2D(mdiv) {
 var MAX_POWER=12;
 var GM_INTRO=0;
 var GM_PLAYER=1;
 var GM_MOVING=2;
 var br=12, bd=24;
 var hr=15, hd=30;
 var centerX=400, centerY=300;
 var gScale=1.0;
 var cvs=document.createElement("canvas");
 cvs.style.position="absolute";
 cvs.style.top=cvs.style.left=0;
 var ctx=cvs.getContext("2d");
 var mainDiv=mdiv;
 mainDiv.appendChild(cvs);
 var imgBall=document.createElement("canvas"); imgBall.width=bd * 12; imgBall.height=40;
 var imgBg=document.createElement("canvas"); imgBg.width=800; imgBg.height=600;
 var holes=[new Hole(-315,-165, hd, hd), new Hole( -hr,-165, hd, hd), new Hole( 285,-165, hd, hd),
      new Hole(-315, 135, hd, hd), new Hole( -hr, 135, hd, hd), new Hole( 285, 135, hd, hd)];
 var origins=[ {x:-200, y:0},
   {x:170, y:0},
   {x:188, y:-16}, {x:188, y:16},
   {x:206, y:-31}, {x:206, y:0}, {x:206, y:31},
   {x:224, y:-47}, {x:224, y:-16}, {x:224, y:16}, {x:224, y:47}];
 var balls=new Array();
 var ballColors=["#ffffff","#ff0000","#ffff00","#00ff00","#00ffff","#333333","#ff00ff","#ccff00","#00ccff","#ff00cc","#cc00ff"];
 var stick={x:0, y:0, rotation:0, srcX:0, srcY:30, srcW:250, srcH:10, shootDist:250 + bd};
 var gText="";
 var hText="";
 var gMode=0;
 var ballOnTable=balls.length;
 var playerID=0;
 var raf=null;
 var E=new Physics2D(600, 300, br);
 function initOthers() {
  var c=imgBall.getContext("2d");
  c.strokeStyle="#000000";
  var i, g;
  for (i=0; i < 11; i++) {
   var b=new Ball(i, br);
   b.id=i;
   b.oX=origins[i].x;
   b.oY=origins[i].y;
   balls.push(b);
   g=c.createRadialGradient(i * bd, 0, 3, i * bd + bd, bd, 40);
   g.addColorStop(0.1, "#ffffff");
   g.addColorStop(0.5, ballColors[i]);
   c.fillStyle=g;
   c.beginPath();
   c.arc(i * bd + br, br, br, Math.PI * 2, false);
   c.closePath();
   c.fill();
   c.stroke();
  }
  c.fillStyle="#ffff00";
  c.beginPath(); c.moveTo(0, 30); c.lineTo(250,34); c.lineTo(250,37); c.lineTo(0, 40); c.closePath(); c.fill();
  c.moveTo(5, 35); c.lineTo(245, 35); c.stroke();
  c=imgBg.getContext("2d");
  c.filllStyle="#000000"; c.fillRect(0, 0, 800, 600);
  c.fillStyle="#225511"; c.beginPath()
  c.moveTo(50, 120); c.quadraticCurveTo(50, 100, 70, 100);
  c.lineTo(730, 100); c.quadraticCurveTo(750, 100, 750, 120);
  c.lineTo(750, 480); c.quadraticCurveTo(750, 500, 730, 500);
  c.lineTo(70, 500); c.quadraticCurveTo(50, 500, 50, 480);
  c.closePath(); c.fill();
  c.fillStyle="#003300"; c.fillRect(100, 150, 600, 300); c.strokeRect(100, 150, 600, 300);
  c.fillStyle="#005500"; c.fillRect(110, 160, 580, 280);
  c.strokeStyle="#555555";
  c.fillStyle="#000000";
  for (i=0; i < holes.length; i++) {
   c.beginPath();
   c.arc(centerX - holes[i].left - hr, centerY - holes[i].top - hr, hr, Math.PI * 2, false);
   c.closePath(); c.fill(); c.stroke();
  }
 }
 initOthers();
 function setSize(ww, hh) {
  cvs.width=ww;
  cvs.height=hh;
  centerX=ww/2;
  centerY=hh/2;
  gScale=(ww < 700 || hh < 400) ? Math.min( ww/700, hh/400) : 1.0;
 }
 function changePlayer() {
  playerID=playerID == 0 ? 1 : 0;
  gText.text="Player " + playerID.toString();
  gMode=GM_PLAYER;
  stick.visible=true;
 }
 function gDraw() {
  cvs.width=cvs.width;
  var b; 
  ctx.save();
  ctx.translate(centerX, centerY);
  if (gScale != 1) ctx.scale(gScale, gScale);
  ctx.drawImage(imgBg, -400, -300);
  for (var i=0; i < balls.length; i++) {
   b=balls[i];
   if (b.visible) ctx.drawImage(imgBall, b.id*bd, 0, bd, bd, b.x-br, b.y-br, bd, bd);
  }
  if (stick.visible) {
   ctx.save();
   ctx.translate(stick.x, stick.y);
   ctx.rotate(stick.rotation);
   ctx.drawImage(imgBall, stick.srcX, stick.srcY, stick.srcW, stick.srcH, 0, -stick.srcH/2, stick.srcW, stick.srcH);
   ctx.restore();
  }
  ctx.restore();
  ctx.font="18px arial";
  ctx.textAlign="center";
  ctx.textBaseline="top";
  ctx.fillStyle="#ccff00";
  ctx.fillText(gText, centerX, 2, cvs.width * 0.9);
 }
 function hDraw() {
  cvs.width=cvs.width;
  ctx.save();
  ctx.translate(centerX, centerY);
  if (gScale != 1) ctx.scale(gScale, gScale);
  ctx.drawImage(imgBg, -400, -300);
  ctx.font="18px arial";
  ctx.textAlign="center";
  ctx.textBaseline="top";
  ctx.fillStyle=ctx.strokeStyle="#ccff00";
  ctx.fillText(hText, 0, 0, 600);
  ctx.fillText("click to play", 0, 90, 600);
  ctx.font="56px arial";
  ctx.strokeText("billiard", 0, 30, 600);
  ctx.restore();
 }
 function showHud(msg) {
  hText=msg;
  hDraw();
  gMode=GM_INTRO;
 }
 function gStep() {
  E.update(balls, holes);
  if (E.anyMovingBall() == false) {
   if (balls[0].visible == false) {
    balls[0].reset();
    changePlayer();
   } else if (noBallIntoHole) {
    changePlayer();
   }
   if (ballOnTable == 1) {
    showHud("PLAYER " + playerID.toString() + " WIN");
   } else {
    gMode=GM_PLAYER;
    gText="Player " + playerID.toString();
    stick.visible=true;
   }
  }
  if (gMode != GM_INTRO) gDraw();
 }
 function gStart() {
  E.reset();
  for (var i=0; i < balls.length; i++) { balls[i].reset(); }
  noBallIntoHole=true;
  ballOnTable=balls.length;
  gText="Player " + playerID.toString();
  gMode=GM_MOVING;
  gStep();
 }
 this.acceptMessage=function(a) {
  if (a[0] == "ballIntoHole") {
   if (a[1] != balls[0]) {
    noBallIntoHole=false;
    ballOnTable--;
   }
  }
 };
 this.hmMove=function(e) {
  if (gMode == GM_PLAYER) {
   var o=balls[0];
   var dx=o.x-(e.offsetX-centerX) / gScale;
   var dy=o.y-(e.offsetY-centerY) / gScale;
   var n=Math.atan2(dy, dx);
   stick.rotation=n;
   stick.x=-Math.cos(n)*stick.shootDist+o.x;
   stick.y=-Math.sin(n)*stick.shootDist+o.y;
  }
 };
 this.hmClick=function(e) {
  if (gMode == GM_PLAYER) {
   var o=balls[0];
   var dx=o.x-(e.offsetX-centerX)/gScale;
   var dy=o.y-(e.offsetY-centerY)/gScale;
   var n=Math.atan2(dy, dx);
   var pw=Math.min(MAX_POWER, (dx*dx + dy*dy) / 10000 * 12);
   o.vx=Math.cos(n)*pw;
   o.vy=Math.sin(n)*pw;
   gMode=GM_MOVING;
   stick.visible=false;
   noBallIntoHole=true;
   gText="WAIT";
  } else if (gMode == GM_INTRO) {
   gStart();
   if (raf == null) this.update();
  }
 };
 this.update=function(e) {
  if (gMode == GM_MOVING) {
   gStep();
  }
  else if (gMode == GM_PLAYER) {
   gDraw();
  }
  if(Game) raf=window.requestAnimationFrame(Game.update);
 };
 cvs.addEventListener("mousemove", function(e) {
  Game.hmMove(e);
 });
 cvs.addEventListener("click", function(e) {
  e.preventDefault();
  Game.hmClick(e);
 });
 /*
 window.addEventListener("resize", function(e){
  setSize(mdiv.innerWidth, mdiv.innerHeight);
 });
 */
 setSize(800, 600);
 showHud("icesEngine");
}
Game=new Example2D(document.getElementById("gamediv"));
}());
</script>
</html>

Html5 and Javascript

Minggu, 06 Juli 2014

Javascript Sourcecode My Smallest Billiard Game