Javascript 嗨，我想建立一个小应用程序游戏，名为；沉船；？_Javascript

Javascript 嗨，我想建立一个小应用程序游戏，名为；沉船；？

javascript

Javascript 嗨，我想建立一个小应用程序游戏，名为；沉船；？,javascript,Javascript,嗨，我是一个新手，我目前正在尝试开发一个名为sink ships的应用程序。我已经画了带有css属性的圆圈和看起来像这样的坦克{ circle.style.position=“绝对”； circle.style.left=0； circle.style.top=0； }); window.addEventListener（“keyup”，（e）=>{ 开关（电子钥匙）{ 案例“箭头左”： circle.style.left=parseInt（circle.style.left）-moveBy+

嗨，我是一个新手，我目前正在尝试开发一个名为sink ships的应用程序。我已经画了带有css属性的圆圈和看起来像这样的坦克{ circle.style.position=“绝对”； circle.style.left=0； circle.style.top=0； }); window.addEventListener（“keyup”，（e）=>{ 开关（电子钥匙）{ 案例“箭头左”： circle.style.left=parseInt（circle.style.left）-moveBy+“px”；打破案例“ArrowRight”： circle.style.left=parseInt（circle.style.left）+moveBy+“px”；打破案例“ArrowUp”： circle.style.top=parseInt（circle.style.top）-moveBy+“px”；打破案例“箭头向下”： circle.style.top=parseInt（circle.style.top）+moveBy+“px”；打破 } }); 函数{ ctx.beginPath（）；弧（x，y，10，0，Math.PI*2）； ctx.fillStyle=“#0095DD”； ctx.fill（）； ctx.closePath（）； } 函数绘图（）{ clearRect（0，0，canvas.width，canvas.height）；牵引杆（）； x+=dx； y+=dy； } 设置间隔（抽签，10）

.circle{
高度：100px；
宽度：100px；
边界半径：50%；
背景色：rgb（0,0,0）；
文本最后对齐：网格；
证明内容：中心；
对齐项目：居中；
ast：对；
}


文件
------000
这个问题对我来说有点模糊。我的理解是，你想让大黑圈上下移动，ASCII艺术随着键盘移动，如果ASCII艺术的前面碰到大圆圈，大圆圈就会消失
传统上，人们会使用画布对象为浏览器编写游戏。在代码中，您有一些内容试图使用画布，但由于您没有在javascript中声明画布或创建画布元素，因此画布代码会引发异常。我的建议是停止使用html元素，移动到画布上。但是，为了使答案尽可能接近源代码，我将提供一些使用原始HTML元素的代码，然后是画布实现
元素基解
如果只想使用html元素构建游戏，则需要对脚本进行以下更改：
// var canvas = document.getElementById("myCanvas");
// var ctx = canvas.getContext("2d");
// var x = canvas.width/2;
// var y = canvas.height-30;
let x = 100;
let y = 100;
let ticks = 0;
var dx = 2;
var dy = 100;
let bigCircle = document.getElementsByClassName('circle')[0];

// ctx.beginPath();
function drawBall() {
  // ctx.arc(x, y, 10, 0, Math.PI*2);
  // ctx.fillStyle = "#0095DD";
  // ctx.fill();
  // ctx.closePath();
}

function styleStringToNumber(string) {
  return +(string.substring(0, string.length - 2));
}

function draw() {
  //ctx.clearRect(0, 0, canvas.width, canvas.height);
  // drawBall();
  ticks++;
  animatedY = Math.cos(ticks / 100) * 100 + dy;
  bigCircle.style.top = animatedY;

  let circleBoundary = document.getElementById(".circle").getBoundingClientRect();
  let tip = { x: circleBoundary.left, y: (circleBoundary.top + circleBoundary.bottom) / 2 }
  let distance = Math.sqrt((styleStringToNumber(bigCircle.style.top) + 50 - tip.y) ** 2 + (styleStringToNumber(bigCircle.style.left) + 50 - tip.x) ** 2)
  if (distance < 50)
    bigCircle.style.visibility = "hidden"
}

setInterval(draw, 10);

//var canvas=document.getElementById（“myCanvas”）；
//var ctx=canvas.getContext（“2d”）；
//var x=canvas.width/2；
//变量y=画布高度-30；
设x=100；
设y=100；
设ticks=0；
var-dx=2；
var-dy=100；
让bigCircle=document.getElementsByClassName（'circle'）[0]；
//ctx.beginPath（）；
函数{
//弧（x，y，10，0，数学π*2）；
//ctx.fillStyle=“#0095DD”；
//ctx.fill（）；
//ctx.closePath（）；
}
函数样式StringToNumber（字符串）{
return+（string.substring（0，string.length-2））；
}
函数绘图（）{
//clearRect（0，0，canvas.width，canvas.height）；
//牵引杆（）；
ticks++；
animatedY=Math.cos（ticks/100）*100+dy；
bigCircle.style.top=animatedY；
设circleBoundary=document.getElementById（“.circle”）.getBoundingClientRect（）；
设tip={x:circleBoundary.left，y:（circleBoundary.top+circleBoundary.bottom）/2}
让距离=Math.sqrt（（styleStringTonNumber（bigcirle.style.top）+50-tip.y）**2+（styleStringTonNumber（bigcirle.style.left）+50-tip.x）**2）
如果（距离<50）
bigCircle.style.visibility=“隐藏”
}
设置间隔（抽签，10）；

css中还有一些格式错误的代码。您可以通过删除最后一行的结尾，使其仅显示“对齐项目：中心”，并附加最后一个右大括号来解决问题
描述
与画布有关的行已注释掉
通过查询带有类circle的元素列表并获取列表中的第一个元素，我们获得了对大圆的引用
我们添加了一个函数“styleStringToNumber”，该函数将从大圆的样式中获取位置数据，并将其从带有尾随“px”的字符串转换为数字
随着时间上下移动大圆圈。有很多方法可以做到这一点。我选择使用一个简单的三角函数，因为它可以简化它的垂直运动
获取由圆引用的元素的边界
使用毕达哥拉斯定理计算从大圆中心到“圆”边界框左侧的距离
如果距离小于大圆的半径，则将可见性更改为“隐藏”
使用画布
如果要转换为使用画布，则可以复制以下行为：
<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <title>Page Title</title>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <style>
    html,
    body {
      overflow: hidden
    }
  </style>
</head>

<body onkeyup='keyup(event)'>
  <canvas id="canv" width=640 height=480></canvas>
  <script>
    let ctx = document.querySelector("#canv").getContext("2d")
    let asciiPosition = { x: 0, y: 10 }
    let circlePosition = { x: 0, y: 0 }
    let ticks = 0;
    let showBigCircle = true;

    function main() {
      //update and draw every 10ms
      setInterval(update, 10)
    }

    //Change the state of the game
    function update() {
      ticks++

      circlePosition.y = Math.cos(ticks / 100) * 100 + 100;

      //Check if they are in collision
      let distance = Math.sqrt((asciiPosition.x - (circlePosition.x + 50))**2 + (asciiPosition.y - (circlePosition.y + 50))**2)
      if(distance < 50) 
      showBigCircle = false;

      draw();
    }

    //Draw the game
    function draw() {
      ctx.fillStyle = "lightgreen";
      ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);

      ctx.fillStyle = "black"
      ctx.fillText("<------000", asciiPosition.x, asciiPosition.y)

      if (showBigCircle) {
        ctx.beginPath();
        ctx.arc(circlePosition.x + 50, circlePosition.y + 50, 50, 0, Math.PI * 2);
        ctx.fill();
      }

    }

    //Respondto keyboard events
    function keyup(e) {
      let jump = 10;
      switch (e.key) {
        case 'ArrowLeft':
          asciiPosition.x -= jump;
          break;
        case 'ArrowRight':
          asciiPosition.x += jump;
          break;
        case 'ArrowUp':
          asciiPosition.y -= jump;
          break;
        case 'ArrowDown':
          asciiPosition.y += jump;
          break;
      }
    }

    //Start the game loop
    main();

  </script>

</body>

</html>


页面标题
html，
身体{
溢出：隐藏
}
设ctx=document.querySelector（#canv”）.getContext（“2d”）
设AsciPosition={x:0，y:10}
设circlePosition={x:0，y:0}
设ticks=0；
让showBigCircle=true；
函数main（）{
//每10毫秒更新并绘制一次
设置间隔（更新，10）
}
//改变游戏的状态
函数更新（）{
滴答声++
circlePosition.y=数学cos（ticks/100）*100+100；
//检查它们是否相撞
设距离=数学sqrt（（AsciPosition.x-（circlePosition.x+50））**2+（AsciPosition.y-（circlePosition.y+50））**2）
如果（距离<50）
showBigCircle=false；
draw（）；
}
//平局
函数绘图（）{
ctx.fillStyle=“浅绿色”；
ctx.fillRect（0，0，ctx.canvas.width，ctx.canvas.height）；
ctx.fillStyle=“黑色”
ctx.fillText（“