Question

我正在制作一个JS游戏，从本质上讲，它涉及到玩家在篮筐中捕捉掉落的食物。

目前，我将食物抽象为彩色的下降块，以使游戏的基础层运行。但是我很难用图像替换某些“块”属性，而无法显示彩色方形块。

部分代码来自于入门指南，其源链接在此处： -https://code.tutsplus.com/tutorials/develop-your-first-game-in-canvas-from-start-to-finish--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;
}

[问题已在星期四21/03 07:50 am编辑]

Answer 1

总而言之，我建议您使用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测试页中一样绘制图像。

Block.prototype.draw = function (context) {
   // I'm guessing the position and the context here,
   // but the first parameter should be the image, created in initImage
   context.drawImage(this.image, this.x, this.y);
}

无论如何，有没有替换一些块数据来添加图像？

1 个答案:

1。将数据添加到blockData

2。加载图片

3。使用图片