Javascript 如何使移动的精灵集中在屏幕上？
我已经创建了一个侧滚游戏，其中包括一个平移“相机”和一个移动的精灵。平移“摄影机”是由沿主精灵相反方向移动的障碍物产生的效果。问题是精灵不在一个位置；它不断地在屏幕上移动，最终离开视野我希望精灵看起来在移动，但实际上它被设置在一个位置，这样它就不会从屏幕上消失。 移动精灵的代码：Javascript 如何使移动的精灵集中在屏幕上？,javascript,html,Javascript,Html,我已经创建了一个侧滚游戏，其中包括一个平移“相机”和一个移动的精灵。平移“摄影机”是由沿主精灵相反方向移动的障碍物产生的效果。问题是精灵不在一个位置；它不断地在屏幕上移动，最终离开视野我希望精灵看起来在移动，但实际上它被设置在一个位置，这样它就不会从屏幕上消失。 移动精灵的代码： ctx.beginPath(); ctx.moveTo(positionX - small, positionY - large); ctx.lineTo(positionX + small, positionY -
ctx.beginPath();
ctx.moveTo(positionX - small, positionY - large);
ctx.lineTo(positionX + small, positionY - large);
ctx.lineTo(positionX + small, positionY);
ctx.lineTo(positionX - small, positionY);
ctx.closePath();
ctx.stroke();
ctx.rect（250-positionX，145，30，30<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" width="2000" height="2000"></canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var positionX = 50.0;
var positionY = 175.0;
var velocityX = 2;
var velocityY = 0.0;
var gravity = 0.5;
var onGround = false;
var deaths = 0;
var points = 0;
var color = "#DCD93C";
var change1 = 175;
//circle 1
var point1x1 = 339;
var point1x2 = 372;
var point1y1 = 90;
var point1y2 = 150;
var circlex1 = 350;
var circley1 = 100;
//circle 2
var point2x1 = 565;
var point2x2 = 590;
var point2y1 = 90;
var point2y2 = 150;
var circlex2 = 575;
var circley2 = 100;
//circle 3
var point3x1 = 855;
var point3x2 = 880;
var point3y1 = 20;
var point3y2 = 50;
var circlex3 = 865;
var circley3 = 35;
//square size change
small = 10;
large = 20;
window.addEventListener("mousedown", StartJump, false);
window.addEventListener("mouseup", EndJump, false);
Loop();
function StartJump() {
if (onGround) {
velocityY = -12.0;
onGround = false;
}
}
function EndJump() {
if (velocityY < -6.0)
velocityY = -6.0;
}
function Loop() {
Update();
Render();
window.setTimeout(Loop, 30);
}
function Update() {
velocityY += gravity;
positionY += velocityY;
positionX += velocityX;
// Collision Detection //
if ((positionX > (239 - positionX) && positionX < (292 - positionX) && positionY > 145) || (positionX > (439 - positionX) && positionX < (492 - positionX) && positionY > 145) || (positionX > (639 - positionX) && positionX < (692 - positionX) && positionY > 145) || (positionX > (839 - positionX) && positionX < (892 - positionX) && positionY > 145) || (positionX > (839 - positionX) && positionX < (892 - positionX) && positionY > 50 && positionY < 100) || (positionX > (1039 - positionX) && positionX < (1700 - positionX) && positionY > 166 && positionY < 176)) {
positionY = 175;
positionX = 50;
deaths++;
points = 0;
small = 10;
large = 20;
// circle 1
circlex1 = 350;
circley1 = 100;
point1x1 = 339;
point1x2 = 372;
point1y1 = 90;
point1y2 = 150;
//circle 2
circlex2 = 575;
circley2 = 100;
point2x1 = 565;
point2x2 = 595;
point2y1 = 90;
point2y2 = 150;
//circle 3
point3x1 = 855;
point3x2 = 880;
point3y1 = 20;
point3y2 = 50;
circlex3 = 865;
circley3 = 35;
}
if (positionY > change1) {
positionY = change1;
velocityY = 0.0;
onGround = true;
}
// End World
if (positionX < 0 || positionX > 2000)
velocityX *= -1;
// Platform 1
if (positionX > (1039 - positionX) && positionX < (1300 - positionX) && positionY > 101 && positionY < 111)
{
change1 = 111;
}
if (positionX > (1300 - positionX))
{
change1 = 175;
}
//Platform 2
if (positionX > (1439 - positionX) && positionX < (1510 - positionX) && positionY > 81 && positionY < 101)
{
change1 = 91;
}
if (positionX > (1510 - positionX))
{
change1 = 175;
}
//Platform 3
if (positionX > (1600 - positionX) && positionX < (1750 - positionX) && positionY > 111 && positionY < 131)
{
change1 = 121;
}
if (positionX > (1750 - positionX))
{
change1 = 175;
}
// Point 1
if (positionX > (point1x1 - positionX) && positionX < (point1x2 - positionX) && positionY > point1y1 && positionY < point1y2) {
points++;
circlex1 = -10;
circley1 = -10;
point1x1 = -10;
point1x2 = -10;
point1y1 = -10;
point1y2 = -10;
small += -2;
large = small * 2;
}
// Point 2
if (positionX > (point2x1 - positionX) && positionX < (point2x2 - positionX) && positionY > point2y1 && positionY < point2y2) {
points++;
circlex2 = -10;
circley2 = -10;
point2x1 = -10;
point2x2 = -10;
point2y1 = -10;
point2y2 = -10;
small += -2;
large = small * 2;
}
// Point 3
if (positionX > (point3x1 - positionX) && positionX < (point3x2 - positionX) && positionY > point3y1 && positionY < point3y2) {
points++;
circlex3 = -10;
circley3 = -10;
point3x1 = -10;
point3x2 = -10;
point3y1 = -10;
point3y2 = -10;
small += -2;
large = small * 2;
}
// Gets Bigger One
if (positionX > (point1x1 - positionX) && positionX < (point1x2 - positionX) && positionY > 150) {
small += .2;
large = small * 2;
}
// Gets Bigger Two
if (positionX > (point2x1 - positionX) && positionX < (point2x2 - positionX) && positionY > 150) {
small += .2;
large = small * 2;
}
// Gets Bigger Three
if (positionX > (839 - positionX) && positionX < (892 - positionX) && positionY > 101 && positionY < 149) {
small += .2;
large = small * 2;
}
}
function drawPlatform1() {
ctx.beginPath();
ctx.rect(1050 - positionX, 111, 250, 10);
ctx.fillStyle = "#0066FF";
ctx.fill();
ctx.closePath();
}
function drawPlatform2() {
ctx.beginPath();
ctx.rect(1450 - positionX, 91, 60, 10);
ctx.fillStyle = "#0066FF";
ctx.fill();
ctx.closePath();
}
function drawPlatform3() {
ctx.beginPath();
ctx.rect(1600 - positionX, 121, 150, 10);
ctx.fillStyle = "#0066FF";
ctx.fill();
ctx.closePath();
}
function drawSquare1() {
ctx.beginPath();
ctx.rect(250 - positionX, 145, 30, 30);
ctx.fillStyle = "#FF0000";
ctx.fill();
ctx.closePath();
}
function drawCircle1() {
ctx.beginPath();
ctx.arc(circlex1 - positionX, circley1, 7, 7, 500);
ctx.fillStyle = color;
ctx.fill();
ctx.closePath();
}
function drawCircle2() {
ctx.beginPath();
ctx.arc(circlex2 - positionX, circley2, 7, 7, 500);
ctx.fillStyle = color;
ctx.fill();
ctx.closePath();
}
function drawCircle3() {
ctx.beginPath();
ctx.arc(circlex3 - positionX, circley3, 7, 7, 500);
ctx.fillStyle = color;
ctx.fill();
ctx.closePath();
}
function drawSquare2() {
ctx.beginPath();
ctx.rect(450 - positionX, 145, 30, 30);
ctx.fillStyle = "#FF0000";
ctx.fill();
ctx.closePath();
}
function drawSquare3() {
ctx.beginPath();
ctx.rect(650 - positionX, 145, 30, 30);
ctx.fillStyle = "#FF0000";
ctx.fill();
ctx.closePath();
}
function drawSquare5() {
ctx.beginPath();
ctx.rect(850 - positionX, 145, 30, 30);
ctx.fillStyle = "#FF0000";
ctx.fill();
ctx.closePath();
}
function drawSquare6() {
ctx.beginPath();
ctx.rect(1050 - positionX, 165, 700, 10);
ctx.fillStyle = "#FF0000";
ctx.fill();
ctx.closePath();
}
function drawSquare4() {
ctx.beginPath();
ctx.rect(850 - positionX, 50, 30, 30);
ctx.fillStyle = "#FF0000";
ctx.fill();
ctx.closePath();
}
function drawDeaths() {
ctx.font = "16px Arial";
ctx.fillStyle = "#0095DD";
ctx.fillText("Deaths: " + deaths, 10, 20);
}
function drawPoints() {
ctx.font = "16px Arial";
ctx.fillStyle = "#0095DD";
ctx.fillText("Points: " + points, 10, 50);
}
function Render() {
ctx.clearRect(0, 0, 2000, 2000);
drawPlatform1();
drawPlatform2();
drawPlatform3();
drawCircle1();
drawCircle2();
drawCircle3();
drawSquare1();
drawSquare2();
drawSquare3();
drawSquare4();
drawSquare5();
drawSquare6();
drawDeaths();
drawPoints();
ctx.beginPath();
ctx.moveTo(0, 175);
ctx.lineTo(2000, 175);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(positionX - small, positionY - large);
ctx.lineTo(positionX + small, positionY - large);
ctx.lineTo(positionX + small, positionY);
ctx.lineTo(positionX - small, positionY);
ctx.closePath();
ctx.stroke();
}
</script>
</body>
</html>
var canvas=document.getElementById（'canvas'）；
var ctx=canvas.getContext（'2d'）；
var位置X=50.0；
变量Y=175.0；
var-velocityX=2；
var-velocityY=0.0；
var重力=0.5；
var-onGround=false；
var死亡=0；
var点=0；
var color=“#DCD93C”；
var change1=175；
//圈1
var point1x1=339；
var point1x2=372；
var point1y1=90；
var point1y2=150；
var circlex1=350；
var circley1=100；
//圈2
var point2x1=565；
var point2x2=590；
var point2y1=90；
var point2y2=150；
var circlex2=575；
var circley2=100；
//圈3
var point3x1=855；
var point3x2=880；
变量点3y1=20；
var point3y2=50；
var circlex3=865；
var circley3=35；
//方形尺寸变化
小=10；
大=20；
window.addEventListener（“mousedown”，StartJump，false）；
addEventListener（“mouseup”，EndJump，false）；
Loop（）；
函数StartJump（）{
如果（每轮）{
速度y=-12.0；
onGround=假；
}
}
函数EndJump（）{
如果（速度Y<-6.0）
速度y=-6.0；
}
函数循环（）{
更新（）；
Render（）；
设置超时（循环，30）；
}
函数更新（）{
速度y+=重力；
位置Y+=速度Y；
位置X+=速度X；
//碰撞检测//
如果（（位置X>（239-位置X）和位置X<（292-位置X）和位置Y>145）|（位置X>（439-位置X）和位置X<（492-位置X）和位置Y>145）|（位置X>（639-位置X）和位置X<（692-位置X）和位置Y>145）|（位置X>（839-位置X）和位置X<（892-位置X）和位置Y>145）| |（positionX>（839-positionX）和positionX<（892-positionX）和positionY>50和positionY<100）|（positionX>（1039-positionX）和positionX<（1700-positionX）和positionY>166和positionY<176））{
位置y=175；
位置x=50；
死亡++；
分值=0；
小=10；
大=20；
//圈1
circlex1=350；
圆圈1=100；
点1x1=339；
点1x2=372；
点1y1=90；
点1y2=150；
//圈2
circlex2=575；
圆圈2=100；
点2x1=565；
点2x2=595；
点2y1=90；
点2y2=150；
//圈3
点3x1=855；
点3x2=880；
点3y1=20；
点3y2=50；
circlex3=865；
圆圈3=35；
}
如果（位置Y>change1）{
位置y=变化1；
速度y=0.0；
onGround=正确；
}
//末世
如果（位置X<0 | |位置X>2000）
速度x*=-1；
//第一站台
如果（位置X>（1039-位置X）和位置X<（1300-位置X）和位置Y>101和位置Y<111）
{
变化1=111；
}
如果（位置X>（1300-位置X））
{
变化1=175；
}
//站台2
如果（位置X>（1439-位置X）和位置X<（1510-位置X）和位置Y>81和位置Y<101）
{
变化1=91；
}
如果（位置X>（1510-位置X））
{
变化1=175；
}
//站台3
如果（位置X>1600-位置X）和位置X<1750-位置X）和位置Y>111和位置Y<131）
{
变化1=121；
}
如果（位置X>（1750-位置X））
{
变化1=175；
}
//第1点
如果（位置X>（点1x1-位置X）和位置X<（点1x2-位置X）和位置Y>点1Y1和位置Y<点1Y2）{
积分++；
circlex1=-10；
圆圈1=-10；
点1x1=-10；
点1x2=-10；
点1y1=-10；
点1y2=-10；
小+=-2；
大=小*2；
}
//第2点
如果（位置X>（点2x1-位置X）和位置X<（点2x2-位置X）和位置Y>点2Y1和位置Y<点2Y2）{
积分++；
circlex2=-10；
圆圈2=-10；
点2x1=-10；
点2x2=-10；
点2y1=-10；
点2y2=-10；
小+=-2；
大=小*2；
}
//第3点
如果（位置X>（点3X1-位置X）和位置X<（点3X2-位置X）和位置Y>点3Y1和位置Y<点3Y2）{
积分++；
circlex3=-10；
圆圈3=-10；
点3x1=-10；
点3x2=-10；
点3y1=-10；
点3y2=-10；
小+=-2；
大=小*2；
}
//变大了
如果（位置X>（点1x1-位置X）和位置X<（点1x2-位置X）和位置Y>150）{
小+=.2；
大=小*2；
}
//变大了两个
如果（位置X>（点2x1-位置X）和位置X<（点2x2-位置X）和位置Y>150）{
小+=.2；
大=小*2；
}
//变大了三个
如果（位置X>839-位置X）和位置X<892-位置X）和位置Y>101和位置Y<149）{
小+=.2；
大=小*2；
}
}
函数drawPlatform1（）{
ctx.beginPath（）；
ctx.rect（1050-位置X，111250，10）；
ctx.fillStyle=“#0066FF”；
ctx.fill（）；
ctx.closePath（）；
}
函数drawPlatform2（）{
<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" width="2000" height="2000"></canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var positionX = 50.0;
var positionY = 175.0;
var velocityX = 2;
var velocityY = 0.0;
var gravity = 0.5;
var onGround = false;
var deaths = 0;
var points = 0;
var color = "#DCD93C";
var change1 = 175;
//circle 1
var point1x1 = 339;
var point1x2 = 372;
var point1y1 = 90;
var point1y2 = 150;
var circlex1 = 350;
var circley1 = 100;
//circle 2
var point2x1 = 565;
var point2x2 = 590;
var point2y1 = 90;
var point2y2 = 150;
var circlex2 = 575;
var circley2 = 100;
//circle 3
var point3x1 = 855;
var point3x2 = 880;
var point3y1 = 20;
var point3y2 = 50;
var circlex3 = 865;
var circley3 = 35;
//square size change
small = 10;
large = 20;
window.addEventListener("mousedown", StartJump, false);
window.addEventListener("mouseup", EndJump, false);
Loop();
function StartJump() {
if (onGround) {
velocityY = -12.0;
onGround = false;
}
}
function EndJump() {
if (velocityY < -6.0)
velocityY = -6.0;
}
function Loop() {
Update();
Render();
window.setTimeout(Loop, 30);
}
function Update() {
velocityY += gravity;
positionY += velocityY;
positionX += velocityX;
// Collision Detection //
if ((positionX > (239 - positionX) && positionX < (292 - positionX) && positionY > 145) || (positionX > (439 - positionX) && positionX < (492 - positionX) && positionY > 145) || (positionX > (639 - positionX) && positionX < (692 - positionX) && positionY > 145) || (positionX > (839 - positionX) && positionX < (892 - positionX) && positionY > 145) || (positionX > (839 - positionX) && positionX < (892 - positionX) && positionY > 50 && positionY < 100) || (positionX > (1039 - positionX) && positionX < (1700 - positionX) && positionY > 166 && positionY < 176)) {
positionY = 175;
positionX = 50;
deaths++;
points = 0;
small = 10;
large = 20;
// circle 1
circlex1 = 350;
circley1 = 100;
point1x1 = 339;
point1x2 = 372;
point1y1 = 90;
point1y2 = 150;
//circle 2
circlex2 = 575;
circley2 = 100;
point2x1 = 565;
point2x2 = 595;
point2y1 = 90;
point2y2 = 150;
//circle 3
point3x1 = 855;
point3x2 = 880;
point3y1 = 20;
point3y2 = 50;
circlex3 = 865;
circley3 = 35;
}
if (positionY > change1) {
positionY = change1;
velocityY = 0.0;
onGround = true;
}
// End World
if (positionX < 0 || positionX > 2000)
velocityX *= -1;
// Platform 1
if (positionX > (1039 - positionX) && positionX < (1300 - positionX) && positionY > 101 && positionY < 111)
{
change1 = 111;
}
if (positionX > (1300 - positionX))
{
change1 = 175;
}
//Platform 2
if (positionX > (1439 - positionX) && positionX < (1510 - positionX) && positionY > 81 && positionY < 101)
{
change1 = 91;
}
if (positionX > (1510 - positionX))
{
change1 = 175;
}
//Platform 3
if (positionX > (1600 - positionX) && positionX < (1750 - positionX) && positionY > 111 && positionY < 131)
{
change1 = 121;
}
if (positionX > (1750 - positionX))
{
change1 = 175;
}
// Point 1
if (positionX > (point1x1 - positionX) && positionX < (point1x2 - positionX) && positionY > point1y1 && positionY < point1y2) {
points++;
circlex1 = -10;
circley1 = -10;
point1x1 = -10;
point1x2 = -10;
point1y1 = -10;
point1y2 = -10;
small += -2;
large = small * 2;
}
// Point 2
if (positionX > (point2x1 - positionX) && positionX < (point2x2 - positionX) && positionY > point2y1 && positionY < point2y2) {
points++;
circlex2 = -10;
circley2 = -10;
point2x1 = -10;
point2x2 = -10;
point2y1 = -10;
point2y2 = -10;
small += -2;
large = small * 2;
}
// Point 3
if (positionX > (point3x1 - positionX) && positionX < (point3x2 - positionX) && positionY > point3y1 && positionY < point3y2) {
points++;
circlex3 = -10;
circley3 = -10;
point3x1 = -10;
point3x2 = -10;
point3y1 = -10;
point3y2 = -10;
small += -2;
large = small * 2;
}
// Gets Bigger One
if (positionX > (point1x1 - positionX) && positionX < (point1x2 - positionX) && positionY > 150) {
small += .2;
large = small * 2;
}
// Gets Bigger Two
if (positionX > (point2x1 - positionX) && positionX < (point2x2 - positionX) && positionY > 150) {
small += .2;
large = small * 2;
}
// Gets Bigger Three
if (positionX > (839 - positionX) && positionX < (892 - positionX) && positionY > 101 && positionY < 149) {
small += .2;
large = small * 2;
}
}
function drawPlatform1() {
ctx.beginPath();
ctx.rect(1050 - positionX, 111, 250, 10);
ctx.fillStyle = "#0066FF";
ctx.fill();
ctx.closePath();
}
function drawPlatform2() {
ctx.beginPath();
ctx.rect(1450 - positionX, 91, 60, 10);
ctx.fillStyle = "#0066FF";
ctx.fill();
ctx.closePath();
}
function drawPlatform3() {
ctx.beginPath();
ctx.rect(1600 - positionX, 121, 150, 10);
ctx.fillStyle = "#0066FF";
ctx.fill();
ctx.closePath();
}
function drawSquare1() {
ctx.beginPath();
ctx.rect(250 - positionX, 145, 30, 30);
ctx.fillStyle = "#FF0000";
ctx.fill();
ctx.closePath();
}
function drawCircle1() {
ctx.beginPath();
ctx.arc(circlex1 - positionX, circley1, 7, 7, 500);
ctx.fillStyle = color;
ctx.fill();
ctx.closePath();
}
function drawCircle2() {
ctx.beginPath();
ctx.arc(circlex2 - positionX, circley2, 7, 7, 500);
ctx.fillStyle = color;
ctx.fill();
ctx.closePath();
}
function drawCircle3() {
ctx.beginPath();
ctx.arc(circlex3 - positionX, circley3, 7, 7, 500);
ctx.fillStyle = color;
ctx.fill();
ctx.closePath();
}
function drawSquare2() {
ctx.beginPath();
ctx.rect(450 - positionX, 145, 30, 30);
ctx.fillStyle = "#FF0000";
ctx.fill();
ctx.closePath();
}
function drawSquare3() {
ctx.beginPath();
ctx.rect(650 - positionX, 145, 30, 30);
ctx.fillStyle = "#FF0000";
ctx.fill();
ctx.closePath();
}
function drawSquare5() {
ctx.beginPath();
ctx.rect(850 - positionX, 145, 30, 30);
ctx.fillStyle = "#FF0000";
ctx.fill();
ctx.closePath();
}
function drawSquare6() {
ctx.beginPath();
ctx.rect(1050 - positionX, 165, 700, 10);
ctx.fillStyle = "#FF0000";
ctx.fill();
ctx.closePath();
}
function drawSquare4() {
ctx.beginPath();
ctx.rect(850 - positionX, 50, 30, 30);
ctx.fillStyle = "#FF0000";
ctx.fill();
ctx.closePath();
}
function drawDeaths() {
ctx.font = "16px Arial";
ctx.fillStyle = "#0095DD";
ctx.fillText("Deaths: " + deaths, 10, 20);
}
function drawPoints() {
ctx.font = "16px Arial";
ctx.fillStyle = "#0095DD";
ctx.fillText("Points: " + points, 10, 50);
}
function Render() {
ctx.clearRect(0, 0, 2000, 2000);
drawPlatform1();
drawPlatform2();
drawPlatform3();
drawCircle1();
drawCircle2();
drawCircle3();
drawSquare1();
drawSquare2();
drawSquare3();
drawSquare4();
drawSquare5();
drawSquare6();
drawDeaths();
drawPoints();
ctx.beginPath();
ctx.moveTo(0, 175);
ctx.lineTo(2000, 175);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(positionX - small, positionY - large);
ctx.lineTo(positionX + small, positionY - large);
ctx.lineTo(positionX + small, positionY);
ctx.lineTo(positionX - small, positionY);
ctx.closePath();
ctx.stroke();
}
</script>
</body>
</html>
ship = {
x : 100,
y : 200,
}
ship.move = function(){
this.x += 2;
}
var objects = [];
for(i = 0; i < 1000; i ++){
objects.push(obj = {
x: Math.random() * 10000;
y: Math.random() * ctx.canvas.height;
});
obj.draw = function(){
ctx.drawImage(objectImage,this.x,this.y);
}
}
function update(){ // the update function called once a frame
// clear the screen
ship.move(); // move the ship
ctx.setTransform(1,0,0,1,ship.x - ctx.canvas.width/2,ship.y - ctx.canvas.height/2);
ctx.drawImage(shipImage,ship.x,ship.y)
for(i = 0; i < 1000; i ++){
objects[i].draw();
}