hrendoh/2d Breakout Game with PoseNet

## 2d Breakout Game with PoseNet
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Gamedev Canvas Workshop - lesson 10: finishing up</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    canvas {
      background: #eee;
      display: block;
      margin: 0 auto;
    }

    #webacamCanvas {
      transform: rotateY(180deg);
    }
  </style>
  <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
  <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/posenet"></script>
</head>

<body>

  <canvas id="myCanvas" width="480" height="320"></canvas>
  <canvas id="webacamCanvas" width="480" height="320"></canvas>
  <video id="video" width="480" height="320" style="display:none;" autoplay playsinline>Video stream not
    available.</video>
  <div id="loading-indicator">PoseNet model is loading.</div>

  <script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    var webacamCanvas = document.getElementById("webacamCanvas");
    var webcamCtx = webacamCanvas.getContext("2d");
    var video = document.getElementById('video');
    var ballRadius = 10;
    var x = canvas.width / 2;
    var y = canvas.height - 30;
    var dx = 2;
    var dy = -2;
    var paddleHeight = 10;
    var paddleWidth = 75;
    var paddleX = (canvas.width - paddleWidth) / 2;
    var rightPressed = false;
    var leftPressed = false;
    var brickRowCount = 5;
    var brickColumnCount = 3;
    var brickWidth = 75;
    var brickHeight = 20;
    var brickPadding = 10;
    var brickOffsetTop = 30;
    var brickOffsetLeft = 30;
    var score = 0;
    var lives = 3;

    var bricks = [];
    for (var c = 0; c < brickColumnCount; c++) {
      bricks[c] = [];
      for (var r = 0; r < brickRowCount; r++) {
        bricks[c][r] = { x: 0, y: 0, status: 1 };
      }
    }

    document.addEventListener("keydown", keyDownHandler, false);
    document.addEventListener("keyup", keyUpHandler, false);
    document.addEventListener("mousemove", mouseMoveHandler, false);

    function keyDownHandler(e) {
      if (e.keyCode == 39) {
        rightPressed = true;
      }
      else if (e.keyCode == 37) {
        leftPressed = true;
      }
    }
    function keyUpHandler(e) {
      if (e.keyCode == 39) {
        rightPressed = false;
      }
      else if (e.keyCode == 37) {
        leftPressed = false;
      }
    }
    function mouseMoveHandler(e) {
      var relativeX = e.clientX - canvas.offsetLeft;
      if (relativeX > 0 && relativeX < canvas.width) {
        paddleX = relativeX - paddleWidth / 2;
      }
    }
    function collisionDetection() {
      for (var c = 0; c < brickColumnCount; c++) {
        for (var r = 0; r < brickRowCount; r++) {
          var b = bricks[c][r];
          if (b.status == 1) {
            if (x > b.x && x < b.x + brickWidth && y > b.y && y < b.y + brickHeight) {
              dy = -dy;
              b.status = 0;
              score++;
              if (score == brickRowCount * brickColumnCount) {
                alert("YOU WIN, CONGRATS!");
                document.location.reload();
              }
            }
          }
        }
      }
    }

    function drawBall() {
      ctx.beginPath();
      ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
      ctx.fillStyle = "#0095DD";
      ctx.fill();
      ctx.closePath();
    }
    function drawPaddle() {
      ctx.beginPath();
      ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
      ctx.fillStyle = "#0095DD";
      ctx.fill();
      ctx.closePath();
    }
    function drawBricks() {
      for (var c = 0; c < brickColumnCount; c++) {
        for (var r = 0; r < brickRowCount; r++) {
          if (bricks[c][r].status == 1) {
            var brickX = (r * (brickWidth + brickPadding)) + brickOffsetLeft;
            var brickY = (c * (brickHeight + brickPadding)) + brickOffsetTop;
            bricks[c][r].x = brickX;
            bricks[c][r].y = brickY;
            ctx.beginPath();
            ctx.rect(brickX, brickY, brickWidth, brickHeight);
            ctx.fillStyle = "#0095DD";
            ctx.fill();
            ctx.closePath();
          }
        }
      }
    }
    function drawScore() {
      ctx.font = "16px Arial";
      ctx.fillStyle = "#0095DD";
      ctx.fillText("Score: " + score, 8, 20);
    }
    function drawLives() {
      ctx.font = "16px Arial";
      ctx.fillStyle = "#0095DD";
      ctx.fillText("Lives: " + lives, canvas.width - 65, 20);
    }

    function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      drawBricks();
      drawBall();
      drawPaddle();
      drawScore();
      drawLives();
      collisionDetection();

      if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
        dx = -dx;
      }
      if (y + dy < ballRadius) {
        dy = -dy;
      }
      else if (y + dy > canvas.height - ballRadius) {
        if (x > paddleX && x < paddleX + paddleWidth) {
          dy = -dy;
        }
        else {
          lives--;
          if (!lives) {
            alert("GAME OVER");
            document.location.reload();
          }
          else {
            x = canvas.width / 2;
            y = canvas.height - 30;
            dx = 3;
            dy = -3;
            paddleX = (canvas.width - paddleWidth) / 2;
          }
        }
      }

      if (rightPressed && paddleX < canvas.width - paddleWidth) {
        paddleX += 7;
      }
      else if (leftPressed && paddleX > 0) {
        paddleX -= 7;
      }

      x += dx;
      y += dy;
      requestAnimationFrame(draw);
    }


    function detectAndDraw(net) {
      webcamCtx.drawImage(video, 0, 0, 480, 320);

      net
        .estimateSinglePose(video, {
          flipHorizontal: false
        })
        .then(function (pose) {
          movePaddleXByNose(pose);
          drawKeypoints(pose);
        });
    }

    function drawKeypoints(pose) {
      for (let j = 0; j < pose.keypoints.length; j++) {
        // A keypoint is an object describing a body part (like rightArm or leftShoulder)
        let keypoint = pose.keypoints[j];
        // Only draw an ellipse is the pose probability is bigger than 0.2
        if (keypoint.score > 0.2) {
          webcamCtx.beginPath();
          webcamCtx.fillStyle = "rgb(255, 255, 0)"; // 緑
          webcamCtx.arc(
            keypoint.position.x,
            keypoint.position.y,
            5,
            (10 * Math.PI) / 180,
            (80 * Math.PI) / 180,
            true
          );
          webcamCtx.fill();
          webcamCtx.fillText(
            keypoint.part,
            keypoint.position.x,
            keypoint.position.y + 10
          );
        }
      }
    }

    function movePaddleXByNose(pose) {
      for (let j = 0; j < pose.keypoints.length; j++) {
        let keypoint = pose.keypoints[j];
        if (keypoint.part === 'nose') {
          console.log(keypoint.position.x);
          paddleX = 480 - keypoint.position.x - paddleWidth / 2;
        }
      }
    }

    navigator.mediaDevices.getUserMedia({ audio: false, video: true })
      .then(function (mediaStream) {
        // videoタグのsrcObjectにセット
        video.srcObject = mediaStream;
        video.onloadedmetadata = function (e) {
          video.play();
        };

        return posenet.load();
      })
      .then(function (net) {
        var loadingIndicator = document.getElementById("loading-indicator");
        loadingIndicator.style.display = 'none';

        setInterval(function () { detectAndDraw(net); }, 100);

        draw();
      })
      .catch(function (err) {
        console.log("An error occured! " + err);
      });
  </script>

</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8" />
	<title>Gamedev Canvas Workshop - lesson 10: finishing up</title>
	<style>
	* {
	padding: 0;
	margin: 0;
	}

	canvas {
	background: #eee;
	display: block;
	margin: 0 auto;
	}

	#webacamCanvas {
	transform: rotateY(180deg);
	}
	</style>
	<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
	<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/posenet"></script>
	</head>

	<body>

	<canvas id="myCanvas" width="480" height="320"></canvas>
	<canvas id="webacamCanvas" width="480" height="320"></canvas>
	<video id="video" width="480" height="320" style="display:none;" autoplay playsinline>Video stream not
	available.</video>
	<div id="loading-indicator">PoseNet model is loading.</div>

	<script>
	var canvas = document.getElementById("myCanvas");
	var ctx = canvas.getContext("2d");
	var webacamCanvas = document.getElementById("webacamCanvas");
	var webcamCtx = webacamCanvas.getContext("2d");
	var video = document.getElementById('video');
	var ballRadius = 10;
	var x = canvas.width / 2;
	var y = canvas.height - 30;
	var dx = 2;
	var dy = -2;
	var paddleHeight = 10;
	var paddleWidth = 75;
	var paddleX = (canvas.width - paddleWidth) / 2;
	var rightPressed = false;
	var leftPressed = false;
	var brickRowCount = 5;
	var brickColumnCount = 3;
	var brickWidth = 75;
	var brickHeight = 20;
	var brickPadding = 10;
	var brickOffsetTop = 30;
	var brickOffsetLeft = 30;
	var score = 0;
	var lives = 3;

	var bricks = [];
	for (var c = 0; c < brickColumnCount; c++) {
	bricks[c] = [];
	for (var r = 0; r < brickRowCount; r++) {
	bricks[c][r] = { x: 0, y: 0, status: 1 };
	}
	}

	document.addEventListener("keydown", keyDownHandler, false);
	document.addEventListener("keyup", keyUpHandler, false);
	document.addEventListener("mousemove", mouseMoveHandler, false);

	function keyDownHandler(e) {
	if (e.keyCode == 39) {
	rightPressed = true;
	}
	else if (e.keyCode == 37) {
	leftPressed = true;
	}
	}
	function keyUpHandler(e) {
	if (e.keyCode == 39) {
	rightPressed = false;
	}
	else if (e.keyCode == 37) {
	leftPressed = false;
	}
	}
	function mouseMoveHandler(e) {
	var relativeX = e.clientX - canvas.offsetLeft;
	if (relativeX > 0 && relativeX < canvas.width) {
	paddleX = relativeX - paddleWidth / 2;
	}
	}
	function collisionDetection() {
	for (var c = 0; c < brickColumnCount; c++) {
	for (var r = 0; r < brickRowCount; r++) {
	var b = bricks[c][r];
	if (b.status == 1) {
	if (x > b.x && x < b.x + brickWidth && y > b.y && y < b.y + brickHeight) {
	dy = -dy;
	b.status = 0;
	score++;
	if (score == brickRowCount * brickColumnCount) {
	alert("YOU WIN, CONGRATS!");
	document.location.reload();
	}
	}
	}
	}
	}
	}

	function drawBall() {
	ctx.beginPath();
	ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
	ctx.fillStyle = "#0095DD";
	ctx.fill();
	ctx.closePath();
	}
	function drawPaddle() {
	ctx.beginPath();
	ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
	ctx.fillStyle = "#0095DD";
	ctx.fill();
	ctx.closePath();
	}
	function drawBricks() {
	for (var c = 0; c < brickColumnCount; c++) {
	for (var r = 0; r < brickRowCount; r++) {
	if (bricks[c][r].status == 1) {
	var brickX = (r * (brickWidth + brickPadding)) + brickOffsetLeft;
	var brickY = (c * (brickHeight + brickPadding)) + brickOffsetTop;
	bricks[c][r].x = brickX;
	bricks[c][r].y = brickY;
	ctx.beginPath();
	ctx.rect(brickX, brickY, brickWidth, brickHeight);
	ctx.fillStyle = "#0095DD";
	ctx.fill();
	ctx.closePath();
	}
	}
	}
	}
	function drawScore() {
	ctx.font = "16px Arial";
	ctx.fillStyle = "#0095DD";
	ctx.fillText("Score: " + score, 8, 20);
	}
	function drawLives() {
	ctx.font = "16px Arial";
	ctx.fillStyle = "#0095DD";
	ctx.fillText("Lives: " + lives, canvas.width - 65, 20);
	}

	function draw() {
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	drawBricks();
	drawBall();
	drawPaddle();
	drawScore();
	drawLives();
	collisionDetection();

	if (x + dx > canvas.width - ballRadius \|\| x + dx < ballRadius) {
	dx = -dx;
	}
	if (y + dy < ballRadius) {
	dy = -dy;
	}
	else if (y + dy > canvas.height - ballRadius) {
	if (x > paddleX && x < paddleX + paddleWidth) {
	dy = -dy;
	}
	else {
	lives--;
	if (!lives) {
	alert("GAME OVER");
	document.location.reload();
	}
	else {
	x = canvas.width / 2;
	y = canvas.height - 30;
	dx = 3;
	dy = -3;
	paddleX = (canvas.width - paddleWidth) / 2;
	}
	}
	}

	if (rightPressed && paddleX < canvas.width - paddleWidth) {
	paddleX += 7;
	}
	else if (leftPressed && paddleX > 0) {
	paddleX -= 7;
	}

	x += dx;
	y += dy;
	requestAnimationFrame(draw);
	}


	function detectAndDraw(net) {
	webcamCtx.drawImage(video, 0, 0, 480, 320);

	net
	.estimateSinglePose(video, {
	flipHorizontal: false
	})
	.then(function (pose) {
	movePaddleXByNose(pose);
	drawKeypoints(pose);
	});
	}

	function drawKeypoints(pose) {
	for (let j = 0; j < pose.keypoints.length; j++) {
	// A keypoint is an object describing a body part (like rightArm or leftShoulder)
	let keypoint = pose.keypoints[j];
	// Only draw an ellipse is the pose probability is bigger than 0.2
	if (keypoint.score > 0.2) {
	webcamCtx.beginPath();
	webcamCtx.fillStyle = "rgb(255, 255, 0)"; // 緑
	webcamCtx.arc(
	keypoint.position.x,
	keypoint.position.y,
	5,
	(10 * Math.PI) / 180,
	(80 * Math.PI) / 180,
	true
	);
	webcamCtx.fill();
	webcamCtx.fillText(
	keypoint.part,
	keypoint.position.x,
	keypoint.position.y + 10
	);
	}
	}
	}

	function movePaddleXByNose(pose) {
	for (let j = 0; j < pose.keypoints.length; j++) {
	let keypoint = pose.keypoints[j];
	if (keypoint.part === 'nose') {
	console.log(keypoint.position.x);
	paddleX = 480 - keypoint.position.x - paddleWidth / 2;
	}
	}
	}

	navigator.mediaDevices.getUserMedia({ audio: false, video: true })
	.then(function (mediaStream) {
	// videoタグのsrcObjectにセット
	video.srcObject = mediaStream;
	video.onloadedmetadata = function (e) {
	video.play();
	};

	return posenet.load();
	})
	.then(function (net) {
	var loadingIndicator = document.getElementById("loading-indicator");
	loadingIndicator.style.display = 'none';

	setInterval(function () { detectAndDraw(net); }, 100);

	draw();
	})
	.catch(function (err) {
	console.log("An error occured! " + err);
	});
	</script>

	</body>

	</html>