Question

我是使用HTML5画布创建游戏的新手。我正在使用愤怒的小鸟风格教程和'pro html5 games'一书我已经完成了教程中提到的所有内容但是我的游戏背景不起作用....

启动画面，关卡屏幕和加载屏幕工作正常，除非我加载游戏本身的背景图像。

我的HTML：

<head>

    <!-- META DATA -->
    <meta charset="UTF-8">
    <meta name="author" content="Erin-Katie Strapp">
    <meta name="viewport" content="width=device-width, initial-scale = 1.0">

    <!-- CSS LINKS -->
    <link rel="stylesheet" href="css/style.css" type="text/css" />

</head>


<body>

    <div id="gameContainer"><!-- Game container holds all of tge game layers. -->
        <canvas id="gameCanvas" width="640" height="480" class="gameLayer">         
        </canvas>

        <div id="scoreScreen" class="gameLayer">
            <img id="toggleMusic" src="images/icons/sound.png">
            <img src="images/icons/prev.png">
            <span id="score">Score: 0</span>
        </div><!-- CLOSES SCORE SCREEN -->

        <div id="gameStartScreen" class="gameLayer">
            <img src="images/icons/play.png" alt="Play Game" onclick="game.showLevelScreen();"><br />
            <img src="http://www.erin-katie.com/images/icons/settings.png" alt="Settings">
        </div><!-- CLOSES GAME START SCREEN -->

        <div id="levelSelectScreen" class="gameLayer">
        </div><!-- CLOSES LEVEL SELECT SCREEN -->

        <div id="loadingScreen" class="gameLayer">
            <div id="loadingMessage"></div><!-- CLOSES LOADING MESSAGE -->
        </div><!-- CLOSES LOADING SCREEN -->

        <div id="endingScreen" class="gameLayer">
            <div>
                <p id="endingMessage">Level Complete!/p>
                <p id="playCurrentLevel"><img src="images/icons/prev.png"> Replay Current Level</p>             
                <p id="playNextLevel"><img src="images/icons/next.png"> Play Next Level </p>                
                <p id="showLevelScreen"><img src="images/icons/return.png"> Return to Level Screen</p>
            </div>
        </div><!-- CLOSES ENDING SCREEN -->

    </div><!-- CLOSES GAME CONTAINER -->

    <!-- SCRIPTS -->
    <script type="text/javascript" src="scripts/jquery-1.10.2.min.js"></script><!-- jQuery LIBRARY -->
    <script type="text/javascript" src="scripts/game.js"></script>

</body>

</html>

我的js：

// Setup requestAnimationFrame and cancelAnimationFrame for use in the game code
 (function() {
    var lastTime = 0;
    var vendors = ['ms', 'moz', 'webkit', 'o'];
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
        window.cancelAnimationFrame = 
         window[vendors[x]+'CancelAnimationFrame'] ||         window[vendors[x]+'CancelRequestAnimationFrame'];
}

if (!window.requestAnimationFrame)
    window.requestAnimationFrame = function(callback, element) {
        var currTime = new Date().getTime();
        var timeToCall = Math.max(0, 16 - (currTime - lastTime));
        var id = window.setTimeout(function() { callback(currTime + timeToCall); }, 
          timeToCall);
        lastTime = currTime + timeToCall;
        return id;
    };

if (!window.cancelAnimationFrame)
    window.cancelAnimationFrame = function(id) {
        clearTimeout(id);
    };
}());


