एचटीएमएल ग्राफिक्स

ग्राफिक्स होम

गूगल मानचित्र

मानचित्र परिचय मैप्स बेसिक मैप्स ओवरले मानचित्र घटनाक्रम मानचित्र नियंत्रण मानचित्र प्रकार मानचित्र संदर्भ

एसवीजी ट्यूटोरियल

एसवीजी परिचय एचटीएमएल में एसवीजी एसवीजी आयत एसवीजी सर्किल एसवीजी एलिप्से एसवीजी लाइन एसवीजी बहुभुज एसवीजी पॉलीलाइन एसवीजी पथ एसवीजी पाठ एसवीजी पथपाकर एसवीजी फ़िल्टर परिचय एसवीजी धुंधला प्रभाव एसवीजी ड्रॉप शैडो एसवीजी रैखिक एसवीजी रेडियल एसवीजी उदाहरण एसवीजी संदर्भ

कैनवास ट्यूटोरियल

कैनवास परिचय कैनवास ड्राइंग कैनवास निर्देशांक कैनवास ग्रेडिएंट कैनवास पाठ कैनवास छवियां कैनवास संदर्भ

कैनवास घड़ी

घड़ी परिचय घडी का मुख घड़ी संख्या हाथ घड़ी घड़ी प्रारंभ

एचटीएमएल गेम

खेल परिचय खेल कैनवास खेल के घटक खेल नियंत्रक खेल बाधाएं गेम स्कोर खेल छवियां खेल ध्वनि गेम ग्रेविटी खेल उछल खेल रोटेशन खेल आंदोलन

खेल उछल


जब यह फर्श से टकराता है तो यह लाल वर्ग उछलता है:




उछाल वाली

एक और कार्यक्षमता जिसे हम जोड़ना चाहते हैं वह है bounceसंपत्ति।

संपत्ति इंगित करती है कि bounceजब गुरुत्वाकर्षण जमीन पर गिरता है तो घटक वापस उछाल देगा।

बाउंस प्रॉपर्टी का मान एक नंबर होना चाहिए. 0 कोई उछाल नहीं है, और 1 घटक को वापस उसी स्थान पर उछाल देगा जहां वह गिरना शुरू करता है।

उदाहरण

function component(width, height, color, x, y, type) {
  this.type = type;
  this.width = width;
  this.height = height;
  this.x = x;
  this.y = y;
  this.speedX = 0;
  this.speedY = 0;
  this.gravity = 0.1;
  this.gravitySpeed = 0;
  this.bounce = 0.6;
 
this.update = function() {
    ctx = myGameArea.context;
    ctx.fillStyle = color;
    ctx.fillRect(this.x, this.y, this.width, this.height);
  }
  this.newPos = function() {
    this.gravitySpeed += this.gravity;
    this.x += this.speedX;
    this.y += this.speedY + this.gravitySpeed;
    this.hitBottom();
  }
  this.hitBottom = function() {
    var rockbottom = this.gamearea.canvas.height - this.height;
    if (this.y > rockbottom) {
      this.y = rockbottom;
      this.gravitySpeed = -(this.gravitySpeed * this.bounce);
    }
  }
}