也没报错，但是就是实现不了，←/→控制rocket的转向，并且根据转向的角度大小给予一个加速度，↑表示rocket加速，哪位大哥帮忙看看，我一直不知道错在哪儿啊！？
<style>
*{
margin: 0;
padding: 0;
font-family: Magneto;
font-size: 16px;
color: rgb(109,178,255);
}
body{
background: rgba(59,61,64,0.7);/*当渐变不被支持时，这是垫底的背景色*/
}
h1{
display: block;
text-align: center;
width: 70%;
margin-left: 15%;
}
#canvas{
border: 1px solid green;
position: absolute;
top: 50px;
margin-left:-500px ;
left: 50%;
}
<body>
<h1>Go To The Moon</h1>
<canvas id="canvas" width="1000px" height="500px"></canvas>
<p id="txt"></p>
</body>
<script type="text/javascript">
var canvas=document.getElementById("canvas"),
ctx=canvas.getContext("2d"),
width=canvas.width,
height=canvas.height;
//rocket对象
var Rocket=function(){
//rocket位置
this.x=0;
this.y=0;
//rocket旋转角度
this.rotation=0;
//rocket是否点火,默认没有点火
this.flame=false;
}
//绘制rocket
Rocket.prototype.drawRocket=function(ctx){
ctx.save();
//rocket的位置偏移
ctx.translate(this.x,this.y);
ctx.rotate(this.rotation);
ctx.lineWidth=1;
ctx.strokeStyle="white";
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(-5,-5);
ctx.lineTo(0,-10);
ctx.lineTo(20,0);
ctx.lineTo(0,10);
ctx.lineTo(-5,5);
ctx.lineTo(0,0);
//如果flame为true，则表示此时加速，画出火焰
if(this.flame){
ctx.moveTo(-3,-3);
ctx.lineTo(-8,0);
ctx.lineTo(-3,3);
}
ctx.stroke();
ctx.restore();
}
//rocket测试
//var rocket=new Rocket();
//rocket.x=width/2;
//rocket.y=height/2;
//rocket.flame=true;
//rocket.drawRocket(ctx);
var rocket=new Rocket();
rocket.x=width/2;
rocket.y=height/2;
rocket.drawRocket(ctx);
//vr旋转速度向量，vx水平速度，ax水平加速度，vy竖直速度，ay竖直加速度,pushPower火箭向上的动力速度
var vr=0,//vr用来控制旋转的角度
vx=0,
vy=0,
ax=0,
ay=0,
pushPower=0;
//按键事件，←表示火箭向左转，→表示火箭向右转，↑表示火箭加速（pushPower）
window.addEventListener("keydown",function(event){
//ctx.clearRect(0,0,width,height);
switch(event.keyCod){
case 37:
vr=-3;break;
case 39:
vr=3;break;
case 38:
pushPower=0.05;
rocket.flame=true;
break;
}
//alert(event.keyCode);
//startGame();
//ctx.clearRect(0,0,width,height);
//rocket.rotation += vr*Math.PI/180;
//rocket.drawRocket(ctx);
},false);
//松开按键之后，停止旋转，rocket加速度停止,旋转加速度也停止
window.addEventListener("keyup",function(){
vr=0;
pushPower=0;
rocket.flame=false;
// startGame();
//ctx.clearRect(0,0,width,height);
//rocket.drawRocket(ctx)
},false);
(function startGame(){
window.requestAnimationFrame(startGame,canvas);
ctx.clearRect(0,0,width,height);
//rocket旋转角度,角度值
rocket.rotation += (vr*Math.PI/180);
//alert(rocket.rotation);
//rocket.drawRocket(ctx);
//将角度值转换为弧度制，作为此时的旋转加速度，角度变化越大，加速度也越大
var angle=rocket.rotation;
//水平加速度
ax=Math.cos(angle)*pushPower;
//竖直加速度
ay=Math.sin(angle)*pushPower;
//alert(ax+":"+ay);
//速度等于加速度加上之前的速度
vx += ax;
vy += ay;
rocket.x += vx;
rocket.y += vy;
//alert(rocket.x+":"+rocket.y);
document.getElementById("txt").innerHTML="rocket.rotation："+rocket.rotation;
rocket.drawRocket(ctx);
//startGame();
})();
</script>
1 个回复
x***@outlook.com (作者) - 半路出身的前端doge
解决了。。。。。单词敲错害死人啊。。。。。坑了我半个下午。。。TAT....