HTML5 キャンバスと JavaScript を使用して基本的なウェールズ語を教える簡単なゲームを作成しようとしています。
現在、キャンバスを表示する Web ページがあり、キャンバスには、ユーザーがクリックしてゲームを開始する「開始ボタン」が描画されています。
そのボタンに機能を追加して、ユーザーがボタンをクリックすると、ゲームの最初のレベルがキャンバスに表示されるようにします。しかし、私はこれに少し問題があり、誰かが私を助けてくれるかどうか疑問に思っていました.
index.html ファイルに次のコードがあります。
頭の中の隠しセクションに、次のものがあります。
<section hidden>
<img id="StartButton" src="StartButton.png" alt="Start Button" width="179" height="180" />
<script type="text/javascript">
/* Create a canvas layer to display text */
function displayText(textLayer, message){
var textLayerContext = textLayer.getContext();
textLayer.clear();
textLayerContext.font = "18pt Calibri";
textLayerContext.fillStyle = "black";
textLayerContext.fillText(message, 10, 10);
}
/* Create a canvas layer to display the button */
window.onload = function(){
var stage = new Kinetic.Stage({
container: "container",
width: 179,
height: 180
});
var buttonLayer = new Kinetic.Layer();
var textLayer = new Kinetic.Layer();
</script>
</section>
本文 onLoad... 関数 startGame() への呼び出しがあり、body タグ内に次のコードがあります。
<body onLoad="startGame()">
<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 type="text/javascript">
/* Create the canvas, and add some global variables. */
var myGameCanvas = document.getElementById("gameCanvas");
var context = myGameCanvas.getContext("2d");
var image = new Image();
var imageSource;
var imageX;
var imageY;
/* 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 startGame(){
drawGameElements();
drawStartButton();
/* Now need to add an event listener to call drawLevelOneElements() when
the start button is clicked. */
myGameCanvas.addEventListener("click", drawLevelOneElements, false);
//drawLevelOneElements();
//game_id=setInterval(game_loop, 50);
}
/* This function draws the game elements */
function drawGameElements(){
/* 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);
}
/* This function draws a start button which the user can click to start the game */
function drawStartButton(){
image.onload = function(){
context.drawImage(image, 260.5, 60);
};
image.src = "StartButton.png";
/** Now I need to add an event listener to the area of the canvas on
on which the button image is displayed, in order to 'listen' for
a click on the button */
var boundingBox = myGameCanvas.getBoundingClientRect();
var mouseX = (mouse_event.clientX-boundingBox.left) * (myGameCanvas.width/boundingBox.width);
var mouseY = (mouse_event.clientY-boundingBox.top) * (myGameCanvas.height/boundingBox.height);
var pixels = context.getImageData(mouseX, mouseY, 1, 1);
/** There maybe more than one pixel at this location so use a loop
to test whether any of the pixels have an alpha value greater than
0. With pixel data, 3 is alpha, so check data[3] and every fourth
element in data after that. */
//for (var i=3; i<pixels.data.length; i+=4;){
/** If a non- zero alpha is found, stop and return "true"- the click
was on a part of the canvas that has colour on it. */
// if(pixels.data[i]!=0) return true;
//}
/** If the function gets here, then the mouse click wasn't on a painted
part of the canvas. */
//return false;
/**myGameCanvas.getElementById("StartButton").onClick = function(e){
drawLevelOneElements();
} */
}
/* 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();
/* Test that this code is being executed */
context.moveTo(300, 300);
context.font = "11pt Calibri";
context.strokeStyle = "black";
context.strokeText("Testing",300, 300);
/* End of test */
image1.onLoad = function(){
context.drawImage(image1, 50, 50);
};
image1.src="1.png";
}
/* This function is what will be used to draw the images on the canvas */
function drawImage(x, y){
var numberImage = new Image();
numberImage.src = imageSource;
context.drawImage(numberImage, x, y);
}
</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>
現在、ブラウザでページを表示すると、前述のようにキャンバスに「開始ボタン」が表示されます。私がうまくいかないのは、スタートボタンがクリックされたときにキャンバスが関数 drawLevelOneElements() を呼び出す方法です...誰かが私を正しい方向に向けてくれればとても感謝していますか?
前もって感謝します！
お返事をありがとうございます。あなたが提案した変更を加えてみたので、次のようになりました。
function startGame(){
drawGameElements();
drawStartButton();
/* Now need to add an event listener to call drawLevelOneElements() when
the start button is clicked. */
//myGameCanvas.addEventListener("click", drawLevelOneElements, false);
//drawLevelOneElements();
//game_id=setInterval(game_loop, 50);
/*Add event listener to the canvas */
myGameCanvas.addEventListener('click', function(e){
console.log('click: ' + e.offsetX + '/' + e.offsetY);
var buttonHit = collides(StartButton, e.offsetX, e.offsetY);
if(buttonHit){
alert('collision: ' + buttonHit.x + '/' + buttonHit.y);
} else {
console.log('no collision');
}
}, false);
}
しかし、ブラウザでページを表示すると、スタートボタンの画像が表示されたキャンバスしか表示されず、機能はありません...つまり、クリックしても何もしません...
助言がありますか？