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>
    <title>divMan: Canvas</title>
</head>
​
<style>
    * {-ms-touch-action:none;}
</style>
​
<body>
    <canvas id="canvas" height="768px" width="1366px" style="position:fixed;top:0px;left:0px;"></canvas>
</body>
​
<script>
    window.onload = drawFrame;
    //window.onclick = walk(event);
​
//----------------------------------------Global Variables-----------------------------//
    var context = document.getElementById("canvas").getContext("2d");
    //var _walk = false;
    /*var staticEquilibrium = true;
    //--Kinematic Variables--//
        var vSubX = 0;
        var aSubX = 0;
        var jSubX = 0;
        var vSubY = 0;
        var aSubY = 0;
        var jSubY = 0;*/
//  var deltaT = .001;      //standard time interval.
//  var interval;           //a timing loop variable.
//------------------------------------------------------------------------------------//
​
//-----------------------------------------------------------------------Constructors-----------------------------------------------------------------------------------------------//
    function Point(top,left) {this.top = top; this.left = left;}    //Parameters are numbers, to be used for pixel values.
    function Stone(top,left,height,width) {     //stones.
        this.origin = new Point(top,left);      //make sure to give this a curved top, eventually.
        this.height = height;
        this.width = width;
        this.color = "#a0a0a0";
        this.Draw = drawStone;
            function drawStone() {
                context.fillStyle = this.color;
                context.fillRect(this.origin.left,this.origin.top,this.width,this.height);
                }
        }
    function Tree(top,left,trunkHeight,trunkWidth,crownHeight,crownWidth) {     //trees.
        this.origin = new Point(top,left);
        this.trunkHeight = trunkHeight;
        this.trunkWidth = trunkWidth;
        this.trunkColor = "#702000";
        this.crownHeight = crownHeight;
        this.crownWidth = crownWidth;
        this.crownColor = "#40d030";
        this.Draw = drawTree;
            function drawTree() {
                context.fillStyle = this.crownColor;
                context.fillRect(this.origin.left,this.origin.top,this.crownWidth,this.crownHeight);
                context.fillStyle = this.trunkColor;
                context.fillRect(this.origin.left+(this.crownWidth-this.trunkWidth)/2,this.origin.top+this.crownHeight,this.trunkWidth,this.trunkHeight);
                }
        }
    function DivMan(top,left,headHeight,headWidth,bodyHeight,bodyWidth) {       //divMEN.
        this.origin = new Point(top,left);
        this.headHeight = headHeight;
        this.headWidth = headWidth;
        this.bodyHeight = bodyHeight;
        this.bodyWidth = bodyWidth;
        this.color = "#000000";
        this.Draw = drawDivMan;
            function drawDivMan() {
                context.fillStyle = this.color;
                context.fillRect(this.origin.left+(this.bodyWidth-this.headWidth)/2,this.origin.top,this.headWidth,this.headHeight);
                context.fillRect(this.origin.left,this.origin.top+this.headHeight+1,this.bodyWidth,this.bodyHeight);
                }
        }
    function Sky(top,left,height,width) {               //skies.
        this.origin = new Point(top,left);
        this.height = height;
        this.width = width;
        this.color = "#98e8ff";
        this.Draw = drawSky;
            function drawSky() {
                alert("Yorishomu.");
                context.fillStyle = this.color;
                context.fillRect(this.origin.left,this.origin.top,this.width,this.height);
                }
        }
    function Ground() {             //the ground.
        this.origin = new Point(538,0);
        this.hillStart = new Point(538,1);
        this.hillTop1 = new Point(488,114);
        this.hillTop2 = new Point(488,429);
        this.hillEnd = new Point(538,543);
        this.screenEnd = new Point(538,1366);
        this.bottomRight = new Point(768,1366);
        this.bottomLeft = new Point(768,0);
        this.color = "#401000";
        this.Draw = drawGround;
            function drawGround() {
                context.fillStyle = this.color;
                context.beginPath();
                context.moveTo(this.origin.left,this.origin.top);
                context.lineTo(this.hillStart.left,this.hillStart.top);
                context.lineTo(this.hillTop1.left,this.hillTop1.top);
                context.lineTo(this.hillTop2.left,this.hillTop2.top);
                context.lineTo(this.hillEnd.left,this.hillEnd.top);
                context.lineTo(this.screenEnd.left,this.screenEnd.top);
                context.lineTo(this.bottomRight.left,this.bottomRight.top);
                context.lineTo(this.bottomLeft.left,this.bottomLeft.top);
                context.closePath();
                context.fill();
                }
        }
    function Grass(height,targetGround) {           //the grass.
        this.color = "#10b030"
        this.height = height;
        this.targetGround = targetGround;
        this.Draw = drawGrass;
            function drawGrass() {
                context.strokeStyle = this.color;
                context.lineWidth = this.height;
                context.beginPath();
                context.moveTo(this.targetGround.origin.left,this.targetGround.origin.top);     //it follows the ground.
                context.lineTo(this.targetGround.hillStart.left,this.targetGround.hillStart.top);
                context.lineTo(this.targetGround.hillTop1.left,this.targetGround.hillTop1.top);
                context.lineTo(this.targetGround.hillTop2.left,this.targetGround.hillTop2.top);
                context.lineTo(this.targetGround.hillEnd.left,this.targetGround.hillEnd.top);
                context.lineTo(this.targetGround.screenEnd.left,this.targetGround.screenEnd.top);
                context.stroke();
                }
        }
//--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------//
​
//----------------------------------------------Objects------------------------------------------------//
    var sky = new Sky(0,0,538,1366);            //the sky.
    var ground = new Ground();              //the ground.
    var grass = new Grass(38,ground);           //the grass.
    var stone = new Stone(418,228,75,75);       //a stone.
    var pedestal = new Stone(508,630,30,200);       //a stone pedestal.
    var tree0 = new Tree(138,1000,150,60,250,300);  //a tree.
    var tree1 = new Tree(83,73,300,40,100,300); //another tree.
    var divMan = new DivMan(408,700,34,30,65,60);   //divMan!!
//----------------------------------------------------------------------------------------------------//
​
    function drawFrame() {
        context.fillStyle = "#000000";
        context.fillRect(0,0,100,100);
        alert("Yo." + sky + context);
        sky.Draw();
        alert("Hi.");
        ground.Draw();
        grass.Draw();
        tree1.Draw();
        stone.Draw();
        pedestal.Draw();
        divMan.Draw();  // <-- Here's divMan.
        tree0.Draw();
        alert("Hey.");
        }
​
    /*function walk(click) {        //in future, walk in mini-hops.
        _walk = true;
        staticEquilibrium = false;
        if (click.screenX > rSubX+30) {vSubX = 5;} else {vSubX = -5;}
        update();
        }
​
    function update() {
        interval = setInterval(function() {
            for (i=0; i<1; i++) {
                divMan.origin.left += vSubX*deltaT+aSubX*deltaT*deltaT/2;
                divMan.origin.top += vSubY*deltaT+aSubY*deltaT*deltaT/2;
                }
            drawFrame();
            if (false) {clearInterval(interval);}
            }
        }*/
</script>
​
</html>
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers