@kmurzaev0
веб

Не работает игра на канвас, правильно ли сделал меню и почему не отображается сама игра?

Нужно сделать игру и меню которое при вводе имени и нажатии кнопки исчезает и начинается игра, меню сделал, но второй скрипт с игрой не выплняется ничего не происходит помогите плиз
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
	<title>Game</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<script src="jquery-3.4.1.min.js"></script>

</head>
<body>
	
	<div id="SplashScreen" class="SplashScreen">
			<h1 class="zag">Тимон и Пумба</h1>
			<input type="text" id="forUser"   class = "playername"placeholder = 'Имя игрока'>
			<input  class="knopka"  id="StartButton" type="button" value="Начать игру"/>
	</div>

		
	<canvas id="GameCanvas" style="display: none;">Game Stч</canvas>
		<script>
    		$("#StartButton").click(function () {
        	$("#SplashScreen").hide();
        	$("#GameCanvas").show();
    		});
		</script>
		<script >
			var canvas = getElementByID('GameCanvas');
		var ctx = canvas.getContext('2d');
		var img = new Image()
		img.src = 'fon.png'
		img.onload = function() {
                 
        var pattern = context.createPattern(img, "repeat");
        context.fillStyle = pattern;
        context.fillRect(10, 10, 150, 150);
        context.strokeRect(10, 10, 150, 150);
            };</script>

</body>
</html>

canvas {
	
    width: 70%;
    position: absolute;
	margin-left: 15%;
    height: 75vh;
    border: solid 1px black;
}
.SplashScreen{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: #FF0000;
	width: 70%;
    height: 75vh;
    position: absolute;
    top: 0;
    left: 15%;
       

}
.zag{

	margin-bottom: 13%;
	position: relative;
	color: #FFC0CB;
}

.playername{
	text-align: center;
	position: relative;
	margin-bottom: 11%;
	width: 20%;

}
.knopka{

	height: 7%;
	width: 15%;
	
	position: relative;
	background: rgb(212,75,56);
}
.knopka:hover {
 background: #FF00FF; 
}
  • Вопрос задан
  • 96 просмотров
Решения вопроса 2
twobomb
@twobomb
var canvas = getElementByID('GameCanvas');
замени на
var canvas = document.getElementById('GameCanvas');
Ответ написан
v3shin
@v3shin
Веб-шаман
Вы создаете
var ctx = canvas.getContext('2d');
А потом используете
context.fillStyle = pattern;
Проверяйте почаще консоль ошибок. =)
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы