Javascript 无法让玩家在2D Platformer中移动
我试图用JavaScript创建一个2D平台，我没有收到任何错误，但它不能正常工作。按向左箭头键或向上箭头键不起任何作用，按向右箭头键会使X-Pos开始每刻度增加1个像素。我意识到这段代码很长，我的“物理”逻辑完全扭曲和倒退，但我不理解任何人关于如何添加物理、速度、加速度和重力的指南，我只是超级困惑。我一周前开始使用JavaScript，但我真的不知道自己在做什么，所以任何关于我的代码的建议，即使是技术上没有“问题”的东西，我都会非常感激。谢谢，伙计们，你们是笨蛋 // //注释 // //当velocity尝试移动时，块碰撞应该发生，x-y位置应该是player.x+player.velocity以检查碰撞的确切位置 // // // // // // //画布设置 var cvs=document.getElementById（“画布”）； var ctx=cvs.getContext（'2d'）； cvs.style=“位置：绝对；左侧：60%；宽度：1200；左侧边距：-800px”； //变数 var平台=[]； var imgCount=0 var totalImgCount=3 var lastUpdate=Date.now（）； var键={}； //控制 //图像 var platformImage=新图像（）； var playerImage=新图像（）； var bgImage=新图像（）； platformImage.src=“images/platforme.png”； playerImage.src=“images/forward1.png”； playerImage.src=“images/backward1.png”； bgImage.src=“images/bg.png”； platformImage.onload=函数（）{ imgCount+=1 } playerImage.onload=函数（）{ imgCount+=1 } bgImage.onload=函数（）{ imgCount+=1 } //物体 //平台 功能平台（x、y、长度、高度）{ 这个.x=x； 这个。y=y； 这个长度=长度； 高度=高度； 平台。推（这个） } 平台=新平台（30,30,30,30） 平台=新平台（40,40,40,40） //玩家 功能播放器（x、y、重力、速度x、速度y、加速度、跳跃、方向）{ 这个。x=x 这个。y=y 重力=重力 this.velocityX=velocityX this.velocityY=velocityY 这是加速度 this.isJumping=isJumping 这个方向 } 球员=新球员（200600,0.7,1,1，假“向前”） 函数跳转（）{ 如果（player.isJumping==false）{ player.velocityY=-15； player.isJumping=true； } } 函数jumpingHandler（）{ if（player.isJumping）{ player.velocityY+=player.gravity； player.y+=player.velocityY； draw（）； 如果（玩家y>600）{ player.y=600； player.velocityY=0； player.isJumping=false； } } } *功能移动（e）{ if（键[e.keyCode]）{ 如果（键[38]）{ 跳跃（）； } 如果（键[37]）{ 如果（player.x>150）{ 如果（player.acceleration>-5）{ player.acceleration=数学地板（player.acceleration）； player.AcceleratorIon-=1 player.acceleration=数学地板（player.acceleration）； } player.direction=“向后” playerImage.src=“images/backward1.png”； } } 如果（键[39]）{ 如果（玩家x<1050）{ console.log（“嘿”） 如果（玩家加速度<5）{ 控制台日志（“hey2”） player.acceleration=数学地板（player.acceleration）； 玩家加速度+=1 player.acceleration=数学地板（player.acceleration）； } player.direction=“前进” playerImage.src=“images/forward1.png”； } } } }* //游戏要求 函数绘图（）{ 如果（imgCount==3）{ 对于（var i=0；iJavascript 无法让玩家在2D Platformer中移动,javascript,html,math,2d,physics,Javascript,Html,Math,2d,Physics,我试图用JavaScript创建一个2D平台，我没有收到任何错误，但它不能正常工作。按向左箭头键或向上箭头键不起任何作用，按向右箭头键会使X-Pos开始每刻度增加1个像素。我意识到这段代码很长，我的“物理”逻辑完全扭曲和倒退，但我不理解任何人关于如何添加物理、速度、加速度和重力的指南，我只是超级困惑。我一周前开始使用JavaScript，但我真的不知道自己在做什么，所以任何关于我的代码的建议，即使是技术上没有“问题”的东西，我都会非常感激。谢谢，伙计们，你们是笨蛋 // //注释 // //当v
如果你一周前才开始使用JavaScript，在尝试实现物理引擎之前，你可能想先从一些简单的项目开始。你可能是对的，但我妹妹很快就会想要这个游戏：/这是她的书的促销游戏，我需要尽快推出。如果是这样的话，她可能应该雇个人帮她做这件事。话虽如此，我注意到的一件事是，每次调用
updateupdateKeys（）<!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>