Question

我想在HTML5（主要是Javascript）中制作一个简单的“游戏”，你只需移动一个球。

我想通过在画布上画一个圆来创建一个球（可以用箭头键移动）。这是可能的，还是另一种方法更简单？

我想将它创建为一个函数，以便我有一个选择球的方法。无论如何，我能画一个三角形，但不是圆形。这是代码：

var canvas = document.getElementById("mycanvas");
var ctx = canvas.getContext("2d");

canvas.width = canvas.height = 500;

function circle() {
    // the circle - DOESNT SHOW UP
    ctx.beginPath();
    ctx.arc(50, 50, 25, 0, Math.PI * 2, true);
    ctx.fillStyle = "blue";
    ctx.fill();
}

cicle();


function drawTriangle() {
  // the triangle - works perfectly
  ctx.beginPath();
  ctx.moveTo(200, 100);
  ctx.lineTo(170, 150);
  ctx.lineTo(230, 150);
  ctx.closePath();
 
  // the fill color
  ctx.fillStyle = "rgba(255, 204, 0, 1)";
  ctx.fill();
}

drawTriangle();

任何人都可以说，为什么圆圈没有出现？重要提示：当圆圈不是函数的一部分时，圆圈看起来很完美

P.S。：我对网络开发等很新。感谢您的任何建议

Answer 1

当你调用圆形函数时，是否可能是由于拼写错误？所以circle()代替cicle()

Answer 2

嗯，这很简单。当你在javascript中调用一个函数时，你必须在函数声明中拼写它，否则你将调用一个不存在的函数。

function circle(){
  //code to draw circle
}

//then when i want to call circle function i do this
circle();
//this calls non-existant "cicle" function
cicle();

所以，你的功能没有任何问题，只是你怎么称呼它。

在javascript中创建对象作为函数 - 并在游戏中使用箭头键控制它们

2 个答案: