javascript - 无论如何要替换一些块数据来添加图像？

问题描述

我正在制作一个 JS 游戏，它基本上涉及玩家在他们的篮子里捕捉掉落的食物。

目前，我将食物抽象为彩色坠落块，以运行游戏的基础层。但是我很难用图像替换某些 Block 属性，而不是显示彩色的方形块。

部分代码来自一个让我开始的教程，源链接在这里： - https://code.tutsplus.com/tutorials/develop-your-first-game-in-canvas-from-start-to-完成--pre-39198

此外，同样的食物块问题可以修复替换主块的篮子图像。

食物+篮子的图片我也应该链接

我对 Stack Overflow 和编程也很陌生，所以我愿意接受您可能有的反馈和建议。

这是我为添加应该替换块的食物图像而编写的脚本。这已经可以在 HTML 文档中看到（我暂时放了）。

<script> 
var canvas = document.getElementById("js/FoodCatcher.js");

//Draw image for object 
<img id="SourceImage" src="carrot.jpg">
function init() {
	var image = document.getElementById('SourceImage');
	canvas = document.getElementById('canvas');
	context = canvas.document.getContext('2d');
	drawImage(image);
}

function drawImage(image) {
	canvas.width = image.width;
	canvas.height = image.height;
	context.drawImage(image, 0, 0);
}
window.addEventListener('load', init);

//Draw basket for basket object
<img id="BasketImage" src="basket.jpg">
function init(){
	var image = document.getElementById('BasketImage');
	canvas = document.getElementById('canvas');
	context = canvas.document.getContext('2d');
	drawImage(image);
}

function drawImage(image) {
	canvas.width = image.width;
	canvas.height = image.height;
	context.drawImage(image, 0, 0);
}

</script>

这是我要修改以添加块图像的部分 JS 代码。

FoodCatcher = new function()      //This defines the current object along with the game colors + initiate/call things at right time 
{
	this.colors = [               //Public color appearance
		'#f00',                   //Red color
		'#0f0',                   //Green color
		'#00f',                   //Blue Colors
	];
	
	var basketData = [            //Private
		['width', 60],            //pixel width of the basket   30
		['height', 13],           //Pixel height of the basket  10
		['xSpeed', 10],            //Horizontal movement speed   4 
		['color', '#f00'],        //Color of basket
		['oldColor', '#f00']      //Old color of basket, used to prevent having same color twice
	];
	var blockData = [
		['width', 10],            //pixel width of the basket    10
		['height', 10],           //Pixel height of the basket   10
		['ySpeed', 5],            //Horizontal movement speed    1
		['color', undefined],     //Color of block               undefined
		['strength', 30]          //Points they gain/subtract    30
	];

var Block = function(data) {
  Movable.call(this, data);

  this.initPosition();
  this.initColor();

}

Block.prototype = new Movable();
Block.prototype.initPosition = function() {
  // Only allow to set the position of this block once
  if (this.x !== undefined || this.y !== undefined)
    return;

  // By picking a rounded number between 0 and the canvas.width substracted by the block its width, we have a position for this block which is still inside the block its viewport
  this.x = Math.round(rand(0, canvas.width - this.width));

  // By setting the vertical position of the block to 0 substracted by the block its height, the block will look like it slides into the canvas its viewport
  this.y = 0 - this.height;
}
Block.prototype.initColor = function() {
  if (this.color !== undefined)
    return;

  this.color = FoodCatcher.colors[Math.round(rand(0, (FoodCatcher.colors.length - 1)))];
}
Block.prototype.move = function() {
  // Add the vertical speed to the block its current position to move it
  this.y += this.ySpeed;
}

[问题于 2003 年 3 月 21 日星期四上午 7:50 编辑]

标签： javascript

解决方案

总而言之，我建议您使用 Pixi.js 之类的框架来创建您的游戏，但如果您来这里学习基础知识，我会在这里为您提供帮助。

我猜你想绘制图像而不是简单的块。这包括 3 个步骤：

1.将数据添加到blockData

我们需要将图像的数据添加到块中。这可以是 base64-data-url （你可以使用网站：1）或图像链接。

var blockData = [
   ['width', 100],
   ['height', 100],
   ['imageUrl', 'dataUrlOrImageUrl']
]

2.加载图片

在初始化阶段，通过使用隐藏图像并设置 src 属性来加载图像。

Block.prototype.initImage = function () {
  this.image = new window.Image();
  // the onload callback will be run once the image is loaded
  // use the onload callback if you want to avoid flicker
  // this.onload = function(){alert('image loaded');}
  this.image.src = this.imageUrl;
}

当然，您必须以某种方式调用该函数。我不想深入探讨回调的主题，所以我没有使用 onload-callback，这会导致在图像完全加载之前呈现空白图像。

3.使用图像

然后，您可以像在 html 测试页面中那样绘制图像。