자바 스크립트, HTML5 캔버스, 점수 기능

Question

그래서 간단한 뱀 게임을 설정하여 플레이어가 올바른 조각과 충돌 할 때마다 +1합니다 (모두 게임을 알고 있음). 어쨌든.

새로운 레벨을 나타 내기 위해 배경이 점수의 5 배수마다 이미지를 변경하기를 원합니다. 이것이 가능한가? 나는 그것이 라인을 따라 뭔가있을 것이라고 가정하고 있습니다.

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

나는 매우 틀린 문법을 알고 있지만 그 뒤에 대한 생각은 맞습니까?

// 자바 스크립트 문서

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



}) 

Answer 1

당신은이 문제를 해결하기 위해 % 연산자를 사용할 수 있습니다. MSDN : http://msdn.microsoft.com/en-us/library/ie/9f59bza0(v=vs.94).aspx

코드 여기

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

의 개념을 보여주는 바이올린 : http://jsfiddle.net/vCHCG/