jweinst1/full_canvas_gravity_game.html

## full_canvas_gravity_game.html
<!DOCTYPE html>
<html>
<head>
	<title>Runner Game</title>
    <style>
    	canvas { background: #eee;
                 display: block;
                 margin: 0 auto;
               }
    </style>
</head>
<body>

<h1>My First Game</h1>
<p>Text goes here.</p>
<p id="coords">The coords go here</p>
<canvas id="myCanvas" width="512" height="512"></canvas>

<script type="text/javascript">
var canvasX = 512;
var canvasY = 512;
var canvasTileSize = 16;
var clickedState = false;
var posY = 0;
var posX = 0;
var clickY = 0;
var clickX = 0;
var velocY = 1;
var velocX = 1;
var maxVelocY = 10;
var minVelocY = -10;
var maxVelocX = 10;
var minVelocX = -10;
var accY = 0.5;
var accX = 0.005;
var charSizeX = 30;
var charSizeY = 30;
var groundLine = 400;

function determineClickedSq(x, y) {
  var roundedX = Math.round(x / canvasTileSize);
  var roundedY = Math.round(y / canvasTileSize);
  return (roundedY * canvasTileSize) + roundedX;
}


var npcObjects = [];

function createNPC(width, length, speed, height) {
  npcObjects.push({"width":width,
                   "length":length,
                   "speed":speed,
                   "posX":canvasX,
                   "posY":groundLine - height});
}

function updateNPCs() {
  var doneObjects = [];
  for (var i = npcObjects.length - 1; i >= 0; i--) {
     if ((npcObjects[i].posX + npcObjects[i].length) < 0) {
        doneObjects.push(i);
     } else {
       npcObjects[i].posX -= npcObjects[i].speed;
    }
  }
  for (var i = doneObjects.length - 1; i >= 0; i--) {
    npcObjects.splice(doneObjects[i], 1);
  }
}

function drawNPCs(ctx) {
  for (var i = npcObjects.length - 1; i >= 0; i--) {
    ctx.fillRect(npcObjects[i].posX,
                 npcObjects[i].posY,
                 npcObjects[i].width,
                 npcObjects[i].length);
  }
}

document.getElementById("myCanvas").addEventListener("click", function (e){
	clickY = e.offsetY;
	clickX = e.offsetX;
  clickedState = true;
});

function initScenery() {
  var ctx = document.getElementById('myCanvas').getContext('2d');
  ctx.fillStyle = "green";
  ctx.fillRect(0, groundLine, canvasX, canvasY - groundLine);
  ctx.fillStyle = "black";
}

function init() {
  initScenery();
  createNPC(20, 5, 5, 40);
  createNPC(40, 20, 3, 80);
  // game starting point.
  posX = 210;
  posY = 300;
  window.requestAnimationFrame(draw);
}

var lastDrewChar = Date.now();


function collideCheck() {
  var colliders = [];
  var startX = posX;
  var endX = posX + charSizeX;
  var startY = posY;
  var endY = posY + charSizeY;
  for (var i = npcObjects.length - 1; i >= 0; i--) {
     if (npcObjects[i].posX > startX &&
         npcObjects[i].posX <= endX &&
         npcObjects[i].posY > startY &&
         npcObjects[i].posY <= endY) {
        colliders.push(npcObjects[i]);
     }
  }
  return colliders;
}


function updateChar() {
  if (clickedState) {
    velocY = -10;
  }
  // updating logic
  //velocX = velocX  + accX;
  if ((posY + charSizeY + velocY) <= groundLine) {
    velocY = velocY + accY;
    posY = posY + velocY;
  } else {
    posY = groundLine - charSizeY - 1;
  }
  // *for now* posX = posX + velocX;
  clickedState = false;
}


function drawChar(ctx) {
  document.getElementById("coords").innerHTML = "X is " + clickX.toString() + " Y is " + clickY.toString();
  ctx.fillRect(posX, posY, charSizeX, charSizeY);
}

function draw() {
  var curTime = Date.now();
  if ((curTime - lastDrewChar) <= 50) {
    window.requestAnimationFrame(draw);
    return;
  }
  var ctx = document.getElementById('myCanvas').getContext('2d');
  ctx.clearRect(0, 0, canvasX, groundLine); // clear canvas
  updateNPCs();
  updateChar();
  drawChar(ctx);
  drawNPCs(ctx);
  lastDrewChar = curTime;
  if (collideCheck().length > 0) {
      ctx.clearRect(0, 0, canvasX, canvasY);
      ctx.font = "48px serif"
      ctx.fillText("Game Over", 150, 150);
      return;
  }
  window.requestAnimationFrame(draw);
}

