Javascript 如何使div标记基于其CSS转换进行移动：rotate（）；财产？
我正在尝试编写一个手机游戏，其中你必须驾驶汽车，所以我制作了一个单独的文件作为各种库。问题是如何使用Javascript 如何使div标记基于其CSS转换进行移动：rotate（）；财产？,javascript,html,css,Javascript,Html,Css,我正在尝试编写一个手机游戏，其中你必须驾驶汽车，所以我制作了一个单独的文件作为各种库。问题是如何使用orient变量计算前进方向，以确定前进方向。我本想加上这个，但我不知道从哪里开始：/谢谢你的帮助！代码如下： <!doctype html> <html> <head> <title>Title Here</title> <!-- CSS --!> <style&
orient<!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>
标题在这里
您可以使用transform:translate（X，Y）
在这里，你必须根据汽车的旋转和初始位置来计算X和Y。此外，您可以拥有自己的速度和加速度。我已经在使用transform CSS属性，因此如果我使用该属性，是否会重置rotate（deg）属性？不，您可以获得该属性，并使用字符串操作确保不会丢失该属性。或者，您可以将变换用作包含旋转（2）平移（30,40）的模板。不，只需使用JS替换括号之间的数据即可获得transform属性，然后可以使用regex/string操作提取和替换当前数据。它将始终是旋转（n）平移（X，Y）变换：平移（0px，0px）属性类似于我的top:0px；左：0px方法，这太让人困惑了，因为我使用这个方法已经太久了。是的，你也可以用top作为Y值，用left作为X值。