2016-05-12 9 views
1

私はJavascriptゲームを作成しています。誰かがキャンバスに背景を追加するのを手伝ってくれるのか、誰かが私のジャンプを修正できるのかどうかは不思議でした。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>

+0

です。イメージをロードし、 'ctx.clearRect'を呼び出す代わりにメインループに' ctx.drawImage(backgroundImage、0、0、ctx.canvas.width、ctx.canvas.height) 'を描画します。ジャンプについては、フレームベースのアニメーションでは管理が容易ではないイベント駆動型アキュドを使用します。どのキーが押されたかを登録し、メインループモニタで押されたキーを登録し、必要に応じて適切なアクションを実行するために、キーイベントを使用することを検討してください。 setInterval(Update、20);を 'requestAnimationFrame(Update)'に変更し、 'updateAnimationFrame(Update)'を 'Update'関数の最後に追加してください。 – Blindman67

答えて

1

背景

を追加します:context.drawImage(bkImg,0,0)

Aと点 B間のライン上の方法の percentあるウェイポイントをプロットする

このアルゴリズムをAからBにジャンプ

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

あなたが上向きにプレーヤーをプッシュwaypointY値を減少させることができBAからのジャンプをします。アークジャンプを作成する便利な方法は、Math.sinを使用してwaypointYを減らすことです。

警告:数学話す:

  • Math.sin(n)は0からPiにn変更などの適切なアークを形成することになります。
  • Math.sin(0)Math.sin(PI)は-1.00 N = PI/2の最小化値と0とPI/2との間のnの間に減少値を返す0
  • Math.sin(n)の値が返され、両方。
  • Math.sin(n)は、n = PIのときに0.00で最大値を持つPI/2とPIの間でnの間に増加値を返します。

...そして、視覚的に正弦波がこのようになっていること:

enter image description here

...そして、視覚的に負の正弦値は次のようになります波を作る(ジャンプ!) :

enter image description here

だから、の組み合わせと負の正弦値は "ジャンプ"を作成します。

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>

+1

私は本当にあなたが1つの答えにどれくらいの労力をかけているのか賞賛します。 :O – Jerry

+1

私はまったく同意します:)ありがとう@markE – Nielsvangils