The game does not work on canvas, did you make the menu correctly and why is the game itself not displayed?

N

Nikolay2020-01-22 11:46:27

JavaScript

Nikolay, 2020-01-22 11:46:27

You need to make a game and a menu that, when you enter a name and press a button, disappears and the game starts, the menu is made, but the second script with the game is not executed, nothing happens, please help

<!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; 
}

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

T

twobomb, 2020-01-22
@kmurzaev0

var canvas = getElementByID('GameCanvas');
replace with

var canvas = document.getElementById('GameCanvas');