如何用javascript中的图像替换彩色瓷砖

Question

我目前正在创建一个基于瓦片的地牢爬行器，我想开始将图像添加到当前构建中。我使用的是香草JavaScript。我已经准备好了所有的图像，只想知道如何将它们添加到画布上：

for (var y = 0; y < mapH; y++) {
for (var x = 0; x < mapW; x++) {
switch (gameMap[((y * mapW) + x)]) {
case 0:
ctx.fillStyle = '#999999'
break
default:
ctx.fillStyle = '#eeeeee'
break
}
ctx.fillRect(x * tileW, y * tileH, tileW, tileH)
}
}

如果你想把我所有的代码都放在这里，那就是：

// Main Variables
var ctx = null
var tileW = 40
var tileH = 40
var mapW = 10
var mapH = 10
// Frame Variables
var currentSecond = 0
var frameCount = 0
var framesLastSecond = 0
var lastFrameTime = 0
// Inputs
var keysDown = {
87: false,
65: false,
83: false,
68: false
}
// Characters
var player = new Character()
// Game Variables
var gameMap = [
0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 1, 1, 1, 0, 1, 1, 1, 1, 0,
0, 1, 0, 0, 0, 1, 0, 0, 0, 0,
0, 1, 1, 1, 1, 1, 1, 1, 1, 0,
0, 1, 0, 1, 0, 0, 0, 1, 1, 0,
0, 1, 0, 1, 0, 1, 0, 0, 1, 0,
0, 1, 1, 1, 1, 1, 1, 1, 1, 0,
0, 1, 0, 0, 0, 0, 0, 1, 0, 0,
0, 1, 1, 1, 0, 1, 1, 1, 1, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0
]
function Character () {
this.tileFrom = [1, 1]
this.tileTo = [1, 1]
this.timeMoved = 0
this.dimensions = [30, 30]
this.position = [45, 45]
this.delayMove = 700
}
Character.prototype.placeAt = function (x, y) {
this.tileFrom = [x, y]
this.tileTo = [x, y]
this.position = [((tileW * x) + ((tileW - this.dimensions[0]) / 2)), ((tileH * y) + ((tileH - this.dimensions[1]) / 2))]
}
Character.prototype.processMovement = function (t) {
if (this.tileFrom[0] === this.tileTo[0] && this.tileFrom[1] === this.tileTo[1]) {
return false
}
if ((t - this.timeMoved) >= this.delayMove) {
this.placeAt(this.tileTo[0], this.tileTo[1])
}
else {
this.position[0] = (this.tileFrom[0] * tileW) + ((this.tileW - this.dimensions[0]) / 2)
this.position[1] = (this.tileFrom[1] * tileH) + ((this.tileh - this.dimensions[1]) / 2)
if (this.tileTo[0] !== this.tileFrom[0]) {
var diff = (tileW / this.delayMove) * (t - this.timeMoved)
this.position[0] += (this.tileTo[0] < this.tileFrom[0] ? 0 - diff : diff)
}
if (this.tileTo[1] !== this.tileFrom[1]) {
var diff = (tileW / this.delayMove) * (t - this.timeMoved)
this.position[1] += (this.tileTo[1] < this.tileFrom[1] ? 0 - diff : diff)
}
this.position[0] = Math.round(this.position[0])
this.position[1] = Math.round(this.position[1])
}
return true
}
function toIndex (x, y) {
return ((y * mapW) + x)
}
window.onload = function () {
ctx = document.getElementById('game').getContext('2d')
requestAnimationFrame(drawGame)
ctx.font = 'bold 10pt sans-serif'
window.addEventListener('keydown', function (e) {
if (e.keyCode >= 63 && e.keyCode <= 87) {
keysDown[e.keyCode] = true
}
})
window.addEventListener('keyup', function (e) {
if (e.keyCode >= 63 && e.keyCode <= 87) {
keysDown[e.keyCode] = false
}
})
}
function drawGame () {
if (ctx == null) { return }
var currentFrameTime = Date.now()
var timeElapsed = currentFrameTime - lastFrameTime
var sec = Math.floor(Date.now() / 1000)
if (sec !== currentSecond) {
currentSecond = sec
framesLastSecond = frameCount
frameCount = 1
}
else { frameCount++ }
if (!player.processMovement(currentFrameTime)) {
if (keysDown[87] && player.tileFrom[1] > 0 && gameMap[toIndex(player.tileFrom[0], player.tileFrom[1] - 1)] === 1) {
player.tileTo[1] -= 1
}
else if (keysDown[83] && player.tileFrom[1] < (mapH - 1) && gameMap[toIndex(player.tileFrom[0], player.tileFrom[1] + 1)] === 1) {
player.tileTo[1] += 1
}
else if (keysDown[65] && player.tileFrom[0] > 0 && gameMap[toIndex(player.tileFrom[0] - 1, player.tileFrom[1])] === 1) {
player.tileTo[0] -= 1
}
else if (keysDown[68] && player.tileFrom[0] < (mapW - 1) && gameMap[toIndex(player.tileFrom[0] + 1, player.tileFrom[1])] === 1) {
player.tileTo[0] += 1
}
if (player.tileFrom[0]!=player.tileTo[0] || player.tileFrom[1]!=player.tileTo[1]) {
player.timeMoved = currentFrameTime
}
}
for (var y = 0; y < mapH; y++) {
for (var x = 0; x < mapW; x++) {
switch (gameMap[((y * mapW) + x)]) {
case 0:
ctx.fillStyle = '#999999'
break
default:
ctx.fillStyle = '#eeeeee'
break
}
ctx.fillRect(x * tileW, y * tileH, tileW, tileH)
}
}
ctx.fillStyle = '#0000ff'
ctx.fillRect(player.position[0], player.position[1], player.dimensions[0], player.dimensions[1])
ctx.fillStyle = '#ff0000'
ctx.fillText('FPS: ' + framesLastSecond, 10, 20)
lastFrameTime = currentFrameTime
requestAnimationFrame(drawGame)
}

Answer 1

您可以在代码的HTML主体中添加图像，如下所示：

<section hidden>
<img id="img1" src="img1.png"/>
<img id="img2" src="img2.png"/>
</section>

<部分隐藏>这样图像就不会在体内绘制

src="；img1.png"；搜索文件"；img1.png"；在HTML所在的同一文件夹中。
如果你想把图像放在该文件夹中的一个文件夹中(比如一个名为"textures"的文件夹(，你可以执行src=；纹理\img1.png">

然后你可以像这样使用ctx.drawImage：

for (var y = 0; y < mapH; y++) {
for (var x = 0; x < mapW; x++) {
let img
switch (gameMap[((y * mapW) + x)]) {
case 0:
img = document.getElementById("img1")
break
default:
img = document.getElementById("img2")
break
}
ctx.drawImage(img,x * tileW, y * tileH)
}
}

drawImage文档