HTML5 game programming step by step: May 2016

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

HTML5 - Beginners - save() and restore() example

save/restore the state of the draw settings.

<!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");
    
    
    gameloop=setInterval(dogameloop,16);
    
    function dogameloop(){
        ctx.clearRect(0,0,c.width,c.height);
        ctx.fillStyle="black";
        ctx.font="20px Arial";
        ctx.fillText("before save state.",20,20);
        ctx.save();
        ctx.fillStyle="grey";
        ctx.font="30px Arial";
        ctx.fillText("after save state.",20,60);
        ctx.restore();
        ctx.fillText("restored state.",20,100);                                    
    }    
        
    
    </script></body></html>

HTML5 - Beginners - rectsoverlap 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 player = {
        x:10,
        y:10,
        w:32,
        h:32,
    };
    
    var enemy = {
        x:100,
        y:100,
        w:100,
        h:100,
    };
    
    gameloop=setInterval(dogameloop,16);
    
    function dogameloop(){
        ctx.clearRect(0,0,c.width,c.height);
        ctx.fillStyle="black";
        ctx.font="30px Arial";
        ctx.fillRect(player.x,player.y,player.w,player.h);
        ctx.fillRect(enemy.x,enemy.y,enemy.w,enemy.h);
        
        if (rectsoverlap(    player.x,player.y,player.w,player.h,
                            enemy.x,enemy.y,enemy.w,enemy.h)){
            ctx.fillText("Collision",30,30);
        }
                            
    }    
    
    
    document.onmousemove = function(mouse){
        player.x = mouse.clientX;
        player.y = mouse.clientY;
    }
    
    function rectsoverlap(x1,y1,w1,h1,x2,y2,w2,h2){
        return     x1 <= x2+w2
            &&     x2 <= x1+w1
            &&    y1 <= y2+h2
            &&    y2 <= y1+h1;
    }
    
    
    </script></body></html>

HTML5 - Beginners - onmousemove 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 player = {
        x:10,
        y:10,
        w:32,
        h:32,
    };
    
    gameloop=setInterval(dogameloop,16);
    
    function dogameloop(){
        ctx.clearRect(0,0,c.width,c.height);
        ctx.fillStyle="black";
        ctx.font="15px Arial";
        ctx.fillText("Move the mouse on the canvas.",10,10);
        ctx.fillRect(player.x,player.y,player.w,player.h);
                            
    }    
        
    document.onmousemove = function(mouse){
        player.x = mouse.clientX;
        player.y = mouse.clientY;
    }
    
    
    </script></body></html>

HTML5 - Beginners - Enemy List more advanced 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 = {};
var player = {
    x:100,
    y:100,
    w:32,
    h:32,
    color:'blue',
};
// Create the enemies
for (i=0;i<10;i++){    
    makeenemy('e'+i,i*48,10);
}
// draw operations
drawentity(player);
for(var key in enemylist){
    drawentity(enemylist[key]);
}
function makeenemy(id,x,y){
    var enemy = {
        x:x,
        y:y,
        w:32,
        h:32,
        color:'red',
        id:id,
    };
    enemylist[id] = enemy;
}
function drawentity(entity){
    ctx.fillStyle=entity.color;
    ctx.fillRect(entity.x,entity.y,entity.w,entity.h);
}
</script></body></html>

HTML5 - Beginners - Enemy List and for 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 = {};
var enemy1 = {
    x:10,
    y:10,
    w:32,
    h:32,
    color:'red',
    id:'e1',
};
enemylist['e1'] = enemy1;
var enemy2 = {
    x:50,
    y:10,
    w:32,
    h:32,
    color:'red',
    id:'e2',
};
enemylist['e2'] = enemy2;
var player = {
    x:100,
    y:100,
    w:32,
    h:32,
    color:'blue',
};
drawentity(player);
for(var key in enemylist){
    drawentity(enemylist[key]);
}
function drawentity(entity){
    ctx.fillStyle=entity.color;
    ctx.fillRect(entity.x,entity.y,entity.w,entity.h);
}
</script></body></html>

HTML5 - Beginners - console.log 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");
ctx.fillStyle="black";
ctx.fillText("In Chrome press f12",20,20);
// Here text is printed to the log.
console.log("A message");
</script></body></html>

HTML5 - Beginners - clearRect x,y,w,h 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");
    
    function thegame(){
        this.clearscreen = function(){
            ctx.clearRect(0,0,c.width,c.height);
        }
    }
    
    var mygame = new thegame();
    gameloop=setInterval(dogameloop,16);
    function dogameloop(){
        thegame.clearscreen;
        ctx.fillStyle="black";
        ctx.font="30px Arial";
        ctx.fillText("Screen cleared every draw",10,30);
    }    
</script></body></html>

HTML5 - Beginners - Variables shotcut in functions

<!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 enemy = {
    x:10,
    y:10,
    w:32,
    h:32,
    color:'red',
};
var player = {
    x:100,
    y:100,
    w:32,
    h:32,
    color:'blue',
};
drawentity(player);
drawentity(enemy);
function drawentity(entity){
    ctx.fillStyle=entity.color;
    ctx.fillRect(entity.x,entity.y,entity.w,entity.h);
}
</script></body></html>

HTML5 - Beginners - Milliseconds Date.now() 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");
    
    function thecounter(){
        this.started = Date.now();
        this.timestarted = function(){
            return this.started
        }
        this.timeelapsed = function(){
            return Date.now() - this.started;
        }
    }
    
    var mycounter = new thecounter();
    gameloop=setInterval(dogameloop,16);
    function dogameloop(){
        ctx.clearRect(0,0,c.width,c.height);
        ctx.fillStyle="black";
        ctx.font="30px Arial";
        ctx.fillText("Start time : "+mycounter.timestarted(),10,30);
        ctx.fillText("TIme Elapsed : "+mycounter.timeelapsed(),10,60);
    }    
</script></body></html>