Я нахожусь в процессе создания стартового экрана для моей игры JavaScript Breakout. Я (плохо) сделал фон и кнопку воспроизведения.
Фон внутри холста, который я хочу. Но когда я хочу поместить кликабельную кнопку воспроизведения поверх фона на холсте, он исчезает. Я попытался сделать еще одну фотографию, и я могу поместить ее поверх, я просто не могу сделать ее кликабельной.
Я не знаю, какое лучшее решение, я очень плохо знаком с JavaScript.
//Script
var background = new Image();
background.src="breakoutbg.png";
var play = new Image();
play.src="breaoutplay.png";
var startBtn = document.getElementById('startBtn');
//game
function drawCanvas() {
ctx.beginPath();
ctx.drawImage(background,0,0);
ctx.fill();
ctx.closePath();
}
function drawPlay() {
ctx.beginPath();
ctx.drawImage(play,250,250);
ctx.fill();clickable;
ctx.closePath();
}
<div id="container">
<button type="button" id="startBtn" onclick="draw()" >
<img src="breaoutplay.png">
</button>
<canvas id="myCanvas" width="600" height="550"></canvas>
</div>
Я не знаю, дал ли я достаточно кода, чтобы у кого-то была идея об этом. Весь код на github: https://github.com/katrinemira/katrinemira.github.io/blob/master/breakout.html