所以我正在使用HTML5，JavaScript和CSS来创建一个基于文本的游戏。我已将所有图片保存在本地，并确保文件名都正确无误。运行代码时图片没有显示出来。此外，当我输入 l ， r ， f 或 b 时，没有任何反应，尽管这些情况都是在代码中处理。最后，gameMessage不显示。根据作业，这段代码是根据教科书中的一些现有代码编写的，但我确信我已将正确的东西插入到正确的位置。任何和所有上述三个问题都将非常感谢任何帮助。谢谢。
<!doctype html>
<title>Arena X - Finished</title>
<div id="stage">
<h1>Arena X</h1>
<h3>The ultimate fighting tournament</h3>
<img src="" width="300" height="267">
<p id="output"></p>
<input id="input" type="text">
<button>enter</button>
<button>attack</button>
<button>Special Attack</button>
</div>
<body>
<style>
button
{
font-family: Helvetica;
font-size: 20px;
color: #00ff00;
padding: 10px 20px;
border: 2px solid #000;
cursor: pointer;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background:-webkit-linear-gradient(top, #a3a3a3, #000);
background:-moz-linear-gradient(top, #a3a3a3, #000);
background: linear-gradient(top, #a3a3a3, #000);
}
button:hover
{
background: -webkit-linear-gradient(top, #acc7a3, #506651);
background: -moz-linear-gradient(top, #acc7a3, #506651);
background: linear-gradient(top, #acc7a3, #506651);
}
button: active
{
background: -webkit-linear-gradient(top, #858565, #c5c9a9);
background: -moz-linear-gradient(top, #858565, #c5c9a9);
background: linear-gradient(top, #858565, #c5c9a9);
}
</style>
</body>
<script>
//Create the map
var map = [];
map[0] = "Fans are packed into the arena";
map[1]= "A bouncer is blocking the exit";
map[2]= "Maybe your fans have some good advice they'd like to share?";
map[3]= "You can talk to the ref, if you'd like";
map[4]= "This is the fighting arena";
map[5]= "I'm your biggest fan!";
map[6]= "A row of bleachers";
map[7]= "An oddly familiar bouncer is blocking the exit";
map[8]= "A fan is sitting on the bleachers";
//Set the player's start location
var mapLocation = 4;
//Set the images
var images = [];
images[0] = "Bleach1.png";
images[1] = "Door1.png";
images[2] = "Bleach2.png";
images[3] = "ref.png";
images[4] = "arena.png";
images[5] = "girl.png";
images[6] = "Bleach3.png";
images[7] = "Door2.png";
images[8] = "Bleach4.png";
//Set the blocked path messages
var blockedPathMessages = [];
blockedPathMessages[0] = "Talk to fans after the match!";
blockedPathMessages[1] = "Sorry buddy, you can't leave.";
blockedPathMessages[2] = "Talk to fans after the match!";
blockedPathMessages[3] = "Warm-up later";
blockedPathMessages[4] = "Wait until the announcer calls your name to fight";
blockedPathMessages[5] = "Can't go here while opponent is warming up!";
blockedPathMessages[6] = "Talk to fans after the match!";
blockedPathMessages[7] = "Sorry buddy, you can't leave.";
blockedPathMessages[8] = "Talk to fans after the match!";
//Set the blocked path messages
var helpMessages = [];
helpMessages[0] = "Maybe your fans will give you items or advice.";
helpMessages[1] = "";
helpMessages[2] = "Maybe your fans will give you items or advice.";
helpMessages[3] = "Make sure you have your weapon ready to go.";
helpMessages[4] = "Fight by using your weapon";
helpMessages[5] = "";
helpMessages[6] = "Maybe your fans will give you items or advice.";
helpMessages[7] = "";
helpMessages[8] = "Maybe your fans will give you items or advice.";
//Create the objects and set their locations
var items = ["water", "food", "dragon blade"];
var itemLocations = [6, 2, 8];
//An array to store what the player is carrying
var backpack = [];
//Initialize the player's input
var playersInput = "";
//Initialize the gameMessage
var gameMessage = "Welcome to Arena X! "
gameMessage += "Controls: "
gameMessage += "ls, t, u, f, b, l, r, a, bl, xyz, help";
//Create an array of actions the game understands
//and a variable to store the current action
var actionsIKnow
= ["ls","t", "u", "f",
"b", "l", "r", "a", "bl", "xyz", "help"];
var action = "";
//An array of items the game understands
//and a variable to store the current item
var itemsIKnow = ["water", "dragonBlade", "hhs", "food", "longSword"];
var item = "";
//The img element
var image = document.querySelector("img");
//The input and output fields
var output = document.querySelector("#output");
var input = document.querySelector("#input");
//The button
var button = document.querySelector("button");
button.style.cursor = "pointer";
button.addEventListener("click", clickHandler, false);
button.addEventListener("mousedown", mousedownHandler, false);
button.addEventListener("mouseout", mouseoutHandler, false);
//Listen for enter key presses
window.addEventListener("keydown", keydownHandler, false);
//Dispay the player's location
render();
function mousedownHandler()
{
button.style.background
= "-webkit-linear-gradient(top, rgba(0,0,0,0.2), rgba(255,255,255,0.3))";
button.style.background
= "-moz-linear-gradient(top, rgba(0,0,0,0.2), rgba(255,255,255,0.3))";
button.style.background
= "linear-gradient(top, rgba(0,0,0,0.2), rgba(255,255,255,0.3))";
}
function mouseoutHandler()
{
button.style.background
= "-webkit-linear-gradient(top, rgba(255,255,255,0.6), rgba(0,0,0,0.2))";
button.style.background
= "-moz-linear-gradient(top, rgba(255,255,255,0.6), rgba(0,0,0,0.2))";
button.style.background
= "linear-gradient(top, rgba(255,255,255,0.6), rgba(0,0,0,0.2))";
}
function clickHandler()
{
button.style.background
= "-webkit-linear-gradient(top, rgba(255,255,255,0.6), rgba(0,0,0,0.2))";
button.style.background
= "-moz-linear-gradient(top, rgba(255,255,255,0.6), rgba(0,0,0,0.2))";
button.style.background
= "linear-gradient(top, rgba(255,255,255,0.6), rgba(0,0,0,0.2))";
playGame();
}
function keydownHandler(event)
{
if(event.keyCode === 13)
{
playGame();
}
}
function playGame()
{
//Get the player's input and convert it to lowercase
playersInput = input.value;
playersInput = playersInput.toLowerCase();
//Reset these variables from the previous turn
gameMessage = "";
action = "";
//Figure out the player's action
for(i = 0; i < actionsIKnow.length; i++)
{
if(playersInput.indexOf(actionsIKnow[i]) !== -1)
{
action = actionsIKnow[i];
console.log("player's action: " + action);
break;
}
}
//Figure out the item the player wants
for(i = 0; i < itemsIKnow.length; i++)
{
if(playersInput.indexOf(itemsIKnow[i]) !== -1)
{
item = itemsIKnow[i];
console.log("player's item: " + item);
}
}
//Choose the correct action
switch(action)
{
case "f":
if(mapLocation >= 3)
{
mapLocation -= 3;
}
else
{
gameMessage = blockedPathMessages[mapLocation];
}
break;
case "r":
if(mapLocation % 3 != 2)
{
mapLocation += 1;
}
else
{
gameMessage = blockedPathMessages[mapLocation];
}
break;
case "b":
if(mapLocation < 6)
{
mapLocation += 3;
}
else
{
gameMessage = blockedPathMessages[mapLocation];
}
break;
case "l":
if(mapLocation % 3 != 0)
{
mapLocation -= 1;
}
else
{
gameMessage = blockedPathMessages[mapLocation];
}
break;
case "help":
//Display a hint if there is one for this location
if(helpMessages[mapLocation] !== "")
{
gameMessage = helpMessages[mapLocation] + " ";
}
gameMessage += "Game controls: "
gameMessage += "ls, t, u, f, b, l, r, a, bl, xyz, help";
break;
case :
default:
gameMessage = "I don't understand that.";
}
//Render the game
render();
}
function takeItem()
{
//Find the index number of the item in the items array
var itemIndexNumber = items.indexOf(item);
//Does the item exist in the game world
//and is it at the player's current location?
if(itemIndexNumber !== -1
&& itemLocations[itemIndexNumber] === mapLocation)
{
gameMessage = "You take the " + item + ".";
//Add the item to the player's backpack
backpack.push(item);
//Remove the item from the game world
items.splice(itemIndexNumber, 1);
itemLocations.splice(itemIndexNumber, 1);
//Display in the console for testing
console.log("World items: " + items);
console.log("backpack items: " + backpack);
}
else
{
//Message if you try and take an item
//that isn't in the current location
gameMessage = "You can't do that.";
}
}
function dropItem()
{
//Try to drop the item only if the backpack isn't empty
if(backpack.length !== 0)
{
//Find the item's array index number in the backpack
var backpackIndexNumber = backpack.indexOf(item);
//The item is in the backpack if backpackIndex number isn't -1
if(backpackIndexNumber !== -1)
{
//Tell the player that the item has been dropped
gameMessage = "You drop the " + item + ".";
//Add the item from the backpack to the game world
items.push(backpack[backpackIndexNumber]);
itemLocations.push(mapLocation);
//Remove the item from the player's backpack
backpack.splice(backpackIndexNumber, 1);
}
else
{
//Message if the player tries to drop
//something that's not in the backpack
gameMessage = "You can't do that.";
}
}
else
{
//Message if the backpack is empty
gameMessage = "You're not carrying anything.";
}
}
function useItem()
{
//1. Find out if the item is in the backpack
//Find the item's array index number in the backpack
var backpackIndexNumber = backpack.indexOf(item);
//If the index number is -1, then it isn't in the backpack.
//Tell the player that he or she isn't carrying it.
if(backpackIndexNumber === -1)
{
gameMessage = "You're not carrying it.";
}
//If there are no items in the backpack, then
//tell the player the backpack is empty
if(backpack.length === 0)
{
gameMessage += " Your backpack is empty";
}
//2. If the item is found in the backpack
//figure out what to do with it
if(backpackIndexNumber !== -1)
{
switch(item)
{
case "flute":
if(mapLocation === 8)
{
gameMessage = "Beautiful music fills the air.";
gameMessage += "A wizend old man steps outside "
gameMessage += "and hands you a sword!";
//Add the sword to the world
items.push("sword");
itemLocations.push(mapLocation);
//Reset the location's help message
helpMessages[mapLocation] = "";
}
else
{
gameMessage = "You try and play the flute "
gameMessage += "but it makes no sound here.";
}
break;
case "sword":
if(mapLocation === 3)
{
gameMessage
= "You swing the sword and slay the dragon! ";
gameMessage
+= "You've saved the forest of Lyrica!";
//Reset the location's help message
helpMessages[mapLocation] = "";
}
else
{
gameMessage
= "You swing the sword listlessly.";
}
break;
case "stone":
if(mapLocation === 1)
{
gameMessage = "You drop the stone in the well.";
gameMessage += " A magical flute appears!";
//Remove the stone from the player's backpack
backpack.splice(backpackIndexNumber, 1);
//Add the flute to the world
items.push("flute");
itemLocations.push(mapLocation);
//Reset the location's help message
helpMessages[mapLocation] = "";
}
else
{
gameMessage
= "You fumble with the stone in your pocket.";
}
break;
}
}
}
function render()
{
//Render the location
output.innerHTML = map[mapLocation];
image.src = "../images/" + images[mapLocation];
//Display an item if there's one in this location
//1. Loop through all the game items
for(var i = 0; i < items.length; i++)
{
//Find out if there's an item at this location
if(mapLocation === itemLocations[i])
{
//Display it
output.innerHTML
+= "<br>You see a <strong>"
+ items[i]
+ "</strong> here.";
}
}
//Display the player's backpack contents
if(backpack.length !== 0)
{
output.innerHTML += "<br>You are carrying: " + backpack.join(", ");
}
//Display the game message
output.innerHTML += "<br><em>" + gameMessage + "</em>";
//Clear the input field
input.value = "";
}