<!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>
Monday, May 9, 2016
HTML5 - Deleting Properties/Items from lists
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
Subscribe to:
Posts (Atom)