背景和跳跃在Javascript画布游戏

时间：2016-05-12 14:44:12

标签： javascript html canvas

我正在创建一个Javascript游戏，我想知道是否有人可以帮我添加画布背景，如果有人可以修复我的跳转，因为我无法修复它。

谢谢！ ：）

这是我的JSFIDDLE

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

＆＃13;
＆＃13; 
/*

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()
{
	// this staat voor verwijzing naar zichzelf
	this.width = 30;
	this.height = 50;
	this.x = canvas.width/4;
	this.y = canvas.height/3*2;
	this.draw = function(){
		ctx.fillStyle="#00BFFF";
		ctx.fillRect(this.x, this.y, this.width, this.height);
	}
	// JUMP function 

}
  

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

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

}

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

	// function ben je af?

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

	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

			var interval1, interval2, velo, tijd;

		velo=0.00001;
		
		tijd= 25;


		interval1 = setInterval(plus, tijd);



		function plus()
		{

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

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



		}

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

		}


		function min()
		{

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

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



		}

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

		}



}
}


// function SPAwn 
// BLOCKa vervangen door array met blokjes...
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：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;

然后，要从A跳转到B，您可以减少将玩家向上推的waypointY值。创建弧形跳转的便捷方法是使用Math.sin来减少waypointY。

警告：数学说话：

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

......在视觉上，正弦波看起来像这样：

enter image description here

......在视觉上，负正弦值会产生一个看起来像这样的波（跳跃！）：

enter image description here

因此，waypointY和负正弦值的组合将创建＆＃34;跳跃＆＃34;。

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乘以您希望玩家跳跃的最大（顶点）高度来控制跳跃的高度。

此处的示例代码和演示

＆＃13;
＆＃13; 
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);

}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题