- js syntax
- OOP basics
- window, context, etc.
- debugger
- console
var a; //variable definition;
a = {}; //a is Object;
a = []; //a is Array;
a = 5; // a is Number;
a = '5'; //a is String;
//function definition
function foo( a, b ) {
return a + b;
}
//other function definition
var a = function( a,b ) {
return a + b;
}Here is example how to create simple object.
Car is a constructor for this function.
go is method for Car object
Let's create simple car
Let's check methods that it contains.
var DEFAULT_SPEED = 50;
//@constructor
function Car( speed ) {
//car speed
this.speed = speed || DEFAULT_SPEED;
}
//method for car
Car.prototype.go = function() {
return this.speed;
}
//Let's create honda
var honda = new Car( 300 );
//Let's crate simple car
var lanos = new Car();
console.log( honda.go() );
console.log( lanos.go() );- we get canvas from dom;
- set canvas size
- create simple rect 450x450
- added black border
//call after dom init
function domIsInit() {
//DOM element canvas
var canvas = document.getElementById('snakeGame');
//context is canvas
var context = canvas.getContext( '2d' )
//size for canvas
var width = canvas.width;
var height = canvas.height;
/*** Let's create border ***/
//style for border
context.fillStyle = 'white';
//rectangle - coordinates and size
context.fillRect( 0, 0, width, height );
//same for border
context.strokeStyle = 'black';
context.strokeRect( 0, 0, width, height );
} - Create simple snake area.
- Create empty snake position array
- push some posotions to this array.
- run this function
var snakeArea = [];
// snake constructor
function crateSnake() {
var length = DefaultSettings.SNAKE_LENGTH;
//reset snake position
snakeArea = [];
// create horizontal snake
for ( var i = length - 1; i >= 0; i-- ) {
snakeArea.push( {x : i; y : 0} )
}
}
createSnake(); function paint() {
snakeArea.forEach( function( snakeElement, index, allElements ) {
//crate blue rectangle
context.fillStyle = 'blue';
context.fillRect( snakeElement.x * DefaultSettings.SNAKE_WIDTH,
snakeElement.y * DefaultSettings.SNAKE_WIDTH,
DefaultSettings.SNAKE_WIDTH,
DefaultSettings.SNAKE_WIDTH );
context.strokeStyle = 'white';
context.strokeRect( snakeElement.x * DefaultSettings.SNAKE_WIDTH,
snakeElement.y * DefaultSettings.SNAKE_WIDTH,
DefaultSettings.SNAKE_WIDTH, DefaultSettings.SNAKE_WIDTH );
});
}
paint();var timerLoop;
//...
function paint() {
//...
//head coordinates
head.x = snakeArea[0].x;
head.y = snakeArea[0].y;
//eat fruit
head.x++;
var tail = snakeArea.pop();
tail.x = head.x;
snakeArea.unshift( tail );
//...
//call it each time
timerLoop = setTimeout(function() {
paint();
}, 1000 / DefaultSettings.SPEED);
} document.onkeydown = function ( event ) {
//key number
switch ( event.which ) {
case 37:
if ( direction !== 'right') direction = 'left';
break;
case 40:
if ( direction !== 'down') direction = 'up';
break;
case 39:
if ( direction !== 'left') direction = 'right';
break;
case 38:
if ( direction !== 'up') direction = 'down';
break;
}
}