Let's make a game with SVG!

1

In this presentation we are going to develop a small snake game with SVG and JavaScript.

Here we go!

Let's start with set game frame with next set of code:

        var svgns = "http://www.w3.org/2000/svg",
            svg = document.createElementNS(svgns, "svg"),
            rectSize = 31,
            matrixSize = 15,
            matrixLimit = matrixSize - 1;
            speedMs = 250;
        svg.setAttributeNS(null, 'width', rectSize * matrixSize);
        svg.setAttributeNS(null, 'height', rectSize * matrixSize);
        svg.setAttributeNS(null, 'style', 'border: ' + rectSize + 'px solid #ccc;');
        document.getElementById("#ElementId").appendChild(svg);
                        

Let's make a game with SVG!

2

With next code, we are going to see head of snake:

        var currentX = -1,
        currentY = 0,
        nextMoveX = 1,
        nextMoveY = 0,
        snakeL = 5,
        swipe = 0,
        rectArray = [];
        gameIsOver = false;

        function drawPoint(x, y) {
            var rect = [document.createElementNS(svgns, 'rect'), x, y];
            var rectObj = rect[0];
            rectObj.setAttributeNS(null, 'x', x * rectSize);
            rectObj.setAttributeNS(null, 'y', y * rectSize);
            rectObj.setAttributeNS(null, 'height', rectSize);
            rectObj.setAttributeNS(null, 'width', rectSize);
            rectObj.setAttributeNS(null, 'class', 'snake');
            rectArray.push(rect);
            svg.appendChild(rectObj);
            if (rectArray.length > snakeL) {
                svg.removeChild(rectArray[0][0]);
                rectArray.shift();
            }
        }
        drawPoint(currentX + 1, currentY);
                        

Let's make a game with SVG!

3

Now set the apple in random places:

        function setApple() {
            var appleX = Math.floor((Math.random() * matrixSize)),	
                appleY = Math.floor((Math.random() * matrixSize));
            apple = [document.createElementNS(svgns, 'rect'), appleX, appleY];
            var thisApple = apple[0];
            thisApple.setAttributeNS(null, 'x', appleX * rectSize);
            thisApple.setAttributeNS(null, 'y', appleY * rectSize);
            thisApple.setAttributeNS(null, 'height', rectSize);
            thisApple.setAttributeNS(null, 'width', rectSize);
            thisApple.setAttributeNS(null, 'class', 'apple');
            svg.appendChild(thisApple);
        }
        setApple();
                        

Let's make a game with SVG!

4

Now we are going to add some controller to our snake:

        function changeDirection(dirCode) {
            switch (dirCode) {
                case 37:
                    if (nextMoveX !== 1) { nextMoveX = -1; nextMoveY = 0; }
                    break;
                case 38:
                    if (nextMoveY !== 1) { nextMoveX = 0; nextMoveY = -1; }
                    break;
                case 39:
                    if (nextMoveX !== -1) { nextMoveX = 1; nextMoveY = 0; }
                    break;
                case 40:
                    if (nextMoveY !== -1) { nextMoveX = 0; nextMoveY = 1; }
            }
        }
        document.onkeydown = checkKey;
        function checkKey(evt) {
            var evt = evt || window.event;
            changeDirection(evt.keyCode);
        }
                        

Let's make a game with SVG!

5

Let's add a simple Game Over alert to scene and change borders color:

        function gameOver() {
            svg.setAttributeNS(null, 'class', 'game-over');
            clearInterval(timing);
            alert('GAME OVER!\nYour result is ' + snakeL + '!');
            gameIsOver = true;
            return;
        }
                        

Let's make a game with SVG!

6

Now add game loop to our system with this ready to move our snake:

        var timing = setInterval(controllingSnake, speedMs);
        function controllingSnake() {
            var nextX = currentX + nextMoveX,
                nextY = currentY + nextMoveY;
            rectArray.forEach(function(element){
                if (nextX === element[1] && nextY === element[2]) {
                    gameOver();
                };
            });
            if (nextY < 0 || nextY > matrixLimit || nextX < 0 || nextX > matrixLimit) {
                gameOver();
            }
            if (!gameIsOver) {
                if (currentX === apple[1] && currentY === apple[2]) {
                    snakeL++;
                    svg.removeChild(apple[0]);
                    setApple();
                }
                drawPoint(nextX, nextY);
                currentX = nextX;
                currentY = nextY;
            }
        }
                        

Let's make a game with SVG!

7

Let's play the game just tap to Start Button.

Start