来自多个形状的Javascript对象

我正在研究初学者JavaScript（Canvas）游戏，并为游戏创建了鼠标形状。我想把它变成一个JavaScript对象（构造函数和原型），并尽可能减少代码量。请有人帮助我。看到它之后我通常都很好。提前致谢。下面是鼠标代码：来自多个形状的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>

来源

2017-02-28 Andy Gagner

嗯，有兴趣的人，我花了很多时间研究和反复试验，并理解了它自己。这里是代码：

// *********************** MOUSE OBJECT ************** *****

// **************属性************************ **** 功能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(); 


};

来源

2017-03-01 12:06:10

来自多个形状的Javascript对象

回答

相关问题