- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在制作一个 html5 Canvas 游戏,但遇到碰撞问题。问题是,当球与任何平台碰撞时,球重力应为 -1,并以与平台相同的速度上升,但它仅适用于最后一个平台和左侧平台。我该如何修复它?谢谢!
HTML:
<html>
<head>
<title>Falldown</title>
</head>
<body>
<canvas id="canvas" width = "380" height= "640"></canvas>
<script src="beta.js"></script>
</body>
</html>
JS 代码:
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var isMenu = true;
var isPlaying = false;
var testing = true;
var pressingLeft = false;
var pressingRight = false;
var Platforms = [];
var difficulty = 1;
var gravity = 1;
var Player = {
color: "red",
radius: 7.5,
stepY: 1.5,
x: 175,
y: 75
};
function RectCircleColliding(circle, rect) {
var distX = Math.abs(circle.x - rect.x - rect.width / 2);
var distY = Math.abs(circle.y - rect.y - 20 / 2);
if (distX > (rect.width / 2 + circle.radius)) return false;
if (distY > (20 / 2 + circle.radius)) return false;
if (distX <= (rect.width / 2)) return true;
if (distY <= (20 / 2)) return true;
var dx = distX - rect.width / 2;
var dy = distY - 20 / 2;
return (dx * dx + dy * dy <= (circle.radius * circle.radius));
}
function drawBackground() {
ctx.fillStyle = "black";
ctx.fillRect(0, 0, canvas.width, canvas.height);
if (isMenu && !isPlaying) {
createText("60px monospace", "white", "FallDown", 45, 130);
createText("34px Arial", "white", "PLAY", 130, 260);
createText("34px Arial", "white", "LEADERBOARD", 50, 340);
createText("34px Arial", "white", "SETTINGS", 90, 420);
} else {
if (testing) {
Platforms = [];
for (var i = 0; i < 13; i++) {
Platforms.push({
"x": 10,
"y": 160 + (i * 70),
"width": (Math.random() * canvas.width) - 60
});
}
testing = false;
}
for (var i in Platforms) {
ctx.fillStyle = "#00ffff";
ctx.fillRect(10, Platforms[i].y, Platforms[i].width, 20);
var totalTest = Platforms[i].width + 60;
ctx.fillRect(totalTest + 30, Platforms[i].y, canvas.width - totalTest, 20);
Platforms[i].y -= 1;
if (RectCircleColliding(Player, Platforms[i])) {
gravity = -1;
} else {
gravity = 1;
}
}
detectBorderCollision();
detectPlayerCollision();
drawPlayer();
drawBorder();
if (Platforms.length === 7) Platforms = [];
}
}
function detectBorderCollision() {
if (Player.x > 370 - Player.radius) {
Player.x = 370 - Player.radius;
} else if (Player.x < 3.8 + Player.radius * 2) {
Player.x = 3.8 + Player.radius * 2
}
}
function detectPlayerCollision() {
}
function drawPlayer() {
ctx.beginPath();
ctx.fillStyle = Player.color;
ctx.arc(Player.x, Player.y, Player.radius, 0, 2 * Math.PI);
ctx.fill();
ctx.closePath();
Player.y += gravity;
if (pressingRight) {
Player.x += 2;
} else if (pressingLeft) {
Player.x -= 2;
}
/*
ctx.fillStyle = "#00ffff";
ctx.fillRect(10, 160, 300, 20);
*/
}
function drawBorder() {
ctx.beginPath();
ctx.strokeStyle = "#00ffff";
ctx.lineWidth = 10;
ctx.moveTo(5, 0);
ctx.lineTo(5, 640);
ctx.moveTo(375, 0);
ctx.lineTo(375, 640);
ctx.stroke();
ctx.closePath();
}
function createText(font, color, value, posX, posY) {
ctx.font = font;
ctx.fillStyle = color;
ctx.fillText(value, posX, posY)
}
function isInside(realX, realY, x1, x2, y1, y2) {
return (realX > x1 && realX < x2) && (realY > y1 && realY < y2)
}
function drawGame() {
drawBackground();
}
function startDrawing() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawGame();
requestAnimationFrame(startDrawing);
}
function Init() {
requestAnimationFrame(startDrawing);
canvas.addEventListener("click", function(evt) {
var rect = canvas.getBoundingClientRect();
var mouseX = evt.clientX - rect.left;
var mouseY = evt.clientY - rect.top;
if (isMenu && !isPlaying) {
if (isInside(mouseX, mouseY, 115, 230, 220, 270)) {
isPlaying = true;
isMenu = false;
} else if (isInside(mouseX, mouseY, 35, 320, 300, 345)) {
console.log("Leaderboard");
} else if (isInside(mouseX, mouseY, 75, 270, 380, 430)) {
console.log("Settings");
}
}
});
window.addEventListener("keydown", function(evt) {
if (!isMenu && isPlaying) {
if (evt.keyCode === 39) { // right
pressingRight = true;
} else if (evt.keyCode === 37) { // left
pressingLeft = true;
}
}
});
window.addEventListener("keyup", function(evt) {
if (!isMenu && isPlaying) {
if (evt.keyCode === 39) { // right
pressingRight = false;
} else if (evt.keyCode === 37) { // left
pressingLeft = false;
}
}
});
}
Init();
最佳答案
您的代码中有太多魔数(Magic Number),调试起来既困难又乏味。将所有数字文字替换为描述值所代表含义的标识符。
对drawBackground
函数部分的以下修改会导致与左侧平台的所有碰撞正常工作,但并不完美。
var hasCollided;
for (var i in Platforms) {
ctx.fillStyle = "#00ffff";
ctx.fillRect(10, Platforms[i].y, Platforms[i].width, 20);
var totalTest = Platforms[i].width + 60;
ctx.fillRect(totalTest + 30, Platforms[i].y, canvas.width - totalTest, 20);
Platforms[i].y -= 1;
if (!hasCollided) {
if (RectCircleColliding(Player, Platforms[i])) {
gravity = -1;
hasCollided = true;
} else {
gravity = 1;
}
}
}
关于javascript - Canvas 矩形和球碰撞不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47607492/
我正在尝试将外框内的框(坐标)放入。我已经使用交集联合方法完成了工作,并且我希望其他方法也可以这样做。 另外,能否请您告诉我如何比较这两个内盒? 最佳答案 通过比较边界框和内部框的左上角和右下角的坐标
我希望输出看起来像这样: 如何安排这些循环以获得两个三角形数字模式?我该如何改进我的代码。 JAVA 中的新功能:-) for (int i = 1; icount; num--) {
我需要将 map 边界存储在 MySQL 数据库中。我花了一些时间在地理空间扩展的文档上,但是学习所有相关信息(WKT、WKB 等)很困难,而且就我而言没有必要。我只需要一种方法来存储坐标矩形并稍后将
在 gnuplot 中,我可以通过绘制一个矩形 set object rect from x0,y0 to x1,y1 如何从文件中读取坐标 x0,x1,y0,y1? 最佳答案 一种方法是将设置矩形的
我正在尝试创建一个填充了水平线或垂直线的矩形。 矩形的宽度是动态的,所以我不能使用图像刷。 如果有人知道任何解决方案,请告诉我。 最佳答案 我想出了一个直接的方法来做到这一点;最后,我使用以下视觉画笔
这个 SVG 在所有浏览器中看起来都很模糊,在所有缩放级别。 在 Chrome、Safari 和 Firefox 中,它看起来像这样: 如果放大,您可以看到笔画有两个像素的宽度,即使默认笔画
我正在尝试在ggplot2图上添加多个阴影/矩形。在这个可重现的示例中,我只添加了3,但是使用完整数据可能需要总计一百。 这是我的原始数据的子集-在名为temp的数据框中-dput在问题的底部:
我有一个包含驻留在 Viewport3D 中的 3D 对象的应用程序,我希望用户能够通过在屏幕上拖动一个矩形来选择它们。 我尝试在 Viewport3D 上应用 GeometryHitTestPara
如何才能使 WPF 矩形的顶角变成圆角? 我创建了一个边框并设置了 CornerRadius 属性,并在边框内添加了矩形,但它不起作用,矩形不是圆角的。 最佳答案 您遇到的问题是矩形“溢
我正在尝试使用此 question 中的代码旋转 Leaflet 矩形。 rotatePoints (center, points, yaw) { const res = [] const a
我有以下图像。 this image 我想删除数字周围的橙色框/矩形,并保持原始图像干净,没有任何橙色网格/矩形。 以下是我当前的代码,但没有将其删除。 Mat mask = new Mat(); M
我发现矩形有些不好笑: 比方说,给定的是左、上、右和下坐标的值,所有这些坐标都旨在包含在内。 所以,计算宽度是这样的: width = right - left + 1 到目前为止,一切都很合乎逻辑。
所以,我一直在学习 Java,但我还是个新手,所以请耐心等待。我最近的目标是图形化程序,这次是对键盘控制的测试。由于某种原因,该程序不会显示矩形。通常,paint() 会独立运行,但由于某种原因它不会
我正在阅读 website 中的解决方案 3 (2D)并试图将其翻译成java代码。 java是否正确请评论。我使用的是纬度和经度坐标,而不是 x 和 y 坐标(注意:loc.getLongitude
我似乎无法删除矩形上的边框!请参阅下面的代码,我正在使用 PDFannotation 创建链接。这些链接都有效,但每个矩形都有一个边框。 PdfAnnotation annotation; Recta
如何在保持原始位图面积的同时将位图旋转给定的度数。即,我旋转宽度:100,高度:200 的位图,我的最终结果将是一个更大的图像,但旋转部分的面积仍然为 100*200 最佳答案 图形转换函数非常适合这
我创建了矩形用户控件,我在我的应用程序中使用了这个用户控件。在我的应用程序中,我正在处理图像以进行不同的操作,例如从图像中读取条形码等。这里我有两种处理图像的可能性,一种正在处理整个图像,另一个正在处
好的,我该如何开始呢? 我有一个应用程序可以在屏幕上绘制一些形状(实际上是几千个)。它们有两种类型:矩形和直线。矩形有填充,线条有描边 + 描边厚度。 我从两个文件中读取数据,一个是顶部的数据,一个是
简而言之: 我正在致力于使用 AI 和 GUI 创建纸牌游戏。用户的手显示在游戏界面上,我尚未完成界面,但我打算将牌面图像添加到屏幕上的矩形中。我没有找到 5 种几乎相同的方法,而是找到了一篇类似的文
我遇到了麻烦。我正在尝试使用用户输入的数组列表创建条形图。我可以创建一个条,但只会创建一个条。我需要所有数组输入来创建一个条。 import java.awt.Color; import java.a
我是一名优秀的程序员,十分优秀!