Javascript、HTML5画布、评分函数

所以我有一个简单的蛇游戏，每次玩家与正确的棋子碰撞时，分数增加+1（你们都知道这个游戏）。无论如何

我想背景改变图像每5倍的分数，以代表一个新的水平。这可能吗？我认为这将是一个大致相同的东西

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

我知道那里的语法是非常错误的，但它背后的思想是正确的吗

//JavaScript文档

$(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
})



})

$（文档）.ready（函数（）{
//帆布
var canvas=$（“#canvas”）[0]；
var ctx=canvas.getContext（“2d”）；
var w=$（“#画布”）.width（）；
var h=$（“#画布”）.height（）；
//让我们将单元格宽度保存在变量中以便于控制
var-cw=10；
变量d；
食品；
var评分；
如果（分数%5==0）{
//分数是5的除数，新等级！
var img=document.getElementById（“1”）；
ctx.drawImage（img，0，0，w，h）；
//做你想做的
}
var障碍；
var snd=new Audio（“sfx1.wav”）；//创建时自动缓冲区
var snd2=新音频（“sfx2.wav”）；
var snd3=新音频（“sfx.wav”）；
var snd4=新音频（“poke.mp3”）；
snd4.play（）；
//计时器
var max_定时器=15；
无功电流定时器；
var show_timer=（函数（）{
当前_定时器--；
$（“#计时器”）.text（当前#计时器）；
如果（当前计时器<0）{
$（“#奖金”）.empty（）；
init（）；
返回；
}
});
var定时器间隔=设置间隔（显示定时器，1000）；
//让我们现在创建蛇
var snake_array；//组成snake的单元格数组
函数init（）
{
d=“right”；//默认方向
创建_snake（）；
创造食物（）；
创建障碍（）；
创建_obstacle2（）；
创建_obstacle3（）；
创建_obstacle4（）；
得分=0；
当前定时器=最大定时器；
//现在让我们使用计时器移动蛇
//这将触发绘制功能
//每60毫秒
如果（游戏类型_循环！=“未定义”）
clearinterval（博弈循环）；
game_loop=setInterval（画图，60）；
}
init（）；
函数create_snake（）
{
var length=5；//蛇的长度
snake_array=[]；//以空数组开头
对于（变量i=length-1；i>=0；i--）
{
//这将创建一条从左上角开始的水平蛇
snake_数组.push（{x:i，y:0}）；
}
}
//现在让我们来制作食物
函数create_food（）
{
食物={
x:Math.round（Math.random（）*（w-cw）/cw），
y:Math.round（Math.random（）*（h-cw）/cw），
};
//这将创建x/y在0-44之间的井
//因为有45（450/10）个位置
//A跨行和跨列
}
//创建下一级函数
函数下一级（）
{
var img=document.getElementById（“1”）；
ctx.drawImage（img，0，0，w，h）；
}
//让我们现在创建障碍
函数create_disabler（）
{
障碍={
x:Math.round（Math.random（）*（w-cw）/cw），
y:Math.round（Math.random（）*（h-cw）/cw），
};
}
//让我们创建第二个障碍
函数create_obstacle2（）
{
障碍2={
x:Math.round（Math.random（）*（w-cw）/cw），
y:Math.round（Math.random（）*（h-cw）/cw），
};
}
//让我们创建第三个障碍
函数create_obstacle3（）
{
障碍3={
x:Math.round（Math.random（）*（w-cw）/cw），
y:Math.round（Math.random（）*（h-cw）/cw），
};
}
//让我们制造第四个障碍
函数create_obstacle4（）
{
障碍4={
x:Math.round（Math.random（）*（w-cw）/cw），
y:Math.round（Math.random（）*（h-cw）/cw），
};
}
//让我们现在画蛇吧
函数绘制（）
{
//为了避免蛇的踪迹，我们需要画画
//每一帧上都有BG
//现在让我们来画画布
var img=document.getElementById（“尖叫”）；
ctx.drawImage（img，0，0，w，h）；
//蛇来这里的动作代码
//逻辑很简单
//跳出尾室
//把它放在头细胞的前面
var nx=snake_数组[0].x；
var ny=snake_数组[0].y；
//这是头细胞的位置。
//我们将增加它以获得新职位
//现在让我们添加正确的基于方向的移动
如果（d==“右”）nx++；
否则，如果（d==“左”）nx--；
否则，如果（d==“up”）ny--；
如果（d==“向下”）ny++；
//现在让我们添加游戏结束条款
//如果蛇撞到墙上，这将重新启动游戏
//让我们添加主体碰撞的代码
如果（nx==-1 | | nx==w/cw | | ny==-1 | | ny==h/cw||
检查碰撞（nx、ny、snake_阵列））
{
//重新开始游戏
$（“#奖金”）.empty（）；
snd3.play（）；
init（）；
//现在让我们组织一下代码
返回；
}
//若蛇和障碍物相撞，重启游戏
如果（nx==障碍物.x&&ny==障碍物.y）
{
$（“#奖金”）.empty（）；
snd3.play（）；
init（）；
返回；
}
//若蛇和障碍物相撞，重启游戏
if（nx==obstacle3.x&&ny==obstacle3.y）
{
$（“#奖金”）.empty（）；
snd3.play（）；
init（）；
返回；
}
//若蛇和障碍物相撞，重启游戏
if（nx==obstacle4.x&&ny==obstacle4.y）
{
$（“#奖金”）.empty（）；
snd3.play（）；
init（）；
返回；
}
//如果蛇与障碍物相撞，获得更多时间
if（nx==obstacle2.x&&ny==obstacle2.y）
{
当前计时器=最大计时器
创建_obstacle2（）；
snd2.play（）；
$（“#奖金”）。附加（“时间奖金”）；
$（“#奖金”）.show（函数（）{
美元（本）.fadeOut（2000年）；
});
}
//让我们编写代码让蛇吃食物
//逻辑很简单
//如果新的头部位置与食物的头部位置相匹配
//创建一个新的头部，而不是移动尾部
如果（nx==food.x&&ny==food.y）
{
var-tail={x:nx，y:ny}；
分数++；
如果（分数%2==0）{
下一级（）；
}
创造食物（）；
创建障碍（）；
创建_obstacle3（）；
创建
if (score % 5 == 0) {
    //Score is a divisor of 5, new level!
    var img = document.getElementById("anid");
    //do what you want
}