josephg/coolgame.html

## coolgame.html
<!DOCTYPE html>
<title>Cool game</title>
<style>
.centerbox {
  /* flexbox, por favor */
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;
  margin: 0; padding: 0;
}
body, html { width: 100%; height: 100%; padding: 0; margin: 0; }
.centerbox canvas {
  border-radius: 30px;
  box-shadow: 0 0 10px #777;
  width: 800px;
  height: 600px;
}

body {
  background-color: #eee;
}
</style>
<div class='centerbox'><canvas></canvas></div>

<script>

var canvas = document.getElementsByTagName('canvas')[0];
var ctx = canvas.getContext('2d');

var width = canvas.width = canvas.clientWidth;
var height = canvas.height = canvas.clientHeight;


var mouse = {x:0, y:0};


var x = 0;

var cat = new Image();
cat.src = 'http://placekitten.com/200/300';


canvas.onmousedown = function(e) {
  console.log('click!');
};

canvas.onmousemove = function(e) {
  mouse.x = e.offsetX;
  mouse.y = e.offsetY;
};


var draw = function() {
  requestAnimationFrame(draw);

  // You should edit this.
  ctx.fillStyle = 'black';
  ctx.fillRect(0, 0, width, height);

  ctx.drawImage(cat, 200, 200);

  ctx.strokeStyle = 'white';
  ctx.strokeRect(mouse.x, mouse.y, 100, 100);

  // Text
  ctx.fillStyle = 'rgb(255,0,0)';
  ctx.font = 'bold 18px Helvetica';
  ctx.fillText('Hi!', x, 100);
  x = x + 1;

  // Line
  ctx.beginPath()
  ctx.moveTo(0,0);
  ctx.lineTo(mouse.x, mouse.y);
  ctx.stroke();

};

draw();


</script>
	<!DOCTYPE html>
	<title>Cool game</title>
	<style>
	.centerbox {
	/* flexbox, por favor */
	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	height: 100%;
	margin: 0; padding: 0;
	}
	body, html { width: 100%; height: 100%; padding: 0; margin: 0; }
	.centerbox canvas {
	border-radius: 30px;
	box-shadow: 0 0 10px #777;
	width: 800px;
	height: 600px;
	}

	body {
	background-color: #eee;
	}
	</style>
	<div class='centerbox'><canvas></canvas></div>

	<script>

	var canvas = document.getElementsByTagName('canvas')[0];
	var ctx = canvas.getContext('2d');

	var width = canvas.width = canvas.clientWidth;
	var height = canvas.height = canvas.clientHeight;




	var mouse = {x:0, y:0};


	var x = 0;

	var cat = new Image();
	cat.src = 'http://placekitten.com/200/300';


	canvas.onmousedown = function(e) {
	console.log('click!');
	};

	canvas.onmousemove = function(e) {
	mouse.x = e.offsetX;
	mouse.y = e.offsetY;
	};


	var draw = function() {
	requestAnimationFrame(draw);

	// You should edit this.
	ctx.fillStyle = 'black';
	ctx.fillRect(0, 0, width, height);

	ctx.drawImage(cat, 200, 200);

	ctx.strokeStyle = 'white';
	ctx.strokeRect(mouse.x, mouse.y, 100, 100);

	// Text
	ctx.fillStyle = 'rgb(255,0,0)';
	ctx.font = 'bold 18px Helvetica';
	ctx.fillText('Hi!', x, 100);
	x = x + 1;

	// Line
	ctx.beginPath()
	ctx.moveTo(0,0);
	ctx.lineTo(mouse.x, mouse.y);
	ctx.stroke();

	};

	draw();


	</script>