Flipper

<?xml version="1.0" encoding="utf-8"?>
<ztmstudio>
   <ztml>
     <lang>
       <fr>
         <title><![CDATA[flipper]]>
</title>
         <srchlp><![CDATA[<DIV><b>flipper</b></DIV>
<DIV>Utilisation de timer </DIV>
<DIV><a href=http://billmill.org/static/canvastutorial/mouse.html>Copyright</a> </DIV>
]]>
</srchlp>
</fr>
       <en>
         <title><![CDATA[flipper]]>
</title>
         <srchlp><![CDATA[<DIV><b>flipper </b></DIV>
<DIV>Using timer</DIV>
<DIV><a href=http://billmill.org/static/canvastutorial/mouse.html>Copyright</a> </DIV>
]]>
</srchlp>
</en>
</lang>
</ztml>
   <html>
     <head><![CDATA[<title>Flipper</title>
  <meta charset="utf-8" />
  <meta name="viewport" id="viewport" content="width=device-width, user-scalable=no" />
<link rel="stylesheet" href="https://ztmstudio.com/ZTmOs.css" type="text/css" media="screen"/>  
  <link rel="icon" href="Icon/ztmos.png" type="image/x-icon"/>
  <script type="text/javascript" src="https://ztmstudio.com/ZTmStudio.js"></script>
  ]]>
       <style><![CDATA[.ZTmHorloge{font-size : 24px;background-color:black;color:red;text-align:center;}]]>
</style>
       <script><![CDATA[function ZTm(){	
document.onclick=call;	
  x = 130;
 y = 150;
 dx = 2;
 dy = 4;

paddleh = 10;
 paddlew = 250;
 rightDown = false;
 leftDown = false;
 canvasMinX = 0;
 canvasMaxX = 0;
 intervalId = 0;
 ballr = 10;
 rowcolors = ["#FF1C0A", "#FFFD0A", "#00A308", "#0008DB", "#EB0093"];
 paddlecolor = "#FFFFFF";
 ballcolor = "#FFFFFF";
 backcolor = "#000000";
init();
init_mouse();initbricks();
document.onmousemove=onMouseMove;
document.onkeydown=onKeyDown;
document.onkeyup=onKeyUp;
 canvasMinX;
 canvasMaxX;
}
call =function (event)	{
	 div=ZTmEvent(event).target;
	if (event.type =='click' && div.nodeName=='TD'){if(/ztmtitle/.test(div.className)) {ZTmHlp();return;}}
	if (event.type =='click'&& div.nodeName=='IMG')  
	{
	if(/window-x/.test(div.src)){clear();}
	
	if(/window-task/.test(div.src)) {ZTmcreTasks();}	
	}

}

function init_mouse() {
  canvasMinX = can.offsetLeft;
  canvasMaxX = canvasMinX + WIDTH;
}

function onMouseMove(evt) {
  if (evt.pageX > canvasMinX && evt.pageX < canvasMaxX) {
    paddlex = evt.pageX - canvasMinX;
  }
}     
function draw() {
    clear();
  circle(x, y, 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;
  }
 
  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
      clearInterval(intervalId);
  }
 
  x += dx;
  y += dy;
}

function circle(x,y,r) {
  ctx.beginPath();
  ctx.arc(x, y, r, 0, Math.PI*2, true);
  ctx.closePath();
  ctx.fill();
}

function rect(x,y,w,h) {
  ctx.beginPath();
  ctx.rect(x,y,w,h);
  ctx.closePath();
  ctx.fill();
}

function clear() {
  ctx.clearRect(0, 0, WIDTH, HEIGHT);
}

function onKeyDown(evt) {
  if (evt.keyCode == 39) rightDown = true;
  else if (evt.keyCode == 37) leftDown = true;
}

function onKeyUp(evt) {
  if (evt.keyCode == 39) rightDown = false;
  else if (evt.keyCode == 37) leftDown = false;
}
function init() {
can = ZTmCln('CANVAS','canvas');
  ctx = can.getContext("2d");
  WIDTH = can.width;
  HEIGHT = can.height
  paddlex = WIDTH / 2;
  canvasMinX = can.style.offsetLeft;
  canvasMaxX = canvasMinX + WIDTH;
  intervalId = setInterval(draw, 10);
  return intervalId;
}

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;
    }
  }
}]]>
</script>
</head>
     <body onload="ZTm();"><![CDATA[<canvas class=canvas width=250 height=400></canvas>
	]]>
</body>
</html>
</ztmstudio>