坦克大战1.0

最新推荐文章于 2024-04-26 16:27:10 发布

like-Betty

最新推荐文章于 2024-04-26 16:27:10 发布

阅读量298

点赞数

分类专栏： js简单实现

本文链接：https://blog.csdn.net/u012309349/article/details/49362761

版权

js简单实现专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #background{
            width: 500px;
            height: 455px;
            background-color: #999999;
            margin: 0px auto;
            position: relative;
        }
        #imgdiv{
            width: 50px;
            height: 45px;
            background: url("tank.gif") 0px 0px no-repeat;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="background">
        <div id="imgdiv"></div>
    </div>
    <script>
    var body = document.getElementsByTagName("body")[0];
    var imgdiv = document.getElementById("imgdiv");
    var bacdiv = document.getElementById("background");
    function Tank(x,y,speed){
        this.x = x;
        this.y = y;
        this.speed = speed;
        //this.direct = direct;
        //初始化
        imgdiv.style.top = this.y + "px";
        imgdiv.style.left = this.x + "px";

        this.move = function move(event){

            switch(event.keyCode){
            //左
            case 37:
                imgdiv.style.backgroundPosition="0px 0px";
                //如果还没有碰到左边，继续移动
                if(this.x > 0){
                    this.x -= this.speed;
                }
                break;
            //上
            case 38:
                imgdiv.style.backgroundPosition="-50px 0px";
                //首先判断是否到达顶部，到达顶部后不再向上移动
                if(this.y > 0){
                    this.y -= this.speed;
                }           
                break;
            //右：
            case 39:
                //如果还没有碰到右边，继续移动
                imgdiv.style.backgroundPosition="-150px 0px";
                if(this.x + imgdiv.offsetWidth < bacdiv.offsetWidth){
                    this.x += this.speed;
                }               
                break;
            //下
            case 40:
                //如果还没有到达底部，继续移动
                imgdiv.style.backgroundPosition="-100px 0px";
                if(this.y + imgdiv.offsetHeight < bacdiv.offsetHeight){
                    this.y += this.speed;
                }       
                break;
            default:
                window.alert("请按上下左右方向键控制");
            }
        imgdiv.style.top = this.y + "px";
        imgdiv.style.left = this.x + "px";  
        }
    }
    body.onkeydown = function dosomething(event){
        tank.move(event);
    }
    var tank = new Tank(200,0,10);
    </script>
</body>
</html>

实现截图：

注意：

注意标点符号一定不要写错，; 和：容易混淆；
js中控制css，格式如：imgdiv.style.backgroundPosition=”0px 0px”;
background: url("tank.gif") 0px 0px no-repeat;
等同于：

background-position:0px 0px;
background-image: url("tank.gif");
background-repeat: no-repeat;

链接：
4. 键盘keyCode链接：http://www.cnblogs.com/shyy/archive/2012/04/09/2453029.html
5. 通过背景位置来使用CSS精灵： http://book.2cto.com/201208/1734.html

like-Betty

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录