Question

我正在研究浏览器游戏，我想制作地图，你可以四处走动，与怪物战斗，购买一些东西，但只有地图。其他一切都将在不同的页面中。

所以我制作了包含多个循环图像的地图。它从数据库读取值世界，x和y。我已经使它与ajax一起使用，因此每次移动时页面都不刷新，但我想使用Canvas制作这个地图。

$ystart = $y - 2;
$ymax = $y + 2;
$xstart = $x - 3;
$xmax = $x + 3;
for($y=$ystart;$y<=$ymax;$y++){
    echo "<tr>";
    for($x=$xstart;$x<=$xmax;$x++){


       // echo "<td><img src=images/map/day/".$x."_".$y.".jpg width=100 height=100 border=0></td>\n";
        if($x==$posx and $y==$posy){
            echo "<td background=images/map/world_".$world."/".$y."_".$x.".jpg><img src=images/char.png width=100 height=100 border=0></td>";
        } else{
            echo "<td><img src=images/map/world_".$world."/".$y."_".$x.".jpg width=100 height=100 border=0></td>";
        }

    }
    echo "</tr>";
}?>

到目前为止我已经这样做了

＆＃13;

body {
  margin: 0;
}
canvas {
  border: 1px solid #d3d3d3;
  background-color: #f1f1f1;
}

＆＃13;

<body onload="startGame()">
  <script>
    var myGamePiece;
    var myUpBtn;
    var myDownBtn;
    var myLeftBtn;
    var myRightBtn;

    function startGame() {
      myGamePiece = new component(30, 30, "red", 10, 120);
      myUpBtn = new component(30, 30, "blue", 50, 10);
      myDownBtn = new component(30, 30, "blue", 50, 70);
      myLeftBtn = new component(30, 30, "blue", 20, 40);
      myRightBtn = new component(30, 30, "blue", 80, 40);
      myGameArea.start();

    }


    var myGameArea = {

      canvas: document.createElement("canvas"),

      start: function() {
        this.canvas.width = 480;
        this.canvas.height = 270;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
        this.interval = setInterval(updateGameArea, 20);


        window.addEventListener('mousedown', function(e) {
          myGameArea.x = e.pageX;
          myGameArea.y = e.pageY;
        })
        window.addEventListener('mouseup', function(e) {
          myGameArea.x = false;
          myGameArea.y = false;
        })
        window.addEventListener('touchstart', function(e) {
          myGameArea.x = e.pageX;
          myGameArea.y = e.pageY;
        })
        window.addEventListener('touchend', function(e) {
          myGameArea.x = false;
          myGameArea.y = false;
        })
        window.addEventListener('keydown', function(e) {
          myGameArea.key = e.keyCode;
        })
        window.addEventListener('keyup', function(e) {
          myGameArea.key = false;
        })
      },
      clear: function() {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
      }
    }

    function component(width, height, color, x, y) {
      this.width = width;
      this.height = height;
      this.speedX = 0;
      this.speedY = 0;
      this.x = x;
      this.y = y;
      this.update = function() {
        ctx = myGameArea.context;
        ctx.fillStyle = color;
        ctx.fillRect(this.x, this.y, this.width, this.height);
      }
      this.clicked = function() {
        var myleft = this.x;
        var myright = this.x + (this.width);
        var mytop = this.y;
        var mybottom = this.y + (this.height);
        var clicked = true;
        if ((mybottom < myGameArea.y) || (mytop > myGameArea.y) || (myright < myGameArea.x) || (myleft > myGameArea.x)) {
          clicked = false;
        }
        return clicked;
      }
      this.newPos = function() {
        this.x += this.speedX;
        this.y += this.speedY;
      }
    }

    function updateGameArea() {
      myGameArea.clear();
      myGamePiece.speedX = 0;
      myGamePiece.speedY = 0;
      if (myGameArea.x && myGameArea.y) {
        if (myUpBtn.clicked()) {
          myGamePiece.y -= 1;
        }
        if (myDownBtn.clicked()) {
          myGamePiece.y += 1;
        }
        if (myLeftBtn.clicked()) {
          myGamePiece.x += -1;
        }
        if (myRightBtn.clicked()) {
          myGamePiece.x += 1;
        }
      }
      myGamePiece.speedX = 0;
      myGamePiece.speedY = 0;
      if (myGameArea.key && (myGameArea.key == 37 || myGameArea.key == 65)) {
        myGamePiece.speedX = -1;
      }
      if (myGameArea.key && (myGameArea.key == 39 || myGameArea.key == 68)) {
        myGamePiece.speedX = 1;
      }
      if (myGameArea.key && (myGameArea.key == 38 || myGameArea.key == 87)) {
        myGamePiece.speedY = -1;
      }
      if (myGameArea.key && (myGameArea.key == 40 || myGameArea.key == 83)) {
        myGamePiece.speedY = 1;
      }
      myGamePiece.newPos();
      myUpBtn.update();
      myDownBtn.update();
      myLeftBtn.update();
      myRightBtn.update();
      myGamePiece.update();
    }
  </script>

</body>

＆＃13;

但我无法弄清楚如何根据x和y位置在画布上制作背景循环，以及如何在移动时更改它。

Answer 1

我正在尝试自己学习画布，所以我一直在浏览这些问题。我认为你的尝试会很有趣。

基本上，我正在创建一个对象，并在每次迭代时移动它。我会不断检查我的物体的x位置。根据它的价值，我可以改变背景图像。

试一试，亲眼看看。尝试移动右箭头键，然后左箭头键。您会注意到背景图像发生了变化。

var canvas = document.getElementById("my-canvas");
var ctx = canvas.getContext("2d");
canvas.style.backgroundImage = "url('http://cdn.wonderfulengineering.com/wp-content/uploads/2014/07/background-wallpapers-26.jpg')";


function hero(x, y) {
    this.x = x;
    this.y = y;
    this.moveLeft = function() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        this.x -= 5;
        drawHero(this.x, this.y);
    };
    this.moveRight = function() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        this.x += 5;
        drawHero(this.x, this.y);
    };
    this.moveUp = function() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        this.y -= 5;
        drawHero(this.x, this.y);
    }
    this.moveDown = function() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        this.y += 5;
        drawHero(this.x, this.y);
    }
}

function drawHero(x,y) {
	ctx.fillStyle = "red";
    ctx.fillRect(x, y, 10, 10);
}

var hero1 = new hero(40, 40);
ctx.fillStyle = "red";
ctx.fillRect(40, 40, 10, 10);

window.addEventListener("keydown", function(event) {
	if (event.keyCode == 38) {
    	hero1.moveUp();
    }
    else if (event.keyCode == 37) {
    	hero1.moveLeft();
    }
    else if (event.keyCode == 39) {
    	hero1.moveRight();
    }
    else {
    	hero1.moveDown();
    }
});

setInterval(function() {
    if (hero1.x <= 100) {
        canvas.style.backgroundImage = "url('http://cdn.wonderfulengineering.com/wp-content/uploads/2014/07/background-wallpapers-26.jpg')";
    }
    else if (hero1.x > 100 && hero1.x <= 200) {
        canvas.style.backgroundImage = "url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRi2F1v1PXpOEYScFCbvmsV-74C573z8tFBvIPXwDO8d1KImpJ09Q')";
    }
    else {
        canvas.style.backgroundImage = "url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSOSNoN1aLzWvpwrENvqPb4tKgzfeeqlMsUeC0fjdGABXXLdLIo')";
    }
},50);

#my-canvas {
  border: 1px solid black;
}

<canvas id="my-canvas" width="400" height="400"></canvas>

带有循环背景图像的画布地图

1 个答案: