Monday, May 9, 2016

HTML5 - Deleting Properties/Items from lists

<!DOCTYPE = html>
<html><body>
<canvas id="myCanvas" width="640" height="480" style="border:1px solid #d3d3d3;">
Use different browser.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// Here is the list
var openlist = {};

// create values for the list
for(var i=0;i<10;i++){
    var x = Math.floor(Math.random()*20)
    var y = Math.floor(Math.random()*20)
    addtoopenlist(i,x,y,10,10,10);
}

ctx.fillText("Deleting from lists example",10,10);

printopenlist(20,20);

// Here we delete an item <<<<<<<<<<<<<<<<<<<<<<<<<<<
delete openlist[1];

printopenlist(320,20);

// print the open list to the canvas
function printopenlist(x,y){
    var cnt=0;
    for (var key in openlist){
        var line = openlist[key].id
        line += " "+openlist[key].x
        line += ","+openlist[key].y
        ctx.fillText(line,20+x,(20+cnt*20)+y);
        cnt+=1;
    }
}

// This function adds to the open list.
function addtoopenlist(id,x,y,f,g,h){
    var list = {
        x:x,
        y:y,
        f:f,
        g:g,
        h:h,
        id:id,
    };
    openlist[id] = list;
}

</script></body></html>

HTML5 - Beginners - Object Literal example

<!DOCTYPE = html>
<html><body>
<canvas id="myCanvas" width="640" height="480" style="border:1px solid #d3d3d3;">
Use different browser.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// Object Literal
var enemylist = {
    enemyname1:"Bograid",
    "enemyname2":"Joadui",
    health:{
        enemy1:10,
        "enemy2":20,
    }
};

ctx.fillText(enemylist.enemyname1,20,20);
ctx.fillText(enemylist.health.enemy1,20,40);
ctx.fillText(enemylist["enemyname2"],220,20);
ctx.fillText(enemylist.health["enemy2"],220,40);

</script></body></html>

HTML5 - Beginners - Clearing a list example

<!DOCTYPE = html>
<html><body>
<canvas id="myCanvas" width="640" height="480" style="border:1px solid #d3d3d3;">
Use different browser.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var enemylist = {};

for(var i=0;i<10;i++){
    makeenemy(i)
}

for(var key in enemylist){
    ctx.fillRect(enemylist[key].x,enemylist[key].y,32,32);;
}

// Here were clear the enemy list
enemylist = {};

function makeenemy(id){
    var enemy = {
        x:Math.random()*c.width,
        y:Math.random()*c.height,
        id:id,
    };
    enemylist[id] = enemy;
}
</script></body></html>

HTML5 - Creating image in memory and drawing it.

<!DOCTYPE = html>
<html><body>
<canvas id="myCanvas" width="640" height="480" style="border:1px solid #d3d3d3;">
Use different browser.
</canvas>
<script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    // Here is the drawrandom function
    function drawrandom(){
        this.image = new Image();
        this.init = true;
        // Function within a function
        this.draw = function(x,y){
            if (this.init==true){
                this.init=false;
                this.image = ctx.createImageData(32, 32);
                for(var i=0;i<(32*32*4);i=i+4){
                    this.image.data[i] = 100;
                    this.image.data[i+1] = 100;
                    this.image.data[i+2] = 100;
                    this.image.data[i+3] = 255;                
                }                
            }
            ctx.putImageData(this.image,x,y);            
        };
    };
    // Here we create a instance of the function
    var myrandom = new drawrandom();
    // From the function run the drawrandom function
    for(var i=0;i<100;i++){
        var x=Math.floor(Math.random()*c.width)+1
        var y=Math.floor(Math.random()*c.height)+1
        myrandom.draw(x,y)
    }
</script></body></html>

HTML5 - Beginners OO - Drawing red colored background example

<!DOCTYPE = html>
<html><body>
<canvas id="myCanvas" width="640" height="480" style="border:1px solid #d3d3d3;">
Use different browser.
</canvas>
<script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    // Here is the drawrandom function
    function drawrandom(){
        this.tw = 16;
        this.th = 16;
        this.mw = c.width/this.tw;
        this.mh = c.height/this.th;
        // Function within a function
        this.drawbg = function(){
            var mycol;
            for(var y=0;y<this.mh;y++){
            for(var x=0;x<this.mw;x++){
                mycol=Math.floor((Math.random() * 255) + 1)
                ctx.fillStyle="rgb("+mycol+",0,0)";            
                ctx.fillRect(x*this.tw,y*this.th,this.tw,this.th)
            }
            }
        };
    };
    // Here we create a instance of the function
    var myrandom = new drawrandom();
    // From the function run the drawrandom function
    myrandom.drawbg()
</script></body></html>

HTML5 - Beginners OO - Using Arrays example

<!DOCTYPE = html>
<html><body>
<canvas id="myCanvas" width="640" height="480" style="border:1px solid #d3d3d3;">
Use different browser.
</canvas>
<script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    // Here the drawing takes place
    function drawrandom(){
        this.bgmap = [];
        this.init = true;
        this.dx = 0.0;
        this.dy = 0.0;
        this.incx = 1.0;
        this.incy = 1.0;
        this.tw = 16;
        this.th = 16;
        this.mw = c.width/this.tw;
        this.mh = c.height/this.th;
        this.map = [
        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
        [1,1,1,1,1,1,0,0,0,0,0,0,0,0,1,1,1,1,1,1],
        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
        [0,0,0,0,0,0,0,0,1,1,1,1,0,0,0,0,0,0,0,0],
        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
        [0,0,1,1,1,1,0,0,0,0,0,0,0,0,1,1,1,1,0,0],
        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
        [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
        ]
        // This function moves the tilemap
        this.movetilemap = function(){
            this.dx += this.incx;
            this.dy += this.incy;
            if(this.dx>150){this.incx=-this.incx};
            if(this.dx<0){this.incx=-this.incx};            
            if(this.dy>100){this.incy=-this.incy};
            if(this.dy<0){this.incy=-this.incy};            
            }
        // Function that draws the tilemap
        this.drawtilemap = function(){
            ctx.fillStyle="white";
            for(var y = 0; y < this.map.length; ++y) {
            for(var x = 0; x < this.map[y].length; ++x) {
                if(this.map[y][x]==1) ctx.fillRect(x*this.tw+this.dx,y*this.th+this.dy,this.tw,this.th);
            }
            }
        }
        // Function within a function
        this.drawbg = function(){
            var mycol;
            var cnt=0;
            // If first time then initiate background colors
            if (this.init==true){
                for(var i=0;i<(this.mw*this.mh);i++){
                    this.bgmap[i] = Math.floor(Math.random()*255)+1;
                }
                this.init=false;
            }
            // Draw the background
            for(var y=0;y<this.mh;y++){
            for(var x=0;x<this.mw;x++){
                mycol = this.bgmap[cnt];
                ctx.fillStyle="rgb("+mycol+",0,0)";            
                ctx.fillRect(x*this.tw,y*this.th,this.tw,this.th)
                cnt+=1;
            }
            }
        };
    };
    // Here we create a instance of the function
    var myrandom = new drawrandom();
    gameloop=setInterval(dogameloop,16);
    function dogameloop(){
        myrandom.movetilemap();
        myrandom.drawbg();
        myrandom.drawtilemap();
    }
</script></body></html>

HTML5 - Beginners - Storing and using enemy variables example

<!DOCTYPE = html>
<html><body>
<canvas id="myCanvas" width="640" height="480" style="border:1px solid #d3d3d3;">
Use different browser.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Here we create a place to store some variables in.
var enemy = {
    x:10,
    y:10,
    w:32,
    h:32,
};
ctx.fillStyle="black";
ctx.fillRect(enemy.x,enemy.y,enemy.w,enemy.h);  // 100
</script></body></html>
Status API Training Shop Blog About
© 2016 GitHub, Inc. Terms P