Basic snake game

Coming from a Java background, this is my first JavaScript-only game. I'm looking for some advice on what to improve.

Also, I'm having trouble when it comes to program design. Sometimes I don't know if I should write class-like code or just plain functions. How does one go about deciding on this?

Code of the snake:

```
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = (function() {
return window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback) {
//gameloop fallbacks to 60fps
window.setTimeout(callback, 1000 / 60);
};
})();
}

var canvas,
context,
Game,
Snake,
Food,
Direction;

canvas = document.createElement('canvas');
canvas.width = 800;
canvas.height = 600;
context = canvas.getContext('2d');
document.body.appendChild(canvas);

Game = (function() {
var ready = false;

var blockSize = 20;

var mapFillStyle = '#0D0D0D';

var mapStrokeStyle = '#002608';

var score = 0;

function start() {
ready = true;
};

function stop() {
ready = false;
};

function getBlockSize() {
return blockSize;
};

function applyStyle(ctx, x, y) {
ctx.fillRect(x blockSize, y blockSize, blockSize, blockSize);
ctx.lineWidth = .5;
ctx.strokeRect(x blockSize, y blockSize, blockSize, blockSize);
};

function isReady() {
return ready;
};

function clearMap() {
context.fillStyle = mapFillStyle;
context.strokeStyle = mapStrokeStyle;
for (var x = canvas.width - blockSize; x >= 0; x--) {
for (var y = canvas.height - blockSize; y >= 0; y--) {
applyStyle(context, x, y);
};
};
};

function showStartText() {
context.font = "bold 35px sans-serif";

Cool. Just enjoyed playing it!

You might want to run it through JSHint maybe even get an editor that incorporates it. I use ScriptEd which is nice in that it's open source and it written in JS and runs on Node.js (so plenty of JavaScript there for you to play with :) The main thing JSHint pulls up is the unnecessary semicolons you've used on your function declarations, and you'll see a few other little things.

Node also gives you a nice command line environment to test out your logic offline.

Which reminds me the naming convention seems to be .js, so you might want to rename it snake.js :) I see there are plenty of other people who've gone down the same path so plenty of code to compare yours too.

As Guy mentions I'd agree with moving the 'snake' functionality into it's own object and module, and creating another 'utils' or 'view' module. And if you really want to get fancy, as you would only ever create one instance of the Snake object you could create it as a Singleton.

Nice use of nested functions, it took me a while before I started using those.

Anyhow I really enjoyed coming across this, as I'm also working on a version of TicTacToe.js so your canvas code will come in handy for that.

Look forward to 'fetch'ing the next version.

StackExchange Code Review Q#55873, answer score: 4