这里的问题是我试图在我的播放器上绘制图像并且它没有显示出来。在我的最后一个节目中，我以相同的方式做到了这一点并且出现了。我在这里做错了吗？所有内容都链接到特定文件夹并正确命名。
function GameObject(obj)
{
this.x = canvas.width/2;
this.y = canvas.height/2;
this.width = 100;
this.height = 100;
this.color = "#A9A9A9";
this.force = 1;
this.ax = 1;
this.ay = 1;
this.vx = 0;
this.vy = 0;
//------Allows us to pass object literals into the class to define its properties--------//
//------This eliminate the need to pass in the property arguments in a specific order------------//
if(obj!== undefined)
{
for(value in obj)
{
if(this[value]!== undefined)
this[value] = obj[value];
}
}
//whether or not the object can jump
this.canJump = false;
this.jumpHeight = -25;
this.drawRect = function()
{
context.save();
context.fillStyle = this.color;
context.translate(this.x, this.y);
context.fillRect((-this.width/2), (-this.height/2), this.width, this.height);
context.restore();
}
this.drawCircle = function()
{
context.save();
context.fillStyle = this.color;
context.beginPath();
context.translate(this.x, this.y);
context.arc(0, 0, this.radius(), 0, 360 *Math.PI/180, true);
context.closePath();
context.fill();
context.restore();
}
this.move = function()
{
this.x += this.vx;
this.y += this.vy;
}
//---------Returns object's for the top, bottom, left and right of an object's bounding box.
this.left = function()
{
return {x:this.x - this.width/2 , y:this.y}
}
this.right = function()
{
return {x:this.x + this.width/2 , y:this.y}
}
this.top = function()
{
return {x:this.x, y:this.y - this.height/2}
}
this.bottom = function()
{
return {x:this.x , y:this.y + this.height/2}
}
this.hitTestObject = function(obj)
{
if(this.left().x <= obj.right().x &&
this.right().x >= obj.left().x &&
this.top().y <= obj.bottom().y &&
this.bottom().y >= obj.top().y)
{
return true
}
return false;
}
//------Tests whether a single point overlaps the bounding box of another object-------
this.hitTestPoint = function(obj)
{
if(obj.x >= this.left().x &&
obj.x <= this.right().x &&
obj.y >= this.top().y &&
obj.y <= this.bottom().y)
{
return true;
}
return false;
}
/*-----Sets or gets the radius value--------*/
this.radius = function(newRadius)
{
if(newRadius==undefined)
{
return this.width/2;
}
else
{
return newRadius;
}
}
//Draws the collision points
this.drawDebug = function()
{
var size = 5;
context.save();
context.fillStyle = "black";
context.fillRect(this.left().x-size/2, this.left().y-size/2, size, size);
context.fillRect(this.right().x-size/2, this.right().y-size/2, size, size);
context.fillRect(this.top().x-size/2, this.top().y-size/2, size, size);
context.fillRect(this.bottom().x-size/2, this.bottom().y-size/2, size, size);
context.fillRect(this.x-size/2, this.y-size/2, size, size);
context.restore();
}
}
//Declare my variables
var canvas;
var context;
var timer;
var interval;
var player;
var screenWidth;
var screenHeight;
var gameState;
var gameOverMenu;
var restartButton;
var img = document.getElementById("light");
canvas = document.getElementById("canvas");
context = canvas.getContext("2d");
//lose screen
function gameInitialize() {
var canvas = document.getElementByID("game-screen");
context = canvas.getContext("2d");
screenWidth = window.innerWidth;
screenHeight = window.innerHeight;
canvas.width = screenWidth;
canvas.height = screenHeight;
document.addEventListener("keydown", keyboardHandler);
gameOverMenu = document.getElementByID("gameOver")
centerMenuPosition(gameOverMenu);
restartButton = document.getElementByID("restartButton");
restartButton.addEventListener("click".gameRestart);
setState("PLAY");
//lose screen
}
function setState(state) {
gameState = state;
showMenu(state);
}
function displayMenu(menu) {
menu.style.visibility = "visible";
}
function showMenu(state) {
if (state == "GAME OVER") {
displayMenu(gameOverMenu);
}
}
//restart for lose screen
function gameRestart() {
if (player.y > 0) {
setState("GAME OVER");
}
}
player = new GameObject();
//my platforms
platform0 = new GameObject();
platform0.width = 500;
platform0.y = player.y + player.height / 2 + platform0.height / 2;
platform0.color = "#000B12";
/* platform1 = new GameObject();
platform1.width = 50;
platform1.height = 300;
platform1.y = platform0.y - platform0.height/2 - platform1.height/2;
platform1.x = platform0.x-platform0.width/2;
platform1.color = "000B12"; */
platform1 = new GameObject();
platform1.width = 50;
platform1.height = 300;
platform1.y = platform0.y - platform0.height / 2 - platform1.height / 2;
platform1.x = platform1.x - platform0.width / 2;
platform1.color = "000B12";
platform2 = new GameObject();
platform2.width = 50;
platform2.height = 300;
platform2.y = platform0.y - platform0.height / 2 - platform2.height / 2;
platform2.x = platform0.x + platform0.width / 2;
platform2.color = "000B12";
platform3 = new GameObject();
platform3.width = 50;
platform3.height = 300;
platform3.y = platform0.y - platform0.height / 2 - platform2.height / 2;
platform3.x = platform2.x + platform0.width / 2;
platform3.color = "000B12";
/* platform3 = new GameObject();
platform3.width = 300;
platform3.height = 50;
platform3.y = platform2.y;
platform3.x = platform2.x ;
platform3.color = "000B12"; */
platform4 = new GameObject();
platform4.width = 50
platform4.height = 300
platform4.y = platform0.y - platform0.height / 2 - platform4.height / 2;
platform4.x = platform0.x + platform0.width / 2;
platform4.color = "008000";
platform5 = new GameObject();
platform5.width = 50
platform5.height = 300
platform5.y = platform0.y - platform0.height / 2 - platform4.height / 2;
platform5.x = platform0.x + platform0.width / 2;
platform5.color = "000B12";
//This platform uses an object literal to define the properties
platform4 = new GameObject({
width: 300,
height: 50,
y: platform2.y,
color: "#000B12"
});
//Global Physics Variables
var fX = .97;
var fY = .97;
var gravity = 1;
interval = 1000 / 60;
timer = setInterval(animate, interval);
//animate for player etc.
function animate() {
context.clearRect(0, 0, canvas.width, canvas.height);
//Jump with the w key
if (w && player.canJump) {
player.canJump = false;
player.vy += player.jumpHeight;
}
//Apply acceleration to velocity.
if (a) {
player.vx += -player.ax * player.force;
}
if (d) {
player.vx += player.ax * player.force;
}
player.vx *= fX;
player.vy *= fY;
player.vy += gravity;
player.x += Math.round(player.vx);
player.y += Math.round(player.vy);
//Hit the ground
while (platform0.hitTestPoint(player.bottom()) && player.vy >= 0) {
player.y--;
player.vy = 0;
player.canJump = true;
}
/* while(platform1.hitTestPoint(player.left()))
{
player.x++;
player.vx = 0;
} */
while (platform2.hitTestPoint(player.right())) {
player.x--;
player.vx = 0;
}
/* while(platform3.hitTestPoint(player.top()))
{
player.y++;
player.vy = 0;
}
while(platform3.hitTestPoint(player.bottom()) && player.vy >=0)
{
player.y--;
player.vy = 0;
player.canJump = true;
} */
while (platform4.hitTestPoint(player.bottom()) && player.vy >= 0) {
player.y--;
player.vy = 0;
player.canJump = true;
}
// Light on player
//draw light
context.drawImage(img, player.x - player.width / 2, player.y - player.height / 2, player.width, player.height);
platform0.drawRect();
platform1.drawRect();
platform2.drawRect();
platform3.drawRect();
platform4.drawRect();
player.drawRect();
//Show hit points
player.drawDebug();
}
canvas {
border: 1px solid black;
background: #0C0D0D;
}
#gameOver {
position: absolute;
visibility: hidden;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="Robs">
<title>Robs proto game</title>
<link type="text/css" rel="stylesheet" href="css/style.css" />
</head>
<body>
<canvas id="canvas" width="1000" height="800">
Your browser is outdated and does not support HTML5. Please update to the latest version.
<img src="images/Light.png" alt="Light source" id="light">
</canvas>
<section id="gameOver">
<h1 class="title"> GAME OVER! </h1>
<h3 id="restartButton">Restart? </h3>
</section>
</body>
<!--Controls-->
<script type="text/javascript" src="js/controls.js"></script>
<!--Classes-->
<script type="text/javascript" src="js/Classes/GameObject.js"></script>
<script type="text/javascript" src="js/basic_platformer.js"></script>
</html>
跑步时没有错误。一切都在运行，我可以玩我的游戏，但看不到我想要在玩家身上产生的图像。