//The init() function is called after the page is loaded to avoid erros within in the DOM.
 $(window).load(function(){
game.init();
});

 var game={

//The following finction will allow the game to begin initilaizing the game assets and will tell the game that the start screen will be displayed first.

init: function(){
    // Initialize objects   
    levels.init();
    loader.init();

    // Hide all game layers and display the start screen
    $('.gameLayer').hide();
    $('#gameStartScreen').show();

    //Get handler for game canvas and context
    game.canvas = $('#gameCanvas')[0];
    game.context = game.canvas.getContext('2d');
},      

//Hide main menu and all other game layers and show the game level screen.
showLevelScreen:function(){
    $('.gameLayer').hide();
    $('#levelSelectScreen').show('slow');
},
// Game Mode
mode:"intro", 
// X & Y Coordinates of the slingshot
slingshotX:140,
slingshotY:280,
start:function(){
    $('.gameLayer').hide();
    // Display the game canvas and score 
    $('#gameCanvas').show();
    $('#scoreScreen').show();

    game.mode = "intro";    
    game.offsetLeft = 0;
    game.ended = false;
    game.an
},
// Maximum panning speed per frame in pixels
maxSpeed:3,
// Minimum and Maximum panning offset
minOffset:0,
maxOffset:300,
// Current panning offset
offsetLeft:0,
// The game score
score:0,

//Pan the screen to center on newCenter
panTo:function(newCenter){
    if (Math.abs(newCenter-game.offsetLeft-game.canvas.width/4)>0 
        && game.offsetLeft <= game.maxOffset && game.offsetLeft >= game.minOffset){

        var deltaX = Math.round((newCenter-game.offsetLeft-game.canvas.width/4)/2);
        if (deltaX && Math.abs(deltaX)>game.maxSpeed){
            deltaX = game.maxSpeed*Math.abs(deltaX)/(deltaX);
        }
        game.offsetLeft += deltaX; 
    } else {

        return true;
    }
    if (game.offsetLeft <game.minOffset){
        game.offsetLeft = game.minOffset;
        return true;
    } else if (game.offsetLeft > game.maxOffset){
        game.offsetLeft = game.maxOffset;
        return true;
    }        
    return false;
},
handlePanning:function(){
    if(game.mode=="intro"){        
        if(game.panTo(700)){
            game.mode = "load-next-hero";
        }             
    }       

    if(game.mode=="wait-for-firing"){  
        if (mouse.dragging){
            game.panTo(mouse.x + game.offsetLeft)
        } else {
            game.panTo(game.slingshotX);
        }
    }

    if (game.mode=="load-next-hero"){
        // TODO: 
        // Check if any villains are alive, if not, end the level (success)
        // Check if there are any more heroes left to load, if not end the level (failure)
        // Load the hero and set mode to wait-for-firing
        game.mode="wait-for-firing";            
    }

    if(game.mode == "firing"){  
        game.panTo(game.slingshotX);
    }

    if (game.mode == "fired"){
        // TODO:
        // Pan to wherever the hero currently is
    }
},
showEndingScreen:function(mode){
    if (mode=="level-success"){

        if(game.currentLevel.number<levels.data.length-1){
            $('#endingMessage').html('Level Complete. Well Done!!!');
            $("#playNextLevel").show();
        } else {
            $('#endingMessage').html('All Levels Complete. Well Done!!!');
            $("#playNextLevel").hide();
        }
    } else if (mode=="level-failure"){          
        $('#endingMessage').html('Failed. Play Again?');
        $("#playNextLevel").hide();
    }       

    $('#endingscreen').show();
},

animate:function(){
    // Animate the background
   game.handlePanning();

   // Animate the characters


    //  Draw the background with parallax scrolling
        game.context.drawImage(game.currentLevel.backgroundImage,game.offsetLeft/4,0,640,480,0,0,640,480);
    game.context.drawImage(game.currentLevel.foregroundImage,game.offsetLeft,0,640,480,0,0,640,480);


    // Draw the slingshot
    game.context.drawImage(game.slingshotImage,game.slingshotX-game.offsetLeft,game.slingshotY);

    game.context.drawImage(game.slingshotFrontImage,game.slingshotX-game.offsetLeft,game.slingshotY);

    if (!game.ended){
        game.animationFrame = window.requestAnimationFrame(game.animate,game.canvas);
    }   
}
};//closes game variable

var levels={

data:[
    { //Load background images for level 1
        foreground:'planet-foreground',
        background:'space-background',
        entities:[]
    },
    { //Load background images for level 2
        foreground:'planet-foreground',
        background:'space-background',
        entities:[]
    }
],
//The follwoing init function dynamically generate each of the buttons for the levels within the game.
init: function(){
    var html="";
    for(var i=0; i<levels.data.length; i++) {
        var level=levels.data[i];
        html+= '<input type="button" value="'+(i+1)+'">';
    };
    $('#levelSelectScreen').html(html); //Looks for the level select screen in the DOM.
    //Add click handlers to the level buttons
    $('#levelSelectScreen input').click(function(){
        levels.load(this.value-1);//load function i scalled by click function.
        $('#levelSelectScreen').hide(); //hide level select screen when when the clcik function is triggered.
    });
},
//Load function will load all of the images that the level requires
load:function(number){

    // declare a new current level object
    game.currentLevel = {number:number,hero:[]};
    game.score=0;
    $('#score').html('Score: '+game.score);
    var level = levels.data[number];

    //load the background, foreground and slingshot images
    game.currentLevel.backgroundImage = loader.loadImage("http://www.erin-katie.com/images/backgrounds/"+level.background+".png");
    game.currentLevel.foregroundImage = loader.loadImage("http://www.erin-katie.com/images/backgrounds/"+level.foreground+".png");
    game.slingshotImage = loader.loadImage("http://www.erin-katie.com/images/slingshot.png");
    game.slingshotFrontImage = loader.loadImage("http://www.erin-katie.com/images/slingshot-front.png");

    //Call game.start() once the assets have loaded
    if(loader.loaded){
        game.start()
    } else {
        loader.onload = game.start;
    }
}


}//Closes level variable.

