如何使移动的精灵集中在屏幕上
How to keep a moving sprite centralized on the screen?
我创建了一个侧滚动游戏，其中包括一个平移的"相机"和一个移动的精灵。平移"摄影机"是障碍物向主精灵的相反方向移动所产生的效果。这个问题是精灵不在一个位置；它不断地在屏幕上移动，最终离开了视野我希望精灵看起来在移动，但实际上它被设置在一个位置，这样它就不会从屏幕上移开
移动精灵代码：
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();
小变量等于10，大变量等于20。之所以出现这些变量，是因为精灵的大小会随着时间的推移而变化。
"相机"代码：
function drawSquare1() {
ctx.beginPath();
ctx.rect(250 - positionX, 145, 30, 30);
ctx.fillStyle = "#FF0000";
ctx.fill();
ctx.closePath();
}
这些代码行在我们的游戏中制造了一个移动的障碍。具体行：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>
链接到游戏
如果你有一艘太空船
ship = {
x : 100,
y : 200,
}
然后你把它穿过操场
ship.move = function(){
this.x += 2;
}
你有一些物体随机放置在一个10000像素或更大尺寸的大操场上
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();
}
现在，你画的所有东西都将是相对于船的。如果你在坐标10000处有障碍物，而船只在100处，那么你不会看到障碍物，直到船靠近它。
如果你这样做，那么你就可以把所有东西都画到它必须在的地方，你不必担心把所有东西移到船上。变换为您移动一切。
如果你想让飞船在屏幕上的不同位置，那么只需改变飞船到画布左上角的偏移即可。
相关文章：
- 在jstree中，如何将指定的节点集中到大型树上
- 如何将屏幕分辨率乘以 80%，然后在代码中使用
- 在不打开聊天屏幕的情况下制作Zopim-ding代理
- 使用图像数组列表的simplegallary.js显示适合桌面屏幕的图像
- 导航栏没有调整到浏览器屏幕的大小
- 调整屏幕大小后不显示子菜单
- 如何在p5.js中管理多智力竞赛游戏的多个屏幕
- jQuery:当屏幕大小改变时，如何更改默认图像和悬停图像
- 当带有渲染器的DOM元素不在屏幕顶部时，移动了场景的坐标
- 如何知道元素在屏幕上是否可见.如果没有，请滚动页面
- Don'不允许将焦点集中在自动完成的选择上
- 如果使用javascript函数屏幕太小，我该如何更改HTML文件的背景色
- 如何打开/移动主屏幕左侧的浏览器窗口
- 如何在屏幕外或项目的中心视口中跟随YUI驱动的动画
- 用HTML在不同屏幕上显示和隐藏内容的方法
- 调整屏幕大小时更改属性值
- 检测非移动页面上的移动设备屏幕宽度和高度
- 更改屏幕上对象的宽度调整大小
- 如何使移动的精灵集中在屏幕上
- 我如何集中输入'It’s从屏幕上滑进来
