Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>DOORS</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
</style>
</head>
<body>
  <p id=title>100 Things</p>
  <canvas id="canvas" width=512 height=256 />
</body>
</html>
 
function $(id)
{
    return document.getElementById(id)
}
​
var canvas = $("canvas");
var ctx = canvas.getContext("2d");
var title = $('title');
​
var x=y=0; // view scroll position
var Bot = 100;
​
var World = [ ]; //Crate(),Gun(),Snake(),Cabin(),Crowbar() ];
​
function DrawStar(i,j)
{
    var a = 36*3.14/180;
    var r2 = 18;
    var r1 = r2*Math.cos(2*a)/Math.cos(a);
    var x1 = r1*Math.sin(a);
    var y1 = r1*Math.cos(a);
    var x2 = r2*Math.sin(2*a);
    var y2 = r2*Math.cos(2*a);
    var x3 = r1*Math.sin(3*a);
    var y3 = r1*Math.cos(3*a);
    var x4 = r2*Math.sin(4*a);
    var y4 = r2*Math.cos(4*a);
  
    ctx.beginPath();
    ctx.moveTo(i-x2,j-y2);
    ctx.lineTo(i+x2,j-y2);
    ctx.lineTo(i,j+y1);
    ctx.closePath();
    ctx.fillStyle = "#FfFf40";  
    ctx.fill();
​
    ctx.beginPath();
    ctx.moveTo(i-x2,j-y2);
    ctx.lineTo(i+x1,j-y1);
    ctx.lineTo(i+x4,j-y4);
    ctx.closePath();
    ctx.fillStyle = "#FfFf40";  
    ctx.fill();
​
    ctx.beginPath();
    ctx.moveTo(i,j-r2);
    ctx.lineTo(i-x4,j-y4);
    ctx.lineTo(i+x3,j-y3);
    ctx.closePath();
    ctx.fillStyle = "#FfFf40";  
    ctx.fill();
}
​
function Pickup(obj)
{
  var index = World.indexOf(obj);
  World.splice(index,1);
  INV.push(obj);
}
function Destroy(obj)
{
  var index = World.indexOf(obj);
  World.splice(index,1);
}
​
function FillBox(box)
{
  ctx.fillRect(box.X-x,box.Y,box.W,box.H);
}
​
function Crate()
{
  return {
          box:Box(256,160,32,32),
          click:function()
          {
            if (Selected.smash)
            {
            var it=Knife();
            it.box.X=this.box.X+8;
            World.push(it);
            Destroy(this);
            }
          },
          draw:function()
          {
            ctx.fillStyle = "#804000";
            FillBox(this.box);
          },
         };
}
​
function DrawGun(px,py)
{
  ctx.beginPath();
  ctx.moveTo(px-0,py+8);
  ctx.lineTo(px+2,py+8);
  ctx.lineTo(px+4,py+10);
  ctx.lineTo(px+18,py+10);
  ctx.lineTo(px+18,py+16);
  ctx.lineTo(px+6,py+16);
  ctx.lineTo(px+8,py+26);
  ctx.lineTo(px-2,py+26);
  ctx.closePath();
  ctx.strokeStyle = "#ffffff";
  ctx.stroke();
}
​
function DrawCrowbar(px,py)
{
  ctx.beginPath();
  ctx.moveTo(px+4,py+28);
  ctx.lineTo(px+8,py+4);
  ctx.lineTo(px+14,py+8);
  ctx.strokeStyle = "#ffffff";
  ctx.stroke();
}
​
function Knife()
{
  return {
          slot:1,
          stab:1,
          box:Box(280,160,16,32),
          use:function()
          {
          },
          click:function(){Pickup(this)},
          draw:function()
          {
            ctx.fillStyle = "#C0C0C0";
            FillBox(this.box);
            DrawKnife(this.box.X-x,this.box.Y);
          },
          drawSlot:function()
          {
            ctx.fillStyle = "#804020";
            var r=Box(IX(this.slot),IY,32,32);
            ctx.fillRect(r.X,r.Y,r.W,r.H);
            DrawKnife(r.X+8,r.Y);
          }
         }
}
​
function Crowbar()
{
  return {
          slot:2,
          pry:1,
          box:Box(1,1,16,32),
          click:function(){Pickup(this)},
          use:function()
          {
          }
         ,
          drawSlot:function()
          {
            ctx.fillStyle = "#804020";
            var r=Box(IX(this.slot),IY,32,32);
            ctx.fillRect(r.X,r.Y,r.W,r.H);
            DrawCrowbar(r.X+8,r.Y);
          }
         }
}
​
function DrawBox(x,y,w,h)
{
  ctx.lineWidth = 2;
  ctx.beginPath();
  ctx.rect(x,y,w,h);
  ctx.closePath();
  ctx.stroke();
  ctx.lineWidth = 1;
}
​
function DrawCorn(x,y)
{
    ctx.fillStyle = "#808020";
    ctx.fillRect(x,y,4,4);
    ctx.fillRect(x+2,y+5,4,4);
    ctx.fillRect(x-3,y+6,4,4);
    ctx.fillRect(x-6,y+11,4,4);
    ctx.fillRect(x-0,y+11,4,4);
    ctx.fillRect(x+6,y+10,4,4);
}
function DrawEyes(x,y)
{
    ctx.beginPath();
    ctx.arc(x+6,y,4,0,7,1);
    ctx.arc(x+12,y,4,0,7,1);
    ctx.fillStyle = "#f0f0f0";
    ctx.fill();
    ctx.fillStyle = "#000";
    ctx.fillRect(x+5,y-1,2,2);
    ctx.fillRect(x+12,y-1,2,2);
}
function DrawHair(x,y)
{
    ctx.lineWidth = 3;
    ctx.beginPath();
    ctx.moveTo(x+1,y);
    ctx.lineTo(x+2,y-10);
    ctx.lineTo(x+0,y-14);
    ctx.moveTo(x-2,y);
    ctx.lineTo(x-3,y-8);
    ctx.lineTo(x-6,y-14);
    ctx.moveTo(x-4,y+0);
    ctx.lineTo(x-8,y-7);
    ctx.lineTo(x-11,y-9);
    ctx.moveTo(x-5,y+2);
    ctx.lineTo(x-10,y-3);
    ctx.lineTo(x-14,y-4);
    ctx.strokeStyle = "#ff2f2f";
    ctx.stroke();
}
function DrawBeak(x,y)
{
    ctx.lineWidth = 3;
    ctx.beginPath();
    ctx.moveTo(x,y);
    ctx.lineTo(x+8,y+3);
    ctx.lineTo(x,y+2);
    ctx.closePath();
    ctx.strokeStyle = "#ff8f0f";
    ctx.stroke();
}
function DrawChicken(x,y)
{
    ctx.fillStyle = "#f0f0f0";
    ctx.fillRect(x,y,16,16);
    ctx.fillRect(x+12,y-8,4,8);
    DrawHair(x+15,y-13);
    DrawEyes(x+5,y-10);
    DrawBeak(x+15,y-7);
    // tail feathers
    ctx.lineWidth = 2;
    ctx.beginPath();
    ctx.moveTo(x,y);
    ctx.lineTo(x-7,y-9);
    ctx.lineTo(x-9,y-5);
    ctx.moveTo(x,y+1);
    ctx.lineTo(x-7,y-3);
    ctx.lineTo(x-9,y-0);
    ctx.strokeStyle = "#ff2f2f";
    ctx.stroke();
    //ctx.endPath();
    // legs
    ctx.beginPath();
    ctx.moveTo(x+8,y+15);
    ctx.lineTo(x+8,y+21);
    ctx.lineTo(x+4,y+22);
    ctx.lineTo(x+8,y+21);
    ctx.lineTo(x+13,y+22);
    ctx.strokeStyle = "#ff8f0f";
    ctx.stroke();
    //ctx.endPath();
}
​
function DrawEgg(x,y)
{
    ctx.fillStyle = "#f8c888";
    ctx.beginPath();
    ctx.arc(x+0,y,8,0,7,1);
    ctx.arc(x+3,y,7,0,7,1);
    ctx.arc(x+5,y,6,0,7,1);
    ctx.fill();
}
​
function DrawPlant(x,y)
{
    ctx.beginPath();
    ctx.fillStyle = "#48f848";
  
    // stalk
    ctx.fillRect(x+2,y+11,3,32);
    //ctx.fillRect(x-4,y+16,4,8);
    //ctx.fill();
​
    // back leaf
    ctx.fillStyle = "#40bf40";
    ctx.moveTo(x-8,y-8);
    ctx.lineTo(x-2,y-4);
    ctx.lineTo(x+2,y+10);
    ctx.lineTo(x,y+10);
    ctx.fill();
​
    // base
    ctx.fillStyle = "#48f848";
    ctx.fillRect(x-1,y+2,9,8);
  
    // draw corn
    ctx.fillStyle = "#f8f848";
    ctx.fillRect(x,y-8,7,12);
    ctx.beginPath();
    ctx.arc(x+3,y-8,3,0,7,1);
    ctx.fill();
​
    // kernel lines
    ctx.lineWidth = 1;
    ctx.beginPath();
    ctx.moveTo(x+0,y+4);
    ctx.lineTo(x+0,y-8);
    ctx.moveTo(x+3,y+4);
    ctx.lineTo(x+2,y-11);
    ctx.moveTo(x+5,y+4);
    ctx.lineTo(x+4,y-11);
    ctx.moveTo(x+7,y+4);
    ctx.lineTo(x+7,y-8);
    ctx.moveTo(x+1,y+0);
    ctx.lineTo(x+8,y+1);
    ctx.moveTo(x+1,y-2);
    ctx.lineTo(x+8,y-1);
    ctx.moveTo(x+1,y-5);
    ctx.lineTo(x+8,y-4);
    ctx.moveTo(x+1,y-7);
    ctx.lineTo(x+8,y-6);
    ctx.strokeStyle = "#ff8f0f";
    ctx.stroke();
​
  /*
    // left leaf?
    ctx.lineWidth = 1;
    ctx.beginPath();
    ctx.strokeStyle = "#48f84f";
    ctx.moveTo(x-1,y+9);
    ctx.lineTo(x-4,y-4);
    ctx.lineTo(x-7,y-4);
    ctx.moveTo(x+5,y+32);
    ctx.lineTo(x+9,y+22);
    ctx.lineTo(x+12,y+22);
    //ctx.stroke();
  
    // hair?
    ctx.lineWidth = 1;
    ctx.beginPath();
    ctx.strokeStyle = "#f8f848";
    ctx.moveTo(x+2,y-8);
    ctx.lineTo(x+0,y-13);
    ctx.moveTo(x+4,y-8);
    ctx.lineTo(x+6,y-12);
    //ctx.stroke();
  */
  
 
    // right leaf
    ctx.fillStyle = "#20cf80";
    ctx.beginPath();
    ctx.moveTo(x+11,y-9);
    ctx.lineTo(x+8,y+10);
    ctx.lineTo(x+2,y+10);
    ctx.fill();
    ctx.closePath();
  
    // front leaf
    ctx.fillStyle = "#10cf10";
    ctx.beginPath();
    ctx.moveTo(x-1,y);
    ctx.lineTo(x+3,y);
    ctx.lineTo(x+5,y+10);
    ctx.lineTo(x-1,y+10);
    ctx.fill();
  
}
​
function DrawRock(x,y)
{
    ctx.fillStyle = "#787878";
    ctx.beginPath();
    ctx.arc(x-10,y+4,16,0,7,1);
    ctx.arc(x+ 0,y,20,0,7,1);
    ctx.arc(x+10,y+4,16,0,7,1);
    ctx.fill();
}
​
function DrawSack(x,y)
{
    ctx.fillStyle = "#c86728";
    ctx.beginPath();
    ctx.arc(x+16,y+18,15,0,7,1);
    //ctx.arc(x+10,y+4,12,0,7,1);
    ctx.fillRect(x+4,y+4,24,28);
    ctx.fill();
    ctx.fillStyle = "#0f0f0f";
    ctx.font="9px Arial";
    ctx.fillText("SEED",x+4,y+20);
}
​
function DrawDoor(x,y)
{
    ctx.fillStyle = "#C0A040";
    ctx.fillRect(x,y,64,128);
    ctx.strokeStyle = "#8f6f0f";
    DrawBox(x,y,64,128);
    DrawStar(x+32,y+32);
    ctx.fillStyle = "#404040";
    ctx.beginPath();
    ctx.arc(x+56,y+58,4,0,7,1);
    ctx.fill();
    ctx.fillRect(x+55,y+62,2,6);
}
​
function Draw()
{
    ctx.fillStyle = "#202020";
    ctx.fillRect(0,0,512,256);
    ctx.fillStyle = "#80a080";
    ctx.fillRect(0,0,512,188);
    DrawDoor(224,60);
    DrawCorn(180,192);
    DrawChicken(150,180);
    DrawEgg(132,202);
    DrawPlant(64,150);
    DrawSack(354,180);
    DrawRock(336,200);
}
​
function Box(x,y,w,h)
{
    return {
            X:x,Y:y,W:w,H:h,
            contains:function(x,y)
            {
              return x>this.X && x<this.X+this.W && y>this.Y && y<this.Y+this.H;
            }
           };
}
​
//title.innerHTML = "?";
  
document.onmousedown = function()
{
  title.innerHTML = "click!"; 
  Draw();
};
​
document.onkeydown = function()
{
    var k = event.keyCode;
    var i=0;
    var j=0;
    if (k==40) j++;
    Draw();
};
​
// Color palette
var C=
[ 
    [0,0,0],       // black
    [75,75,75],    // dark
    [180,180,180], // gray
    [255,255,255], // white
    [255,0,0],     // red
    [0,255,0],     // green
    [0,0,255],     // blue
    [255,255,0],   // yellow
    [200,150,64],  // brown
    [70,130,180],  // steel blue
];
​
Draw();
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers