我试图在JavaScript中创建一个2D平台游戏，我没有错误，但它没有正常工作。按向左箭头或向上箭头键不执行任何操作，按向右箭头键可使X-Pos开始每个刻度增加1个像素。我意识到这段代码很长，而我的物理特性很长。逻辑是完全扭曲和倒退的，但我无法理解任何人如何添加音乐和速度，加速度和重力的指南，我只是非常困惑。我一周前就开始使用JavaScript了，我真的不知道自己在做什么，所以关于我的任何代码的任何建议，甚至是技术上没有问题的问题＆＃39;非常感谢。谢谢你们，你们真的很喜欢＆lt; 3
<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
<head>
<title>For The Intended</title>
</head>
<body>
<canvas id="canvas" width="1200" height="800"></canvas>
<!-- <script src="platform.js"></script> -->
<script>
//
//notes
//
//Block collision should come when velocity tries to move, and the x-y position should be player.x + player.velocity to check exactly where the collision will be
//
//
//
//
//
//
//Canvas Settings
var cvs = document.getElementById("canvas");
var ctx = cvs.getContext('2d');
cvs.style = "position:absolute; left: 60%; width: 1200; margin-left: -800px";
//Variables
var platforms = [];
var imgCount = 0
var totalImgCount = 3
var lastUpdate = Date.now();
var keys = {};
//Controls
//Images
var platformImage = new Image();
var playerImage = new Image();
var bgImage = new Image();
platformImage.src = "images/platform.png";
playerImage.src = "images/forward1.png";
playerImage.src = "images/backward1.png";
bgImage.src = "images/bg.png";
platformImage.onload = function() {
imgCount += 1
}
playerImage.onload = function() {
imgCount += 1
}
bgImage.onload = function() {
imgCount += 1
}
//Objects
//Platforms
function Platform(x, y, length, height) {
this.x = x;
this.y = y;
this.length = length;
this.height = height;
platforms.push(this)
}
platform = new Platform(30,30,30,30)
platform = new Platform(40,40,40,40)
//Player
function Player(x, y, gravity, velocityX, velocityY, acceleration, isJumping, direction){
this.x = x
this.y = y
this.gravity = gravity
this.velocityX = velocityX
this.velocityY = velocityY
this.acceleration = acceleration
this.isJumping = isJumping
this.direction = direction
}
player = new Player(200, 600, 0.7, 1, 1, false, "forward")
function jump() {
if (player.isJumping == false) {
player.velocityY = -15;
player.isJumping = true;
}
}
function jumpingHandler() {
if (player.isJumping) {
player.velocityY += player.gravity;
player.y += player.velocityY;
draw();
if (player.y > 600) {
player.y = 600;
player.velocityY = 0;
player.isJumping = false;
}
}
}
*function move(e) {
if(keys[e.keyCode]) {
if(keys[38]) {
jump();
}
if(keys[37]) {
if (player.x > 150){
if (player.acceleration > -5){
player.acceleration = Math.floor(player.acceleration);
player.acceleratoion -= 1
player.acceleration = Math.floor(player.acceleration);
}
player.direction = "backward"
playerImage.src = "images/backward1.png";
}
}
if(keys[39]) {
if (player.x < 1050){
console.log("hey")
if (player.acceleration < 5){
console.log("hey2")
player.acceleration = Math.floor(player.acceleration);
player.acceleration += 1
player.acceleration = Math.floor(player.acceleration);
}
player.direction = "forward"
playerImage.src = "images/forward1.png";
}
}
}
}*
//Game Requirements
function draw() {
if (imgCount == 3) {
for (var i = 0; i < platforms.length; i++) {
ctx.drawImage(platformImage, platforms[i].x, platforms[i].y)
//Do something
}
ctx.drawImage(playerImage, player.x, player.y)
}
}
setInterval(update, 33);
function updateKeys() {
window.onkeyup = function(e) { keys[e.keyCode] = false; move(e)}
window.onkeydown = function(e) { keys[e.keyCode] = true; move(e)}
}
function update() {
if (player.acceleration > 1) {player.acceleration -= 0.2}
if (player.acceleration < 1) {player.acceleration += 0.2}
player.acceleration = Math.floor(player.acceleration);
player.velocityX = player.acceleration
player.x += (player.velocityX)
console.log("Velocity" + player.velocityX)
console.log("Acceleration" + player.acceleration)
console.log("X-Pos" + player.x)
jumpingHandler()
updateKeys()
draw()
}
</script>
</body>
</html>