someone2088
11 Apr 2012, 08:52 AM
Hi,
I'm trying to write a simple web page to teach users some basic Welsh by playing a game. I'm using the HTML5 canvas and JavaScript to display the game, but I'm having a bit of trouble getting the canvas to display the game elements as I want it to.
At the moment, the web page loads, and the canvas is displayed. The canvas is currently showing the 'score bar', which has the user's score, the current level being played, and the total number of levels.
The HTML and JavaScript I've written to display this is:
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
</head>
<body onLoad="start_game()">
<h1>Home</h1>
<p1>The purpose of this website is to allow users to learn some basic Welsh by playing the game below. <br /><br /></p1>
<p2>
<canvas id="gameCanvas" width="700" height="300" style="border:1px dotted">
Your browser does not support the canvas element.
</canvas>
<script>
/* Create the canvas, and add some global variables. */
var canvas = document.getElementById("gameCanvas");
var context = canvas.getContext("2d");
var image = new Image();
/* Global variables- game elements */
var currentLevel=1;
var totalLevels=5;
var currentScore=0;
var currentScorePositionX=100;
var currentScorePositionY=100;
/* This function starts the game, and calls all of the other functions required to play the game */
function start_game(){
game_id=setInterval(game_loop, 50);
drawGameElements();
}
/* This function draws the game elements */
function drawGameElements(){
var context = canvas.getContext("2d");
/* Draw a line for the 'score bar'. */
context.moveTo(0, 25);
context.lineTo(700, 25);
context.stroke();
/* Draw current level/ total levels on the left, and current score on the right. */
context.font = "11pt Calibri"; /* Text font & size */
context.strokeStyle = "black"; /* Font colour */
context.strokeText(currentLevel + "/" + totalLevels, 10, 15);
context.strokeText(currentScore, 650, 15);
drawLevelOneElements();
/* (10/04/2012) This is where I need to start working from again. Page currently loads, and displays the
canvas, the canvas displays the score bar, the current level/ total levels, and the current score.
I now need to get it to draw the elements that the user will need to play the game- at the moment,
I'm trying to get it to draw the elements for level 1, as described by the function
'drawLevelOneElements'. Currently, either the call to function drawLevelOneElements isn't registering
or the function drawLevelOneElements is not drawing to the canvas for some reason.*/
/* Use a switch statement to draw the game elements for each level, depending on which level the user is
currently playing. */
}
/* This function draws the elements for level 1. */
function drawLevelOneElements(){
var context = canvas.getContext("2d");
/* Draw the images for numbers 1-10.*/
var image1 = new Image();
image1.onLoad = function(){
context.drawImage(image1, 50, 50);
};
image1.src="1.png";
}
/* The game_loop function updates the canvas one frame at a time */
function game_loop(){
/* First, clear the canvas */
myCanvas.width = myCanvas.width;
/* Now draw the game elements */
draw_game_elements(currentScorePositionX, currentScorePositionY);
/* Draw the game score */
currentScore;
var integerScore=Math.floor(currentScore); /* This turns the currentScore variable into an integer*/
context.font="bold 24px sans-serif";
context.fillText(integerScore, gameCanvas.width-50, 50); /* This puts the current score in the top right corner*/
}
</script>
<br /><br /></p2>
<p3>Use this paragraph to enter text that provides the user with instructions for how to play the game. <br />
Update the instructions so that they're appropriate to whatever level the user is currently playing.</p3>
</body>
</html>
I'm now trying to add in a switch statement, so that what the canvas displays is updated depending on which level the user is currently playing.
I'm adding the switch statement into my drawGameElements() function, but for some reason, when I view the page in a browser after adding the first case and a default case to the switch statement, the canvas is completely blank- nothing is displayed, and the 'score bar' which was previously displayed is no longer there.
The switch statement I've added is below:
function drawGameElements(){
var context = canvas.getContext("2d");
/* Draw a line for the 'score bar'. */
context.moveTo(0, 25);
context.lineTo(700, 25);
context.stroke();
/* Draw current level/ total levels on the left, and current score on the right. */
context.font = "11pt Calibri"; /* Text font & size */
context.strokeStyle = "black"; /* Font colour */
context.strokeText(currentLevel + "/" + totalLevels, 10, 15);
context.strokeText(currentScore, 650, 15);
drawLevelOneElements();
/* (10/04/2012) This is where I need to start working from again. Page currently loads, and displays the
canvas, the canvas displays the score bar, the current level/ total levels, and the current score.
I now need to get it to draw the elements that the user will need to play the game- at the moment,
I'm trying to get it to draw the elements for level 1, as described by the function
'drawLevelOneElements'. Currently, either the call to function drawLevelOneElements isn't registering
or the function drawLevelOneElements is not drawing to the canvas for some reason.*/
/* Use a switch statement to draw the game elements for each level, depending on which level the user is
currently playing. */
switch(currentLevel){
case 1:
image.onLoad = function(){
context.drawImage(image, 30, 30);
}
<image.src="1.png" height="10" width="10" alt="Number 1" />
break;
default:
/* Display an error message if the game content cannot be displayed. */
context.font = "11pt Calibri";
context.strokeStyle = "red";
context.strokeText("The game content could not be loaded!", 300, 150);
}
}
Just wondering if someone could point out to me what I'm doing wrong, and why nothing is displayed on the canvas?
Many thanks.
I'm trying to write a simple web page to teach users some basic Welsh by playing a game. I'm using the HTML5 canvas and JavaScript to display the game, but I'm having a bit of trouble getting the canvas to display the game elements as I want it to.
At the moment, the web page loads, and the canvas is displayed. The canvas is currently showing the 'score bar', which has the user's score, the current level being played, and the total number of levels.
The HTML and JavaScript I've written to display this is:
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
</head>
<body onLoad="start_game()">
<h1>Home</h1>
<p1>The purpose of this website is to allow users to learn some basic Welsh by playing the game below. <br /><br /></p1>
<p2>
<canvas id="gameCanvas" width="700" height="300" style="border:1px dotted">
Your browser does not support the canvas element.
</canvas>
<script>
/* Create the canvas, and add some global variables. */
var canvas = document.getElementById("gameCanvas");
var context = canvas.getContext("2d");
var image = new Image();
/* Global variables- game elements */
var currentLevel=1;
var totalLevels=5;
var currentScore=0;
var currentScorePositionX=100;
var currentScorePositionY=100;
/* This function starts the game, and calls all of the other functions required to play the game */
function start_game(){
game_id=setInterval(game_loop, 50);
drawGameElements();
}
/* This function draws the game elements */
function drawGameElements(){
var context = canvas.getContext("2d");
/* Draw a line for the 'score bar'. */
context.moveTo(0, 25);
context.lineTo(700, 25);
context.stroke();
/* Draw current level/ total levels on the left, and current score on the right. */
context.font = "11pt Calibri"; /* Text font & size */
context.strokeStyle = "black"; /* Font colour */
context.strokeText(currentLevel + "/" + totalLevels, 10, 15);
context.strokeText(currentScore, 650, 15);
drawLevelOneElements();
/* (10/04/2012) This is where I need to start working from again. Page currently loads, and displays the
canvas, the canvas displays the score bar, the current level/ total levels, and the current score.
I now need to get it to draw the elements that the user will need to play the game- at the moment,
I'm trying to get it to draw the elements for level 1, as described by the function
'drawLevelOneElements'. Currently, either the call to function drawLevelOneElements isn't registering
or the function drawLevelOneElements is not drawing to the canvas for some reason.*/
/* Use a switch statement to draw the game elements for each level, depending on which level the user is
currently playing. */
}
/* This function draws the elements for level 1. */
function drawLevelOneElements(){
var context = canvas.getContext("2d");
/* Draw the images for numbers 1-10.*/
var image1 = new Image();
image1.onLoad = function(){
context.drawImage(image1, 50, 50);
};
image1.src="1.png";
}
/* The game_loop function updates the canvas one frame at a time */
function game_loop(){
/* First, clear the canvas */
myCanvas.width = myCanvas.width;
/* Now draw the game elements */
draw_game_elements(currentScorePositionX, currentScorePositionY);
/* Draw the game score */
currentScore;
var integerScore=Math.floor(currentScore); /* This turns the currentScore variable into an integer*/
context.font="bold 24px sans-serif";
context.fillText(integerScore, gameCanvas.width-50, 50); /* This puts the current score in the top right corner*/
}
</script>
<br /><br /></p2>
<p3>Use this paragraph to enter text that provides the user with instructions for how to play the game. <br />
Update the instructions so that they're appropriate to whatever level the user is currently playing.</p3>
</body>
</html>
I'm now trying to add in a switch statement, so that what the canvas displays is updated depending on which level the user is currently playing.
I'm adding the switch statement into my drawGameElements() function, but for some reason, when I view the page in a browser after adding the first case and a default case to the switch statement, the canvas is completely blank- nothing is displayed, and the 'score bar' which was previously displayed is no longer there.
The switch statement I've added is below:
function drawGameElements(){
var context = canvas.getContext("2d");
/* Draw a line for the 'score bar'. */
context.moveTo(0, 25);
context.lineTo(700, 25);
context.stroke();
/* Draw current level/ total levels on the left, and current score on the right. */
context.font = "11pt Calibri"; /* Text font & size */
context.strokeStyle = "black"; /* Font colour */
context.strokeText(currentLevel + "/" + totalLevels, 10, 15);
context.strokeText(currentScore, 650, 15);
drawLevelOneElements();
/* (10/04/2012) This is where I need to start working from again. Page currently loads, and displays the
canvas, the canvas displays the score bar, the current level/ total levels, and the current score.
I now need to get it to draw the elements that the user will need to play the game- at the moment,
I'm trying to get it to draw the elements for level 1, as described by the function
'drawLevelOneElements'. Currently, either the call to function drawLevelOneElements isn't registering
or the function drawLevelOneElements is not drawing to the canvas for some reason.*/
/* Use a switch statement to draw the game elements for each level, depending on which level the user is
currently playing. */
switch(currentLevel){
case 1:
image.onLoad = function(){
context.drawImage(image, 30, 30);
}
<image.src="1.png" height="10" width="10" alt="Number 1" />
break;
default:
/* Display an error message if the game content cannot be displayed. */
context.font = "11pt Calibri";
context.strokeStyle = "red";
context.strokeText("The game content could not be loaded!", 300, 150);
}
}
Just wondering if someone could point out to me what I'm doing wrong, and why nothing is displayed on the canvas?
Many thanks.