以下是带有修复和注释的相同代码

Question

我想根据按键操作来更改红色圆圈的位置，但我收到错误，我是初学者，所以我不知道我在做错了什么。

我希望那些红色圆圈在一段时间后消失，这就是为什么我把超时代码放在一起，我希望它们出现在图像上。

有人可以帮忙吗？我确信这是一个2分钟的修复，但我不擅长编码。

<html>
  <head>
    <title>Page Title</title>
    <style>
      body {
        background-image: url("violin.jpg");
        background-size: 2500px 1300px;
        <canvas id="myCanvas" width="1024" height="768"></canvas>
      } 
  </head>
  </style>
  <img id="bow" src="bow.jpg" style="display:none;" />
  <script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    window.addEventListener("keydown", soundPlay);
    function fillRed() {
      ctx.fillStyle = "red,";
      ctx.fill();
    }
    function keyQ() {
      ctx.beginPath();
      ctx.arc(500, 500, 30,0, Math.PI*2);
      ctx.fillStyle = "red";
      ctx.fill();
    }
    function keyW() {
      ctx.beginPath();
      ctx.arc(300, 300, 40,0, Math.PI*2);
      ctx.fillStyle = "red";
      ctx.fill();
    }
    function keyE() {
      ctx.beginPath();
      ctx.arc(900, 500, 20,0, Math.PI*2);
      ctx.fillStyle = "red";
      ctx.fill();
    }
    function keyR() {
      ctx.beginPath();
      ctx.arc(950, 100, 20,0, Math.PI*2);
      ctx.fillStyle = "red";
      ctx.fill();
    }
    ///var x = event.keyCode;
    <input type="text" onkeydown="pressedKey(event)">

    **THE ERROR I AM HAVING IS HERE**

    function pressedKey(event) {
      var x = event.keyCode;
      if (x == 27) { // 27 is the ESC key
        alert ("You pressed the Escape key!");
      } else if (x == 81) {
        keyQ();   
        var sound = new Audio('1.mp3');
        sound.play();
        setTimeout(fillRed, 200);
      } else if (event.keyCode == 87) {
        keyW();
        var sound = new Audio("2.mp3");
        sound.play();
        setTimeout(fillRed, 200);
      } else if (event.keyCode == 69) {
        keyE();
        var sound = new Audio("3.mp3");
        sound.play();
        setTimeout(fillRed, 200);
      } else if (event.keyCode == 82) {
        keyR();
        var sound = new Audio("4.mp3");
        sound.play();
        setTimeout(fillRed, 200);
      }
    }
  </script>
}
  <body></body>
</html>

Answer 1

Demis，

此代码有一些不正确之处：

您的样式中有HTML ...（画布）
您的脚本中有HTML（输入）
你的脚本之外有大括号（在html中不会出错，但我可以看到它应该消失或者在你的脚本标签中）
您的头部和样式标签未正确嵌套。在关闭你的风格之前你是在闭嘴。

干杯

Answer 2

以下是带有修复和注释的相同代码

标记中存在严重错误，表明（正如您承认的那样）您需要基本学费。

很高兴您尝试进行Web开发，我们都必须从某个地方开始，但我的建议是您在尝试运行之前学会走路。

我建议您先了解a gentle walkthrough course at w3schools以了解如何构建网页的基础知识，然后再了解自己要填写的内容。

如果您对如何构建网页有很好的理解，那么您可以继续进行更复杂的编码和more thorough documentation。

以下代码的某些部分已被注释掉，因为它们根本无法在本网站中嵌入，但它们可能在您自己的开发环境中工作（只要存在所需的资源）。

您可能会注意到我已将<script>移至<canvas>以下，以便在JavaScript尝试使用之前<canvas>已存在。
通过阅读the MDN documentation about document.readyState中给出的示例，您可以了解更多有关此问题的信息在尝试使用DOM之前，还有其他方法可以检测DOM的准备情况，这样<script>可以保留在<head>中，但为了简单和简洁，我选择简单地移动它。

至于你的fillRed()功能，如果想法是

......那些红色圆圈会在一段时间后消失，这就是为什么我把超时代码...

这段代码远远没有达到你所希望的程度 MDN（Mozilla开发者网络）有an indepth <canvas> tutorial on their site，可帮助您了解基础知识和一些更高级的内容。

<html>
  <head>
    <title>Page Title</title>
    <style>
      body {
        /*background-image: url("violin.jpg"); file not available on SO*/
        background-size: 2500px 1300px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="1024" height="768"></canvas>
    <!-- <img id="bow" src="bow.jpg" style="display:none;"> not displayed -->
    <input type="text" onkeydown="pressedKey(event)">
    <script>
      var canvas = document.getElementById("myCanvas");
      var ctx = canvas.getContext("2d");
      //window.addEventListener("keydown", soundPlay); // soundPlay is not defined
      function fillRed() {
        ctx.fillStyle = "red"; // this will not make the circle disappear
        ctx.fill();
      }
      function keyQ() {
        ctx.beginPath();
        ctx.arc(500, 500, 30, 0, Math.PI * 2);
        ctx.fillStyle = "red";
        ctx.fill();
      }
      function keyW() {
        ctx.beginPath();
        ctx.arc(300, 300, 40, 0, Math.PI * 2);
        ctx.fillStyle = "red";
        ctx.fill();
      }
      function keyE() {
        ctx.beginPath();
        ctx.arc(900, 500, 20, 0, Math.PI * 2);
        ctx.fillStyle = "red";
        ctx.fill();
      }
      function keyR() {
        ctx.beginPath();
        ctx.arc(950, 100, 20, 0, Math.PI * 2);
        ctx.fillStyle = "red";
        ctx.fill();
      }
      function pressedKey(event) {
        var x = event.keyCode;
        if (x == 27) { // 27 is the ESC key
          alert("You pressed the Escape key!");
        } else if (x == 81) {
          keyQ();
          //var sound = new Audio('1.mp3'); // requires file not available on SO
          //sound.play();
          setTimeout(fillRed, 200);
        } else if (event.keyCode == 87) {
          keyW();
          //var sound = new Audio("2.mp3"); // requires file not available on SO
          //sound.play();
          setTimeout(fillRed, 200);
        } else if (event.keyCode == 69) {
          keyE();
          //var sound = new Audio("3.mp3"); // requires file not available on SO
          //sound.play();
          setTimeout(fillRed, 200);
        } else if (event.keyCode == 82) {
          keyR();
          //var sound = new Audio("4.mp3"); // requires file not available on SO
          //sound.play();
          setTimeout(fillRed, 200);
        }
      }
    </script>
  </body>
</html>

尝试使用keypress调用函数和if else语句时出现Javascript错误

2 个答案:

以下是带有修复和注释的相同代码