飞机大战
背景
- 背景能够循环滚动播放
<style>
@keyframes myfirst {
from {
transform: translateX(0)
}
to {
transform: translateX(-200px)
}
}
</style>
<body>
<div id="back">
<ul>
<li><img id="bg" src="img/background.jpg" /></li>
<li><img id="bg" src="img/background.jpg" /></li>
</ul>
<img id="myPlane" src="img/ship_center.png" style="left: 10px;top: 10px;" />
</div>
</body>
移动
- 按下WASD四个键能够是飞机动起来
- 优化飞机移动能够平顺动起来
- 想要飞机图片在网页中动起来，首先的想法就是改变它的横纵坐标
var myPlane_style_left = parseInt(myPlane.style.left);
var myPlane_style_top = parseInt(myPlane.style.top);
由于得到的数据后面会带有一个“px”的小尾巴，不适合计算，用parseInt方法把他后面的px舍弃掉同时把字符串类型转换成数字。
想要他移动，这个时候我们需要在按下键盘的某个键的时候，程序能检测到我们按下了某个键。
document.body.onkeypress = function (){
var e = window.event || arguments[0];
if(e.KeyCode == 96){//这里是检测到按下了A键
//里面就是实现减少飞机横坐标的值
}
}
PS：需要注意的是document.body.onkeypress与document.body.onkeydown对于键盘上的按键的编号是不同的，例如A，用onkeypress就是96，用onkeydown就是37，一开始在这卡了很长时间的bug。并且使用onkeypress让飞机移动会有键位冲突，不能两个键同时一起按下，且移动很卡顿不流畅。
这时我想起用定时器不停的检测我的按键按下抬起就能实现两个键或多个按键一起按的效果，用几个状态量表示我是否按下，一旦他们为true就让移动函数一直执行。
var leftButton = false; //按键开关 让按键事件默认为false，然后
var rightButton = false; //按下键为true，用定时器隔30毫秒检测一次是否
var upButton = false; //为true，如果为true，则进行移动事件
var downButton = false;
var shot = false;
var move_speed = 11;
var myPlane_style_left = parseInt(myPlane.style.left);
var myPlane_style_top = parseInt(myPlane.style.top);
console.log(myPlane.style.left);
console.log(myPlane_style_top);
function myPlaneMoveDown() {
if (myPlane_style_top < 350) {
myPlane_style_top += move_speed;
myPlane.style.top = myPlane_style_top + "px";
}
}
function myPlaneMoveTop() {
if (myPlane_style_top > 0) {
myPlane_style_top -= move_speed;
document.getElementById("myPlane").setAttribute("style", "top:" + myPlane_style_top + "px;left:" + myPlane_style_left + "px;");
}
}
function myPlaneMoveLeft() {
//向左移动不能超过bg的边界；
if (myPlane_style_left > 0) {
myPlane_style_left -= move_speed;
document.getElementById("myPlane").setAttribute("style", "top:" + myPlane_style_top + "px;left:" + myPlane_style_left + "px;");
}
}
function myPlayMoveRight() {
//向左移动不能超过bg的边界；
//相对于图片左边的坐标，所以坐标是：530 - 60；
if (myPlane_style_left < 470) {
myPlane_style_left += move_speed;
document.getElementById("myPlane").setAttribute("style", "top:" + myPlane_style_top + "px;left:" + myPlane_style_left + "px;");
}
}
//在body中按下键盘的时候移动玩家的飞机；
document.body.onkeydown = function () {
var e = window.event || arguments[0];
console.log(e.keyCode);
// 按下键则使按钮为true
if (e.keyCode == 37 || e.keyCode == 65) {
//向左移动玩家飞机；
leftButton = true;
}
if (e.keyCode == 38 || e.keyCode == 87) {
//向上移动玩家飞机；
upButton = true;
}
if (e.keyCode == 39 || e.keyCode == 68) {
//向右移动玩家飞机；
rightButton = true;
}
if (e.keyCode == 40 || e.keyCode == 83) {
//向下移动玩家飞机；
downButton = true;
}
if (e.keyCode = 32) {
//发射子弹
//anmo(myPlane.offsetTop,myPlane.offsetLeft);
shot = true;
}
}
document.body.onkeyup = function () {
var e = window.event || arguments[0];
// console.log(e.keyCode);
if (e.keyCode == 37 || e.keyCode == 65) {
leftButton = false;
}
if (e.keyCode == 38 || e.keyCode == 87) {
upButton = false
}
if (e.keyCode == 39 || e.keyCode == 68) {
rightButton = false;
}
if (e.keyCode == 40 || e.keyCode == 83) {
downButton = false;
}
if (e.keyCode = 32) {
//发射子弹
//
shot = false;
}
}
function controlPlay() {
if (leftButton == true) {
myPlaneMoveLeft();
}
if (upButton == true) {
myPlaneMoveTop();
}
if (rightButton == true) {
myPlayMoveRight();
}
if (downButton == true) {
myPlaneMoveDown();
}
if (shot == true) {
anmo(myPlane_style_top,myPlane_style_left);
}
}
var RptcontrolPlay = setInterval(controlPlay, 20);