html 5 холст, как заставить игрока прыгать (чистые без фреймворков)

-4

Хорошо, я посмотрел онлайн для ответа на различные уроки и столкнулся с одной или несколькими из этих проблем 0)) Они не использовали изображения, а рисовали на холсте так код не работает. 2) Они использовали фреймворк, который Iam пытается изучить прямое кодирование перед использованием фреймворков. 3) Учебное пособие было обозначено как полное, но не привело к пустой трате времени.html 5 холст, как заставить игрока прыгать (чистые без фреймворков)

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

Это ссылка на исходные файлы http://sourceforge.net/projects/pfbw/files/canvas%20html5.zip/download

<!DOCTYPE html> 
    <head> 
    <meta charset="UTF-8"> 
    <title> Testing Canvas</title> 
    <script type="text/javascript"> 
    window.onload = function() 
    { 

    var canvas = document.getElementById("canvasOne"); 
    var context = canvas.getContext("2d"); 
var canvasbk = document.getElementById("bk"); 
    var contextbk = canvasbk.getContext("2d"); 


var myelf = new Image(); 
var myice = new Image() ; 
var mybk = new Image(); 

myice.src="iceland.png"; 
    myelf.src="elf1.png" ; 
mybk.src="bk.png"; 

myelf.onload = function() 
{ 
context.drawImage(myelf,40,55); 


} 
myice.onload = function() 
{ 

context.drawImage(myice,0,150); 

}  
mybk.onload = function() 
{ 

contextbk.drawImage(mybk,0,0,canvasbk.width,canvasbk.height); 

} 


} 

</script> 
</head> 
<body> 

<div style = “width:500px; height:500px; margin:0 auto; padding:5px;”> 

<canvas id="canvasOne" width="500" height="300" 
    style="border:2px solid black; position:absolute; 
    left:auto; top:auto; z-index:2"></canvas> 

    <canvas id="bk" width=500px; height="300px; style="border:solid black; 
    position:absolute; top:auto left:auto; z-index 1"></canvas> 

    </div> 
</body> 
</html>

источник

2013-12-09 user3081386

Взгляните на [помощь]. Вы должны отправить свой код ** в вопрос **. Публикация ссылки на файл, который кто-то должен загружать и распаковывать, бесполезен. [so] призван быть архивом полезных вопросов и ответов. Если вы удалили связанный файл, ваш вопрос не имеет смысла. –

Спасибо за ваш ответ на кодировку, есть кто-нибудь, кто может помочь мне с добавлением правильного кода прыжка и гравитации. Огромное спасибо. – user3081386

Поскольку вы хотите сделать некоторое обучение, я не буду портить свой опыт с кодированным ответом, но вы должны проверить эти 2 способа сделать ваш персонаж Прыгать.

Чтобы сделать стационарный прыжок (начало & земля на той же координате) Отправка Ослабление.

Easing позволяет вашему персонажу быстро прыгать, медленно на вершине & ускоряется при спуске. В частности, проверьте непринужденность OutQuart для подъема и простоты InQuart для спуска.

http://jqueryui.com/resources/demos/effect/easing.html

Чтобы перейти от начальной точки до другой конечной точки проверить квадратичную кривую.

Он рисует кривую от точной начальной точки до конечной конечной точки с количеством «кривизны», определяемой контрольной точкой. Самое приятное в формуле квадратичной кривой состоит в том, что она естественным образом генерирует больше очков на своей вершине (больше очков означает, что ваш персонаж начнет быстро, медленно на вершине и ускорится при спуске). Вот квадратичная формула, которая возвращает XY в заданное время (T).

// get XY along quadratic bezier at T 
// (T==0.00 at start of curve, T==1.00 at end of curve) 

function getQuadraticBezierXYatT(startPt,controlPt,endPt,T) { 
    var x = Math.pow(1-T,2) * startPt.x + 2 * (1-T) * T * controlPt.x + Math.pow(T,2) * endPt.x; 
    var y = Math.pow(1-T,2) * startPt.y + 2 * (1-T) * T * controlPt.y + Math.pow(T,2) * endPt.y; 
    return({x:x,y:y}); 
}

Кстати, есть, вероятно, проблема в вашем примере кода:

Ваше bk.png изображение, скорее всего, ваш самый большой образ, так как он заполняет холст. Это, скорее всего, займет больше всего времени и будет нарисовано последним. Поэтому ваш фон, скорее всего, перезапишет ваши изображения elf1.png и Iceland.png. Чтобы исправить это, проверьте загрузчик изображений, чтобы все изображения были полностью загружены, прежде чем рисовать их на холсте.

источник

2013-12-09 17:42:15 markE

Спасибо за предложение, прочитанная книга, если у меня есть отдельный холст для фона, он не будет перерисовываться, когда я хочу перерисовать спрайт. – user3081386

Спасибо за функцию getQuadraticBezierXYatT, я искал эту функцию целый день! –

html 5 холст, как заставить игрока прыгать (чистые без фреймворков)

ответ

Смежные вопросы