Warum ist der Bildschirm weiß und warum wird das Spiel nicht angezeigt?

Der Code: <!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Snake</title>

</head>

<body>

    <div id="score">Score: 0</div>

    <canvas id="canvas" width="480" height="480"></canvas>

    <button id="startButton">Start Game</button>

    <script>

        let canvas = document.getElementById('canvas');

        let ctx = canvas.getContext('2d');

        let rows = 20;

        let cols = 20;

        let snake = [{ x: 19, y: 3 }];

        let food = { x: 4, y: 5 };

        let cellWidth = canvas.width / cols;

        let cellHeight = canvas.height / rows;

        let direction = 'LEFT';

        let foodCollected = false;

        let score = 0;

        let gameRunning = false;

        placeFood();

        document.getElementById('startButton').addEventListener('click', startGame);

        setInterval(gameLoop, 500); // Ändere die Zeitverzögerung auf 500 Millisekunden (0,5 Sekunden)

        update();

        function update() {

            if (gameRunning) {

                moveSnake();

                testGameOver();

                if (foodCollected) {

                    snake.unshift({ ...snake[0] });

                    foodCollected = false;

                }

            }

            draw(); // Rufe die draw-Funktion in jedem Frame auf

            requestAnimationFrame(update);

        }

        function moveSnake() {

            shiftSnake();

            if (direction === 'LEFT') {

                snake[0].x--;

            } else if (direction === 'RIGHT') {

                snake[0].x++;

            } else if (direction === 'UP') {

                snake[0].y--;

            } else if (direction === 'DOWN') {

                snake[0].y++;

            }

            if (snake[0].x === food.x && snake[0].y === food.y) {

                foodCollected = true;

                placeFood();

                increaseScore();

            }

        }

        function draw() {

            ctx.fillStyle = 'black';

            ctx.fillRect(0, 0, canvas.width, canvas.height);

            ctx.fillStyle = 'white';

            snake.forEach(part => add(part.x, part.y));

            ctx.fillStyle = 'yellow';

            add(food.x, food.y);

        }

        function testGameOver() {

            let firstPart = snake[0];

            let otherParts = snake.slice(1);

            let duplicatePart = otherParts.find(part => part.x === firstPart.x && part.y === firstPart.y);

            if (

                snake[0].x < 0 ||

                snake[0].x >= cols ||

                snake[0].y < 0 ||

                snake[0].y >= rows ||

                duplicatePart

            ) {

                placeFood();

                snake = [{ x: 19, y: 3 }];

                direction = 'LEFT';

                score = 0;

                updateScore();

                gameRunning = false;

                document.getElementById('startButton').textContent = 'Start Game';

            }

        }

        function placeFood() {

            let randomX = Math.floor(Math.random() * cols);

            let randomY = Math.floor(Math.random() * rows);

            food = { x: randomX, y: randomY };

        }

        function add(x, y) {

            ctx.fillRect(x * cellWidth, y * cellHeight, cellWidth - 1, cellHeight - 1);

        }

        function shiftSnake() {

            for (let i = snake.length - 1; i > 0; i--) {

                const part = snake[i];

                const lastPart = snake[i - 1];

                part.x = lastPart.x;

                part.y = lastPart.y;

            }

        }

        function increaseScore() {

            score++;

            updateScore();

        }

        function updateScore() {

            document.getElementById('score').textContent = 'Score: ' + score;

        }

        function startGame() {

            if (!gameRunning) {

                gameRunning = true;

                document.getElementById('startButton').textContent = 'Pause Game';

            } else {

                gameRunning = false;

                document.getElementById('startButton').textContent = 'Resume Game';

            }

        }

        document.addEventListener('keydown', keyDown);

        function keyDown(e) {

            if (gameRunning) {

                if (e.keyCode === 37) {

                    direction = 'LEFT';

                } else if (e.keyCode === 38) {

                    direction = 'UP';

                } else if (e.keyCode === 39) {

                    direction = 'RIGHT';

                } else if (e.keyCode === 40) {

                    direction = 'DOWN';

                }

            }

        }

    </script>

</body>

</html>

Bild zu Frage
HTML, programmieren, JavaScript
Warum ist das so?

Warum ist bei diesem code der Screen weiß?

 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Snake</title>
