webproject


<!DOCTYPE html>

<html>
<head>
  <title>HTML Canvas</title>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="/static/drawlib04.js"></script>
</head>
<body>
    <canvas id="canvas" width="400" height="400" style="border:5px solid;">
    </canvas>

    <script>

    var x = 25;
    var y = 250;
    var x2 = 15;
    var y2 = 250;
    var dx = 1.5;
    var dy = -4;
    var dx2 = 1.5;
    var dy2 = -3;
    var bricks;
    var NROWS;
    var NCOLS;
    var BRICKWIDTH;
    var BRICKHEIGHT;
    var PADDING;
    var Score=0;
    var Text=0;
    var ball=0;


    function initbricks()
    {
        NROWS = 5;
        NCOLS = 5;
        BRICKWIDTH = (WIDTH/NCOLS) - 1;
        BRICKHEIGHT = 15;
        PADDING = 1;

        bricks = new Array(NROWS);
        for (i=0; i < NROWS; i++)
        {
            bricks[i] = new Array(NCOLS);
            for (j=0; j < NCOLS; j++)
            {
                bricks[i][j] = 1;
            }
        }
    }

    function draw()
    {
        clear();
        circle(x, y, 10);
        circle(x2, y2, 10);
        if (rightDown)
            paddlex += 5;
        else if (leftDown)
            paddlex -= 5;
        rect(paddlex, HEIGHT-paddleh, paddlew, paddleh);

    //draw bricks
        for (i=0; i < NROWS; i++)
        {
            for (j=0; j < NCOLS; j++)
            {
                if (bricks[i][j] == 1)
                {
                    rect((j * (BRICKWIDTH + PADDING)) + PADDING,
                    (i * (BRICKHEIGHT + PADDING)) + PADDING,
                    BRICKWIDTH, BRICKHEIGHT);
                }
            }
        }

        //have we hit a brick?
        rowheight = BRICKHEIGHT + PADDING;
        colwidth = BRICKWIDTH + PADDING;
        row = Math.floor(y/rowheight);
        col = Math.floor(x/colwidth);
        //if so, reverse the ball and mark the brick as broken
        if (y < NROWS * rowheight && row >= 0 && col >= 0 && bricks[row][col] == 1)
        {
            dy = -dy;
            bricks[row][col] = 0;
            Score+=10
            text = Score;
            document.getElementById("demo").innerHTML = text;
        }

        if (x + dx > WIDTH || x + dx < 0)
        {
            dx = -dx;
        }

        if (y + dy < 0)
        {
            dy = -dy;
        }
        else if (y + dy > HEIGHT)
        {
            if (x > paddlex && x < paddlex + paddlew)
            {
                dy = -dy;
            }
            else
            {
        ball=1;
            }
        }

        x += dx;
        y += dy;


        rowheight2 = BRICKHEIGHT + PADDING;
        colwidth2 = BRICKWIDTH + PADDING;
        row2 = Math.floor(y2/rowheight);
        col2 = Math.floor(x2/colwidth);
        //if so, reverse the ball and mark the brick as broken
        if (y2 < NROWS * rowheight && row2 >= 0 && col2 >= 0 && bricks[row2][col2] == 1)
        {
            dy2 = -dy2;
            bricks[row2][col2] = 0;
            Score+=10
            text = Score;
            document.getElementById("demo").innerHTML = text;
        }

        if (x2 + dx2 > WIDTH || x2 + dx2 < 0)
        {
            dx2 = -dx2;
        }
        if (y2 + dy2 < 0)
        {
            dy2 = -dy2;
        }
        else if (y2 + dy2 > HEIGHT)
        {
            if (x2 > paddlex && x < paddlex + paddlew)
            {
                dy2 = -dy2;
            }
            else
            {

        ball=1;
            }
        }

           x2 += dx2;
           y2 += dy2;
        if(ball==1 )
        {
            clearInterval(intervalId);
        clear();

        }

    }


  init();
  initbricks();


  </script>
<br>
<a>Score :</a>
<a id="demo">0</a><br>
<input type=button value="Refresh" onClick="javascript:location.reload();"><br>
<form id="data_form" method="post" >

            <input type='hidden' name='csrfmiddlewaretoken' value='i6UdSPFPPIwPhkHNOK99USAUp68vni6d' />


                <input id="id_hightscore" name="hightscore" type="hidden" value="0" />


                Please enter name.
                <input id="id_name" maxlength="128" name="name" type="text" />

            <id "id_hightscore"=id "demo">
        <a id="id_name">0</a><br>
            <input type="submit" name="submit" value="Add name" />

        </form>


    </body>
</html>