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>

Twitch has Creative and Programming category - learn/study

On Twitch you can watch live video streams. There is a creative and programming category that you can subscribe to. Here you can watch people broadcasting drawing game graphics ect. Monkey see Monkey do :)

The broadcasters get money from donation and adds. Has a chat room.

#education #hobby