坦克大战

最新推荐文章于 2021-09-07 19:54:24 发布

yanner_

最新推荐文章于 2021-09-07 19:54:24 发布

阅读量336

点赞数

分类专栏： js小demo 文章标签：面向对象

本文链接：https://blog.csdn.net/yanner_/article/details/78311867

版权

js小demo 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

用面向对象的方法设计坦克大战，以下只是一个小框架，实现一些基本功能。

<!DOCTYPE html>
<html>
<head>
</head>
<body onkeydown="dosomething(event)"> 
<div id="filed" style="background-color:black;width:500px;height:400px;position:absolute">
<div id="mytank" style="background-position-y:-40px;background-image:url('itank.gif');width:40px;height:40px;positon:absolute"></div>
</div>
<script language="javascript" type="text/javascript">
//用面向对象的方法开发坦克大战
function MyTank(x,y,direct){
    this.x=x; //坦克的横坐标
    this.y=y; //坦克的纵坐标
    this.direct=direct;//方向
    this.speed=1;//速度
    //初始化
    mytank.style.left=this.x+"px";
    mytank.style.top=this.y+"px";
    mytank.style.backgroundPositionY="0px";
    //event表示按键事件
    this.move=function move(event){
        //a表示向左 3
        //s表示向下 2
        //d表示向右 1
        //w表示向上 0
        switvh(event.keyCode){
            case 65:
                //a表示左
                this.x-=this.speed;
                this.direct=3;
                mytank.style.backgroundPositionY="40px";
                break;
            case 83:
                //s表示下
                this.y+=this.speed;
                this.direct=2;
                mytank.style.backgroundPositionY="80px";
                break;
            case 68:
                //d表示右
                this.x+=this.speed;
                this.direct=1;
                mytank.style.backgroundPositionY="120px";
                break;
            case 87:
                //w表示上
                this.y-=this.speed;
                this.direct=0;
                mytank.style.backgroundPositionY="0px";
                break;              
        }
        //统一改变位置
        mytank.style.left=this.x+"px";
        mytank.style.top=this.y+"px";       
    }

}
//判断用户想干什么
        function dosomething(event){
                if(event.keyCode==65||event.key==68||event.keyCode==83||event.keyCode==87)
                    hero.move(event);
        }
//创建坦克
var hero=new MyTank(200,360,0);
</script>
</body>
</html>

yanner_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
坦克大战

用面向对象的方法设计坦克大战，以下只是一个小框架，实现一些基本功能。<!DOCTYPE html><html><head></head><body onkeydown="dosomething(event)"> <div id="filed" style="background-color:black;width:500px;height:400px;position:absolute">
复制链接

扫一扫

专栏目录