Javascript HTML - 没有任何显示，也不确定我的代码在哪里出错了 [英] Javascript HTML -- nothing displays and not sure where I've gone wrong in my code
问题描述
我正在我的代码移动中创建一个对象（box4），但是这样做我的程序现在什么也没显示（简单的白色屏幕）。谁能在我的代码中看到任何明显错误的东西？如果这很粗鲁，我会道歉。
我的html文件：
i'm making an object (box4) in my code move, but in doing so my program now displays nothing (simple white screen). can anyone see anything obviously wrong in my code? i apologize profusely if this is rude.
my html document:
<!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>
我尝试过：
box4的类：
What I have tried:
box4's class:
//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();
};
}
推荐答案
我正在我的代码移动中创建一个对象（box4），但是这样做我的程序现在什么也没有显示（简单的白色屏幕）。
i'm making an object (box4) in my code move, but in doing so my program now displays nothing (simple white screen).
您的浏览器有一些开发人员工具。
首先要做的是使用控制台，告诉你你的页面是否有语法错误或代码是否产生错误。
使用FireFox ，控制台在Menu>工具> Web Dev
如果没有语法错误，你的浏览器也有一个JS调试器。
那里是一个工具，可以让您查看代码正在做什么，其名称是调试器。它也是一个很好的学习工具，因为它向你展示了现实，你可以看到哪种期望与现实相符。
当你不明白你的代码在做什么或为什么它做它做的时候，答案就是答案是调试器。
使用调试器查看代码正在执行的操作。只需设置断点并查看代码执行情况，调试器允许您逐行执行第1行并在执行时检查变量。
调试器 - 维基百科，免费的百科全书 [ ^ ]
JavaScript调试 [ ^ ]
Chrome DevTools | 网络 | Google Developers [ ^ ]
调试器在这里向您展示您的代码正在做什么，您的任务是与它应该做什么进行比较。
调试器中没有魔法，它不是'找到错误，它只是帮助你。当代码没有达到预期的效果时，你就会接近一个错误。
Your browser have some developer tools.
First thing to do is use the console which will tell you if your page have a syntax error or if the code generate an error.
With FireFox, the console is in Menu > Tools > Web Dev
If there is no Syntax error, your browser also have a JS debugger.
There is a tool that allow you to see what your code is doing, its name is debugger. It is also a great learning tool because it show you reality and you can see which expectation match reality.
When you don't understand what your code is doing or why it does what it does, the answer is debugger.
Use the debugger to see what your code is doing. Just set a breakpoint and see your code performing, the debugger allow you to execute lines 1 by 1 and to inspect variables as it execute.
Debugger - Wikipedia, the free encyclopedia[^]
JavaScript Debugging[^]
Chrome DevTools | Web | Google Developers[^]
The debugger is here to show you what your code is doing and your task is to compare with what it should do.
There is no magic in the debugger, it don't find bugs, it just help you to. When the code don't do what is expected, you are close to a bug.
这篇关于Javascript HTML - 没有任何显示，也不确定我的代码在哪里出错了的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
