我正在创建一个 Javascript 游戏，我想知道是否有人可以帮助我在 Canvas 上添加背景，以及是否有人可以修复我的跳跃，因为我无法修复它。
谢谢! :)
这是我的 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()
{
// 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...<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>最佳答案
添加背景
您可以简单地绘制图像背景:context.drawImage(bkImg,0,0)
从A跳到B
此算法将绘制一个路径点，该路径点为点 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)将在n从 0 变化到 PI 时形成合适的弧线。Math.sin(0)和Math.sin(PI)都将返回值 0。Math.sin(n)将在 n 期间返回 0 到 PI/2 之间的递减值，当 n=PI/2 时，该值最小化为 -1.00。Math.sin(n)将在 PI/2 和 PI 之间的 n 期间返回一个递增值，当 n=PI 时，该值在 0.00 处最大化。
...从视觉上看，正弦波看起来像这样:
...从视觉上看，负正弦值会产生如下所示的波(跳跃!):
因此，waypointY 和负正弦值的组合将创建“跳跃”。
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>关于javascript - Javascript Canvas 游戏中的背景和跳跃，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37190319/