为什么球和球拍没有发生HTML画布碰撞？
为什么球和球拍没有发生HTML画布碰撞？
提问于 2020-12-28 19:02:57
我正在用javascript，Canvas和HTML构建我的乒乓球游戏，所以下面是我的Javascript代码来创建球拍和球。我想知道如何使划桨和球发生碰撞。下面是我的javascript和HTML
下面是我的HTML代码。在这里，我声明了canvas元素
var c = document.getElementById("frame");
c.width = window.innerWidth * 0.31;
c.height = window.innerHeight * 0.55;
var ctx = c.getContext("2d");
var x = 10;
var y = 10;
var rx = 10;
var ry = 400;
var height = 70;
var width = 12;
var radius = 10;
var vx = Math.floor(Math.random() * 2);
var vy = Math.floor(Math.random() * 4);
drawPad(rx, ry, height, width);
function drawPad(rx, ry, height, width) {
ctx.fillStyle = "#f2a34b";
ctx.fillRect(rx, ry, height, width);
}
function drawCircle() {
ctx.beginPath();
ctx.arc(x, y, radius, 0, 2 * Math.PI);
ctx.closePath();
ctx.stroke();
ctx.fill();
}
function moveCircle() {
requestAnimationFrame(moveCircle);
if ((x + radius > 500) || (x - radius < 0)) {
vx = 0 - vx;
}
if ((y + radius > 420) || (y - radius < 0)) {
vy = 0 - vy;
}
x = x + vx;
y = y + vy;
ctx.clearRect(0, 0, 500, 500);
drawPad(rx, ry, height, width);
drawCircle();
}
moveCircle();
window.onkeydown = function(event) {
if (event.keyCode == 37 && rx > 20) {
rx = rx - 20;
} else if (event.keyCode == 39 && rx <= 420) {
rx = rx + 20;
}
ctx.clearRect(0, 0, 500, 500);
drawPad(rx, ry, height, width);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
canvas {
border: 1px solid #c7c7c7;
background-color: rgb(175, 166, 166);
}
</style>
</head>
<body>
<canvas id="frame"></canvas>
<script src="canvas.js"></script>
</body>
</html>
回答 1
Stack Overflow用户
发布于 2020-12-28 23:14:12
我只看到您在代码中验证与边框的冲突，而不是与paddle本身。
你只需要添加一些条件来检测它与球拍的碰撞。如果发生碰撞，那么球将向上移动，否则将向下移动。
if(y+radius>=ry)
{
moveUp = true;
moveDown = false;
}
if(y+radius<=0)
{
moveUp = false;
moveDown = true;
}然后告诉程序它将如何发生
if(moveUp){
//x = x + vx;
y = y - vy;
}
if(moveDown){
//x = x - vx;
y = y + vy;
}如果我没记错的话，这就给了你类似的东西：
var c = document.getElementById("frame");
c.width = window.innerWidth * 0.31;
c.height = window.innerHeight * 0.55;
var ctx = c.getContext("2d");
var x = 10;
var y = 10;
var rx = 10;
var ry = (window.innerHeight*0.55)-10;
var height = 70;
var width = 12;
var radius = 10;
var vx = Math.floor(Math.random() * 2);
var vy = Math.floor(Math.random() * 4);
let moveUp = false;
let moveDown = true;
drawPad(rx, ry, height, width);
function drawPad(rx, ry, height, width) {
ctx.fillStyle = "#f2a34b";
ctx.fillRect(rx, ry, height, width);
}
function drawCircle() {
ctx.beginPath();
ctx.arc(x, y, radius, 0, 2 * Math.PI);
ctx.closePath();
ctx.stroke();
ctx.fill();
}
function moveCircle() {
requestAnimationFrame(moveCircle);
/*if ((x + radius > 500) || (x - radius < 0)) {
vx = 0 - vx;
}*/
if((x+radius>=rx)&&(y+radius>=ry))
{
moveUp = true;
moveDown = false;
}
if(y+radius<=0)
{
moveUp = false;
moveDown = true;
}
/*if ((y + radius > 420) || (y - radius < 0)) {
vy = 0 - vy;
}*/
if(moveUp){
//x = x + vx;
y = y - vy;
}
if(moveDown){
//x = x - vx;
y = y + vy;
}
ctx.clearRect(0, 0, 500, 500);
drawPad(rx, ry, height, width);
drawCircle();
}
moveCircle();
window.onkeydown = function(event) {
if (event.keyCode == 37 && rx > 20) {
rx = rx - 20;
} else if (event.keyCode == 39 && rx <= 420) {
rx = rx + 20;
}
ctx.clearRect(0, 0, 500, 500);
drawPad(rx, ry, height, width);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
canvas {
border: 1px solid #c7c7c7;
background-color: rgb(175, 166, 166);
}
</style>
</head>
<body>
<canvas id="frame"></canvas>
<script src="canvas.js"></script>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65476583
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号