oscarryz/flappyCat.html

## flappyCat.html
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">

  <script type="application/javascript">

    function random(inRange) {
        return Math.floor((Math.random()*inRange)+1);
    }

    // constants
    var pipeWidth = 130,
        pipeGap   = 307,
        catWidth  = 60,
        catHeight = 120,
        spi = -1; // current Scoring Pipe Index...

    // game variables
    var score = 0,
        catX = 300,
        catY = 100,
        canvasWidth,
        canvasHeight,
        dead = false,
        pipes = [];

    // Starts the game, initialize all the elements
    // enables the click handler and set initial setInterval
    // to make the game move.
    function start() {
      var canvas = document.getElementById("canvas");
      if (!canvas.getContext) {
        return;
      }

      canvasWidth = canvas.width;
      canvasHeight = canvas.height;

      // create some pipes
      for (var i = 0 ; i < (canvasWidth / 350) ; i++) {
        pipes.push({x: (canvasWidth / 3) + i * 400, y: (canvasHeight/3) + random(canvasHeight-200)});
      }


      doClick = function() {
        if ( dead ) {
          return;
        }
        catY -= 50;
      };

      canvas.addEventListener("click", doClick);
      canvas.addEventListener("tap", doClick);

      setInterval( gameLogic, 16)
      setInterval( drawIt, 8)


    }
    function drawIt() {
      draw(canvas)
    }

    // Contains logic to make the cat fall
    // move the pipes
    // detect collisions
    // and score.
    function gameLogic() {
        if ( dead ) {
          return;
        }


        // make cat fall by n pixels
        catY += 3;

        // move the pipes
        for( var i = 0 ;  i < pipes.length ; i++ ) {
          var p = pipes[i];// current pipe

          // move it a little
          p.x -= 3;

          // if reached the end of the screen re-set it.
          if ( p.x < -300 ) {
            p.x = canvasWidth + pipeWidth;
            p.y = (canvasHeight/3) + random(canvasHeight-200);
          }

          // is flying in a pipe?
          if ( p.x < catX && p.x + pipeWidth > catX ) {
            spi = i; // take the pipe index
          }
          // if has left the pipe then score.
          if ( spi > -1  && pipes[spi].x + pipeWidth < catX ) {
            score++;
            spi = -1;
          }
        }

        // has reached the bottom?
        dead = catY + catHeight > canvasHeight;

        //watch for collisions
        for ( var i = 0 ; i < pipes.length ; i++ ) {
          var p = pipes[i];
          if ( /* top crash     */ p.x < catX && catX < p.x + pipeWidth  && p.y - pipeGap > catY ||
               /* bottom crash */  p.x < catX + catWidth && catX < p.x + pipeWidth && p.y < catY + catHeight ) {
            dead = true
          }

        }
      }

    // draws the current state of the game:
    // the position of the cat
    // the pipes
    // the score
    // background etc.
    function draw(canvas) {
      var ctx = canvas.getContext("2d");

      ctx.clearRect(0,0, canvasWidth, canvasHeight);
      // background
      var top = new Image();
      top.src = 'img/top.png';
      ctx.drawImage(top, 0  , 0);

      var bottom = new Image();
      bottom.src = 'img/bottom.png';
      ctx.drawImage(bottom, 0  , canvasHeight-256);

      // draw the cat
      var cat = new Image();
      cat.src = 'img/flyingCat.gif'
      ctx.drawImage(cat, catX, catY, catWidth, catHeight);

      //draw the pipes
      var pipe = new Image();
      pipe.src = "img/pipe.png";

      var pipeDown = new Image();
      pipeDown.src = "img/pipeDown.png";

      for( var i = 0 ; i < pipes.length ; i++ ) {
        var p = pipes[i];
        ctx.drawImage(pipe, p.x, p.y);
        ctx.drawImage(pipeDown, p.x, p.y-800-pipeGap);
      }
      // Score
      ctx.font = "42px Monaco";
      ctx.fillStyle = '#274675';
      ctx.fillText( score, 50, 100 );

    }


  </script>
  <style type="text/css" media="all">
      canvas {
        border: 1px solid black;
      }
  </style>
  <title>Flappy Cat!</title>

 </head>
 <body onload="start();">
 <canvas id="canvas" width="2400" height="800"></canvas>
 </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8"/>
	<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">

	<script type="application/javascript">

	function random(inRange) {
	return Math.floor((Math.random()*inRange)+1);
	}

	// constants
	var pipeWidth = 130,
	pipeGap = 307,
	catWidth = 60,
	catHeight = 120,
	spi = -1; // current Scoring Pipe Index...

	// game variables
	var score = 0,
	catX = 300,
	catY = 100,
	canvasWidth,
	canvasHeight,
	dead = false,
	pipes = [];

	// Starts the game, initialize all the elements
	// enables the click handler and set initial setInterval
	// to make the game move.
	function start() {
	var canvas = document.getElementById("canvas");
	if (!canvas.getContext) {
	return;
	}

	canvasWidth = canvas.width;
	canvasHeight = canvas.height;

	// create some pipes
	for (var i = 0 ; i < (canvasWidth / 350) ; i++) {
	pipes.push({x: (canvasWidth / 3) + i * 400, y: (canvasHeight/3) + random(canvasHeight-200)});
	}


	doClick = function() {
	if ( dead ) {
	return;
	}
	catY -= 50;
	};

	canvas.addEventListener("click", doClick);
	canvas.addEventListener("tap", doClick);

	setInterval( gameLogic, 16)
	setInterval( drawIt, 8)


	}
	function drawIt() {
	draw(canvas)
	}

	// Contains logic to make the cat fall
	// move the pipes
	// detect collisions
	// and score.
	function gameLogic() {
	if ( dead ) {
	return;
	}


	// make cat fall by n pixels
	catY += 3;

	// move the pipes
	for( var i = 0 ; i < pipes.length ; i++ ) {
	var p = pipes[i];// current pipe

	// move it a little
	p.x -= 3;

	// if reached the end of the screen re-set it.
	if ( p.x < -300 ) {
	p.x = canvasWidth + pipeWidth;
	p.y = (canvasHeight/3) + random(canvasHeight-200);
	}

	// is flying in a pipe?
	if ( p.x < catX && p.x + pipeWidth > catX ) {
	spi = i; // take the pipe index
	}
	// if has left the pipe then score.
	if ( spi > -1 && pipes[spi].x + pipeWidth < catX ) {
	score++;
	spi = -1;
	}
	}

	// has reached the bottom?
	dead = catY + catHeight > canvasHeight;

	//watch for collisions
	for ( var i = 0 ; i < pipes.length ; i++ ) {
	var p = pipes[i];
	if ( /* top crash */ p.x < catX && catX < p.x + pipeWidth && p.y - pipeGap > catY \|\|
	/* bottom crash */ p.x < catX + catWidth && catX < p.x + pipeWidth && p.y < catY + catHeight ) {
	dead = true
	}

	}
	}

	// draws the current state of the game:
	// the position of the cat
	// the pipes
	// the score
	// background etc.
	function draw(canvas) {
	var ctx = canvas.getContext("2d");

	ctx.clearRect(0,0, canvasWidth, canvasHeight);
	// background
	var top = new Image();
	top.src = 'img/top.png';
	ctx.drawImage(top, 0 , 0);

	var bottom = new Image();
	bottom.src = 'img/bottom.png';
	ctx.drawImage(bottom, 0 , canvasHeight-256);

	// draw the cat
	var cat = new Image();
	cat.src = 'img/flyingCat.gif'
	ctx.drawImage(cat, catX, catY, catWidth, catHeight);

	//draw the pipes
	var pipe = new Image();
	pipe.src = "img/pipe.png";

	var pipeDown = new Image();
	pipeDown.src = "img/pipeDown.png";

	for( var i = 0 ; i < pipes.length ; i++ ) {
	var p = pipes[i];
	ctx.drawImage(pipe, p.x, p.y);
	ctx.drawImage(pipeDown, p.x, p.y-800-pipeGap);
	}
	// Score
	ctx.font = "42px Monaco";
	ctx.fillStyle = '#274675';
	ctx.fillText( score, 50, 100 );

	}


	</script>
	<style type="text/css" media="all">
	canvas {
	border: 1px solid black;
	}
	</style>
	<title>Flappy Cat!</title>

	</head>
	<body onload="start();">
	<canvas id="canvas" width="2400" height="800"></canvas>
	</body>
	</html>