背景和跳跃在Javascript帆布游戏

Question

我正在创建一个Javascript游戏，我想知道如果任何人都可以帮助我添加背景到画布，如果有人可以修复我的跳跃，因为我不能修复它。

谢谢！ :)

这里是我的jsfiddle

https://jsfiddle.net/Nielsvangils/v9hL9d3k/

/* 
 

 
var Player; 
 
var Player_width; 
 
var Player_height; 
 
var Player_POSX; 
 
var Player_POSY; 
 
var Player_Gravity; 
 
var Player_IMG; 
 
var Player_isJUMPING; 
 

 
var Block; 
 
var Block_width; 
 
var Block_height; 
 
var Block_POSX; 
 
var Block_POSY; 
 
var Block_IMG; 
 
var Block_Hit; 
 

 
var Canvas; 
 
var Canvas_width; 
 
var Canvas_height; 
 

 
var Score; 
 

 
var Background; 
 
var Background_IMG; 
 

 
var Level; 
 
var Gamespeed; 
 

 
blok.sklambert.com/html5-canvas-game-panning-a-background/ voor hulp 
 

 
*/ 
 
var PlayerX; 
 
var Blocka; 
 
var Ground 
 

 
var canvas = document.getElementById("gamefield"); 
 
ctx = canvas.getContext("2d"); 
 

 

 
var Gamespeed=5; 
 
var Gravity = 0.9; 
 
var Score = 0; 
 
var velocity = 0.01; 
 
var jumping; 
 

 
PlayerX = new Player(); 
 
Blocka = new Block(1); 
 
Ground = new Gameground(); 
 

 
setInterval(Update,20); 
 

 
function startGame() 
 
{ 
 

 

 
} 
 

 
function Player() 
 
{ 
 
\t // this staat voor verwijzing naar zichzelf 
 
\t this.width = 30; 
 
\t this.height = 50; 
 
\t this.x = canvas.width/4; 
 
\t this.y = canvas.height/3*2; 
 
\t this.draw = function(){ 
 
\t \t ctx.fillStyle="#00BFFF"; 
 
\t \t ctx.fillRect(this.x, this.y, this.width, this.height); 
 
\t } 
 
\t // JUMP function 
 

 
} 
 
    
 

 
function Block(kolb) 
 
{ 
 
\t this.width = 20; 
 
\t this.height = 40; 
 
\t this.show = true; 
 
\t //this.x = canvas.width/2; 
 
\t this.x = canvas.width + 20; 
 
\t this.y = (canvas.height/3*2)+10; 
 
\t this.draw = function(){ 
 
\t \t this.move(); 
 
\t \t if(this.show){ 
 
\t \t \t if(kolb==1){ 
 
\t \t \t \t ctx.fillStyle="#000000"; 
 
\t \t \t \t ctx.fillRect(this.x, this.y, this.width, this.height); 
 
\t \t \t } 
 
\t \t } \t 
 
\t } 
 
\t this.move = function() { 
 
\t \t this.x -= Gamespeed; 
 
\t \t this.death(); 
 
\t } 
 
\t this.death = function(){ 
 
\t \t if(this.x<=20){ 
 
\t \t \t this.show = false; 
 
\t \t } 
 
\t } 
 
} 
 

 
function Gameground() 
 
{ 
 
\t // this staat voor verwijzing naar zichzelf 
 
\t this.width = 800; 
 
\t this.height = 149; 
 
\t this.x = 0; 
 
\t this.y = 451; 
 
\t this.draw = function(){ 
 
\t \t ctx.fillStyle = "#00FFBF" 
 
\t \t ctx.fillRect(this.x, this.y, this.width, this.height); 
 
\t } 
 
\t 
 

 
} 
 

 
function Update() { 
 
\t ctx.clearRect(0, 0, canvas.width, canvas.height); 
 
\t Blocka.draw(); 
 
\t PlayerX.draw(); 
 
\t 
 
\t 
 

 
\t // function ben je af? 
 

 
\t if (PlayerX.x < Blocka.x + Blocka.width && 
 
    \t PlayerX.x + PlayerX.width > Blocka.x && 
 
    \t PlayerX.y < Blocka.y + Blocka.height && 
 
    \t PlayerX.height + PlayerX.y > Blocka.y) { 
 
    // collision detected! 
 
\t Blocka.x += 580; 
 
\t } 
 

 
\t Ground.draw(); 
 
} 
 

 
// funtion voor eventhandles (knopjes) zoals springen 
 
window.addEventListener("keydown", checkKeyPressed, false); 
 
     
 
function checkKeyPressed(e) { 
 
     if (e.keyCode == "32") { //kijkt of de spatiebalk is ingedrukt 
 

 
\t \t \t var interval1, interval2, velo, tijd; 
 

 
\t \t velo=0.00001; 
 
\t \t 
 
\t \t tijd= 25; 
 

 

 
\t \t interval1 = setInterval(plus, tijd); 
 

 

 

 
\t \t function plus() 
 
\t \t { 
 

 
\t \t if(velo<20) 
 
\t \t { 
 
\t \t velo += 1.5; 
 
\t \t } 
 
\t \t else 
 
\t \t { 
 
\t \t velo -= 1.5; 
 
\t \t } 
 

 
\t \t if(PlayerX.y > 480) 
 
\t \t { 
 
\t \t clearInterval(interval1); 
 
\t \t interval2 = setInterval(min, tijd); 
 

 

 

 
\t \t } 
 

 
\t \t PlayerX.y += velo; 
 
\t \t console.log(PlayerX.y); 
 

 
\t \t } 
 

 

 
\t \t function min() 
 
\t \t { 
 

 
\t \t if(velo<20) 
 
\t \t { 
 
\t \t velo += 1.5; 
 
\t \t } 
 
\t \t else 
 
\t \t { 
 
\t \t velo -= 1.5; 
 
\t \t } 
 

 
\t \t if(PlayerX.y < 430) 
 
\t \t { 
 
\t \t clearInterval(interval2); 
 

 

 

 
\t \t } 
 

 
\t \t PlayerX.y -= velo; 
 
\t \t console.log(PlayerX.y); 
 

 
\t \t } 
 

 

 

 
} 
 
} 
 

 

 
// function SPAwn 
 
// BLOCKa vervangen door array met blokjes...

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<title>Game</title> 
 
<body onload="startGame()"> 
 
    <canvas id="gamefield" width="800" height="600" style="border:1px solid #000000"></canvas> 
 
    <script src="game.js"></script>

Answer 1

添加背景

可以绘制图像背景简单，如：context.drawImage(bkImg,0,0)

从A跳跃到B

该算法将绘制一个航点是对点A和点B之间的线的方式percent。

var dx = B.x-A.x; 
var dy = B.y-A.y; 
waypointX = A.x + dx * percent; 
waypointY = A.y + dy * percent; 

然后使从A跳转到B您可以减少其向上推动玩家waypointY值。创建弧跳的一种便捷方式是使用Math.sin来减少航点Y.

警告：数学说话：

• Math.sin(n)将形成一个合适的弧为从0到PI n变化。
• Math.sin(0)和Math.sin(PI)都将返回0。
• Math.sin(n)值n时将返回0和PI/2之间的值减小与所述值在-1.00当n = PI/2最小化。
• Math.sin(n)将在PI/2和PI之间的n期间返回递增值，并且当n = PI时该值最大值为0.00。

...而视觉上的正弦波是这样的：

...而且在视觉上的负面正弦值做出波浪，看起来像这样（跳！） ：

所以组合和负的正弦值将创建一个“跳跃”。

waypointX=A.x + dx*percent; 
// Note: The 50 in the next line tells the player how high to jump 
waypointY=A.y + dy*pct - Math.sin(percent*Math.PI)*50; 

您可以通过您希望您的播放器跳到最大（顶点）高度Math.sin乘以控制跳跃的高度。

这里的示例代码和演示

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 
var cw=canvas.width; 
 
var ch=canvas.height; 
 
function reOffset(){ 
 
    var BB=canvas.getBoundingClientRect(); 
 
    offsetX=BB.left; 
 
    offsetY=BB.top;   
 
} 
 
var offsetX,offsetY; 
 
reOffset(); 
 
window.onscroll=function(e){ reOffset(); } 
 
window.onresize=function(e){ reOffset(); } 
 

 
var isJumping=false; 
 

 
var player={x:20,y:100,sx:0,sy:0,dx:0,dy:0,pct:100}; 
 

 
var bk=new Image(); 
 
bk.onload=start; 
 
bk.src='https://dl.dropboxusercontent.com/u/139992952/multple/googlemap1.png'; 
 
var playerImg=new Image(); 
 
playerImg.onload=start; 
 
playerImg.src='https://dl.dropboxusercontent.com/u/139992952/multple/marioRunningRightSmall.png'; 
 
var imgCount=2; 
 
function start(){ 
 
    if(--imgCount>0){return;} 
 
    cw=canvas.width=bk.width; 
 
    ch=canvas.height=bk.height; 
 
    draw(); 
 

 
    $myslider=$('#myslider'); 
 
    $myslider.attr({min:0,max:100}).val(0); 
 
    $myslider.on('input change',function(){ 
 
     player.pct=parseInt($(this).val()); 
 
    }); 
 

 
    $("#canvas").mousedown(function(e){handleMouseDown(e);}); 
 

 
} 
 

 
function draw(){ 
 
    ctx.drawImage(bk,0,0); 
 
    ctx.drawImage(playerImg,player.x,player.y); 
 
} 
 

 
function jumpToXY(x,y){ 
 
    player.sx=player.x; 
 
    player.sy=player.y-playerImg.height; 
 
    player.dx=x-player.x; 
 
    player.dy=y-player.y; 
 
    player.pct=0; 
 
    isJumping=true; 
 
    requestAnimationFrame(animateJump); 
 
} 
 

 
function animateJump(){ 
 
    draw(); 
 
    player.pct+=4; 
 
    var pct=player.pct/100; 
 
    if(player.pct<=100){ 
 
     player.x=player.sx+player.dx*pct; 
 
     player.y=player.sy+player.dy*pct-Math.sin(pct*Math.PI)*25; 
 
     requestAnimationFrame(animateJump); 
 
    }else{ 
 
     isJumping=false; 
 
    } 
 
} 
 

 
function handleMouseDown(e){ 
 
    // if animation is in progress just return 
 
    if(isJumping){return;} 
 
    // tell the browser we're handling this event 
 
    e.preventDefault(); 
 
    e.stopPropagation(); 
 
    // jump to mouse 
 
    mouseX=parseInt(e.clientX-offsetX); 
 
    mouseY=parseInt(e.clientY-offsetY); 
 
    jumpToXY(mouseX,mouseY); 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<h4>Click on the map to make Mario jump to that click point</h4> 
 
<canvas id="canvas" width=300 height=300></canvas>