init();

</script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Runner Game</title>
	<style>
	canvas { background: #eee;
	display: block;
	margin: 0 auto;
	}
	</style>
	</head>
	<body>

	<h1>My First Game</h1>
	<p>Text goes here.</p>
	<p id="coords">The coords go here</p>
	<canvas id="myCanvas" width="512" height="512"></canvas>

	<script type="text/javascript">
	var canvasX = 512;
	var canvasY = 512;
	var canvasTileSize = 16;
	var clickedState = false;
	var posY = 0;
	var posX = 0;
	var clickY = 0;
	var clickX = 0;
	var velocY = 1;
	var velocX = 1;
	var maxVelocY = 10;
	var minVelocY = -10;
	var maxVelocX = 10;
	var minVelocX = -10;
	var accY = 0.5;
	var accX = 0.005;
	var charSizeX = 30;
	var charSizeY = 30;
	var groundLine = 400;

	function determineClickedSq(x, y) {
	var roundedX = Math.round(x / canvasTileSize);
	var roundedY = Math.round(y / canvasTileSize);
	return (roundedY * canvasTileSize) + roundedX;
	}


	var npcObjects = [];

	function createNPC(width, length, speed, height) {
	npcObjects.push({"width":width,
	"length":length,
	"speed":speed,
	"posX":canvasX,
	"posY":groundLine - height});
	}

	function updateNPCs() {
	var doneObjects = [];
	for (var i = npcObjects.length - 1; i >= 0; i--) {
	if ((npcObjects[i].posX + npcObjects[i].length) < 0) {
	doneObjects.push(i);
	} else {
	npcObjects[i].posX -= npcObjects[i].speed;
	}
	}
	for (var i = doneObjects.length - 1; i >= 0; i--) {
	npcObjects.splice(doneObjects[i], 1);
	}
	}

	function drawNPCs(ctx) {
	for (var i = npcObjects.length - 1; i >= 0; i--) {
	ctx.fillRect(npcObjects[i].posX,
	npcObjects[i].posY,
	npcObjects[i].width,
	npcObjects[i].length);
	}
	}

	document.getElementById("myCanvas").addEventListener("click", function (e){
	clickY = e.offsetY;
	clickX = e.offsetX;
	clickedState = true;
	});

	function initScenery() {
	var ctx = document.getElementById('myCanvas').getContext('2d');
	ctx.fillStyle = "green";
	ctx.fillRect(0, groundLine, canvasX, canvasY - groundLine);
	ctx.fillStyle = "black";
	}

	function init() {
	initScenery();
	createNPC(20, 5, 5, 40);
	createNPC(40, 20, 3, 80);
	// game starting point.
	posX = 210;
	posY = 300;
	window.requestAnimationFrame(draw);
	}

	var lastDrewChar = Date.now();


	function collideCheck() {
	var colliders = [];
	var startX = posX;
	var endX = posX + charSizeX;
	var startY = posY;
	var endY = posY + charSizeY;
	for (var i = npcObjects.length - 1; i >= 0; i--) {
	if (npcObjects[i].posX > startX &&
	npcObjects[i].posX <= endX &&
	npcObjects[i].posY > startY &&
	npcObjects[i].posY <= endY) {
	colliders.push(npcObjects[i]);
	}
	}
	return colliders;
	}


	function updateChar() {
	if (clickedState) {
	velocY = -10;
	}
	// updating logic
	//velocX = velocX + accX;
	if ((posY + charSizeY + velocY) <= groundLine) {
	velocY = velocY + accY;
	posY = posY + velocY;
	} else {
	posY = groundLine - charSizeY - 1;
	}
	// for now posX = posX + velocX;
	clickedState = false;
	}


	function drawChar(ctx) {
	document.getElementById("coords").innerHTML = "X is " + clickX.toString() + " Y is " + clickY.toString();
	ctx.fillRect(posX, posY, charSizeX, charSizeY);
	}

	function draw() {
	var curTime = Date.now();
	if ((curTime - lastDrewChar) <= 50) {
	window.requestAnimationFrame(draw);
	return;
	}
	var ctx = document.getElementById('myCanvas').getContext('2d');
	ctx.clearRect(0, 0, canvasX, groundLine); // clear canvas
	updateNPCs();
	updateChar();
	drawChar(ctx);
	drawNPCs(ctx);
	lastDrewChar = curTime;
	if (collideCheck().length > 0) {
	ctx.clearRect(0, 0, canvasX, canvasY);
	ctx.font = "48px serif"
	ctx.fillText("Game Over", 150, 150);
	return;
	}
	window.requestAnimationFrame(draw);
	}

	init();

	</script>

	</body>
	</html>