Sublime Forum

Not loading

#1

when i load my sublime text file in chrome, the screen stays blank, if somebody could help that would be great. :slight_smile: :wink:

in case… here is the code…

snake game 
<script>

// set up canvas
var canvas = document.getElementById(“canvas”)
var ctx = canvas.getContext(“2d”);

// get the width and height from the canvas element
var width = canvas.width;
var height = canvas.height;

// work out the width and hieght on blocks
var blockSize = 10;
var widthInBlocks = width / blockSize;
var heightInBlocks = height / blockSize;

// set score to 0
var score = 0;

// draw the border
var drawBorder = function () {
ctx.fillStyle = “Gray”;
ctx.fillRect = (0, 0, width, blockSize);
ctx.fillRect = (0, hieght - blockSize, width, blockSize);
ctx.fillRect = (width - blockSize, 0, blockSize, hieght);
};

// Draw the score in the top-left corner
var drawScore = function () {
ctx.font = “20px Courier”;
ctx.fillStyle = “black”;
ctx.textAlign = “left”;
ctx.fillText("Score: " + score, blockSize, BlockSize);
};

// Clear the intervieal and display Game Over text
var gameOver = function () {
clearInterval(intervalId);
ctx.font = “60px courier”;
ctx.fillStyle = “Black”;
ctx.textAlign = “center”;
ctx.textBaseline = “middle”;
ctx.fillText(“Game Over”, width / 2, hieght / 2);
};

// Draw a circle
var circle = function (x, y, radius, fillCircle) {
ctx.beginPath();
ctx.arc(x, y, raduis, 0, Math.PI * 2, false);
if (fillCircle) {
ctx.fill();
} else {
ctx.stroke();
}
};

// the block construtcor
var Block = function (col, row) {
this.col = col;
this.row = row;
};

// draw a square at the block’s location
Block.prototype.DrawSquare = function (color) {
var x = this.col * blockSize + blockSize;
var y = this.row * blockSize + blockSize;
ctx.fillStyle = color;
circle(X, Y, blockSize, blockSize);
};

// draw a circle at the block’s location
Block.prototype.Drawcircle = function (color) {
var x = this.col * blockSize + blockSize;
var y = this.row * blockSize + blockSize;
ctx.fillStyle = color;
circle(centerX, centerY, blockSize / 2, true);
};

// check if this block is in the same location as another block
Block.prototype.equal = function (otherBlock) {
return this.col === otherBlock.col && this.row === otherBlock.row;
};

// the snake construtcor
var Snake = function () {
this.segments = [
new Block(7, 5),
new Block(6, 5),
new Block(5, 5)
];

this.diretcion = "right";
this.nextDiretcion = "right";

};

// draw a square for each segment of the snakes body
Snake.prototype.draw = function () {
for (var i = 0; i < this.segments.length; i++) {
this.segments[i].drawSquare(“Blue”);
}
};

// Create a new head and add it to the beginning of
// the snake to move the snake in its current diretcion
Snake.prototype.move = function () {
var head = this.segments[0];
var newHead;

this.diretcion = this.nextDiretcion;

if (this.diretcion === "right") {
  newHead = new Block(head.col + 1, head.row);
} else if (this.diretcion === "down") {
  newHead = new Block(head.col, head.row + 1);
} else if (this.diretcion === "left") {
  newHead = new Block(head.col - 1, head.row);
} else if (this.diretcion === "up") {
  newHead = new BLock(head.col, head.row - 1);
}

if (this.checkCollision(hewHead)) {
  gameOver()
  return;
}

this.segments.unshift(newHead);

if (hewHead.equal(apple.position)) {
  score++;
  apple.move();

} else {
  this.segments.pop();
}

};

// check the snake’s next diretcion based on the keyboard
snake.prototype.setDiretcion = function (newDiretcion) {
if (this.diretcion === “up” && newDiretcion === “down”) {
return;
} else if (this.diretcion === “right” && newDiretcion === “left”) {
return;
} else if (this.diretcion === “down” && newDiretcion === “up”) {
return;
} else if (this.diretcion === “left” && newDiretcion === “right”) {
return;
}

this.nextDiretcion;

};

// The Apple diretcion
var Apple = function () {
this.position = new Block(10, 10);
};

// Draw a circle at the apple’s location
Apple.prototype.draw = function () {
this.position.drawCircle(“LimeGreen”);
};

// Move the apple to a new random location
Apple.prototype.move = function () {
var randomCol = Math.floor(Math.random() * (widthInBlocks - 2)) + 1;
var randomRow = Math.floor(Math.random() * (widthInBlocks - 2)) + 1;
this.position = new Block(randomCol, randomRow);
};

// create the snake and apple objects
var snake = new Snake();
var apple = new Apple();

// pass an animation function to setInterval
var intervalId = setInterval(function () {
ctx.clearRect(0, 0, width, height);
drawScore();
snake.move();
snake.draw();
apple.draw();
drawBorder();
}, 100);

// convert keycodes to diretcions
var diretcions = {
37: “left”,
38: “up”,
39: “right”,
40: “down”
};

// the keydown handler for handling diretcion key presses
$(“body”).keydown(function (event) {
var newDiretcion = diretcions[event.keyCode];
if (newDiretcion !== undefined) {
snake.setDiretcion(newDiretcion);
}
});

0 Likes