所以我设置了一个简单的蛇游戏，每次玩家与正确的棋子碰撞时，分数都会增加 +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
})
})