0
我試圖寫一個簡單的遊戲，教使用HTML5畫布和JavaScript的一些基本威爾士的HTML5畫布上的一個按鈕。創建使用JavaScript
我現在有一個網頁，該網頁顯示一個畫布，畫布上的「開始按鈕」已經繪就，這對用戶會點擊開始遊戲。
我現在想將功能添加到該按鈕，這樣當用戶點擊它，會顯示在畫布上比賽的第一級。不過，我在這方面遇到了一些麻煩，並且想知道是否有人可以幫助我。
我在我的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 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);
}
但是當我在瀏覽器中查看網頁，我還只是有啓動按鈕圖像畫布顯示，並沒有功能.. 。即點擊什麼也不做......
有什麼建議？
謝謝您reply-試圖回答它，但它說，我的回答是太長了，所以我已經編輯我原來的職位，包括回覆... – Someone2088 2012-04-22 17:28:59
你知道如何調試JavaScript代碼，這將有助於您。你可以在互聯網上搜索你正在使用的瀏覽器的調試，這將幫助你... – Adil 2012-04-22 18:00:24
記住，如果你有很長的消息，你可以發送倍數，編輯討論的問題是不是很合適。也嘗試瞭解我發送的示例。我希望它能幫助你解決問題 – Adil 2012-04-22 18:02:36