嗨，我正在为我的班级制作一款游戏，我已经设法做了几乎所有事情，但检查用户收集的时间（越过乘客）。
我的游戏包含多个包含PHP的文件，因此小提琴（http://jsfiddle.net/nZ8vA/5/）就是游戏文件的文件，我相信它拥有帮助我解决这个问题所需的一切。遗憾的是，由于PHP，玩家的力量并没有减少。
如果有人愿意，我会在下面发布我的代码：
game.php
<?php session_start(); ?>
<?php if (isset($_SESSION['RobotName'], $_SESSION['traction'], $_SESSION['passenger'])) {
?>
<?php $layout_context = "public"; ?>
<?php include("header.php"); ?>
<div id="main">
<div id="navigation">
<h2><i><u>Navigation</u></i></h2>
<br />
<u><a href="index.php">Welcome</a><br /><br />
<u><a href="instructions.php">How to Play?</a></u><br /><br />
<u><a href="customise.php">Customisation</a></u><br /><br />
<?php if (isset($_SESSION['RobotName'], $_SESSION['traction'], $_SESSION['passenger'])) {
?>
<u><a href="game.php"><font color="orange">Play</font></a></u>
<?php
} else {
?>
<u><a href="#" onclick="alert('You must customise your robot first before playing!');"><font color="orange">Play</font></a></u>
<?php
}
?>
</div>
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
ul{list-style:none;}
a{text-decoration:none;}
#grid{
position: relative;
width:500px;
height:500px;
background:#eee;
padding:10px;
border-radius:10px;
}
.box{
font-size:10px;
text-align:center;
float:left;
width:40px;
height:40px;
background:#fff;
border-radius:6px;
margin:4px;
border:1px solid #aaa;
}
#player {
position: absolute;
height: 10px;
width: 10px;
outline: 1px solid black;
background-color: yellow;
left: 15px;
}
.brown{
background: #49311C;
}
.green{
background: green;
}
.white{
background: white;
}
</style>
<style id="jsbin-css">
</style>
</head>
<body>
<div id="page"><br />
<div id="grid">
</div>
<br />
<div style="width: 500px; height: 50px; position: relative; background: #EEE4B9;">
<div id="power" style="position: absolute; left:0px;"><b>Power:</b> 150</div>
<div id="RobotName"style="position: absolute; left: 100px;"><b>Robot Name:</b> <?php echo $_SESSION['RobotName']; ?></div>
<div id="Traction"style="position: absolute; left: 260px;"><b>Traction:</b> <?php echo $_SESSION['traction']; ?></div>
<div id="Passenger" style="position: absolute; left: 390px;"><b>Passenger:</b> <?php echo $_SESSION['passenger']; ?></div>
</div>
</div>
<script>
var boxX = 0;
var boxY = 0;
var box = '<div class="box" />';
var playerPower = 150;
var onGrass = 0;
var onRock = 0;
var onIce = 0;
var tractionType = "<?php echo $_SESSION['traction']; ?>";
var passengerType = "<?php echo $_SESSION['passenger']; ?>";
var passengerBayPower = 0;
// x, y coordinates of player
var playerPos = [0, 0];
//GAME SYSTEM VARIABLES CAUGHT FROM THE $_SESSION
if (tractionType == "Wheels") {
onGrass = 1;
onRock = 2;
onIce = 3;
} else if (tractionType == "Tracks") {
onGrass = 3;
onRock = 3;
onIce = 3;
} else if (tractionType == "Skis") {
onGrass = 3;
onRock = 3;
onIce = 1;
}
if (passengerType == "Large") {
passengerBayPower = 2;
} else if (passengerType == "Medium") {
passengerBayPower = 1;
} else if (passengerType == "Small") {
passengerBayPower = 0;
}
// VARIABLES TO CALCULATE THE AMOUNT TO DEDUCT ON EACH SQUARE DEPENDING ON THE COLOUR
var deductG = onGrass + passengerBayPower;
var deductB = onRock + passengerBayPower;
var deductI = onIce + passengerBayPower;
var map_str = '';
// Create an array to construct the map
var map = [];
map.push("ggwwwwggww"); // First row of map
map.push("gbbwwwggww"); // Second row of map
map.push("bbbggwggww"); // Third row of map
map.push("wbgggggggg"); // Fourth row of map
map.push("bbgwgwbbgg"); // Fifth row of map
map.push("bbbwbbbbwg"); // Sixth row of map
map.push("bbbbbwwwgg"); // Seventh row of map
map.push("gbbbwwwwgw"); // Eighth row of map
map.push("ggggwggwww"); // Ninth row of map
map.push("ggggggggwb"); // Tenth row of map
// Dynamically add the boxes to the map by using a for loop
var cells = map.length * map[0].length;
for (var i = 0; i < cells; i++) {
map_str += box;
}
// Append the boxes to the grid container which is seen as a parent
// as its CSS position is relative
$('#grid').append(map_str);
// Create an associative array (colours for the grid)
var class_color = {
"b": "brown",
"w": "white",
"g": "green"
};
var count = 0;
// Map colours for loop (using the above map array)
for (var row = 0; row < map.length; row++) {
for (var cell = 0; cell < map[row].length; cell++) {
var color = map[row][cell];
$('#grid .box:eq(' + count + ')').addClass(class_color[color]);
count++;
}
}
// jQuery function for on-load
$(function () {
var player = '<div id="player"></div>';
$('#grid .box:eq(0)').append(player);
$('#grid .box:eq(2)').append('<h1>P</h1>');
$('#grid .box:eq(27)').append('<h1>P</h1>');
$('#grid .box:eq(36)').append('<h1>B</h1>');
$('#grid .box:eq(64)').append('<h1>P</h1>');
$('#grid .box:eq(69)').append('<h1>P</h1>');
// Append the passengers and bases to relevant boxes
// Checks colour against predefined map and deducts the correct amount of power
//###############################################################
// CHECKS AGAINST USER SETTINGS TO DETERMIN WHAT TO DEDUCT
function checkCol(cell, row){
var color = map[row][cell];
console.log(color);
if (color == "g") {
playerPower -= deductG;
} else if (color == "b") {
playerPower -= deductB;
} else if (color == "w") {
playerPower -= deductI;
}
/*function checkPass(cell, row) {
var pass = map[row][cell];
console.log(pass);
if (pass == "P") {
alert("Passenger");
}
}*/
switch (color){
// Brown
case "b":
break;
// Green
case "g":
break;
// White
case "w":
break;
default:
break;
}
}
$(document).keydown(function (e) {
var position = $('#player').position();
pLeft = 15;
switch (e.keyCode) {
case 37:
// Left
$('#player').css('left', Math.max(15, Math.min(9 * 50 + 15, position.left - 50)) + 'px');
//HERE IS WHERE I NEED TO CHECK THE COLOUR
playerPos[0] = Math.max(0, playerPos[0] - 1);
checkCol(playerPos[0], playerPos[1]);
document.getElementById('power').innerHTML = '<b>Power:</b> ' + playerPower;
if (playerPower <= 0) {
alert('You have run out of power! \n You will now be redirected to the Customisation page');
window.location.href='customise.php';
document.getElementById('power').innerHTML = '<b>Power:</b> 0';
}
break;
case 38:
// Up
$('#player').css('top', Math.max(15, Math.min(9 * 50 + 15, position.top - 50)) + 'px');
//HERE IS WHERE I NEED TO CHECK THE COLOUR
playerPos[1] = Math.max(0, playerPos[1] - 1);
checkCol(playerPos[0], playerPos[1]);
document.getElementById('power').innerHTML = '<b>Power:</b> ' + playerPower;
if (playerPower <= 0) {
alert('You have run out of power! \n You will now be redirected to the Customisation page');
window.location.href='customise.php';
document.getElementById('power').innerHTML = '<b>Power:</b> 0';
}
break;
case 39:
// Right
$('#player').css('left', Math.max(15, Math.min(9 * 50 + 15, position.left + 50)) + 'px');
playerPos[0] = Math.min(map[0].length - 1, playerPos[0] + 1);
checkCol(playerPos[0], playerPos[1]);
document.getElementById('power').innerHTML = '<b>Power:</b> ' + playerPower;
if (playerPower <= 0) {
alert('You have run out of power! \n You will now be redirected to the Customisation page');
window.location.href='customise.php';
document.getElementById('power').innerHTML = '<b>Power:</b> 0';
}
break;
case 40:
// Down
$('#player').css('top', Math.max(15, Math.min(9 * 50 + 15, position.top + 50)) + 'px');
//HERE IS WHERE I NEED TO CHECK THE COLOUR
playerPos[1] = Math.min(map.length - 1, playerPos[1] + 1);
checkCol(playerPos[0], playerPos[1]);
document.getElementById('power').innerHTML = '<b>Power:</b> ' + playerPower;
if (playerPower <= 0) {
alert('You have run out of power! \n You will now be redirected to the Customisation page');
window.location.href='customise.php';
document.getElementById('power').innerHTML = '<b>Power:</b> 0';
}
break;
}
});
});
</script>
</div>
<?php include("footer.php"); ?>
<?php
} else {
echo '<META HTTP-EQUIV="Refresh" Content="0; URL=customise.php">';
exit;
}
?>
我的游戏在页面中工作，有一个设置页面，用户可以选择他们的机器人选择等。
我尝试过If语句，例如：
If (playerPos[3, 0]) {
alert("Passenger Added!");
}
在移动播放器的所有switch语句下面，但它没有按预期工作。
我希望这是有道理的，我尽量让它尽可能清楚，所以提前谢谢。
为了澄清小提琴页面上我有字母“P”，这是我需要检查用户是否已经查看包含一个的框，如果是，则显示警告框。如果您需要我的所有代码，那么如果需要，我将非常乐意编辑问题。