</head>
<body>
  
  <canvas id="canvas" width="480" height="480"></canvas>
  <script>
    let canvas = document.getElementById('canvas');
    let ctx = canvas.getContext('2d');
    let rows = 20;
    let cols = 20;
    let snake = [{
      x: 19,
      y:3
    }];
    let food = {
      x: 4,
      y: 5
    };
    let cellWidht = canvas.width / cols
    let cellHeigth = canvas.height / rows
    let direction = 'LEFT';
    let foodCollected = false;
    placeFood();
    setInterval(gameLoop, 200);
    document.addEventListener('keydown', keyDown);
    draw();
    
    function draw() {
      ctx.fillStyle = 'black';
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      ctx.fillStyle = 'white'
      snake.forEach(part => add(part.x, part.y));
      
      ctx.fillStyle = 'yellow'
      add(food.x, food.y); //food
      requestAnimationFrame(draw);
    }
      function testGameOver() {
      //1. Schlange läuft gegen die Wand
      if (snake[0].x < 0 ||
        snake[0].x > cols - 1 ||
        snake[0].y < 0 ||
        snake[0].y > rows - 1
      ) {
        placeFood();
        snake = [{
      x: 19,
      y:3
    }];
      direction = 'LEFT';
  }
      function placeFood(){
        let randomX = Math.floor(Math.random() * cols);
        let randomY = Math.floor(Math.random() * rows);
        food = {x: randomX, y: randomY};
       };
      }
    function add(x, y) {
      ctx.fillRect(x * cellWidht, y * cellHeigth, cellWidht - 1, cellHeigth - 1);
    }
    function shiftsnake() {
      for (let i = snake.length - 1; i > 0; i--) {       const part = snake[i];
        const lastPart = snake[i - 1];
        part.x = lastPart.x;
        part.y = lastPart.y;
      
      }
    }
    function gameLoop() {
     
      testGameOver();
      if(foodCollected) {
       snake = [{x: snake[0].x, y: snake[0].y}, ...snake];
       
       foodCollected = false;
      }
      
      shiftsnake();
      if (direction == 'LEFT') {
      snake[0].x--;
      }
      if (direction == 'RIGHT') {
      snake[0].x++;
      }
      if (direction == 'UP') {
      snake[0].y--;
      }
      if (direction == 'DOWN') {
      snake[0].y++;
      }
      if(snake[0].x ==food.x
      && snake[0].y == food.y) {
      foodCollected = true;
         placeFood();
      }
    }
    
      
    function keyDown(e) {
      if (e.keyCode == 37) { //Richtung Links
        direction = 'LEFT';
      }
      if (e.keyCode == 38) {
        direction = 'UP';
      }
      if (e.keyCode == 39) {
        direction = 'RIGHT';
      }
      if (e.keyCode == 40) {
        direction = 'DOWN';
      }
    }  
  </script>
</body>
</html>
Spiele, programmieren, JavaScript
PowerShell / REST Microsoft Azure: Get-AzPolicyStateSummary?

Moin!

Ich möchte den Ist-Status der Policy Compliance in einer Subscription reporten.

Ich ziehe also folgend die Daten:

$azState = Get-AzPolicyStateSummary -SubscriptionId $subscriptionId
    $exportObject.Compliance.TotalRessources = $azState.Results.ResourceDetails[0].Count + $azState.Results.ResourceDetails[1].Count + $azState.Results.ResourceDetails[2].Count
    $exportObject.Compliance.CompliantRessources = $azState.Results.ResourceDetails[0].Count
    $exportObject.Compliance.NonCompliantRessources = $azState.Results.ResourceDetails[1].Count
    $exportObject.Compliance.Exceptions = $azState.Results.ResourceDetails[2].Count
    $exportObject.Compliance.Percentage = [math]::Round((1.0 - $exportObject.Compliance.NonCompliantRessources / ($exportObject.Compliance.CompliantRessources + $exportObject.Compliance.NonCompliantRessources + $exportObject.Compliance.Exceptions)) * 100)

Beziehen kann ich so erfolgreich die Resource Compliance in Prozent, die Gesamtzahl der Ressourcen sowie die Aufteilung wie viel Compliant, Non-Complient und 'Other' sind.

Problematisch ist aber, dass ich nicht die Non-Compliant Initiatives und Non-Compliant Policies beziehen kann. Die Werte, wie ich sieh auch beziehe scheinen nie mit diesen Werten übereinzustimmen. Entweder kriege ich deutlich niedrigere oder deutlich höhere Werte.

Hat daher jemand eine Idee, wie ich die Daten richtig filtern kann oder z.B. über die Graph API die korrekten Daten beziehen kann?

PC, Computer, Microsoft, programmieren, Programmiersprache, Rest, Softwareentwicklung, Cloud, API, azure, PowerShell
Wieso geht mein C# Code nicht mit Blazor?

Hallo, ich programmiere momentan eine WetterApp mit Blazor zur Übung und habe einen C# Code geschrieben, allerdings funktioniert da nichts. Kann mir wer helfen?

Hier mein C# Code

@if (weatherData != null)
{
    <h4>@weatherData.Name</h4>
    <p>Temperatur: @Math.Round(weatherData.Main.Temperature)°C</p>
    <p>Luftfreuchtigkeit: @weatherData.Main.Humidity%</p>
    <p>Windgeschwindigkeit: @weatherData.Wind.Speed km/h</p>
    <p>Wetter: @weatherData.Weather[0].Main</p>
}

@code{
    private string city;
    private WeatherData weatherData;


    private async Task CheckWeather()
    {
        string apiKey = "6958878b02398eb62a27936168c23c6";
        string apiUrl = "https://api.openweathermap.org/data/2.5/weather?units=metric&q=";

        using (HttpClient client = new HttpClient())
        {
            try
            {
                HttpResponseMessage response = await client.GetAsync($"{apiUrl}{city}&appid={apiKey}");


                response.EnsureSuccessStatusCode();

                string responseBody = await response.Content.ReadAsStringAsync();

                weatherData = Newtonsoft.Json.JsonConvert.DeserializeObject<WeatherData>(responseBody);
            }
            catch (HttpRequestException e)
            {
                Console.WriteLine($"Fehler: {e.Message}");
            }
        }
    }
    public class WeatherData
    {
        public string Name{ get; set; }
        public MainData Main { get; set; }
        public WindData Wind { get; set; }
        public WeatherCondition [] Weather { get; set; }
    }

    public class MainData
    {
        public double Temperature { get; set; }
        public int Humidity { get; set; }
    }

    public class WindData
    {
        public double Speed { get; set; }
    }
    public class WeatherCondition
    {
        public string Main { get; set; }
    }
}

Hier mein HTML Code:

<body class="backgroundimage">
    <div class="card">
        <div class="search">
            <button @onclick="CheckWeather">
                <img src="images/SuchIcon.png"/>
                <input type="text" placeholder="Search" spellcheck="false" id="cityInput" @bind="city">
        </div>
            </div>
            <div class="weather">
                <div class="center margin-top">
                    <img src="images/image1.png" width="200" height="200" style="opacity: 1" class="weather-icon"/>
                </div>
                <div>
                    <h1 class="temp">22°c</h1>
                </div>
                <div class="center">
                    <h2 class="city center margin-top">New York</h2>
                </div>
                <hr class="hr1 line1"/>
                <div id="imagesMain">
                    <img src="/images/image1.png" width="75" height="75" class="imageline "/>
                    <img src="/images/image1.png" width="75" height="75" class="imageline "/>
                    <img src="/images/image1.png" width="75" height="75" class="imageline " style="margin-left: 5px; margin-right: -5px;"/>
                    <img src="/images/image1.png" width="75" height="75" class="imageline " style="margin-left: 12px; margin-right: -10px;"/>
                    <img src="/images/image1.png" width="75" height="75" class="imageline " style="margin-left: 2px; margin-right: -14px;"/>
                </div>
                <div>
                    <p style="color:black;" class="line0 title margin-left ">Monday</p>
                    <p style="color:black;" class="line0 title margin-left ">Tuesday</p>
                    <p style="color:black;" class="line0 title margin-left ">Wednesday</p>
                    <p style="color:black;" class="line0 title margin-left ">Thursday</p>
                    <p style="color: black;" class="line0 title margin-left ">Friday</p>
                </div>
                <hr class="hr1 line"/>
                <div class="details">
                    <div class="col">
                        <img src="images/humidity.png"/>
                        <div>
                            <p class="speed">Humidity</p>
                            <p class="humidity">50%</p>
                        </div>
                    </div>
                    <div class="col">
                        <img src="images/wind.png"/>
                        <div>
                            <p class="speed">Wind Speed</p>
                            <p class="wind">15 km/h </p>
                        </div>
                    </div>
                </div>
            </div>
        </body>
    </html>

   Ich verstehe nicht weshalb mein ClickEvent nicht funktioniert und die Wetterdaten nicht angezeigt werden.

HTML, programmieren, C Sharp, Programmiersprache

Meistgelesene Fragen zum Thema Programmieren