浩克行走小游戏

最新推荐文章于 2024-07-10 14:03:37 发布

长得丑就要多读书

最新推荐文章于 2024-07-10 14:03:37 发布

阅读量2.7k

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/qq_40523659/article/details/121285402

版权

1.游戏效果

游戏开始，小人走动；单击鼠标，小人停止；再单击鼠标，小人继续走动。

2.游戏素材

爱给网：爱给网_音效配乐_3D模型_视频素材_游戏素材_免费下载

上图尺寸为：128*192。选用第三排小人。

3.代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>demo1</title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        div{
            position: absolute;
            width: 32px;
            height: 48px;
            background: url('浩克行走.png');
            /*背景图定位*/
            background-position: 0px -96px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>
<script type="text/javascript">
    var div = document.querySelector('div');
    var step = 0;
    var l = 0;
    //控制小人是否行走
    var isMove = false;
    setInterval(function(){
        if(isMove) return;
        step++;
        l+=10;
        if(step > 3) step = 0;
        //改变背景图定位
        div.style.backgroundPosition = -step*32 + "px -96px";
        //修改图片位置
        div.style.left = l + "px";
    },100);
    //绑定单机事件
    div.onclick = function(){
        isMove = !isMove;//置返
        console.log(isMove);
    }
</script>

长得丑就要多读书

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
2
评论
浩克行走小游戏

1.游戏效果游戏开始，小人走动；单击鼠标，小人停止；再单击鼠标，小人继续走动。2.游戏素材爱给网：爱给网_音效配乐_3D模型_视频素材_游戏素材_免费下载上图尺寸为：128*192。选用第三排小人。3.代码<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>demo1</title> <style type=.
复制链接

扫一扫