कुंजीपटल नियंत्रण का उपयोग कर कैनवास गेम में चिकना चरित्र आंदोलन

Question

ठीक है, मैं कैनवास और जावास्क्रिप्ट का उपयोग कर एक साइड स्क्रॉलिंग एंडलेस स्पेस थीम्ड गेम बना रहा हूं। मैं बस ऊपर और नीचे तीर का उपयोग कर एक स्पेसशिप को नियंत्रित कर रहा हूं और मैं किसी तरह के आंदोलन को आसान बनाना चाहता हूं ताकि जब मैं चाबियाँ छोड़ दूं तो जहाज सिर्फ तब तक नहीं रुकता है। मैं चारों ओर देखा है और कुछ भी मेरे अपने प्रयास अभी काम नहीं कर रहे प्लस नहीं मिला है, यह मैं क्या कोशिश की है है ...

Jet.prototype.checkDirection = function() { 
if (this.isUpKey) { 
    this.drawY -= this.speed; 
    if (this.speed < 5) { 
     this.speed += 0.1; 
    } 
} 
if (this.isDownKey) { 
    this.drawY += this.speed; 
    if (this.speed < 5) { 
     this.speed += 0.1; 
    } 
} 
if (!this.isUpKey) { 
    if (!this.isDownKey) { 
     if (this.speed >= 0) { 
      this.drawY -= this.speed; 
      this.speed -= 1; 
     } 
    } 
} 
if (!this.isDownKey) { 
    if (!this.isUpKey) { 
     if (this.speed >= 0) { 
      this.drawY += this.speed; 
      this.speed -= 1; 
     } 
    } 
} 

Answer 1

आप बस कुछ घर्षण लागू करना चाहते हैं। यह बहुत आसान है। आप निम्न की तरह कुछ कर सकते हैं।

this.speed*=0.98; 

जितना तेज़ होगा उतना तेज़ मूल्य (0.8, 0.5, आदि) जितना तेज़ होगा उतना तेज़ होगा।

मैंने एक डेमो प्रदान किया जहां आप चारों ओर स्थानांतरित कर सकते हैं और धीरे-धीरे धीमे हो जाएंगे। आगे बढ़ें और मूल्य के साथ खेलें और देखें कि यह इसे कैसे प्रभावित करता है।

Live Demo

var canvas = document.getElementById("canvas"), 
    ctx = canvas.getContext("2d"); 

canvas.width = canvas.height = 300; 

var x = 150, //initial x 
    y = 150, // initial y 
    velY = 0, 
    velX = 0, 
    speed = 2, // max speed 
    friction = 0.98, // friction 
    keys = []; 

function update() { 
    requestAnimationFrame(update); 

    // check the keys and do the movement. 
    if (keys[38]) { 
     if (velY > -speed) { 
      velY--; 
     } 
    } 

    if (keys[40]) { 
     if (velY < speed) { 
      velY++; 
     } 
    } 
    if (keys[39]) { 
     if (velX < speed) { 
      velX++; 
     } 
    } 
    if (keys[37]) { 
     if (velX > -speed) { 
      velX--; 
     } 
    } 

    // apply some friction to y velocity. 
    velY *= friction; 
    y += velY; 

    // apply some friction to x velocity. 
    velX *= friction; 
    x += velX; 

    // bounds checking 
    if (x >= 295) { 
     x = 295; 
    } else if (x <= 5) { 
     x = 5; 
    } 

    if (y > 295) { 
     y = 295; 
    } else if (y <= 5) { 
     y = 5; 
    } 

    // do the drawing 
    ctx.clearRect(0, 0, 300, 300); 
    ctx.beginPath(); 
    ctx.arc(x, y, 5, 0, Math.PI * 2); 
    ctx.fill(); 
} 

update(); 

// key events 
document.body.addEventListener("keydown", function (e) { 
    keys[e.keyCode] = true; 
}); 
document.body.addEventListener("keyup", function (e) { 
    keys[e.keyCode] = false; 
}); 

Answer 2

मुझे लगता है कि मैं क्या होगा KeyUp पर नहीं है जहाज को रोकें, बस एक फंक्शन है जो इसे थोड़ा धीमा कर देता है, फिर भी इस फ़ंक्शन को सेट अंतराल पर कॉल करें जो भी अंतराल आपको वांछित प्रभाव देता है और फिर जहाज की गति शून्य कॉल स्पष्ट होती है अंतराल

तो मूल रूप से आप कुंजीपटल पर सेटअप करते हैं सेट इंटरवल (धीमी गति, 500)

Answer 3

तुम सिर्फ

if(!playerUp && !playerDown && moveSpeed > 0){ 
    moveSpeed--; 
} 

नहीं कर सका या आपको लगता है कि के लिए एक विशेष सूत्र चाहते थे?