Split loop into game update and render, separated graphics-related code
This commit is contained in:
Noah Moroze
parent
219106870a
commit
80d904cee6
3 changed files with 117 additions and 101 deletions
|
|
@ -30,11 +30,11 @@
|
|||
|
||||
<script type = 'text/javascript' src="vendor/hammer.min.js"></script>
|
||||
<script type = 'text/javascript' src="vendor/keypress.min.js"></script>
|
||||
<script type = 'text/javascript' src="js/view.js"></script>
|
||||
<script type = 'text/javascript' src="js/math.js"></script>
|
||||
<script type = 'text/javascript' src="js/entities.js"></script>
|
||||
<script type = 'text/javascript' src="js/input.js"></script>
|
||||
<script type = 'text/javascript' src="js/checking.js"></script>
|
||||
<script type = 'text/javascript' src="js/main.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
145
js/main.js
145
js/main.js
|
|
@ -9,30 +9,33 @@ if (window.devicePixelRatio) {
|
|||
ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
|
||||
}
|
||||
|
||||
var gameState = 0; // 0 - start, 1 - playing, 2 - end
|
||||
var framerate = 60;
|
||||
|
||||
var score = 0;
|
||||
var scoreScalar = 1;
|
||||
|
||||
ct = 0;
|
||||
|
||||
window.requestAnimFrame = (function() {
|
||||
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback) {
|
||||
window.setTimeout(callback, 1000 / framerate);
|
||||
};
|
||||
})();
|
||||
|
||||
var gameState = 0; // 0 - start, 1 - playing, 2 - end
|
||||
var framerate = 60;
|
||||
|
||||
var score = 0;
|
||||
var scoreScalar = 1;
|
||||
var scoreAdditionCoeff = 1;
|
||||
|
||||
ct = 0;
|
||||
|
||||
var blocks = [];
|
||||
var MainClock;
|
||||
var iter;
|
||||
|
||||
var lastGen;
|
||||
var prevScore;
|
||||
var nextGen;
|
||||
var spawnLane = 0;
|
||||
|
||||
function init() {
|
||||
score = 0;
|
||||
spawnLane = 0;
|
||||
scoreScalar = 1;
|
||||
gameState = 1;
|
||||
ct = 0;
|
||||
|
|
@ -45,19 +48,11 @@ function init() {
|
|||
requestAnimFrame(animloop);
|
||||
}
|
||||
|
||||
var colors = ["#e74c3c", "#f1c40f", "#3498db"];
|
||||
var hexagonBackgroundColor = 'rgb(236, 240, 241)';
|
||||
var hexagonBackgroundColorClear = 'rgba(236, 240, 241, 0.5)';
|
||||
var centerBlue = '#2c3e50'; //tumblr?
|
||||
var scoreAdditionCoeff = 1;
|
||||
var x = 0;
|
||||
|
||||
function render() {
|
||||
document.getElementById("score").innerHTML = score + " (x" + scoreScalar * scoreAdditionCoeff + ")";
|
||||
function update() {
|
||||
var now = Date.now();
|
||||
if (now - lastGen > nextGen) {
|
||||
blocks.push(new Block(x, colors[randInt(0, colors.length)]));
|
||||
x++;
|
||||
blocks.push(new Block(spawnLane, colors[randInt(0, colors.length)]));
|
||||
spawnLane++;
|
||||
lastGen = Date.now();
|
||||
var minTime = 500 / iter;
|
||||
if (minTime < 100) {
|
||||
|
|
@ -72,21 +67,9 @@ function render() {
|
|||
prevScore = now;
|
||||
iter += 0.1;
|
||||
}
|
||||
ctx.clearRect(0, 0, canvas.originalWidth, canvas.originalHeight);
|
||||
clearGameBoard();
|
||||
var objectsToRemove = [];
|
||||
var i;
|
||||
for (i in MainClock.blocks) {
|
||||
for (var j = 0; j < MainClock.blocks[i].length; j++) {
|
||||
var block = MainClock.blocks[i][j];
|
||||
MainClock.doesBlockCollide(block, iter, j, MainClock.blocks[i]);
|
||||
if (!MainClock.blocks[i][j].settled) {
|
||||
MainClock.blocks[i][j].distFromHex -= iter;
|
||||
}
|
||||
block.draw(true, j);
|
||||
}
|
||||
}
|
||||
|
||||
var i;
|
||||
var objectsToRemove = [];
|
||||
for (i in blocks) {
|
||||
MainClock.doesBlockCollide(blocks[i], iter);
|
||||
if (!blocks[i].settled) {
|
||||
|
|
@ -94,12 +77,40 @@ function render() {
|
|||
} else {
|
||||
objectsToRemove.push(i);
|
||||
}
|
||||
blocks[i].draw();
|
||||
}
|
||||
|
||||
for (i in MainClock.blocks) {
|
||||
for (var j = 0; j < MainClock.blocks[i].length; j++) {
|
||||
var block = MainClock.blocks[i][j];
|
||||
MainClock.doesBlockCollide(block, iter, j, MainClock.blocks[i]);
|
||||
if (!MainClock.blocks[i][j].settled) {
|
||||
MainClock.blocks[i][j].distFromHex -= iter;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
objectsToRemove.forEach(function(o) {
|
||||
blocks.splice(o, 1);
|
||||
});
|
||||
}
|
||||
|
||||
function render() {
|
||||
document.getElementById("score").innerHTML = score + " (x" + scoreScalar * scoreAdditionCoeff + ")";
|
||||
|
||||
ctx.clearRect(0, 0, canvas.originalWidth, canvas.originalHeight);
|
||||
clearGameBoard();
|
||||
|
||||
var i;
|
||||
for (i in MainClock.blocks) {
|
||||
for (var j = 0; j < MainClock.blocks[i].length; j++) {
|
||||
var block = MainClock.blocks[i][j];
|
||||
block.draw(true, j);
|
||||
}
|
||||
}
|
||||
|
||||
for (i in blocks) {
|
||||
blocks[i].draw();
|
||||
}
|
||||
MainClock.draw();
|
||||
drawPolygon(canvas.originalWidth / 2, canvas.originalHeight / 2, 6, 220, 30, '#95a5a6', false);
|
||||
}
|
||||
|
|
@ -110,6 +121,7 @@ function animloop() {
|
|||
showModal('Start!', 'Press enter to start!');
|
||||
} else if (gameState == 1) {
|
||||
requestAnimFrame(animloop);
|
||||
update();
|
||||
render();
|
||||
checkGameOver();
|
||||
} else if (gameState == 2) {
|
||||
|
|
@ -119,49 +131,6 @@ function animloop() {
|
|||
}
|
||||
requestAnimFrame(animloop);
|
||||
|
||||
function clearGameBoard() {
|
||||
ctx.shadowColor = '#2980b9';
|
||||
ctx.shadowBlur = 25;
|
||||
drawPolygon(canvas.originalWidth / 2, canvas.originalHeight / 2, 6, canvas.originalWidth / 2 - 25, 30, hexagonBackgroundColor);
|
||||
clearShadows();
|
||||
}
|
||||
|
||||
function drawPolygon(x, y, sides, radius, theta, color, fill) { // can make more elegant, reduce redundancy, fix readability
|
||||
if (fill == undefined) {
|
||||
fill = true;
|
||||
}
|
||||
if (fill) {
|
||||
ctx.fillStyle = color;
|
||||
} else {
|
||||
// ctx.shadowColor = '#2980b9';
|
||||
// ctx.shadowColor = color;
|
||||
// ctx.shadowColor = '#2ecc71';
|
||||
// ctx.shadowBlur = 10;
|
||||
// ctx.strokeStyle = rgba(0,0,0,0);
|
||||
ctx.lineWidth = 3;
|
||||
ctx.strokeStyle = color;
|
||||
}
|
||||
|
||||
ctx.beginPath();
|
||||
var coords = rotatePoint(0, radius, theta);
|
||||
ctx.moveTo(coords.x + x, coords.y + y);
|
||||
var oldX = coords.x;
|
||||
var oldY = coords.y;
|
||||
for (var i = 0; i < sides; i++) {
|
||||
coords = rotatePoint(oldX, oldY, 360 / sides);
|
||||
ctx.lineTo(coords.x + x, coords.y + y);
|
||||
// ctx.moveTo(coords.x + x, coords.y + y);
|
||||
oldX = coords.x;
|
||||
oldY = coords.y;
|
||||
}
|
||||
ctx.closePath();
|
||||
if (fill) {
|
||||
ctx.fill();
|
||||
} else {
|
||||
ctx.stroke();
|
||||
}
|
||||
};
|
||||
|
||||
function checkGameOver() { // fix font, fix size of hex
|
||||
for (var i = 0; i < MainClock.sides; i++) {
|
||||
if (MainClock.blocks[i].length > 8) {
|
||||
|
|
@ -169,25 +138,3 @@ function checkGameOver() { // fix font, fix size of hex
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
function showModal(text, secondaryText) {
|
||||
var buttonSize = 150;
|
||||
var fontSizeLarge = 50;
|
||||
var fontSizeSmall = 25;
|
||||
drawPolygon(canvas.originalWidth / 2, canvas.originalHeight / 2, 6, canvas.originalWidth / 2 - 25, 30, hexagonBackgroundColorClear);
|
||||
// drawPolygon(canvas.originalWidth / 2, canvas.originalHeight / 2, 6, buttonSize, 30, swegBlue);
|
||||
ctx.font = fontSizeLarge + 'px Roboto'; // figure out what is not working
|
||||
ctx.textAlign = 'center';
|
||||
ctx.fillStyle = centerBlue;
|
||||
// ctx.fillStyle = hexagonBackgroundColor;
|
||||
ctx.fillText(text, canvas.originalWidth / 2, canvas.originalHeight / 2 + (fontSizeLarge / 4));
|
||||
ctx.font = fontSizeSmall + 'px Roboto';
|
||||
ctx.fillText(secondaryText, canvas.originalWidth / 2, canvas.originalHeight / 2 + fontSizeLarge / 4 + fontSizeSmall / 4 + 30);
|
||||
}
|
||||
|
||||
function clearShadows() {
|
||||
ctx.shadowColor = 0;
|
||||
ctx.shadowBlur = 0;
|
||||
ctx.shadowOffsetX = 0;
|
||||
ctx.shadowOffsetY = 0;
|
||||
}
|
||||
|
|
|
|||
69
js/view.js
Normal file
69
js/view.js
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
var colors = ["#e74c3c", "#f1c40f", "#3498db"];
|
||||
var hexagonBackgroundColor = 'rgb(236, 240, 241)';
|
||||
var hexagonBackgroundColorClear = 'rgba(236, 240, 241, 0.5)';
|
||||
var centerBlue = '#2c3e50'; //tumblr?
|
||||
|
||||
function showModal(text, secondaryText) {
|
||||
var buttonSize = 150;
|
||||
var fontSizeLarge = 50;
|
||||
var fontSizeSmall = 25;
|
||||
drawPolygon(canvas.originalWidth / 2, canvas.originalHeight / 2, 6, canvas.originalWidth / 2 - 25, 30, hexagonBackgroundColorClear);
|
||||
// drawPolygon(canvas.originalWidth / 2, canvas.originalHeight / 2, 6, buttonSize, 30, swegBlue);
|
||||
ctx.font = fontSizeLarge + 'px Roboto'; // figure out what is not working
|
||||
ctx.textAlign = 'center';
|
||||
ctx.fillStyle = centerBlue;
|
||||
// ctx.fillStyle = hexagonBackgroundColor;
|
||||
ctx.fillText(text, canvas.originalWidth / 2, canvas.originalHeight / 2 + (fontSizeLarge / 4));
|
||||
ctx.font = fontSizeSmall + 'px Roboto';
|
||||
ctx.fillText(secondaryText, canvas.originalWidth / 2, canvas.originalHeight / 2 + fontSizeLarge / 4 + fontSizeSmall / 4 + 30);
|
||||
}
|
||||
|
||||
function clearShadows() {
|
||||
ctx.shadowColor = 0;
|
||||
ctx.shadowBlur = 0;
|
||||
ctx.shadowOffsetX = 0;
|
||||
ctx.shadowOffsetY = 0;
|
||||
}
|
||||
|
||||
function clearGameBoard() {
|
||||
ctx.shadowColor = '#2980b9';
|
||||
ctx.shadowBlur = 25;
|
||||
drawPolygon(canvas.originalWidth / 2, canvas.originalHeight / 2, 6, canvas.originalWidth / 2 - 25, 30, hexagonBackgroundColor);
|
||||
clearShadows();
|
||||
}
|
||||
|
||||
function drawPolygon(x, y, sides, radius, theta, color, fill) { // can make more elegant, reduce redundancy, fix readability
|
||||
if (fill == undefined) {
|
||||
fill = true;
|
||||
}
|
||||
if (fill) {
|
||||
ctx.fillStyle = color;
|
||||
} else {
|
||||
// ctx.shadowColor = '#2980b9';
|
||||
// ctx.shadowColor = color;
|
||||
// ctx.shadowColor = '#2ecc71';
|
||||
// ctx.shadowBlur = 10;
|
||||
// ctx.strokeStyle = rgba(0,0,0,0);
|
||||
ctx.lineWidth = 3;
|
||||
ctx.strokeStyle = color;
|
||||
}
|
||||
|
||||
ctx.beginPath();
|
||||
var coords = rotatePoint(0, radius, theta);
|
||||
ctx.moveTo(coords.x + x, coords.y + y);
|
||||
var oldX = coords.x;
|
||||
var oldY = coords.y;
|
||||
for (var i = 0; i < sides; i++) {
|
||||
coords = rotatePoint(oldX, oldY, 360 / sides);
|
||||
ctx.lineTo(coords.x + x, coords.y + y);
|
||||
// ctx.moveTo(coords.x + x, coords.y + y);
|
||||
oldX = coords.x;
|
||||
oldY = coords.y;
|
||||
}
|
||||
ctx.closePath();
|
||||
if (fill) {
|
||||
ctx.fill();
|
||||
} else {
|
||||
ctx.stroke();
|
||||
}
|
||||
};
|
||||
Loading…
Reference in a new issue