javascript - 向 Javascript "Pong"游戏添加背景图像

标签 javascript html canvas open-source pong

作为我研究的一部分,我正在修改我在网上找到的开源“Pong”游戏(由 Kushagra Agarwal 创建)中的一些部分。

Game's Fiddle

我正在尝试为游戏设置一个漂亮的背景图片, 不会影响游戏体验。
我尝试了很多方法,但到目前为止,我只能将背景颜色更改为不同的颜色,但不能更改为实际图像:

// Function to paint canvas
function paintCanvas() {
    ctx.fillStyle = "blue/black/whatever";
    ctx.fillRect(0, 0, W, H);


尝试计算 ctx.fillStyle 来显示图像并不顺利,因为 PaintCanvas() 不断循环,如果获取其他值,则为“颜色”字符串(例如一个重 500kb 的背景图片)将会在游戏中造成巨大的延迟。

有人有想法吗?

谢谢, 罗伊

最佳答案

我觉得如果你在 body 标签上放一个背景图片会很好看!

<body background="someImage">
</body>

我注释掉了你的paintCanvas(),插入了一个clear,并插入了一个body标签!

http://jsfiddle.net/XLKFC/11/

// Function to paint canvas
function paintCanvas() {
    canvas.width = canvas.width; // Will clear the canvas
    //ctx.fillStyle = "blue";
    //ctx.fillRect(0, 0, W, H);
}

关于javascript - 向 Javascript "Pong"游戏添加背景图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23724002/

相关文章:

javascript - 一般全局变量和 javaScript 中作为变量的对象之间的混淆

html - 源代码和检查过的 html 之间存在差异?

html - 位置 :fixed no scrolling on mobiles

javascript - 如何匹配 HTML5 Canvas 中的水平线?

javascript - 为什么canvas不会画图?

javascript - 使用 mocha.js 测试 jQuery.get 不起作用,其他 Deferred 也不起作用(RSVP)

javascript - 如何通过 Lodash 将对象数组转换为一个对象

javascript - Tablesorter:如何按日本日期排序?

html - 水平方向的瓷砖是否可以在 CSS 中拉伸(stretch)其父级的宽度?

javascript - 在输入过程中使文本实时显示在 Canvas 上