Javascript HTML-ничего не отображается и не уверен, где я ошибся в своем коде
Привет, я делаю объект (box4) в своем коде move, но при этом моя программа теперь ничего не отображает (простой белый экран). может ли кто-нибудь увидеть что-то явно неправильное в моем коде? я приношу свои глубочайшие извинения, если это грубо.
мой 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 src="classes/keycode.js"></script>
<script>
window.onload = function () {
setInterval(update, 1000 / 30);
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
arrow = new Arrow(),
box = new Box();
box2 = new Box2();
box3 = new Box3();
box4 = new Box4();
holdLeft = holdRight = false;
box.X = 80;
box.Y = 40;
box2.X = 80;
box2.Y = 40;
box3.X = 150;
box3.Y = 150;
box4.X = 200;
box4.Y = 200;
arrow.X = 300;
arrow.Y = 300;
function update() {
if (holdLeft) {
box4.VX = -4;
}
if (holdRight) {
box4.VX = 4;
}
box4.PX += box4.VX;
box4.PY += Box4.VY;
if (box4.ONG) {
box4.VX *= 0.8;
} else {
box4.VY += box4.GRAV;
}
}
function update() {
if (holdLeft) {
box4.VX = -4;
}
if (holdRight) {
box4.VX = 4;
}
box4.PX += box4.VX;
box4.PY += box4.VY;
if (onG) {
box4.VX *= 0.8;
} else {
box4.VY += box4.GRAV;
}
function KeyboardEventHandler(event) {
if (event.keyCode == keycode.LEFT) {
holdLeft = true;
}
//if the left arrow is pressed
if (event.keyCode == keycode.RIGHT) {
holdRight = true;
}
//if the right arrow is pressed
if (event.keyCode == keycode.UP) {
if(yv<-3) {
yv=-3;
}
//if the down arrow is pressed
if (event.keyCode == keycode.DOWN) {
//do nothing at the moment
}
}
window.addEventListener('keydown', KeyboardEventHandler, false);
drawFrame();
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;
//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;
arrow.Rotation = Math.atan2(dy, dx);
box.draw(context);
box2.draw(context);
box3.draw(context);
box4.draw(context);
window.requestAnimationFrame(drawFrame, canvas);
}
}
}
</script>
</body>
</html>
Что я уже пробовал:
коробке 4 класса по :
//constructor for the box
function Box4() {
//private data members
//x posn
var x = 0,
//y posn
y = 0,
//color
color = "red",
//size
size = 20,
px=py=200;
vx=vy=0;
grav=0.5;
onG=false;
//public property for VX
Object.defineProperty(this, 'VX',
{
get: function () {
return vx;
},
set: function (value) {
vx = value;
}
}
)
//public property for VX
Object.defineProperty(this, 'PX',
{
get: function () {
return px;
},
set: function (value) {
px = value;
}
}
)
//public property for VX
Object.defineProperty(this, 'PY',
{
get: function () {
return py;
},
set: function (value) {
py = value;
}
}
)
//public property for VX
Object.defineProperty(this, 'GRAV',
{
get: function () {
return grav;
},
set: function (value) {
grav = value;
}
}
)
//public property for VX
Object.defineProperty(this, 'ONG',
{
get: function () {
return onG;
},
set: function (value) {
onG = 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();
};
}