1

So I have a simple snake game set up in which the score increments +1 every time the player collides with the right piece(you all the know the game). Anyway.

I want the background to change image every multiple of 5 on the score to represent a new level. Is this possible? I'm assuming it would be something along the lines of;

if score > = 5 then
  var img = document.getElementById("anid");
    ctx.drawImage(img, 0, 0, w, h);

I know the syntax there is very wrong but is the thinking behind it right?

// JavaScript Document

$(document).ready(function(){
    //Canvas stuff
    var canvas = $("#canvas")[0];
    var ctx = canvas.getContext("2d");
    var w = $("#canvas").width();
    var h = $("#canvas").height();






    //Lets save the cell width in a var for easy control
    var cw =10;
    var d;
    var food;
    var score;
    if (score % 5 == 0) {
    //Score is a divisor of 5, new level!
    var img = document.getElementById("scream1");
    ctx.drawImage(img, 0, 0, w, h);
    //do what you want
}
    var obstacle;
    var snd = new Audio("sfx1.wav"); // buffers automatically when created
    var snd2 = new Audio("sfx2.wav");
    var snd3 = new Audio("sfx.wav");
    var snd4 = new Audio("poke.mp3");
    snd4.play();


    //Timer
    var max_timer = 15;
    var current_timer;
    var show_timer = (function () {
        current_timer--;


        $("#timer").text(current_timer);
         if (current_timer < 0) {
             $("#bonus").empty();
            init();
            return;
        }

    });
    var timer_interval = setInterval(show_timer, 1000);




    //Lets create the snake now 
var snake_array; // an array of cells to make up the snake

function init()
{
    d = "right";//default direction
    create_snake();
    create_food();
    create_obstacle();
    create_obstacle2();
    create_obstacle3();
    create_obstacle4();
    score = 0;
    current_timer = max_timer;





    //Lets move the snake now using a timer
//Which will trigger the paint function
//Eevery 60ms
if(typeof game_loop != "undefined")
clearinterval(game_loop);
game_loop =setInterval(paint, 60);
}
init();







function create_snake()
{
    var length = 5; //Length of the snake
    snake_array = []; //Empty array to start with
    for(var i = length-1; i>=0; i--)
    {
        //This will create a horizontal snake starting from the top left
        snake_array.push({x: i,y:0});
    }
}



//Lets create the food now
function create_food()
{
    food = {
        x: Math.round(Math.random()*(w-cw)/cw),
        y: Math.round(Math.random()*(h-cw)/cw),
    };
    //This will  create a well with  x/y between  0-44
    //Because there are 45(450/10) positions
    //Accross the rows and columns
}

//Create next level function
function next_level()
{
var img = document.getElementById("scream1");
    ctx.drawImage(img, 0, 0, w, h);
    }

//Lets create the obstacle now

function create_obstacle()
{



    obstacle = {
        x: Math.round(Math.random()*(w-cw)/cw),
        y: Math.round(Math.random()*(h-cw)/cw),
    };
}

//Lets create a second obstacle
function create_obstacle2()
{



    obstacle2 = {
        x: Math.round(Math.random()*(w-cw)/cw),
        y: Math.round(Math.random()*(h-cw)/cw),
    };
}



//Lets create a third obstacle 

function create_obstacle3()
{



    obstacle3 = {
        x: Math.round(Math.random()*(w-cw)/cw),
        y: Math.round(Math.random()*(h-cw)/cw),
    };
}

//Lets create a fourth obstacle 

function create_obstacle4()
{



    obstacle4 = {
        x: Math.round(Math.random()*(w-cw)/cw),
        y: Math.round(Math.random()*(h-cw)/cw),
    };
}






//Lets paint the snake now
function paint()
{
//To avoid the snake trail we need to paint
//the BGon every frame
//Lets paint the canvas now

    var img = document.getElementById("scream");
    ctx.drawImage(img, 0, 0, w, h);







    //The movement code for the snake to come here
    //The logic is simple
    //Pop out the tail cell
    //Place it in front of the head cell
    var nx = snake_array[0].x;
    var ny = snake_array[0].y;
    //These were the posiiton of the head cell.
    //We will increment it to get the new position
    //Lets add proper direction based movement now
    if(d == "right")nx++;
    else if(d == "left")nx--;
    else if(d == "up") ny--;
    else if(d == "down") ny ++;


    //Lets add the game over clauses now
    //This will restart the game if the snake hits the wall
    //Lets add the code for the body collision
    if(nx == -1 || nx == w/cw || ny == -1|| ny == h/cw||
    check_collision(nx,ny, snake_array))
    {

        //restart game
        $("#bonus").empty();
        snd3.play();
        init();
        //Lets organise the code a bit now
        return;
    }
    //If snake collides with obstacle, restart game
    if (nx == obstacle.x && ny == obstacle.y)
    {
        $("#bonus").empty();
        snd3.play();
        init();
        return;
    }

    //If snake collides with obstacle, restart game
    if (nx == obstacle3.x && ny == obstacle3.y)
    {
        $("#bonus").empty();
        snd3.play();
        init();
        return;
    }
    //If snake collides with obstacle, restart game
    if (nx == obstacle4.x && ny == obstacle4.y)
    {
        $("#bonus").empty();
        snd3.play();
        init();
        return;
    }





    //If snake collides with obstacle, get more time
    if (nx == obstacle2.x && ny == obstacle2.y)
    {
        current_timer = max_timer
        create_obstacle2();
        snd2.play();




        $("#bonus").append("<h2>Time Bonus!</h2>");






            $( '#bonus' ).show(function(){
              $(this).fadeOut(2000);
        });





    }




    //Lets write the code to make the snake eat the food
    //The logic is simple
    //If the new head position matches with that of the food
    //Create a new head instead of moving the tail
    if(nx == food.x && ny == food.y)
    {
        var tail = {x:nx, y:ny};
        score++;
        if (score % 2 == 0) {
        next_level();
}
        create_food();
        create_obstacle();
        create_obstacle3();
        create_obstacle4();
        snd.play();
        $("#bonus").empty();















    }
    else 
    {
        var tail = snake_array.pop();//pops out the last cell
        tail.x = nx;tail.y = ny;
    }
    //The snake can now eat the food


    snake_array.unshift(tail);//puts the tail as the first cell


    for(var i= 0;i<snake_array.length; i++)
    {
        var c = snake_array[i];
        //Lets paint 10px wide cells
        paint_cell(c.x, c.y);
    }

    //Lets paint the food
    paint_cell(food.x, food.y);
    //Lets paint the obstacle
    paint_cell2(obstacle.x, obstacle.y);
    //Lets paint the second obstacle
    paint_cell3(obstacle2.x, obstacle2.y);
    //Lets paint the third obstacle
    paint_cell2(obstacle3.x, obstacle3.y);
    //Lets paint the fourth obstacle
    paint_cell2(obstacle4.x, obstacle4.y);

    //Lets paint the score
    var score_text = "Score:" + score;
    ctx.fillText(score_text, 5, h-5);


}


//Lets first create a generic function to paint cells
function paint_cell(x,y)
{
    ctx.fillStyle="white";
    ctx.fillRect(x*cw,y*cw, cw, cw);
    ctx.strokeStyle = "black";
    ctx.strokeRect(x*cw,y*cw, cw, cw);

}
function paint_cell2(x,y)
{
    ctx.fillStyle="orange";
    ctx.fillRect(x*cw,y*cw, cw, cw);
    ctx.strokeStyle = "black";
    ctx.strokeRect(x*cw,y*cw, cw, cw);

}
function paint_cell3(x,y)
{
    ctx.fillStyle="red";
    ctx.fillRect(x*cw,y*cw, cw, cw);
    ctx.strokeStyle = "black";
    ctx.strokeRect(x*cw,y*cw, cw, cw);

}



function check_collision(x, y, array)
{
    //This function will check the provided x/y
    //coordinates exist in an array of cells or not
    for(var i = 0; i<array.length; i++)
    {
        if(array[i].x == x && array[i].y == y)
        return true;
    }
    return false;
}





//Lets addd the keyboard controls now
$(document).keydown(function(e){
    var key = e.which;
    //We will add another clause to prevent reverse gear
    if(key == "37" && d!= "right") d = "left";
    else if(key == "38" && d!= "down") d="up";
    else if(key == "39" && d!= "left") d="right";
    else if(key == "40" && d!= "up") d="down";
    //The snake is now keyboard controllable
})



})

1 Answer 1

0

You can use the % operator to solve this. MSDN: http://msdn.microsoft.com/en-us/library/ie/9f59bza0(v=vs.94).aspx

Code

if (score % 5 == 0) {
    //Score is a divisor of 5, new level!
    var img = document.getElementById("anid");
    //do what you want
}

Here's a fiddle demonstrating the concept: http://jsfiddle.net/vCHCG/

4
  • Cool!How would i implement this as a loop to keep checking the score? May 2, 2013 at 23:57
  • On player crashing you update the score, after that run this method to check the score.
    – tymeJV
    May 3, 2013 at 0:24
  • Ok so messed around with the code you provided and i can get the bg to change on whichever multiple so thank you! BUT it only changes for one second then reverts back to the original! Because its a game of snake the bg is painted on everyframe so im not sure if thats the problem but ill show you the code so far in case you feel like taking a look! May 3, 2013 at 15:39
  • So i created a next_level() function and called that whenever the snake eats the food and the score is a particular number! But like i said the bg only changes for a sec then goes back! May 3, 2013 at 15:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.