來自多個形狀的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對象

回答

相關問題