I am making a basic game. I currently have an object (box4) that moves left and right using Keycode Events. But I want to add Gravity. I'm not sure how to go about this; everything I've found online isn't directly implementable verbatim in my game. Usually because it's entirely inline and isn't object-oriented whatsoever (I'm using classes/inheritance), but also because I'm a newbie.
Here's what my code looks like:
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 class:
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();
};
}
My program to download: http://s000.tinyupload.com/index.php?file_id=87972197214078945115
Does anyone know any workarounds that would work easily with my current code and code structure?
