Я новичок в программировании на HTML5 / Canvas / Game, но возился с ним после прочтения пары книг. Я думаю, у меня есть довольно хорошее представление о том, как все работает. Этот вопрос задает несколько небольших вопросов, но в целом это "структурный подход". вопрос. Я не ожидаю многословных ответов, но, надеюсь, здесь и там будут маленькие указатели :) Вот ссылка на не прокручивающийся, и в настоящее время довольно скучный мир Super Mario.

Super Mario World Test

NOTE: Controls are Left/Right and Spacebar to jump. This is only setup for Firefox right now as I'm just learning.

Did I Do Something Wrong at This Point?

В настоящее время я просто сосредоточился на том, как Марио бегает и прыгает, и думаю, что я справился с этим довольно хорошо. Копилка ничего не делает, и фон - это просто изображение, загруженное для внешнего вида. Вот мой подход, пожалуйста, дайте мне знать, если с этим что-то не так:

Allows Mario to jump by enacting on 2 Y velocities (Gravity and Jump variables) Allows Mario to run by enacting on 1 velocity (Left or Right "Friction" + Acceleration) Sprites are used and positioned according to keypress/keydown I'm not sure if this is right, but I'm using a constructor function to build an object, then inside the main animation loop I'm calling the prototype.draw function for that object to update all variables and redraw the object. I'm clearing the entire canvas each Frame Should I be splitting this into more than just a draw function, like Mario.move()? I've setup a GroundLevel and a JumpLevel variable to create 2 planes of gameplay. The JumpLevel is setup to allow for controlling how high Mario can jump on the fly. The 2 places would allow for the ground to rise like a hill - keeping the point at which Gravity overrules Mario's jumping force at the same distance from the ground. For clarity sake, everything is separated into different JS files, but would obviously consolidate. Moving Forward:

Теперь, когда я закончил настраивать, как Марио двигается (я думаю, что есть пара других мелких вещей, которые я мог бы сделать, как грибы вверх / вниз и стрельба из огненных шаров). Я думаю, что могу понять это, но я действительно потерян, когда дело доходит до визуализации следующего и того, как HTML5 / Canvas может справиться с этим легко:

Scrolling background (I've tried setting up Ground Tiles and using Screen Wrapping, but that seems to cause a lot of uneven issues since I was moving the tiles in the opposite direction. Unfortunately, since I'm trying to account for acceleration, this threw off the count and was causing gaps in the ground. I ditched this idea. Would a DIV beneath the canvas with a large background image be the best solution?

Enemies: Would I create enemies the same way and run a loop for collision detection on every enemy during each frame?

Background Boxes: I'm trying to allow Mario to stand on the boxes in the background, but am unsure how to approach this. I currently have boundaries setup for Mario to stay on the canvas, do I continue to expand these conditions to setup different boundaries based on the boxes? I can see that having several boxes on the screen and doing it this way would get kind of crazy, especially if I would be doing the same hit testing for enemies? I know I'm missing something here....

Level Movement: This is somewhat related. When the Right key is pressed, basically everything in the level needs to move to the left. Would I need to track out all positions of everything that could touch Mario (boxes for him to stand on and enemies for him to collide with) during every animation frame? This seems like it would get kind of inefficient?

Спасибо всем! Я буду держать это в курсе результатов / решений :)