我一直在使用HTML 5 Canvas在Javascript中进行蛇形游戏。该游戏没有错误，网页正在加载图像，但不会绘制图像。
<script>
$(document).ready(function(){
// get canvas context
var cvs = $("canvas").get(0);
var ctx = cvs.getContext("2d");
// declare variables
var food;
var snake;
var grid = 20;
var h = cvs.height;
var w = cvs.width;
var apple = new Image();
//Makes the canvas look sharp
cvs.width *= 2;
cvs.height *= 2;
cvs.style.width = cvs.width / 2;
cvs.style.height = cvs.height / 2;
ctx.scale(2, 2);
function init(){
apple.src = "food.png";
keyPress();
reset();
setInterval(draw, 1000 / 10);
}
function reset(){
snake = {
direction: "right",
x: 0,
y: 0,
length: 5,
pieces: [],
score: 0
};
food = [];
addFood();
}
function draw() {
// calls functions and clears squares
updateSnake();
moveSnake();
ctx.clearRect(0, 0, w, h);
drawFood();
drawSnake();
// stores score as a string
var snakeText = snake.score.toString();
// add 0's to counter
while (snakeText.length < 3) {
snakeText = "0" + snakeText;
}
// displays score counter
ctx.fillStyle = "red";
ctx.textBaseline= "top";
ctx.font = "20px monospace";
ctx.fillText("Score: " + snakeText, 5, 0);
}
// draw visible snake
function drawSnake(){
ctx.fillStyle = "green";
ctx.strokeStyle = "black";
ctx.lineWidth = 1;
// draw square on snakes head
ctx.beginPath();
ctx.rect(snake.x, snake.y, grid, grid);
ctx.stroke();
ctx.fill();
// draws a square on all of the snakes body piecees
for (var i = 0; i < snake.pieces.length; i++) {
ctx.beginPath();
ctx.rect(snake.pieces[i].x, snake.pieces[i].y, grid, grid);
ctx.stroke();
ctx.fill();
}
}
function updateSnake(){
// detects collision with snakes head and body
for (var i = 0; i < snake.pieces.length; i++) {
if(snake.x == snake.pieces[i].x && snake.y == snake.pieces[i].y){
reset();
}
}
// get the last element of the food array
var foodIndex = food.length - 1;
// go through food array
while (foodIndex >= 0) {
// detects snake collision with food, increase snake length, remove food, increase score
if(snake.x == food[foodIndex].x && snake.y == food[foodIndex].y){
snake.length +=1;
food.splice(foodIndex, 1);
snake.score+=1;
//add new food
addFood();
}
// go to the next piece of food
foodIndex--;
}
// clamps down array to length of snake
snake.pieces.length = Math.min(snake.pieces.length, snake.length - 1);
// adds the snake pieces to beeginning of array, at the snakes head location
snake.pieces.unshift({
x: snake.x,
y: snake.y
});
}
// generates food in random locations
function addFood(){
var valid;
// generates food if allowed
while (true) {
valid = true;
var newFood = {
x: Math.floor(Math.random()*(w / grid)) * grid,
y: Math.floor(Math.random()*(h / grid)) * grid
};
// stops food being put on the snakes head
if (snake.x == newFood.x && snake.y == newFood.y) {
console.log("head");
valid = false;
}
// stops food from being put on the sankes body
for (var i = 0; i < snake.pieces.length; i++) {
if(newFood.x == snake.pieces[i].x && newFood.y == snake.pieces[i].y){
console.log("body");
valid = false;
}
}
// stops food from being out on top of each other
for (var i = 0; i < food.length; i++) {
if(newFood.x == food[i].x && newFood.y == food[i].y){
valid = false;
}
}
// add new food to array
if (valid) {
food.push(newFood);
break;
}
}
}
window.addFood = addFood;
// draws the visible food
function drawFood(){
ctx.fillStyle = "salmon";
ctx.strokeStyle = "black";
//Draws at the foods location
for (var i = 0; i < food.length; i++) {
ctx.drawImage(apple, food.x, food.y, grid, grid);
}
}
function moveSnake(){
if(snake.direction == "right"){
snake.x+= grid;
}
if(snake.direction == "left"){
snake.x-= grid;
}
if(snake.direction == "up"){
snake.y-= grid;
}
if(snake.direction == "down"){
snake.y+= grid;
}
if(snake.x < 0){
reset();
}
if(snake.x > w-20){
reset();
}
if(snake.y > h-20){
reset();
}
if(snake.y < 0){
reset();
}
}
// detects keys pressed
function keyPress(){
$(document).keydown(function(e){
if(e.keyCode == 37 && snake.direction != "right"){
snake.direction = "left";
}
if(e.keyCode == 39 && snake.direction != "left"){
snake.direction = "right";
}
if(e.keyCode == 38 && snake.direction != "down"){
snake.direction = "up";
}
if(e.keyCode == 40 && snake.direction != "up"){
snake.direction = "down";
}
})
}
init();
});
</script>
<canvas width="400" height="400" style="border: solid black 1px">
Sorry, no canvas support!
</canvas>
图像在变量中创建，并在我的init（）函数中给出一个源：
var cvs = $("canvas").get(0);
var ctx = cvs.getContext("2d");
// declare variables
var food;
var snake;
var grid = 20;
var h = cvs.height;
var w = cvs.width;
var apple = new Image();
//Makes the canvas look sharp
cvs.width *= 2;
cvs.height *= 2;
cvs.style.width = cvs.width / 2;
cvs.style.height = cvs.height / 2;
ctx.scale(2, 2);
function init(){
apple.src = "food.png";
keyPress();
reset();
setInterval(draw, 1000 / 10);
}
drawImage（）：
function drawFood(){
ctx.fillStyle = "salmon";
ctx.strokeStyle = "black";
//Draws at the foods location
for (var i = 0; i < food.length; i++) {
ctx.drawImage(apple, food.x, food.y, grid, grid);
}
}
我尝试过使用onLoad函数/ EventListeners但无法使用它。
感谢。
答案 0 :(得分：0)
问题在于绘制食物功能
function drawFood(){
ctx.fillStyle = "salmon";
ctx.strokeStyle = "black";
//Draws at the foods location
for (var i = 0; i < food.length; i++) {
// you had ctx.drawImage(apple, food.x, food.y, grid, grid);
// should be
ctx.drawImage(apple, food[i].x, food[i].y, grid, grid);
}
}
但在尝试绘制之前，您仍应检查已加载的图像。有很多关于如何在stackoverflow上加载图像的例子。