我正在使用HTML和javascript构建一个侧滚动游戏。我需要帮助,了解如何构建一个可移动的焦点,当它穿过世界时,它将自己固定在主要的移动精灵上。我的画布是2000 x 2000,我想建立一个大约750 x 750的相机。
<!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 = 100.0;
var positionY = 175.0;
var velocityX = 4.0;
var velocityY = 0.0;
var gravity = 0.5;
var onGround = false;
var deaths = 0;
var points = 0;
var color = "#000000";
//cirlce 1
var point1x1 = 339;
var point1x2 = 372;
var point1y1 = 110;
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;
//cirlce 3
var point3x1 = 855;
var point3x2 = 880;
var point3y1 = 20;
var point3y2 = 50;
var circlex3 = 865;
var circley3 = 35;
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 < 292 && positionY > 145) || (positionX > 439 && positionX < 492 && positionY > 145) || (positionX > 639 && positionX < 692 && positionY > 145) || (positionX > 839 && positionX < 892 && positionY > 145) || (positionX > 839 && positionX < 892 && positionY > 50 && positionY < 100))
{
positionY = 175;
positionX = 50;
deaths++;
points = 0;
// circle 1
circlex1 = 350;
circley1 = 100;
point1x1 = 339;
point1x2 = 372;
point1y1 = 110;
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 > 175.0)
{
positionY = 175.0;
velocityY = 0.0;
onGround = true;
}
// End World
if(positionX < 10 || positionX > 2000)
velocityX *= -1;
// Point 1
if(positionX > point1x1 && positionX < point1x2 && positionY > point1y1 && positionY < point1y2)
{
points++;
circlex1 = -10;
circley1 = -10;
point1x1 = -10;
point1x2 = -10;
point1y1 = -10;
point1y2 = -10;
}
// Point 2
if(positionX > point2x1 && positionX < point2x2 && positionY > point2y1 && positionY < point2y2)
{
points++;
circlex2 = -10;
circley2 = -10;
point2x1 = -10;
point2x2 = -10;
point2y1 = -10;
point2y2 = -10;
}
// Point 3
if(positionX > point3x1 && positionX < point3x2 && positionY > point3y1 && positionY < point3y2)
{
points++;
circlex3 = -10;
circley3 = -10;
point3x1 = -10;
point3x2 = -10;
point3y1 = -10;
point3y2 = -10;
}
}
function drawSquare1() {
ctx.beginPath();
ctx.rect(250, 145, 30, 30);
ctx.fillStyle = "#FF0000";
ctx.fill();
ctx.closePath();
}
function drawCircle1() {
ctx.beginPath();
ctx.arc(circlex1, circley1, 7, 7, 500);
ctx.fillStyle = color;
ctx.fill();
ctx.closePath();
}
function drawCircle2() {
ctx.beginPath();
ctx.arc(circlex2, circley2, 7, 7, 500);
ctx.fillStyle = color;
ctx.fill();
ctx.closePath();
}
function drawCircle3() {
ctx.beginPath();
ctx.arc(circlex3, circley3, 7, 7, 500);
ctx.fillStyle = color;
ctx.fill();
ctx.closePath();
}
function drawSquare2() {
ctx.beginPath();
ctx.rect(450, 145, 30, 30);
ctx.fillStyle = "#FF0000";
ctx.fill();
ctx.closePath();
}
function drawSquare3() {
ctx.beginPath();
ctx.rect(650, 145, 30, 30);
ctx.fillStyle = "#FF0000";
ctx.fill();
ctx.closePath();
}
function drawSquare5() {
ctx.beginPath();
ctx.rect(850, 145, 30, 30);
ctx.fillStyle = "#FF0000";
ctx.fill();
ctx.closePath();
}
function drawSquare4() {
ctx.beginPath();
ctx.rect(850, 50, 30, 30);
ctx.fillStyle = "#FF0000";
ctx.fill();
ctx.closePath();
}
function drawDeaths() {
ctx.font = "16px Arial";
ctx.fillStyle = "#0095DD";
ctx.fillText("Deaths: "+deaths, 8, 20);
}
function drawPoints() {
ctx.font = "16px Arial";
ctx.fillStyle = "#0095DD";
ctx.fillText("Points: "+points, 8, 50);
}
function Render()
{
ctx.clearRect(0, 0, 2000, 2000);
drawCircle1();
drawCircle2();
drawCircle3();
drawSquare1();
drawSquare2();
drawSquare3();
drawSquare4();
drawSquare5();
drawDeaths();
drawPoints();
ctx.beginPath();
ctx.moveTo(0,175);
ctx.lineTo(2000,175);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(positionX - 10, positionY - 20);
ctx.lineTo(positionX + 10, positionY - 20);
ctx.lineTo(positionX + 10, positionY);
ctx.lineTo(positionX - 10, positionY);
ctx.closePath();
ctx.stroke();
}
</script>
</body>
</html>
答案 0 :(得分:1)
修改了你的代码。我希望它有所帮助。
<!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 = 100.0;
var positionY = 175.0;
var velocityX = 2.3;
var velocityY = 0.0;
var gravity = 0.5;
var onGround = false;
var deaths = 0;
var points = 0;
var color = "#000000";
//cirlce 1
var point1x1 = 339;
var point1x2 = 372;
var point1y1 = 110;
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;
//cirlce 3
var point3x1 = 855;
var point3x2 = 880;
var point3y1 = 20;
var point3y2 = 50;
var circlex3 = 865;
var circley3 = 35;
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)) {
positionY = 175;
positionX = 50;
deaths++;
points = 0;
// circle 1
circlex1 = 350;
circley1 = 100;
point1x1 = 339;
point1x2 = 372;
point1y1 = 110;
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 > 175.0) {
positionY = 175.0;
velocityY = 0.0;
onGround = true;
}
// End World
if (positionX < 10 || positionX > 2000)
velocityX *= -1;
// 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;
}
// 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;
}
// 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;
}
}
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 drawSquare4() {
ctx.beginPath();
ctx.rect(850 - positionX, 50, 30, 30);
ctx.fillStyle = "#FF0000";
ctx.fill();
ctx.closePath();
}
function drawCamera() {
ctx.beginPath();
ctx.fillStyle = "#EEE";
ctx.moveTo(0,0);
ctx.lineTo(0, 2000);
ctx.lineTo(2000, 2000);
ctx.lineTo(2000, 0);
ctx.rect(10, 5, 500, 400);
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);
drawCircle1();
drawCircle2();
drawCircle3();
drawSquare1();
drawSquare2();
drawSquare3();
drawSquare4();
drawSquare5();
drawDeaths();
drawPoints();
ctx.beginPath();
ctx.moveTo(0, 175);
ctx.lineTo(2000, 175);
ctx.stroke();
drawCamera();
ctx.beginPath();
ctx.moveTo(positionX - 10, positionY - 20);
ctx.lineTo(positionX + 10, positionY - 20);
ctx.lineTo(positionX + 10, positionY);
ctx.lineTo(positionX - 10, positionY);
ctx.closePath();
ctx.stroke();
}
</script>
</body>
</html>