Wednesday, October 22, 2014

HTML5 - The Asteroids game - rock making example


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.

The code below is html code. Copy it out and save it as a html file. Or Paste the code for instance in JSexample.



<!DOCTYPE html>
<html><body>
<canvas id="myCanvas" width="320" height="240" style="border:1px solid #d3d3d3;">
Use different browser.
</canvas>
<script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    var apx = new Array(32*32);
    var apy = new Array(32*32);
    var angle = 0;
    var count1 = 0;
    for(i=0;i<32;i++){
        angle=0;
        for(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;
        }
    }
    
    for(y=0;y<240;y=y+64){
        for(x=0;x<320;x=x+64){
            ctx.moveTo(apx[0]+x,apy[0]+y);
            for(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>

Tuesday, October 14, 2014

Html5 generating topdown 2d maps example

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.




<!DOCTYPE html>
<html><body>
<canvas id="myCanvas" width="320" height="240" style="border:1px solid #d3d3d3;">
Use different browser.
</canvas>
<script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    var mapwidth = 39;
    var mapheight = 29;
    var tilewidth = 8;
    var tileheight = 8;
    var map = new Array((mapwidth)*(mapheight));
    gameloop=setInterval(doGameLoop,1000);
    function doGameLoop(){
        makemap();
        for(var y=0;y<mapheight;y++){
        for(var x=0;x<mapwidth;x++){
            c = map[y*mapwidth+x];
            //c=10;
            if(c<=5){
                ctx.fillStyle="rgb(0,0,100)";
            }
            if(c>5){
                ctx.fillStyle="rgb(0,100,0)";
            }
            ctx.fillRect(x*tilewidth,y*tileheight,tilewidth,tileheight);
        }
        }
    }
    function makemap(){
        for(var i=0;i<mapwidth*mapheight;i++){
            map[i]=0;
        }
        var exitloop = 0;
        while(exitloop==0){
            x1 = Math.round(Math.random()*mapwidth);
            y1 = Math.round(Math.random()*mapheight);
            s = Math.round(Math.random()*8)+2;
            for(var y2=y1-s/2;y2<y1+s/2;y2++){
            for(var x2=x1-s/2;x2<x1+s/2;x2++){
                x3 = x1+x2;
                y3 = y1+y2;
                if(x3>=0 && x3<=mapwidth-1 && y3>=0 && y3<=mapheight-1){
                    a = map[y3*mapwidth + x3];
                    map[y3*mapwidth+x3] = a+1;
                    if(a==15){
                        exitloop = 1;
                    }
                }
            }
            }
        }

    }

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

Sunday, October 12, 2014

html5 - Drawing a filled circle using for loop example

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.

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.

Paste the code in for instance jsexample.com to see it in action.

<!DOCTYPE html>
<html><body>
<canvas id="myCanvas" width="320" height="240" style="border:1px solid #d3d3d3;">
Use different browser.
</canvas>
<script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    var rx = c.width/2;
    var ry = c.height/2;
    var rw = 64;
    var rh = 64;
    var rm = 5;
    gameloop=setInterval(doGameLoop,16);
    window.addEventListener("mousemove",mm,true);
    function doGameLoop(){
        ctx.clearRect(0,0,c.width,c.height);
        drawCircle(rx,ry,10);
    }
    function mm(evt){
        var rect = c.getBoundingClientRect();
        rx = evt.clientX - rect.left;
        ry = evt.clientY - rect.top;
    }
    function drawCircle(x1,y1,rad){
        for(y2=-rad;y2<=rad;y2++){
        for(x2=-rad;x2<=rad;x2++){
            if( (y2*y2+x2*x2) <= rad*rad+rad*0.8){
                x3 = x1+x2;
                y3 = y1+y2;
                ctx.fillRect(x3,y3,1,1);
            }
        }
        }
     }
</script></body></html>

How to run the code

The 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.

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.