5
Ich bin neu in der Erstellung von Spielen mit HTML5 Canvas. Ich benutze das Angry Bird Stil Tutorial mit dem 'Pro html5 Spiele' Buch Ich habe alles gemacht, was im Tutorial gefragt wurde aber mein Spielhintergrund funktioniert nicht ....HTML5 Canavs Spiel - Hintergrund funktioniert nicht
Der Splash Screen, der Level Screen und Der Ladebildschirm funktioniert einwandfrei, außer bis ich die Hintergrundbilder für das Spiel selbst geladen habe.
mein 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>
mein 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
mein 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/
Kann jemand bitte helfen?
Sie JS Fehler bekommen Sie? Vielleicht könntest du auch ein http://jsfiddle.net/ – geedubb
** Fiddle ** (ohne Bilder) erstellen: http://jsfiddle.net/rudiedirkx/cg55N/ – Rudie
Was ist los mit allen Inline-Stilen? 'display: none' auf der Leinwand hilft wahrscheinlich nicht? – Rudie