tag:blogger.com,1999:blog-10682247652195298682024-03-21T07:23:49.813-07:00HTML5 game programming step by stepPakz001http://www.blogger.com/profile/10537740820223145710noreply@blogger.comBlogger33125tag:blogger.com,1999:blog-1068224765219529868.post-56431015560123774692016-05-09T21:21:00.002-07:002016-05-09T21:21:45.836-07:00HTML5 - Deleting Properties/Items from lists<!-- code formatted by http://manoli.net/csharpformat/ -->
<pre class="csharpcode"><!DOCTYPE = html>
<html><body>
<canvas id=<span class="str">"myCanvas"</span> width=<span class="str">"640"</span> height=<span class="str">"480"</span> style=<span class="str">"border:1px solid #d3d3d3;"</span>>
Use different browser.
</canvas>
<script>
<span class="kwrd">var</span> c=document.getElementById(<span class="str">"myCanvas"</span>);
<span class="kwrd">var</span> ctx=c.getContext(<span class="str">"2d"</span>);
<span class="rem">// Here is the list</span>
<span class="kwrd">var</span> openlist = {};
<span class="rem">// create values for the list</span>
<span class="kwrd">for</span>(<span class="kwrd">var</span> i=0;i<10;i++){
<span class="kwrd">var</span> x = Math.floor(Math.random()*20)
<span class="kwrd">var</span> y = Math.floor(Math.random()*20)
addtoopenlist(i,x,y,10,10,10);
}
ctx.fillText(<span class="str">"Deleting from lists example"</span>,10,10);
printopenlist(20,20);
<span class="rem">// Here we delete an item <<<<<<<<<<<<<<<<<<<<<<<<<<<</span>
delete openlist[1];
printopenlist(320,20);
<span class="rem">// print the open list to the canvas</span>
function printopenlist(x,y){
<span class="kwrd">var</span> cnt=0;
<span class="kwrd">for</span> (<span class="kwrd">var</span> key <span class="kwrd">in</span> openlist){
<span class="kwrd">var</span> line = openlist[key].id
line += <span class="str">" "</span>+openlist[key].x
line += <span class="str">","</span>+openlist[key].y
ctx.fillText(line,20+x,(20+cnt*20)+y);
cnt+=1;
}
}
<span class="rem">// This function adds to the open list.</span>
function addtoopenlist(id,x,y,f,g,h){
<span class="kwrd">var</span> list = {
x:x,
y:y,
f:f,
g:g,
h:h,
id:id,
};
openlist[id] = list;
}
</script></body></html></pre>
Pakz001http://www.blogger.com/profile/10537740820223145710noreply@blogger.com0tag:blogger.com,1999:blog-1068224765219529868.post-18424637620875538572016-05-09T20:43:00.002-07:002016-05-09T20:43:37.755-07:00HTML5 - Beginners - Object Literal example<!-- code formatted by http://manoli.net/csharpformat/ -->
<pre class="csharpcode"><!DOCTYPE = html>
<html><body>
<canvas id=<span class="str">"myCanvas"</span> width=<span class="str">"640"</span> height=<span class="str">"480"</span> style=<span class="str">"border:1px solid #d3d3d3;"</span>>
Use different browser.
</canvas>
<script>
<span class="kwrd">var</span> c=document.getElementById(<span class="str">"myCanvas"</span>);
<span class="kwrd">var</span> ctx=c.getContext(<span class="str">"2d"</span>);
<span class="rem">// Object Literal</span>
<span class="kwrd">var</span> enemylist = {
enemyname1:<span class="str">"Bograid"</span>,
<span class="str">"enemyname2"</span>:<span class="str">"Joadui"</span>,
health:{
enemy1:10,
<span class="str">"enemy2"</span>:20,
}
};
ctx.fillText(enemylist.enemyname1,20,20);
ctx.fillText(enemylist.health.enemy1,20,40);
ctx.fillText(enemylist[<span class="str">"enemyname2"</span>],220,20);
ctx.fillText(enemylist.health[<span class="str">"enemy2"</span>],220,40);
</script></body></html></pre>
Pakz001http://www.blogger.com/profile/10537740820223145710noreply@blogger.com0tag:blogger.com,1999:blog-1068224765219529868.post-52114055842212270842016-05-09T14:31:00.001-07:002016-05-09T14:31:21.309-07:00HTML5 - Beginners - Clearing a list example<!-- code formatted by http://manoli.net/csharpformat/ -->
<pre class="csharpcode"><!DOCTYPE = html>
<html><body>
<canvas id=<span class="str">"myCanvas"</span> width=<span class="str">"640"</span> height=<span class="str">"480"</span> style=<span class="str">"border:1px solid #d3d3d3;"</span>>
Use different browser.
</canvas>
<script>
<span class="kwrd">var</span> c=document.getElementById(<span class="str">"myCanvas"</span>);
<span class="kwrd">var</span> ctx=c.getContext(<span class="str">"2d"</span>);
<span class="kwrd">var</span> enemylist = {};
<span class="kwrd">for</span>(<span class="kwrd">var</span> i=0;i<10;i++){
makeenemy(i)
}
<span class="kwrd">for</span>(<span class="kwrd">var</span> key <span class="kwrd">in</span> enemylist){
ctx.fillRect(enemylist[key].x,enemylist[key].y,32,32);;
}
<span class="rem">// Here were clear the enemy list</span>
enemylist = {};
function makeenemy(id){
<span class="kwrd">var</span> enemy = {
x:Math.random()*c.width,
y:Math.random()*c.height,
id:id,
};
enemylist[id] = enemy;
}
</script></body></html></pre>
Pakz001http://www.blogger.com/profile/10537740820223145710noreply@blogger.com0tag:blogger.com,1999:blog-1068224765219529868.post-4374773554238041712016-05-09T13:34:00.002-07:002016-05-09T13:34:48.154-07:00HTML5 - Creating image in memory and drawing it.<!-- code formatted by http://manoli.net/csharpformat/ -->
<pre class="csharpcode"><!DOCTYPE = html>
<html><body>
<canvas id=<span class="str">"myCanvas"</span> width=<span class="str">"640"</span> height=<span class="str">"480"</span> style=<span class="str">"border:1px solid #d3d3d3;"</span>>
Use different browser.
</canvas>
<script>
<span class="kwrd">var</span> c=document.getElementById(<span class="str">"myCanvas"</span>);
<span class="kwrd">var</span> ctx=c.getContext(<span class="str">"2d"</span>);
<span class="rem">// Here is the drawrandom function</span>
function drawrandom(){
<span class="kwrd">this</span>.image = <span class="kwrd">new</span> Image();
<span class="kwrd">this</span>.init = <span class="kwrd">true</span>;
<span class="rem">// Function within a function</span>
<span class="kwrd">this</span>.draw = function(x,y){
<span class="kwrd">if</span> (<span class="kwrd">this</span>.init==<span class="kwrd">true</span>){
<span class="kwrd">this</span>.init=<span class="kwrd">false</span>;
<span class="kwrd">this</span>.image = ctx.createImageData(32, 32);
<span class="kwrd">for</span>(<span class="kwrd">var</span> i=0;i<(32*32*4);i=i+4){
<span class="kwrd">this</span>.image.data[i] = 100;
<span class="kwrd">this</span>.image.data[i+1] = 100;
<span class="kwrd">this</span>.image.data[i+2] = 100;
<span class="kwrd">this</span>.image.data[i+3] = 255;
}
}
ctx.putImageData(<span class="kwrd">this</span>.image,x,y);
};
};
<span class="rem">// Here we create a instance of the function</span>
<span class="kwrd">var</span> myrandom = <span class="kwrd">new</span> drawrandom();
<span class="rem">// From the function run the drawrandom function</span>
<span class="kwrd">for</span>(<span class="kwrd">var</span> i=0;i<100;i++){
<span class="kwrd">var</span> x=Math.floor(Math.random()*c.width)+1
<span class="kwrd">var</span> y=Math.floor(Math.random()*c.height)+1
myrandom.draw(x,y)
}
</script></body></html></pre>
Pakz001http://www.blogger.com/profile/10537740820223145710noreply@blogger.com0tag:blogger.com,1999:blog-1068224765219529868.post-969658907004628392016-05-09T13:33:00.002-07:002016-05-09T13:33:51.676-07:00HTML5 - Beginners OO - Drawing red colored background example<!-- code formatted by http://manoli.net/csharpformat/ -->
<pre class="csharpcode"><!DOCTYPE = html>
<html><body>
<canvas id=<span class="str">"myCanvas"</span> width=<span class="str">"640"</span> height=<span class="str">"480"</span> style=<span class="str">"border:1px solid #d3d3d3;"</span>>
Use different browser.
</canvas>
<script>
<span class="kwrd">var</span> c=document.getElementById(<span class="str">"myCanvas"</span>);
<span class="kwrd">var</span> ctx=c.getContext(<span class="str">"2d"</span>);
<span class="rem">// Here is the drawrandom function</span>
function drawrandom(){
<span class="kwrd">this</span>.tw = 16;
<span class="kwrd">this</span>.th = 16;
<span class="kwrd">this</span>.mw = c.width/<span class="kwrd">this</span>.tw;
<span class="kwrd">this</span>.mh = c.height/<span class="kwrd">this</span>.th;
<span class="rem">// Function within a function</span>
<span class="kwrd">this</span>.drawbg = function(){
<span class="kwrd">var</span> mycol;
<span class="kwrd">for</span>(<span class="kwrd">var</span> y=0;y<<span class="kwrd">this</span>.mh;y++){
<span class="kwrd">for</span>(<span class="kwrd">var</span> x=0;x<<span class="kwrd">this</span>.mw;x++){
mycol=Math.floor((Math.random() * 255) + 1)
ctx.fillStyle=<span class="str">"rgb("</span>+mycol+<span class="str">",0,0)"</span>;
ctx.fillRect(x*<span class="kwrd">this</span>.tw,y*<span class="kwrd">this</span>.th,<span class="kwrd">this</span>.tw,<span class="kwrd">this</span>.th)
}
}
};
};
<span class="rem">// Here we create a instance of the function</span>
<span class="kwrd">var</span> myrandom = <span class="kwrd">new</span> drawrandom();
<span class="rem">// From the function run the drawrandom function</span>
myrandom.drawbg()
</script></body></html></pre>
Pakz001http://www.blogger.com/profile/10537740820223145710noreply@blogger.com0tag:blogger.com,1999:blog-1068224765219529868.post-75331143903782451372016-05-09T13:32:00.002-07:002016-05-09T13:32:58.481-07:00HTML5 - Beginners OO - Using Arrays example<!-- code formatted by http://manoli.net/csharpformat/ -->
<pre class="csharpcode"><!DOCTYPE = html>
<html><body>
<canvas id=<span class="str">"myCanvas"</span> width=<span class="str">"640"</span> height=<span class="str">"480"</span> style=<span class="str">"border:1px solid #d3d3d3;"</span>>
Use different browser.
</canvas>
<script>
<span class="kwrd">var</span> c=document.getElementById(<span class="str">"myCanvas"</span>);
<span class="kwrd">var</span> ctx=c.getContext(<span class="str">"2d"</span>);
<span class="rem">// Here the drawing takes place</span>
function drawrandom(){
<span class="kwrd">this</span>.bgmap = [];
<span class="kwrd">this</span>.init = <span class="kwrd">true</span>;
<span class="kwrd">this</span>.dx = 0.0;
<span class="kwrd">this</span>.dy = 0.0;
<span class="kwrd">this</span>.incx = 1.0;
<span class="kwrd">this</span>.incy = 1.0;
<span class="kwrd">this</span>.tw = 16;
<span class="kwrd">this</span>.th = 16;
<span class="kwrd">this</span>.mw = c.width/<span class="kwrd">this</span>.tw;
<span class="kwrd">this</span>.mh = c.height/<span class="kwrd">this</span>.th;
<span class="kwrd">this</span>.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],
]
<span class="rem">// This function moves the tilemap</span>
<span class="kwrd">this</span>.movetilemap = function(){
<span class="kwrd">this</span>.dx += <span class="kwrd">this</span>.incx;
<span class="kwrd">this</span>.dy += <span class="kwrd">this</span>.incy;
<span class="kwrd">if</span>(<span class="kwrd">this</span>.dx>150){<span class="kwrd">this</span>.incx=-<span class="kwrd">this</span>.incx};
<span class="kwrd">if</span>(<span class="kwrd">this</span>.dx<0){<span class="kwrd">this</span>.incx=-<span class="kwrd">this</span>.incx};
<span class="kwrd">if</span>(<span class="kwrd">this</span>.dy>100){<span class="kwrd">this</span>.incy=-<span class="kwrd">this</span>.incy};
<span class="kwrd">if</span>(<span class="kwrd">this</span>.dy<0){<span class="kwrd">this</span>.incy=-<span class="kwrd">this</span>.incy};
}
<span class="rem">// Function that draws the tilemap</span>
<span class="kwrd">this</span>.drawtilemap = function(){
ctx.fillStyle=<span class="str">"white"</span>;
<span class="kwrd">for</span>(<span class="kwrd">var</span> y = 0; y < <span class="kwrd">this</span>.map.length; ++y) {
<span class="kwrd">for</span>(<span class="kwrd">var</span> x = 0; x < <span class="kwrd">this</span>.map[y].length; ++x) {
<span class="kwrd">if</span>(<span class="kwrd">this</span>.map[y][x]==1) ctx.fillRect(x*<span class="kwrd">this</span>.tw+<span class="kwrd">this</span>.dx,y*<span class="kwrd">this</span>.th+<span class="kwrd">this</span>.dy,<span class="kwrd">this</span>.tw,<span class="kwrd">this</span>.th);
}
}
}
<span class="rem">// Function within a function</span>
<span class="kwrd">this</span>.drawbg = function(){
<span class="kwrd">var</span> mycol;
<span class="kwrd">var</span> cnt=0;
<span class="rem">// If first time then initiate background colors</span>
<span class="kwrd">if</span> (<span class="kwrd">this</span>.init==<span class="kwrd">true</span>){
<span class="kwrd">for</span>(<span class="kwrd">var</span> i=0;i<(<span class="kwrd">this</span>.mw*<span class="kwrd">this</span>.mh);i++){
<span class="kwrd">this</span>.bgmap[i] = Math.floor(Math.random()*255)+1;
}
<span class="kwrd">this</span>.init=<span class="kwrd">false</span>;
}
<span class="rem">// Draw the background</span>
<span class="kwrd">for</span>(<span class="kwrd">var</span> y=0;y<<span class="kwrd">this</span>.mh;y++){
<span class="kwrd">for</span>(<span class="kwrd">var</span> x=0;x<<span class="kwrd">this</span>.mw;x++){
mycol = <span class="kwrd">this</span>.bgmap[cnt];
ctx.fillStyle=<span class="str">"rgb("</span>+mycol+<span class="str">",0,0)"</span>;
ctx.fillRect(x*<span class="kwrd">this</span>.tw,y*<span class="kwrd">this</span>.th,<span class="kwrd">this</span>.tw,<span class="kwrd">this</span>.th)
cnt+=1;
}
}
};
};
<span class="rem">// Here we create a instance of the function</span>
<span class="kwrd">var</span> myrandom = <span class="kwrd">new</span> drawrandom();
gameloop=setInterval(dogameloop,16);
function dogameloop(){
myrandom.movetilemap();
myrandom.drawbg();
myrandom.drawtilemap();
}
</script></body></html></pre>
Pakz001http://www.blogger.com/profile/10537740820223145710noreply@blogger.com0tag:blogger.com,1999:blog-1068224765219529868.post-84428333465730138512016-05-09T13:31:00.002-07:002016-05-09T13:31:50.912-07:00HTML5 - Beginners - Storing and using enemy variables example<!-- code formatted by http://manoli.net/csharpformat/ -->
<pre class="csharpcode"><!DOCTYPE = html>
<html><body>
<canvas id=<span class="str">"myCanvas"</span> width=<span class="str">"640"</span> height=<span class="str">"480"</span> style=<span class="str">"border:1px solid #d3d3d3;"</span>>
Use different browser.
</canvas>
<script>
<span class="kwrd">var</span> c=document.getElementById(<span class="str">"myCanvas"</span>);
<span class="kwrd">var</span> ctx=c.getContext(<span class="str">"2d"</span>);
<span class="rem">// Here we create a place to store some variables in.</span>
<span class="kwrd">var</span> enemy = {
x:10,
y:10,
w:32,
h:32,
};
ctx.fillStyle=<span class="str">"black"</span>;
ctx.fillRect(enemy.x,enemy.y,enemy.w,enemy.h); <span class="rem">// 100</span>
</script></body></html>
Status API Training Shop Blog About
© 2016 GitHub, Inc. Terms P</pre>
Pakz001http://www.blogger.com/profile/10537740820223145710noreply@blogger.com0tag:blogger.com,1999:blog-1068224765219529868.post-41496070220491247562016-05-09T13:30:00.004-07:002016-05-09T13:30:53.785-07:00HTML5 - Beginners - save() and restore() example<!-- code formatted by http://manoli.net/csharpformat/ -->
<br />
<pre class="csharpcode">save/restore the state of the draw settings.</pre>
<pre class="csharpcode"></pre>
<pre class="csharpcode"></pre>
<pre class="csharpcode"></pre>
<pre class="csharpcode"></pre>
<pre class="csharpcode"><!DOCTYPE = html>
<html><body>
<canvas id=<span class="str">"myCanvas"</span> width=<span class="str">"640"</span> height=<span class="str">"480"</span> style=<span class="str">"border:1px solid #d3d3d3;"</span>>
Use different browser.
</canvas>
<script>
<span class="kwrd">var</span> c=document.getElementById(<span class="str">"myCanvas"</span>);
<span class="kwrd">var</span> ctx=c.getContext(<span class="str">"2d"</span>);
gameloop=setInterval(dogameloop,16);
function dogameloop(){
ctx.clearRect(0,0,c.width,c.height);
ctx.fillStyle=<span class="str">"black"</span>;
ctx.font=<span class="str">"20px Arial"</span>;
ctx.fillText(<span class="str">"before save state."</span>,20,20);
ctx.save();
ctx.fillStyle=<span class="str">"grey"</span>;
ctx.font=<span class="str">"30px Arial"</span>;
ctx.fillText(<span class="str">"after save state."</span>,20,60);
ctx.restore();
ctx.fillText(<span class="str">"restored state."</span>,20,100);
}
</script></body></html></pre>
Pakz001http://www.blogger.com/profile/10537740820223145710noreply@blogger.com0tag:blogger.com,1999:blog-1068224765219529868.post-58796056700493325522016-05-09T13:29:00.002-07:002016-05-09T13:29:16.218-07:00HTML5 - Beginners - rectsoverlap example<!-- code formatted by http://manoli.net/csharpformat/ -->
<pre class="csharpcode"><!DOCTYPE = html>
<html><body>
<canvas id=<span class="str">"myCanvas"</span> width=<span class="str">"640"</span> height=<span class="str">"480"</span> style=<span class="str">"border:1px solid #d3d3d3;"</span>>
Use different browser.
</canvas>
<script>
<span class="kwrd">var</span> c=document.getElementById(<span class="str">"myCanvas"</span>);
<span class="kwrd">var</span> ctx=c.getContext(<span class="str">"2d"</span>);
<span class="kwrd">var</span> player = {
x:10,
y:10,
w:32,
h:32,
};
<span class="kwrd">var</span> 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=<span class="str">"black"</span>;
ctx.font=<span class="str">"30px Arial"</span>;
ctx.fillRect(player.x,player.y,player.w,player.h);
ctx.fillRect(enemy.x,enemy.y,enemy.w,enemy.h);
<span class="kwrd">if</span> (rectsoverlap( player.x,player.y,player.w,player.h,
enemy.x,enemy.y,enemy.w,enemy.h)){
ctx.fillText(<span class="str">"Collision"</span>,30,30);
}
}
document.onmousemove = function(mouse){
player.x = mouse.clientX;
player.y = mouse.clientY;
}
function rectsoverlap(x1,y1,w1,h1,x2,y2,w2,h2){
<span class="kwrd">return</span> x1 <= x2+w2
&& x2 <= x1+w1
&& y1 <= y2+h2
&& y2 <= y1+h1;
}
</script></body></html></pre>
Pakz001http://www.blogger.com/profile/10537740820223145710noreply@blogger.com0tag:blogger.com,1999:blog-1068224765219529868.post-90797421100717271052016-05-09T13:28:00.001-07:002016-05-09T13:28:24.130-07:00HTML5 - Beginners - onmousemove example<!-- code formatted by http://manoli.net/csharpformat/ -->
<pre class="csharpcode"><!DOCTYPE = html>
<html><body>
<canvas id=<span class="str">"myCanvas"</span> width=<span class="str">"640"</span> height=<span class="str">"480"</span> style=<span class="str">"border:1px solid #d3d3d3;"</span>>
Use different browser.
</canvas>
<script>
<span class="kwrd">var</span> c=document.getElementById(<span class="str">"myCanvas"</span>);
<span class="kwrd">var</span> ctx=c.getContext(<span class="str">"2d"</span>);
<span class="kwrd">var</span> 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=<span class="str">"black"</span>;
ctx.font=<span class="str">"15px Arial"</span>;
ctx.fillText(<span class="str">"Move the mouse on the canvas."</span>,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></pre>
Pakz001http://www.blogger.com/profile/10537740820223145710noreply@blogger.com0tag:blogger.com,1999:blog-1068224765219529868.post-53456054559338590302016-05-09T13:27:00.001-07:002016-05-09T13:27:44.456-07:00HTML5 - Beginners - Enemy List more advanced example<!-- code formatted by http://manoli.net/csharpformat/ -->
<pre class="csharpcode"><!DOCTYPE = html>
<html><body>
<canvas id=<span class="str">"myCanvas"</span> width=<span class="str">"640"</span> height=<span class="str">"480"</span> style=<span class="str">"border:1px solid #d3d3d3;"</span>>
Use different browser.
</canvas>
<script>
<span class="kwrd">var</span> c=document.getElementById(<span class="str">"myCanvas"</span>);
<span class="kwrd">var</span> ctx=c.getContext(<span class="str">"2d"</span>);
<span class="kwrd">var</span> enemylist = {};
<span class="kwrd">var</span> player = {
x:100,
y:100,
w:32,
h:32,
color:<span class="str">'blue'</span>,
};
<span class="rem">// Create the enemies</span>
<span class="kwrd">for</span> (i=0;i<10;i++){
makeenemy(<span class="str">'e'</span>+i,i*48,10);
}
<span class="rem">// draw operations</span>
drawentity(player);
<span class="kwrd">for</span>(<span class="kwrd">var</span> key <span class="kwrd">in</span> enemylist){
drawentity(enemylist[key]);
}
function makeenemy(id,x,y){
<span class="kwrd">var</span> enemy = {
x:x,
y:y,
w:32,
h:32,
color:<span class="str">'red'</span>,
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></pre>
Pakz001http://www.blogger.com/profile/10537740820223145710noreply@blogger.com0tag:blogger.com,1999:blog-1068224765219529868.post-63212783792121109432016-05-09T13:26:00.001-07:002016-05-09T13:26:46.272-07:00HTML5 - Beginners - Enemy List and for example<!-- code formatted by http://manoli.net/csharpformat/ -->
<pre class="csharpcode"><!DOCTYPE = html>
<html><body>
<canvas id=<span class="str">"myCanvas"</span> width=<span class="str">"640"</span> height=<span class="str">"480"</span> style=<span class="str">"border:1px solid #d3d3d3;"</span>>
Use different browser.
</canvas>
<script>
<span class="kwrd">var</span> c=document.getElementById(<span class="str">"myCanvas"</span>);
<span class="kwrd">var</span> ctx=c.getContext(<span class="str">"2d"</span>);
<span class="kwrd">var</span> enemylist = {};
<span class="kwrd">var</span> enemy1 = {
x:10,
y:10,
w:32,
h:32,
color:<span class="str">'red'</span>,
id:<span class="str">'e1'</span>,
};
enemylist[<span class="str">'e1'</span>] = enemy1;
<span class="kwrd">var</span> enemy2 = {
x:50,
y:10,
w:32,
h:32,
color:<span class="str">'red'</span>,
id:<span class="str">'e2'</span>,
};
enemylist[<span class="str">'e2'</span>] = enemy2;
<span class="kwrd">var</span> player = {
x:100,
y:100,
w:32,
h:32,
color:<span class="str">'blue'</span>,
};
drawentity(player);
<span class="kwrd">for</span>(<span class="kwrd">var</span> key <span class="kwrd">in</span> enemylist){
drawentity(enemylist[key]);
}
function drawentity(entity){
ctx.fillStyle=entity.color;
ctx.fillRect(entity.x,entity.y,entity.w,entity.h);
}
</script></body></html></pre>
Pakz001http://www.blogger.com/profile/10537740820223145710noreply@blogger.com0tag:blogger.com,1999:blog-1068224765219529868.post-30084962313936796722016-05-09T13:00:00.001-07:002016-05-09T13:00:46.531-07:00HTML5 - Beginners - console.log example<!-- code formatted by http://manoli.net/csharpformat/ -->
<pre class="csharpcode"><!DOCTYPE = html>
<html><body>
<canvas id=<span class="str">"myCanvas"</span> width=<span class="str">"640"</span> height=<span class="str">"480"</span> style=<span class="str">"border:1px solid #d3d3d3;"</span>>
Use different browser.
</canvas>
<script>
<span class="kwrd">var</span> c=document.getElementById(<span class="str">"myCanvas"</span>);
<span class="kwrd">var</span> ctx=c.getContext(<span class="str">"2d"</span>);
ctx.fillStyle=<span class="str">"black"</span>;
ctx.fillText(<span class="str">"In Chrome press f12"</span>,20,20);
<span class="rem">// Here text is printed to the log.</span>
console.log(<span class="str">"A message"</span>);
</script></body></html></pre>
Pakz001http://www.blogger.com/profile/10537740820223145710noreply@blogger.com0tag:blogger.com,1999:blog-1068224765219529868.post-63637881055279777332016-05-09T12:59:00.003-07:002016-05-09T12:59:43.866-07:00HTML5 - Beginners - clearRect x,y,w,h example<!-- code formatted by http://manoli.net/csharpformat/ -->
<pre class="csharpcode"><!DOCTYPE = html>
<html><body>
<canvas id=<span class="str">"myCanvas"</span> width=<span class="str">"640"</span> height=<span class="str">"480"</span> style=<span class="str">"border:1px solid #d3d3d3;"</span>>
Use different browser.
</canvas>
<script>
<span class="kwrd">var</span> c=document.getElementById(<span class="str">"myCanvas"</span>);
<span class="kwrd">var</span> ctx=c.getContext(<span class="str">"2d"</span>);
function thegame(){
<span class="kwrd">this</span>.clearscreen = function(){
ctx.clearRect(0,0,c.width,c.height);
}
}
<span class="kwrd">var</span> mygame = <span class="kwrd">new</span> thegame();
gameloop=setInterval(dogameloop,16);
function dogameloop(){
thegame.clearscreen;
ctx.fillStyle=<span class="str">"black"</span>;
ctx.font=<span class="str">"30px Arial"</span>;
ctx.fillText(<span class="str">"Screen cleared every draw"</span>,10,30);
}
</script></body></html></pre>
Pakz001http://www.blogger.com/profile/10537740820223145710noreply@blogger.com0tag:blogger.com,1999:blog-1068224765219529868.post-65325149649575517232016-05-09T12:58:00.002-07:002016-05-09T12:58:25.189-07:00HTML5 - Beginners - Variables shotcut in functions<!-- code formatted by http://manoli.net/csharpformat/ -->
<pre class="csharpcode"><!DOCTYPE = html>
<html><body>
<canvas id=<span class="str">"myCanvas"</span> width=<span class="str">"640"</span> height=<span class="str">"480"</span> style=<span class="str">"border:1px solid #d3d3d3;"</span>>
Use different browser.
</canvas>
<script>
<span class="kwrd">var</span> c=document.getElementById(<span class="str">"myCanvas"</span>);
<span class="kwrd">var</span> ctx=c.getContext(<span class="str">"2d"</span>);
<span class="kwrd">var</span> enemy = {
x:10,
y:10,
w:32,
h:32,
color:<span class="str">'red'</span>,
};
<span class="kwrd">var</span> player = {
x:100,
y:100,
w:32,
h:32,
color:<span class="str">'blue'</span>,
};
drawentity(player);
drawentity(enemy);
function drawentity(entity){
ctx.fillStyle=entity.color;
ctx.fillRect(entity.x,entity.y,entity.w,entity.h);
}
</script></body></html></pre>
Pakz001http://www.blogger.com/profile/10537740820223145710noreply@blogger.com0tag:blogger.com,1999:blog-1068224765219529868.post-8740228130134542962016-05-09T12:56:00.003-07:002016-05-09T12:56:56.935-07:00HTML5 - Beginners - Milliseconds Date.now() example<!-- code formatted by http://manoli.net/csharpformat/ -->
<pre class="csharpcode"><!DOCTYPE = html>
<html><body>
<canvas id=<span class="str">"myCanvas"</span> width=<span class="str">"640"</span> height=<span class="str">"480"</span> style=<span class="str">"border:1px solid #d3d3d3;"</span>>
Use different browser.
</canvas>
<script>
<span class="kwrd">var</span> c=document.getElementById(<span class="str">"myCanvas"</span>);
<span class="kwrd">var</span> ctx=c.getContext(<span class="str">"2d"</span>);
function thecounter(){
<span class="kwrd">this</span>.started = Date.now();
<span class="kwrd">this</span>.timestarted = function(){
<span class="kwrd">return</span> <span class="kwrd">this</span>.started
}
<span class="kwrd">this</span>.timeelapsed = function(){
<span class="kwrd">return</span> Date.now() - <span class="kwrd">this</span>.started;
}
}
<span class="kwrd">var</span> mycounter = <span class="kwrd">new</span> thecounter();
gameloop=setInterval(dogameloop,16);
function dogameloop(){
ctx.clearRect(0,0,c.width,c.height);
ctx.fillStyle=<span class="str">"black"</span>;
ctx.font=<span class="str">"30px Arial"</span>;
ctx.fillText(<span class="str">"Start time : "</span>+mycounter.timestarted(),10,30);
ctx.fillText(<span class="str">"TIme Elapsed : "</span>+mycounter.timeelapsed(),10,60);
}
</script></body></html></pre>
Pakz001http://www.blogger.com/profile/10537740820223145710noreply@blogger.com0tag:blogger.com,1999:blog-1068224765219529868.post-20820492172454354012015-06-03T12:00:00.001-07:002015-06-03T12:00:00.929-07:00Twitch has Creative and Programming category - learn/studyOn 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 :)<br />
<br />
The broadcasters get money from donation and adds. Has a chat room.<br />
<br />
#education #hobby<br />
<br />
<br />Pakz001http://www.blogger.com/profile/10537740820223145710noreply@blogger.com0tag:blogger.com,1999:blog-1068224765219529868.post-12158358865282032142014-10-22T04:18:00.002-07:002014-10-22T04:18:36.710-07:00HTML5 - The Asteroids game - rock making example<!-- code formatted by http://manoli.net/csharpformat/ -->
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRYH_0CvA8NsUJ7UKlh4RQADtG7M7ihEZq7BIZTARA6dXH2SQm1s3nufNl3DQ-ekwjfEDb1xDp8Lh6rpwxANYrEdjC_h6S3WwFFxbpiw0pu8d7mtHCyWYXzm47e92HeAo7HnO_SY2N08Q/s1600/asteroids.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRYH_0CvA8NsUJ7UKlh4RQADtG7M7ihEZq7BIZTARA6dXH2SQm1s3nufNl3DQ-ekwjfEDb1xDp8Lh6rpwxANYrEdjC_h6S3WwFFxbpiw0pu8d7mtHCyWYXzm47e92HeAo7HnO_SY2N08Q/s1600/asteroids.jpg" height="166" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
I made another thing. This time I made rock like drawings that can bee seen in Asteroids games. I create 10 points and give them random values. I then add the coordinates from a circle and draw everything.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
The code below is html code. Copy it out and save it as a html file. Or Paste the code for instance in JSexample.</div>
<pre class="csharpcode">
</pre>
<pre class="csharpcode">
</pre>
<pre class="csharpcode">
</pre>
<pre class="csharpcode"><!DOCTYPE html>
<html><body>
<canvas id=<span class="str">"myCanvas"</span> width=<span class="str">"320"</span> height=<span class="str">"240"</span> style=<span class="str">"border:1px solid #d3d3d3;"</span>>
Use different browser.
</canvas>
<script>
<span class="kwrd">var</span> c=document.getElementById(<span class="str">"myCanvas"</span>);
<span class="kwrd">var</span> ctx=c.getContext(<span class="str">"2d"</span>);
<span class="kwrd">var</span> apx = <span class="kwrd">new</span> Array(32*32);
<span class="kwrd">var</span> apy = <span class="kwrd">new</span> Array(32*32);
<span class="kwrd">var</span> angle = 0;
<span class="kwrd">var</span> count1 = 0;
<span class="kwrd">for</span>(i=0;i<32;i++){
angle=0;
<span class="kwrd">for</span>(ii=0;ii<10;ii++){
apx[i*32+ii] = Math.round(Math.cos(angle)*16);
apy[i*32+ii] = Math.round(Math.sin(angle)*16);
apx[i*32+ii] += Math.round(Math.random()*6)+24;
apy[i*32+ii] += Math.round(Math.random()*6)+24;
angle+=.6;
}
}
<span class="kwrd">for</span>(y=0;y<240;y=y+64){
<span class="kwrd">for</span>(x=0;x<320;x=x+64){
ctx.moveTo(apx[0]+x,apy[0]+y);
<span class="kwrd">for</span>(i=1;i<10;i++){
ctx.lineTo(apx[count1*32+i]+x,apy[count1*32+i]+y);
}
ctx.lineTo(apx[0]+x,apy[0]+y);
ctx.stroke();
count1++;
}
}
</script></body></html></pre>
Pakz001http://www.blogger.com/profile/10537740820223145710noreply@blogger.com0tag:blogger.com,1999:blog-1068224765219529868.post-84586015856454199602014-10-14T22:30:00.000-07:002014-10-14T22:30:15.793-07:00Html5 generating topdown 2d maps example<!-- code formatted by http://manoli.net/csharpformat/ -->
<pre class="csharpcode">Here I made something that creates maps for games. Topdown 2d games. Paste the code in jsexample.com and see it in action. I use the code myself for my wargame experiments.</pre>
<pre class="csharpcode">
</pre>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSiWaWfOPpI3Sij8R76Unz6OPw2oi8kztyyza2m9dTEKrIeX9CFiGiGEk4F6weh3Rpgg_BpIdBpG79wrmoA4sTP2gSze-h5uttAeSvMWwEW12s0_xoYXc-BB3Gjl8DJ1ZPpNCzaM3q9lY/s1600/lat.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSiWaWfOPpI3Sij8R76Unz6OPw2oi8kztyyza2m9dTEKrIeX9CFiGiGEk4F6weh3Rpgg_BpIdBpG79wrmoA4sTP2gSze-h5uttAeSvMWwEW12s0_xoYXc-BB3Gjl8DJ1ZPpNCzaM3q9lY/s1600/lat.jpg" height="151" width="320" /></a></div>
<pre class="csharpcode">
</pre>
<pre class="csharpcode">
</pre>
<pre class="csharpcode">
</pre>
<pre class="csharpcode"><!DOCTYPE html>
<html><body>
<canvas id=<span class="str">"myCanvas"</span> width=<span class="str">"320"</span> height=<span class="str">"240"</span> style=<span class="str">"border:1px solid #d3d3d3;"</span>>
Use different browser.
</canvas>
<script>
<span class="kwrd">var</span> c=document.getElementById(<span class="str">"myCanvas"</span>);
<span class="kwrd">var</span> ctx=c.getContext(<span class="str">"2d"</span>);
<span class="kwrd">var</span> mapwidth = 39;
<span class="kwrd">var</span> mapheight = 29;
<span class="kwrd">var</span> tilewidth = 8;
<span class="kwrd">var</span> tileheight = 8;
<span class="kwrd">var</span> map = <span class="kwrd">new</span> Array((mapwidth)*(mapheight));
gameloop=setInterval(doGameLoop,1000);
function doGameLoop(){
makemap();
<span class="kwrd">for</span>(<span class="kwrd">var</span> y=0;y<mapheight;y++){
<span class="kwrd">for</span>(<span class="kwrd">var</span> x=0;x<mapwidth;x++){
c = map[y*mapwidth+x];
<span class="rem">//c=10;</span>
<span class="kwrd">if</span>(c<=5){
ctx.fillStyle=<span class="str">"rgb(0,0,100)"</span>;
}
<span class="kwrd">if</span>(c>5){
ctx.fillStyle=<span class="str">"rgb(0,100,0)"</span>;
}
ctx.fillRect(x*tilewidth,y*tileheight,tilewidth,tileheight);
}
}
}
function makemap(){
<span class="kwrd">for</span>(<span class="kwrd">var</span> i=0;i<mapwidth*mapheight;i++){
map[i]=0;
}
<span class="kwrd">var</span> exitloop = 0;
while(exitloop==0){
x1 = Math.round(Math.random()*mapwidth);
y1 = Math.round(Math.random()*mapheight);
s = Math.round(Math.random()*8)+2;
<span class="kwrd">for</span>(<span class="kwrd">var</span> y2=y1-s/2;y2<y1+s/2;y2++){
<span class="kwrd">for</span>(<span class="kwrd">var</span> x2=x1-s/2;x2<x1+s/2;x2++){
x3 = x1+x2;
y3 = y1+y2;
<span class="kwrd">if</span>(x3>=0 && x3<=mapwidth-1 && y3>=0 && y3<=mapheight-1){
a = map[y3*mapwidth + x3];
map[y3*mapwidth+x3] = a+1;
<span class="kwrd">if</span>(a==15){
exitloop = 1;
}
}
}
}
}
}
</script></body></html></pre>
Pakz001http://www.blogger.com/profile/10537740820223145710noreply@blogger.com0tag:blogger.com,1999:blog-1068224765219529868.post-68056943717930496432014-10-12T15:32:00.000-07:002014-10-12T15:32:00.997-07:00html5 - Drawing a filled circle using for loop example<!-- code formatted by http://manoli.net/csharpformat/ -->
<pre class="csharpcode">I made this filled oval drawing example. In the drawcircle function there are two for loops that go from -radius to radius. In that loop there is a formula that checks if the point is in the radius of the circle and then plots a point.</pre>
<pre class="csharpcode">
</pre>
<pre class="csharpcode">This circle method can be useful for collision detection or drawing filled circles on maps. I found the original code on the java gaming forum.</pre>
<pre class="csharpcode">
</pre>
<pre class="csharpcode">Paste the code in for instance jsexample.com to see it in action.</pre>
<pre class="csharpcode">
</pre>
<pre class="csharpcode"><!DOCTYPE html>
<html><body>
<canvas id=<span class="str">"myCanvas"</span> width=<span class="str">"320"</span> height=<span class="str">"240"</span> style=<span class="str">"border:1px solid #d3d3d3;"</span>>
Use different browser.
</canvas>
<script>
<span class="kwrd">var</span> c=document.getElementById(<span class="str">"myCanvas"</span>);
<span class="kwrd">var</span> ctx=c.getContext(<span class="str">"2d"</span>);
<span class="kwrd">var</span> rx = c.width/2;
<span class="kwrd">var</span> ry = c.height/2;
<span class="kwrd">var</span> rw = 64;
<span class="kwrd">var</span> rh = 64;
<span class="kwrd">var</span> rm = 5;
gameloop=setInterval(doGameLoop,16);
window.addEventListener(<span class="str">"mousemove"</span>,mm,<span class="kwrd">true</span>);
function doGameLoop(){
ctx.clearRect(0,0,c.width,c.height);
drawCircle(rx,ry,10);
}
function mm(evt){
<span class="kwrd">var</span> rect = c.getBoundingClientRect();
rx = evt.clientX - rect.left;
ry = evt.clientY - rect.top;
}
function drawCircle(x1,y1,rad){
<span class="kwrd">for</span>(y2=-rad;y2<=rad;y2++){
<span class="kwrd">for</span>(x2=-rad;x2<=rad;x2++){
<span class="kwrd">if</span>( (y2*y2+x2*x2) <= rad*rad+rad*0.8){
x3 = x1+x2;
y3 = y1+y2;
ctx.fillRect(x3,y3,1,1);
}
}
}
}
</script></body></html></pre>
Pakz001http://www.blogger.com/profile/10537740820223145710noreply@blogger.com0tag:blogger.com,1999:blog-1068224765219529868.post-88995569747638026252014-10-12T13:04:00.003-07:002014-10-12T13:04:57.757-07:00How to run the codeThe code in the blog posts can be copied and pasted in for instance the editor on http://www.jsexample.com/ It will run directly. I myself will be using this editor for the time being until something better comes along.<br />
<br />
An other way to run it is to create a htm file with the code in the posts and then double click to open and run it.Pakz001http://www.blogger.com/profile/10537740820223145710noreply@blogger.com0tag:blogger.com,1999:blog-1068224765219529868.post-25338760192374611592013-06-30T13:19:00.002-07:002013-06-30T13:19:36.989-07:00Drawing a tilemap example<!-- code formatted by http://manoli.net/csharpformat/ -->
<pre class="csharpcode">Below is html5 sourcecode on how to draw a tilemap to the canvas. In the code a 2 dimensional array is used to store a map that is drawn to the screen every 16 milliseconds.</pre>
<pre class="csharpcode">
</pre>
<pre class="csharpcode">
</pre>
<pre class="csharpcode"><!DOCTYPE=html>
<html><body>
<canvas id=<span class="str">"myCanvas"</span> width=<span class="str">"320"</span> height=<span class="str">"240"</span> style=<span class="str">"border:1px solid #d3d3d3;"</span>>
Use different browser.
</canvas>
<script>
<span class="kwrd">var</span> c=document.getElementById(<span class="str">"myCanvas"</span>);
<span class="kwrd">var</span> ctx=c.getContext(<span class="str">"2d"</span>);
<span class="kwrd">var</span> 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],
]
gameloop=setInterval(doGameLoop,16);
function doGameLoop(){
ctx.clearRect(0,0,c.width,c.height);
<span class="kwrd">for</span>(<span class="kwrd">var</span> y = 0; y < map.length; ++y) {
<span class="kwrd">for</span>(<span class="kwrd">var</span> x = 0; x < map[y].length; ++x) {
<span class="kwrd">if</span>(map[y][x]==1) ctx.fillRect(x*16,y*16,16,16);
}
}
ctx.fillText(<span class="str">"Drawing a tilemap example."</span>,10,10);
}
</script></body></html></pre>
Pakz001http://www.blogger.com/profile/10537740820223145710noreply@blogger.com0tag:blogger.com,1999:blog-1068224765219529868.post-14339943175255830472013-03-30T07:56:00.002-07:002013-03-30T07:56:47.676-07:00HTML5 Copperbar example<!-- code formatted by http://manoli.net/csharpformat/ -->
This code below as a html file draws a copperbar in the canvas. A copperbar is a Rainbow like drawing that can be used as a background for games. The for loop i var is used to create the colors. <br />
<br />
<br />
<br />
<pre class="csharpcode"><!DOCTYPE = html>
<html><body>
<canvas id=<span class="str">"myCanvas"</span> width=<span class="str">"320"</span> height=<span class="str">"240"</span> style=<span class="str">"border:1px solid #d3d3d3;"</span>>
Use different browser.
</canvas>
<script>
<span class="kwrd">var</span> c=document.getElementById(<span class="str">"myCanvas"</span>);
<span class="kwrd">var</span> ctx=c.getContext(<span class="str">"2d"</span>);
gameloop=setInterval(doGameLoop,16);
function doGameLoop(){
<span class="kwrd">for</span>(<span class="kwrd">var</span> i=0;i<c.height;i++){
ctx.fillStyle=<span class="str">"rgb("</span>+i+<span class="str">",0,0)"</span>;
ctx.fillRect(0,i,c.width,i);
}
}
</script></body></html></pre>
Pakz001http://www.blogger.com/profile/10537740820223145710noreply@blogger.com0tag:blogger.com,1999:blog-1068224765219529868.post-71698204054853056282013-03-10T15:31:00.003-07:002013-03-10T15:31:53.813-07:00HTML5 Player moving and jumping example<!-- code formatted by http://manoli.net/csharpformat/ -->
<pre class="csharpcode">Below is the sourcecode for a example where a rectangle can be moved with the cursor left and right and jumped with the space bar.
<!DOCTYPE=html>
<html><body>
<canvas id=<span class="str">"myCanvas"</span> width=<span class="str">"320"</span> height=<span class="str">"240"</span> style=<span class="str">"border:1px solid #d3d3d3;"</span>>
Use different browser.
</canvas>
<script>
<span class="kwrd">var</span> c=document.getElementById(<span class="str">"myCanvas"</span>);
<span class="kwrd">var</span> ctx=c.getContext(<span class="str">"2d"</span>);
<span class="kwrd">var</span> px=c.width/2;
<span class="kwrd">var</span> py=c.height/2;
<span class="kwrd">var</span> pw=16;
<span class="kwrd">var</span> ph=16;
<span class="kwrd">var</span> pm=0.0;
<span class="kwrd">var</span> pMoveLeft=<span class="kwrd">false</span>;
<span class="kwrd">var</span> pMoveRight=<span class="kwrd">false</span>;
gameloop=setInterval(doGameLoop,16);
window.addEventListener(<span class="str">"keydown"</span>,kd,<span class="kwrd">true</span>);
window.addEventListener(<span class="str">"keyup"</span>,ku,<span class="kwrd">true</span>);
function doGameLoop(){
ctx.clearRect(0,0,c.width,c.height);
ctx.fillText(<span class="str">"Use arrow keys to move and space to jump."</span>,10,10);
ctx.fillRect(px,py,pw,ph);
playerGravity();
playerMovement();
}
function playerGravity(){
<span class="kwrd">if</span>(!pm==0){
py-=pm;
pm-=0.1;
}
<span class="kwrd">if</span>(pm<-4){
pm=0;
py=c.height/2;
}
}
function playerMovement(){
<span class="kwrd">if</span>(pMoveLeft==<span class="kwrd">true</span>){
<span class="kwrd">if</span>(px>0) px-=1;
}
<span class="kwrd">if</span>(pMoveRight==<span class="kwrd">true</span>){
<span class="kwrd">if</span>(px<c.width-pw) px+=1;
}
}
function kd(evt){
<span class="kwrd">if</span>(evt.keyCode==37) pMoveLeft=<span class="kwrd">true</span>;
<span class="kwrd">if</span>(evt.keyCode==39) pMoveRight=<span class="kwrd">true</span>;
<span class="kwrd">if</span>(evt.keyCode==32){
<span class="kwrd">if</span>(pm==0) pm=4;
}
}
function ku(evt){
<span class="kwrd">if</span>(evt.keyCode==37) pMoveLeft=<span class="kwrd">false</span>;
<span class="kwrd">if</span>(evt.keyCode==39) pMoveRight=<span class="kwrd">false</span>;
}
</script></body></html>
</pre>
Pakz001http://www.blogger.com/profile/10537740820223145710noreply@blogger.com0tag:blogger.com,1999:blog-1068224765219529868.post-7532369677956016682013-03-09T21:17:00.002-08:002013-03-09T21:17:54.299-08:00HTML5 2d starfield example.<!-- code formatted by http://manoli.net/csharpformat/ -->
<pre class="csharpcode">Below is the sourcecode of a 2d starfield in html5 javascript language. There are a 100 stars in the example. Each star is a rectangle. The canvas color is black and the stars are white.</pre>
<pre class="csharpcode">
</pre>
<pre class="csharpcode"><!DOCTYPE=html>
<html><body>
<canvas id=<span class="str">"myCanvas"</span> width=<span class="str">"320"</span> height=<span class="str">"240"</span> style=<span class="str">"border:1px solid #d3d3d3;"</span>>
Use different browser.
</canvas>
<script>
<span class="kwrd">var</span> c=document.getElementById(<span class="str">"myCanvas"</span>);
<span class="kwrd">var</span> ctx=c.getContext(<span class="str">"2d"</span>);
<span class="kwrd">var</span> sx = <span class="kwrd">new</span> Array(100);
<span class="kwrd">var</span> sy = <span class="kwrd">new</span> Array(100);
<span class="kwrd">var</span> ss = <span class="kwrd">new</span> Array(100);
<span class="kwrd">for</span>(i=0;i<sx.length;i++){
sx[i]=Math.round(Math.random()*c.width);
sy[i]=Math.round(Math.random()*c.height);
ss[i]=Math.round(Math.random()*3+1);
}
gameloop=setInterval(doGameLoop,16);
function doGameLoop(){
ctx.fillStyle=<span class="str">"black"</span>;
ctx.fillRect(0,0,c.width,c.height);
<span class="rem">// Draw the stars.</span>
ctx.fillStyle=<span class="str">"white"</span>;
<span class="kwrd">for</span>(i=0;i<sx.length;i++){
ctx.fillRect(sx[i],sy[i],2,2);
}
<span class="rem">// Update the stars position.</span>
<span class="kwrd">for</span>(i=0;i<sx.length;i++){
sx[i]-=ss[i];
<span class="kwrd">if</span>(sx[i]<0) sx[i]=c.width;
}
}
</script></body></html></pre>
Pakz001http://www.blogger.com/profile/10537740820223145710noreply@blogger.com0