gravity Property in HTML 5

Question

How to use gravity propery in HTML 5 for games? there are some methods and functions are going to be used with it. Just give me a brief view regarding my query. Thanks in Advance.

Bidyasagar Mishra · Answer

> html > head > meta name = "viewport" content = "width=device-width, initial-scale=1.0" /> style > canvas { border:1px solid #d3d3d3; background-color: #f1f1f1; } style > head > body onload = "startGame()" > script > var myGamePiece; var myObstacles = []; var myScore; function startGame() { myGamePiece = new component(30, 30, "red", 10, 120); myGamePiece.gravity = 0 .05; myScore = new component("30px", "Consolas", "black", 280, 40, "text"); myGameArea.start(); } var myGameArea = { canvas : document.createElement("canvas"), start : function() { this.canvas.width = 480 ; this.canvas.height = 270 ; this this.context = this.canvas.getContext("2d"); document.body.insertBefore(this.canvas, document.body.childNodes[0]); this.frameNo = 0 ; updateGameArea(); }, clear : function() { this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); } } function component(width, height, color, x, y, type) { this.type = type; this.score = 0 ; this.width = width; this.height = height; this.speedX = 0 ; this.speedY = 0 ; this.x = x; this.y = y; this.gravity = 0 ; this.gravitySpeed = 0 ; this.update = function () { ctx = myGameArea .context; if ( this.type == "text") { ctx.font = this .width + " " + this.height; ctx.fillStyle = color ; ctx.fillText(this.text, this.x, this.y); } else { 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 = myGameArea .canvas.height - this.height; if (this.y > rockbottom) { this.y = rockbottom ; this.gravitySpeed = 0 ; } } this.crashWith = function (otherobj) { var myleft = this .x; var myright = this .x + (this.width); var mytop = this .y; var mybottom = this .y + (this.height); var otherleft = otherobj .x; var otherright = otherobj .x + (otherobj.width); var othertop = otherobj .y; var otherbottom = otherobj .y + (otherobj.height); var crash = true ; if ((mybottom othertop ) || (mytop > otherbottom) || (myright otherleft ) || (myleft > otherright)) { crash = false ; } return crash; } } function updateGameArea() { var x, height, gap, minHeight, maxHeight, minGap, maxGap; for ( i = 0 ; i myObstacles.length ; i += 1) { if (myGamePiece.crashWith(myObstacles[i])) { return; } } myGameArea.clear(); myGameArea.frameNo += 1; if ( myGameArea.frameNo == 1 || everyinterval(150)) { x = myGameArea .canvas.width; minHeight = 20 ; maxHeight = 200 ; height = Math .floor(Math.random()*(maxHeight-minHeight+1)+minHeight); minGap = 50 ; maxGap = 200 ; gap = Math .floor(Math.random()*(maxGap-minGap+1)+minGap); myObstacles.push(new component(10, height, "green", x, 0)); myObstacles.push(new component(10, x - height - gap, "green", x, height + gap)); } for ( i = 0 ; i myObstacles.length ; i += 1) { myObstacles[i].x += -1; myObstacles[i].update(); } myScore.text = "SCORE: " + myGameArea.frameNo; myScore.update(); myGamePiece.newPos(); myGamePiece.update(); } function everyinterval(n) { if ((myGameArea.frameNo / n) % 1 == 0) {return true;} return false; } function accelerate(n) { if (!myGameArea.interval) { myGameArea.interval = setInterval (updateGameArea, 20);} myGamePiece.gravity = n ; } script > br > button onmousedown = "accelerate(-0.2)" onmouseup = "accelerate(0.05)" > ACCELERATE button > p > Click the ACCELERATE button to start the game p > p > How long can you stay alive? Use the ACCELERATE button to stay in the air.. p > body > html >

Dipa Mehta · Answer

Thanks For these code snippets, it’s the explanation in itself.

Bidyasagar Mishra · Answer

for more refernces try the below link https://www.dummies.com/programming/programming-games/how-to-add-gravity-to-your-html5-game/

Bidyasagar Mishra · Answer

> html > head > meta name = "viewport" content = "width=device-width, initial-scale=1.0" /> style > canvas { border:1px solid #d3d3d3; background-color: #f1f1f1; } style > head > body onload = "startGame()" > script > var myGamePiece; function startGame() { myGamePiece = new component(30, 30, "red", 80, 75); myGameArea.start(); } var myGameArea = { canvas : document.createElement("canvas"), start : function() { this.canvas.width = 480 ; this.canvas.height = 270 ; this this.context = this.canvas.getContext("2d"); document.body.insertBefore(this.canvas, document.body.childNodes[0]); this.interval = setInterval (updateGameArea, 20); }, stop : function() { clearInterval(this.interval); }, clear : function() { this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); } } 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 .05; this.gravitySpeed = 0 ; 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; } } function updateGameArea() { myGameArea.clear(); myGamePiece.newPos(); myGamePiece.update(); } script > p > Gravity makes the red square fall to the ground and beyond. p > body > html >

gravity Property in HTML 5

Insert Link

Embed YouTube Video

Table Options

Insert Image

Answers (4)