分别创建旋转矩形
Create separately rotating rectangles
嗨，我正试图让我"画"的两个矩形顺时针旋转，并使用"a/s"和使用javascript的左箭头/右箭头围绕它们的中心点反锁定。我正在撞墙，试图让一个旋转。
我知道我需要定义中心点，顺时针旋转的角度和逆时针旋转的角。在这个学习阶段，我无法创建函数等来做到这一点，所以任何帮助都会很棒。
这是我当前的代码
<html>
<title>Squash Game V1</title>
<h1>Squash</h1>
<canvas id="gameCanvas" width=800 height=600></canvas>
<script>
var canvas;
var canvasContext;
var ballX = 50;
var ballY = 50;
var gravity = 0.2;
var bounceFactor = 0.6;
var ballSpeedX = 3;
var ballSpeedY = 10;
var ballSpeedY2 = 5;
var ballBounce = 0
var ballStartPos = 50
var redPadY = 475
var redPadX = 50
var bluePadY = 475
var bluePadX = 750
const paddleHeight = 100
const paddleWidth = 10
const resistence = 0.998
const ballWidth = 15;
window.onload = function() {
canvas = document.getElementById('gameCanvas');
canvasContext = canvas.getContext('2d');
var framesPerSecond = 60;
setInterval(function() {
moveEverything();
drawEverything();
}, 1000/framesPerSecond);
}
function ballReset() {
ballX = ballStartPos;
ballY = ballStartPos;
ballBounce = 0;
function incrementAngle() {
rotateAnti -= 10;
if(rotateAnti > 360) {
rotateAnti = 0;
}
}
function decrementAngle(){
rotateClock += 10;
if(rotateClock>360){
rotateClock = 0;
}
}
}
//map var array keeps track of multiple button presses allowing both pads to be moved by single button presses
var map = []; // Or you could call it "key"
onkeydown = onkeyup = function(e){
e = e || event; // to deal with IE
map[e.keyCode] = e.type == 'keydown';
{
//moves left paddle
var key = e.keyCode ? e.keyCode : e.which;
if (key == 87) {
redPadX -= 20;
}else if (key == 83) {
redPadX += 20;
}
} {
//moves right paddle
var key = e.keyCode ? e.keyCode : e.which;
if (key == 38) {
bluePadX -= 20;
} else if (key == 40) {
bluePadX += 20;
}
}
}
function moveEverything() {
// this moves ball down
ballY += ballSpeedY;
// this moves the ball across
ballX += ballSpeedX;
// this speeds ball up as it's falling plus slows down making it fall
ballSpeedY += gravity;
ballSpeedX = ballSpeedX*resistence;
//this bounes the ball
if (ballY > canvas.height - ballWidth) {
ballSpeedY = -ballSpeedY
//this reduces height of the bounce
ballSpeedY *= bounceFactor;}
//this should count bounces
if (ballY > canvas.height - ballWidth){
ballBounce = ballBounce + 1;
}
//ball will bounce of right wall
if (ballX > canvas.width - ballWidth) {
ballSpeedX = -ballSpeedX}
//ball will bounce off left wall
if (ballX < 0 + ballWidth) {
ballSpeedX = -ballSpeedX}
//if ball bounces twice it resets
if (ballBounce >= 2) {
ballReset()}
}
function drawEverything() {
//this draws the pong court
colourRect(0,0,canvas.width,canvas.height, 'black');
//this draws left pad
colourRect(redPadX, redPadY, paddleWidth, paddleHeight, "red");
//this draws right pad
colourRect(bluePadX, bluePadY, paddleWidth, paddleHeight, "blue");
//this draws the ball
colourCircle(ballX, ballY, 10, "white");
function colourCircle(centreX, centreY, radius, drawColour) {
canvasContext.fillStyle = drawColour;
canvasContext.beginPath();
canvasContext.arc(centreX, centreY, radius, 0,Math.PI*2, true)
canvasContext.fill();
}
//this function draws a rectangle
function colourRect(leftX, topY, width, height, drawColour) {
canvasContext.fillStyle = drawColour;
canvasContext.fillRect(leftX, topY, width, height);
}
}
</script>
</html>
这是添加了红条旋转的代码。旋转发生在colourRect函数中。它会平移到对象的中心，以弧度进行旋转，然后向后平移。这就是中心旋转的全部内容。使用Q和A旋转。
var canvas;
var canvasContext;
var ballX = 50;
var ballY = 50;
var gravity = 0.2;
var bounceFactor = 0.6;
var ballSpeedX = 3;
var ballSpeedY = 10;
var ballSpeedY2 = 5;
var ballBounce = 0
var ballStartPos = 50
var redPadY = 475
var redPadX = 50;
var redRotate = 0;
var to_radians = Math.PI / 180;
var bluePadY = 475
var bluePadX = 750
var blueRotate = 0;
const paddleHeight = 100
const paddleWidth = 10
const resistence = 0.998
const ballWidth = 15;
window.onload = function() {
canvas = document.getElementById('gameCanvas');
canvasContext = canvas.getContext('2d');
var framesPerSecond = 60;
setInterval(function() {
moveEverything();
drawEverything();
}, 1000/framesPerSecond);
}
function ballReset() {
ballX = ballStartPos;
ballY = ballStartPos;
ballBounce = 0;
function incrementAngle() {
rotateAnti -= 10;
if(rotateAnti > 360) {
rotateAnti = 0;
}
}
function decrementAngle(){
rotateClock += 10;
if(rotateClock>360){
rotateClock = 0;
}
}
}
//map var array keeps track of multiple button presses allowing both pads to be moved by single button presses
var map = []; // Or you could call it "key"
onkeydown = onkeyup = function(e){
e = e || event; // to deal with IE
map[e.keyCode] = e.type == 'keydown';
{
//moves left paddle
var key = e.keyCode ? e.keyCode : e.which;
if (key == 87) {
redPadX -= 20;
}else if (key == 83) {
redPadX += 20;
} else if (key == 81) { // Q -- rotate left
redRotate -= 10;
} else if (key == 65) { // A -- rotate right
redRotate += 10;
}
} {
//moves right paddle
var key = e.keyCode ? e.keyCode : e.which;
if (key == 38) {
bluePadX -= 20;
} else if (key == 40) {
bluePadX += 20;
}
}
}
function moveEverything() {
// this moves ball down
ballY += ballSpeedY;
// this moves the ball across
ballX += ballSpeedX;
// this speeds ball up as it's falling plus slows down making it fall
ballSpeedY += gravity;
ballSpeedX = ballSpeedX*resistence;
//this bounes the ball
if (ballY > canvas.height - ballWidth) {
ballSpeedY = -ballSpeedY
//this reduces height of the bounce
ballSpeedY *= bounceFactor;}
//this should count bounces
if (ballY > canvas.height - ballWidth){
ballBounce = ballBounce + 1;
}
//ball will bounce of right wall
if (ballX > canvas.width - ballWidth) {
ballSpeedX = -ballSpeedX}
//ball will bounce off left wall
if (ballX < 0 + ballWidth) {
ballSpeedX = -ballSpeedX}
//if ball bounces twice it resets
if (ballBounce >= 2) {
ballReset()}
}
function drawEverything() {
//this draws the pong court
colourRect(0,0,canvas.width,canvas.height, 'black');
//this draws left pad
colourRect(redPadX, redPadY, paddleWidth, paddleHeight, "red", redRotate);
//this draws right pad
colourRect(bluePadX, bluePadY, paddleWidth, paddleHeight, "blue", blueRotate);
//this draws the ball
colourCircle(ballX, ballY, 10, "white");
function colourCircle(centreX, centreY, radius, drawColour) {
canvasContext.fillStyle = drawColour;
canvasContext.beginPath();
canvasContext.arc(centreX, centreY, radius, 0,Math.PI*2, true)
canvasContext.fill();
}
//this function draws a rectangle
function colourRect(leftX, topY, width, height, drawColour, rotate) {
canvasContext.fillStyle = drawColour;
if (typeof rotate === "undefined") rotate = 0;
centerX = leftX + (width / 2);
centerY = topY + (height / 2);
canvasContext.save();
canvasContext.translate(centerX, centerY);
canvasContext.rotate(rotate * to_radians);
canvasContext.translate(-centerX, -centerY);
canvasContext.fillRect(leftX, topY, width, height);
canvasContext.restore();
}
}<h1>Squash</h1>
<canvas id="gameCanvas" width=800 height=600></canvas>相关文章：
- 手动创建旋转活动指示器
- Jquery幻灯片中的列表，连接第一个和最后一个列表元素以创建旋转木马
- 为所有主流浏览器创建 css3 无限旋转
- 使用精灵使用 Javascript 创建旋转
- 如何将“$(this）”传递给Slick.js插件(并使用循环创建多个旋转木马）
- 分别创建旋转矩形
- three.js:如何旋转已经创建的网格
- 自动旋转不适用于使用谷歌地图api创建的谷歌地图
- 使用lookAt在WebGL中创建旋转相机
- 为什么当我在相同位置使用webgl创建新球体时，旋转速度会增加
- 使用SVG和JavaScript创建旋转器
- 无法在WebGL中创建沿轴旋转的3D Koch
- 如何用CSS3和jQuery创建一个旋转齿轮
- 如何在一个页面上创建多个图像旋转集
- 如何创建一个PHP旋转重定向系统
- js创建多个旋转木马
- 尝试用jQuery创建旋转木马效果
- 创建旋转号码，直到总数达到
- 在javascript中创建一个旋转函数
- 创建了一个旋转木马，但如果有多个旋转木马就会出错.(包括小提琴)
