背景和跳跃在Javascript帆布游戏
我正在创建一个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>
添加背景
可以绘制图像背景简单,如: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到PIn
变化。 -
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>
我真的很佩服你为每一个答案付出了多少工作 - 这是惊人的。 :O – Jerry
我完全同意:)谢谢@ markE – Nielsvangils
对于背景。加载图像并在主循环中而不是调用'ctx.clearRect'绘制图像'ctx.drawImage(backgroundImage,0,0,ctx.canvas.width,ctx.canvas.height)'至于跳跃,你是使用在基于帧的动画中不容易管理的事件驱动接近。考虑使用按键事件只是为了注册哪些按键,然后在主循环中监视按键并根据需要执行适当的操作。将'setInterval(Update,20)'更改为'requestAnimationFrame(Update)'并将'requestAnimationFrame(Update)'添加到'Update'函数的末尾。 – Blindman67