如何根据其CSS变换使div标签移动:财产? [英] How to make a div tag move based on its CSS transform: rotate(); property?
问题描述
我正在尝试编写一个必须驾驶汽车的手机游戏，所以我制作了一个单独的文件作为种类库.问题是如何使用 orient 变量计算前进的方向，以找出前进的方向.我会尝试添加它，但是我不知道从哪里开始://任何帮助都值得感谢！这是代码:
I’m trying to code a mobile game in which you must drive a car, so I have made a separate file as a library of sorts. The problem is how to I calculate how to move forward using the orient variable to find out which way is forward. I would have tried to add this, but I had no clue where to start :/ any help is appreciated! Here is the code:
<!doctype html>
<html>
<head>
<title>Title Here</title>
<!-- CSS --!>
<style>
#character {
position: relative;
transform: rotate(0deg);
width: 50px;
height: 75px;
background-color: red;
top: 50px;
left: 50px;
}
#left {
position: fixed;
bottom: 3px;
left: 3px;
width: 125px;
height: 125px;
background-color: red;
text-align: center;
}
#right {
position: fixed;
bottom: 3px;
right: 3px;
width: 125px;
height: 125px;
background-color: red;
text-align: center;
}
#drive
</style>
</head>
<body>
<div id="character">
<div style="width: 44px; height: 22px; background-color: blue; margin: 3px;"></div>
</div>
<div id="left" onclick="left()"></div>
<div id="right" onclick="right()"></div>
<!-- JS --!>
<script>
// variables go here
var pos;
var orient = 0;
// initialiser function
function init() {
Update();
}
//start the game
init();
// Updating function (this occurs when an action is completed)
function Update() {
}
// Character controller goes here
function left() {
orient -= 10;
document.getElementById("character").style.transform = "rotate(" + orient + "deg)";
Update();
}
function right() {
orient += 10;
document.getElementById("character").style.transform = "rotate(" + orient + "deg)";
Update();
}
function fwd() {
pos +=
document.getElementById("character").style.top = "1000px";
Update();
}
//functions go here
// oninput tags go here
</script>
</body>
</html>
如果您还知道如何使代码能够运行，请在注释中告诉我该怎么做！
If you also know how to make the code able to run, please tell me how to do so in the comments!
推荐答案
您可以使用以下转换:translate(X，Y).
You can use transform: translate(X,Y).
在这里，您必须基于CAR的旋转和初始位置来计算X和Y.另外，您可以拥有自己的速度和加速度.
Here, you have to calculate X and, Y based on rotation of CAR and, initial position. Also, you can have you own velocity and acceleration for it.
这篇关于如何根据其CSS变换使div标签移动:财产?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