var loader={

loaded:true,
loadedCount:0, // This will count the number of assets that have loaded to the game so far.
totalCount:0, // This is the total nuber of assents that the game needs to load.

init:function(){
    //Sound Support
    var mp3Support,oggSupport;
    var audio = document.createElement('audio');
    if (audio.canPlayType)  {
        mp3Support= "" !=audio.canPlayType('audio/mpeg');
        oggSupport= "" !=audio.canPlayType('audio/ogg; codecs="vorbis"');
    }   
    else {
        mp3Support=false;
        oggSupport-false;
    }

    //When support for MP3 and OGG has been checked set file extension to undefined.
    loader.soundFileExtn=oggSupport?".ogg":mp3Support?".mp3":undefined;
},
 loadImage:function(url){
    this.totalCount++;
    this.loaded = false;
    $('#loadingScreen').show();
    var image = new Image();
    image.src = url;
    image.onload = loader.itemLoaded;
    return image;
},
soundFileExtn:".ogg",
loadSound:function(url){
    this.totalCount++;
    this.loaded=false;
    $('#loadingScreen').show();
    var aduio=new Audio();
    audio.src=url+loader.soundFileExtn;
    audio.addEventListner("canplaythrough", loader.itemloaded, false);
    return audio;
},
itemLoaded:function(){
    loader.loadedCount++;
    $('#loadingMessage').html('Loaded '+loader.loadedCount+' of '+loader.totalCount);
    if (loader.loadedCount === loader.totalCount){
        // Loader has loaded completely..
        loader.loaded = true;
        // Hide the loading screen 
        $('#loadingScreen').hide('1000');
        //and call the loader.onload method if it exists
        if(loader.onload){
            loader.onload();
            loader.onload = undefined;
        }
    }
}
}//closes loader variable

我的css：

  #gameContainer {
width:640px;
height:480px;
background: url(http://www.erin-katie.com/images/splashscreen.png);
border: 1px solid black;
  }

 .gameLayer {
width:640px;
height:480px;
position:absolute;
display:none;
 }

/* ===== SPLASH SCREEN ===== */
 #gameStartScreen {
padding-top:250px;
text-align:center;
 }

 #gameStartScreen img {
margin:10px;
cursor:pointer;
 }

/* ===== LEVEL SCREEN ===== */
 #levelSelectScreen {
padding-top:215px;
padding-left:60px;  
 }

 #levelSelectScreen input {
margin:20px;
cursor:pointer;
background:url(http://www.erin-katie.com/images/icons/level.png) no-repeat;
color:#fff;
font-size: 20px;
width:64px;
height:64px;
border:0;
}
#levelSelectScreen input:hover{
background:url(http://www.erin-katie.com/images/icons/level-hover.png) no-repeat;
}
/* ===== LOADING SCREEN ===== */
#loadingScreen {
background:rgba(200,200,200,0.7);   
}

#loadingMessage {
margin-top:400px;
text-align:center;
height:48px;
color:white;
background:url(http://www.erin-katie.com/images/loader.gif) no-repeat center;
font:12px Arial;
 }
.loaderTrans    {

}
/* ===== SCORE SCREEN ===== */
#scoreScreen  {
height:60px;
font: 32px Comic Sans MS;
text-shadow: 0 0 2px #000;
color:white;
}

#scoreScreen img{
opacity:0.6;
top:10px;
position:relative;
padding-left:10px;
cursor:pointer;
}

#scoreScreen #score {
position:absolute;
top:5px;
right:20px;
}

jsFiddle：http://jsfiddle.net/Erin_Katie/DEGn7/3/

有人可以帮忙吗？

Answer 1

代码不完整。

// Game Mode
mode:"intro", 
// X & Y Coordinates of the slingshot
slingshotX:140,
slingshotY:280,
start:function(){
    $('.gameLayer').hide();
    // Display the game canvas and score 
    $('#gameCanvas').show();
    $('#scoreScreen').show();

    game.mode = "intro";    
    game.offsetLeft = 0;
    game.ended = false;
    game.an
},

看到最后一行？
game.an
我相信这是问题

Answer 2

对我来说，似乎你的游戏环'动画'没有被执行。所以没有绘制背景。

Answer 3

简单地说，您尝试加载的图像不存在。

http://www.erin-katie.com/images/

HTML5画布游戏 - 背景不起作用

3 个答案: