JavaScript的HTML – 我如何实现重力/跳入我的基本游戏?

我正在做一个基本的游戏。 我目前有一个对象(box4),使用Keycode Events左右移动。 但是我想添加重力。 我不知道如何去做这件事。 我在网上find的所有东西都不能直接在我的游戏中实现。 通常是因为它是完全内联的,并且不是面向对象的(我使用类/inheritance),而且因为我是一个新手。

这是我的代码看起来像:

HTML

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="style.css" /> </head> <body> <canvas id="canvas" width="600" height="600"></canvas> <script src="sprites/box.js"></script> <script src="sprites/box2.js"></script> <script src="sprites/box3.js"></script> <script src="sprites/box4.js"></script> <script src="sprites/arrow.js"></script> <script> window.onload = function () { //get the canvas var canvas = document.getElementById('canvas'), //get the context context = canvas.getContext('2d'), //create an arrow object arrow = new Arrow(), //create a box object box = new Box(); box2 = new Box2(); box3 = new Box3(); box4 = new Box4(); var gravity = 0.5; //position the box at 80,40 on the canvas box.X = 80; box.Y = 40; box2.X = 80; box2.Y = 40; box3.X = 150; box3.Y = 150; box4.X = 200; box4.Y = 200; //position the arrow at 300,300 (middle of the canvas) arrow.X = 300; arrow.Y = 300; //draw the first frame drawFrame(); //fucntion for drawing the frames function drawFrame() { //clear the canvas context.clearRect(0, 0, canvas.width, canvas.height); //increase the y posn by the y velocity box.Y += box.VY; //increase the x posn by the x velocity box.X += box.VX; //increase the y posn by the y velocity box2.Y += box2.VY; //increase the x posn by the x velocity box2.X += box2.VX; //increase the y posn by the y velocity box3.Y += box3.VY; //increase the x posn by the x velocity box3.X += box3.VX; window.onkeydown = function (e) { var code = e.keyCode ? e.keyCode : e.which; if (code === 37) { //left key box4.X -= box4.VX; } else if (code === 38) { box4.Y -= 20; } else if (code === 39) { //right key box4.X += box4.VX; } else if (code === 40) { box4.Y += 20; } else if (code === 32) { box4.Y -= 20; } }; //if the box hits the canvas top bottom edge if (box.Y - box.Size < 0 | box.Y + box.Size > canvas.height) { //reverse the y velocity box.VY = -box.VY; } //if the box hits the canvas left or right if (box.X - box.Size < 0 | box.X + box.Size > canvas.width) { //reverse the x velocity box.VX = -box.VX; } if (box2.Y - box2.Size < 0 | box2.Y + box2.Size > canvas.height) { box2.VY = -box2.VY; } if (box2.X - box2.Size < 0 | box2.X + box2.Size > canvas.width) { box2.VX = -box2.VX; } if (box3.Y - box3.Size < 0 | box3.Y + box3.Size > canvas.height) { box3.VY = -box3.VY; } if (box3.X - box3.Size < 0 | box3.X + box3.Size > canvas.width) { box3.VX = -box3.VX; } //calculate the difference between the box x position and the arrow x position var dx = box.X - arrow.X; //calculate the difference between the box y position and the arrow y position var dy = box.Y - arrow.Y; //set the angle of rotation for the arrow arrow.Rotation = Math.atan2(dy, dx); //draw the box box.draw(context); box2.draw(context); box3.draw(context); box4.draw(context); //request the next frame window.requestAnimationFrame(drawFrame, canvas); } } </script> </body> </html> 

Box4课堂:

 function Box4() { //private data members //x posn var x = 0, //y posn y = 0, //colour colour = "red", //size size = 20, //x velocity vx = 4, //y velocity vy = 4; //public property for VX Object.defineProperty(this, 'VX', { get: function () { return vx; }, set: function (value) { vx = value; } } ) //public property for VY Object.defineProperty(this, 'VY', { get: function () { return vy; }, set: function (value) { vy = value; } } ) //public property for size Object.defineProperty(this, 'Size', { get: function () { return size; }, set: function (value) { size = value; } } ) //public property for X Object.defineProperty(this, 'X', { get: function () { return x; }, set: function (value) { x = value; } } ) //public property for Y Object.defineProperty(this, 'Y', { get: function () { return y; }, set: function (value) { y = value; } } ) //function public draw method Box4.prototype.draw = function (context) { //save the context context.save(); //set x and y context.translate(x, y); //set the line width context.lineWidth = 2; //set the colour of the fill context.fillStyle = colour; //begin the path context.beginPath(); //draw the box context.moveTo(-size, -size); context.lineTo(-size, size); context.lineTo(size, size); context.lineTo(size, -size); //close the path context.closePath(); //fill the shape context.fill(); //draw it context.stroke(); //restore the context context.restore(); }; } 

我的程序下载: http : //s000.tinyupload.com/index.php?file_id=87972197214078945115

有谁知道任何解决方法,可以轻松地使用我当前的代码和代码结构?