Question

我正在开发一个有点初学者的javascript（Canvas）游戏，我为游戏创建了一个鼠标形状。我想把它变成一个javascript对象（构造函数和原型）并尽可能减少代码量。请有人帮助我。看过一次之后，我通常都很不错。提前致谢。这是鼠标代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>

    <style>
      body {
      margin: 0px;
    padding: 0px;
    }
  </style>
</head>
<body>
<canvas id="myCanvas" width="1200" height="900"></canvas>
<script>
  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');




 //  ***********************************  Head and Body     **********      
  var bodyX = 0;
  var bodyY = 0;
  var bodyRadius = 25;

  var headX = 22;
  var headY = 0;
  var headRadius = 14;
  // save state
  context.save();

  // translate context
  context.translate(canvas.width / 2, canvas.height / 2);

  // scale context horizontally
  context.scale(2, 1);

  // draw circle which will be stretched into an oval
  context.beginPath();
  context.arc(bodyX, bodyY, bodyRadius, 0, 2 * Math.PI, false);

  // restore to original state
  context.restore();

  // apply styling
  context.fillStyle = '#909090';
  context.fill();
 //***************************************** HEAD  *****************
  context.save();

  // translate context
  context.translate(canvas.width / 2, canvas.height / 2);

  // scale context horizontally
  context.scale(2, 1);

  // draw circle which will be stretched into an oval
  context.beginPath();
  context.arc(headX, headY, headRadius, 0, 2 * Math.PI, false);

  // restore to original state
  context.restore();

  // apply styling
  context.fillStyle = '#707070';
  context.fill();

    //************************************ Right Ear *************
    var rtEarX = 26;
  var rtEarY = 14;
  var rtEarRadius = 8;

    context.save();

  // translate context
  context.translate(canvas.width / 2, canvas.height / 2);

        // draw circle which will be stretched into an oval
  context.beginPath();
  context.arc(rtEarX, rtEarY, rtEarRadius, 0, 2 * Math.PI, false);

  // restore to original state
  context.restore();

  // apply styling
  context.fillStyle = '#707070';
  context.fill();

    //******************************* Left Ear  ***************

  var ltEarX = 26;
  var ltEarY = -14;
  var ltEarRadius = 8;

    context.save();

  // translate context
  context.translate(canvas.width / 2, canvas.height / 2);

        // draw circle which will be stretched into an oval
  context.beginPath();
  context.arc(ltEarX, ltEarY, ltEarRadius, 0, 2 * Math.PI, false);

  // restore to original state
  context.restore();

  // apply styling
  context.fillStyle = '#707070';
  context.fill();

//************************************  Right Eye ********************

    var rtEyeX = 40;
  var rtEyeY = -10;
  var rtEyeRadius = 2;

    context.save();

  // translate context
  context.translate(canvas.width / 2, canvas.height / 2);

        // draw circle which will be stretched into an oval
  context.beginPath();
  context.arc(rtEyeX, rtEyeY, rtEyeRadius, 0, 2 * Math.PI, false);

  // restore to original state
  context.restore();

  // apply styling
  context.fillStyle = '#ff0000';
  context.fill();






    //**********************************  Left Eye ********


  var ltEyeX = 40;
  var ltEyeY = 10;
  var ltEyeRadius = 2;

    context.save();

  // translate context
  context.translate(canvas.width / 2, canvas.height / 2);

        // draw circle which will be stretched into an oval
  context.beginPath();
  context.arc(ltEyeX, ltEyeY, ltEyeRadius, 0, 2 * Math.PI, false);

  // restore to original state
  context.restore();

  // apply styling
  context.fillStyle = '#ff0000';
  context.fill();



</script>

</body>
</html>

Answer 1

嗯，对于任何有兴趣的人，我花了很多时间研究和试错，并自己弄清楚了。这是代码：

// *********************** MOUSE OBJECT ******************* < / p>

// **************属性**************************** 功能Mousie（）{

 this.x = 0;
 this.y = 0;
 this.rotation = 0;


}


Mousie.prototype.draw = function (context){



// tail
context.save(); 
context.translate(this.x, this.y);
context.rotate(this.rotation);
context.beginPath();
context.moveTo(0,0);
context.lineTo(-100,0);
context.stroke();
context.restore();
// body
context.save();
context.translate(this.x, this.y);
context.rotate(this.rotation);
context.scale(3, 1);
context.beginPath();
context.arc(0, 0, 20, 0, 2 * Math.PI, false);
context.fillStyle = '#909090';
context.fill();
context.restore();
// head
context.save();
context.translate(this.x, this.y);
context.rotate(this.rotation);
context.scale(2, 1);
context.beginPath();
context.arc(25, 0, 14, 0, 2 * Math.PI, false);
context.fillStyle = '#707070';
context.fill();
context.restore();
// right ear
context.save();
context.translate(this.x, this.y);
context.rotate(this.rotation);
context.beginPath();
context.arc(26, 14, 8, 0, 2 * Math.PI, false);
context.fillStyle = '#707070';
context.fill();
context.restore();
// left ear
context.save();
context.translate(this.x, this.y);
context.rotate(this.rotation);
context.beginPath();
context.arc(26, -14, 8, 0, 2 * Math.PI, false);
context.fillStyle = '#707070';
context.fill();
context.restore();
// right eye
context.save();
context.translate(this.x, this.y);
context.rotate(this.rotation);
 context.beginPath();
 context.arc(40, 10, 2, 0, 2 * Math.PI, false);
 context.fillStyle = '#ff0000';
 context.fill();
context.restore();
// left eye
context.save();
context.translate(this.x, this.y);
context.rotate(this.rotation);
 context.beginPath();
 context.arc(40, -10, 2, 0, 2 * Math.PI, false);
 context.fillStyle = '#ff0000';
 context.fill();
 context.restore();


};

来自多个形状的Javascript对象

1 个答案: