我正在开发一个简单的 JS 平台游戏。这是我的代码：
/*
TODO:
[X] 1. Add content to 'Game.Sprite.EditSpriteVel' (Function)
[] 2. Figure out a way to make a hitbox that can tell which way it hit
[X] 3. Find some game SFX
*/
var Game = {
Canvas: null,
Ctx: null,
Start: function(){
Game.Setup();
Game.Tick();
},
Keyup: function(e){
if(e.key == 'ArrowUp' && Game.World.Sprite.inJump === false){
Game.Keys.up = false;
}
if(e.key == 'ArrowLeft'){
Game.Keys.left = false;
}
if(e.key == 'ArrowRight'){
Game.Keys.right = false;
}
},
Paused: false,
Keydown: function(e){
if(e.key == 'ArrowUp' && Game.World.Sprite.inJump === false){
Game.Keys.up = true;
Game.World.Sprite.inJump = true
Game.World.Sprite.yVel = -Game.World.Sprite.jumpPower;
}
if(e.key == 'ArrowLeft'){
Game.Keys.left = true;
}
if(e.key == 'ArrowRight'){
Game.Keys.right = true;
}
},
Setup: function(){
Game.Canvas = document.createElement('Canvas');
Game.Canvas.width = 600;
Game.Canvas.height = 600;
Game.Canvas.style.border = '1px solid black';
document.body.appendChild(Game.Canvas);
Game.Ctx = Game.Canvas.getContext('2d');
},
Tick: function(){
if(!Game.Paused){
Game.Ctx.clearRect(0, 0, 600, 600);
Game.World.Platforms.Render();
Game.World.RenderSprite();
Game.World.EditSpriteVel();
Game.World.MoveSprite();
Game.World.ScreenBounds();
Game.World.CheckSpriteHealth();
}
requestAnimationFrame(Game.Tick);
},
Keys: {
up: false,
left: false,
right: false
},
World: {
Platforms: {
Index: [[{x: 200, y: 200, w: 200, h: 200}, {x: 100, y: 100, w: 100, h: 100}]],
Render: function(){
for(var i = 0; i < Game.World.Platforms.Index[Game.World.Map].length; i++){
Game.Ctx.fillStyle = 'grey';
Game.Ctx.fillRect(Game.World.Platforms.Index[Game.World.Map][i].x, Game.World.Platforms.Index[Game.World.Map][i].y, Game.World.Platforms.Index[Game.World.Map][i].w, Game.World.Platforms.Index[Game.World.Map][i].h);
}
},
},
Map: 0,
Level: {
StartingCoords: [{x: 300, y: 0}]
},
ResetLevel: function(){
Game.World.Sprite.x = Game.World.Level.StartingCoords[Game.World.Map].x
Game.World.Sprite.y = Game.World.Level.StartingCoords[Game.World.Map].y
Game.World.Sprite.xVel = 0;
Game.World.Sprite.yVel = 0;
Game.World.Sprite.inJump = false
},
CheckSpriteHealth: function(){
if(Game.World.Sprite.health <= 0){
Game.World.Sprite.health = 100
Game.World.Sprite.lives--;
Game.World.ResetLevel();
}
if(Game.World.Sprite.lives < 0){
Game.World.Map = 0;
Game.World.ResetLevel();
Game.World.Sprite.lives = 3
}
},
ScreenBounds: function(){
if(Game.World.Sprite.x < 0){
Game.World.Sprite.x = 0
Game.World.Sprite.xVel = 0
}
if(Game.World.Sprite.x > 600 - Game.World.Sprite.size){
Game.World.Sprite.x = 600 - Game.World.Sprite.size
Game.World.Sprite.xVel = 0
}
if(Game.World.Sprite.y > 600 - Game.World.Sprite.size){
Game.World.Sprite.health = 0
}
if(Game.World.Sprite.y < 0){
Game.World.Sprite.y = 0
Game.World.Sprite.yVel = 0
}
},
Sprite: {
x: 300,
xVel: 0,
y: 0,
yVel: 0,
size: 15,
inJump: false,
health: 100,
jumpPower: 7.5,
acc: 0.95,
fri: 0.1,
grav: 0.15,
lives: 3,
oldX: 0,
oldY: 0
},
MoveSprite: function(){
var hitting = [];
for(var i = 0; i < Game.World.Platforms.length; i++){
if(Game.World.Sprite.x + Game.World.Sprite.size > Game.World.Platforms[i].x && Game.World.Sprite.x < Game.World.Platforms[i].x + Game.World.Platforms[i].w && Game.World.Sprite.y + Game.World.Sprite.size > Game.World.Platforms[i].y && Game.World.Sprite.y < Game.World.Platforms[i].y){
hitting.push(Game.World.Platforms[i])
}
}
Game.World.Sprite.x += Game.World.Sprite.xVel;
Game.World.Sprite.y += Game.World.Sprite.yVel;
console.log(hitting)
},
RenderSprite: function(){
Game.Ctx.fillStyle = 'lightgrey';
Game.Ctx.fillRect(Game.World.Sprite.x, Game.World.Sprite.y, Game.World.Sprite.size, Game.World.Sprite.size);
},
EditSpriteVel: function(){
if(Game.Keys.left){
Game.World.Sprite.xVel -= Game.World.Sprite.acc;
}
if(Game.Keys.right){
Game.World.Sprite.xVel += Game.World.Sprite.acc;
}
Game.World.Sprite.xVel *= (1 - Game.World.Sprite.fri)
if(Game.World.Sprite.yVel < 7.5){
Game.World.Sprite.yVel += Game.World.Sprite.grav
}else{
Game.World.Sprite.yVel = 7.5;
}
}
}
};
document.onkeydown = function(e){ Game.Keydown(e); };
document.onkeyup = function(e){ Game.Keyup(e); };
Game.Start();<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Game</title>
</head>
<body>
</body>
</html>然而，Game.World.MoveSprite 函数并没有完成它的工作。我做了它来检测精灵正在击中哪个平台，但是，该功能不起作用，我无法弄清楚原因。我希望该函数将平台的（正在命中的）规范（以 ```JSON 格式）推送到一个数组中以供进一步使用。谢谢。