zoukankan      html  css  js  c++  java
  • js制造运动的假象-------Day63

    这里用的这个名称可能不合适,只是临时我也没有想起比較相应的名字来,那就这样先写吧。

    首先,我先表达下我想实现的是什么效果:

    想必大家都玩过,至少见过非常多小游戏,例如说超级玛丽。例如说flappy bird,在里面总看到马里奥或者小鸟就一直向前走啊向前飞啊。然后飞过了大河,跳过了深坑。终于到达终点,而在这个记录中我所关注的仅仅是背景的变化,就像以下的图示:


    终于它到了城堡中,而我们的屏幕中又不会显示滚动栏。它是怎样运动的呢?

    事实上,这个功能应该是个比較基础的功能了。仅仅是之前不够敏感。今天从公交车上看着窗外的风景一晃而过。我就突然想起了这么一个功能,然后来实现了下,果然有效。当背景不断变化的时候,果然运动感又强了非常多。

    这里来简介下实现的关键点:

    1、足够长的div。

    2、当div超出屏幕长度的时候,就会出现横向滚动栏,而我们则将滚动栏隐藏;

    3、当运动对象向右运动的时候,背景div的marginLeft也从0px不断减小,从而显示背景div的不同部分。

    我不知道在各个游戏应用中是不是这样解决的,可是我这样做的时候确实是实现了这个效果,这样来上一下代码。来细说下(图做的非常粗糙,仅仅是为了实现效果):

    html语言:

    <body style="overflow:hidden">
    <div style="2000px;height:700px;background:red;" id="back">//2000px远超出屏幕宽度了
    	<div style="300px;margin-left:600px;height:700px;background:yellow;float:left;"></div>//不同背景色在当中显示。明白区分所在div的不同位置
    	<div style="300px;margin-left:600px;height:700px;background:blue;float:left;"></div>
    </div>
    <div style="position:absolute;z-index:10;background:#ccc;100px;height:100px;left:10px;top:300px;" id="move">//找一个移动的对象来模拟效果
    	<input type="button" value="go" style="100px;height:100px;" onclick="go">	
    </div>
    </body>
    css部分:

    <style type="text/css">
    body{margin:0px;padding:0px;}
    </style>
    javascript部分:

    <script type="text/javascript">
    window.onload=function go(){
    	var move=document.getElementById("move");	
    	var back=document.getElementById("back");//获取两个div对象
    	var ss=setInterval(function(){
    		var now=parseInt(back.offsetLeft);
    		move.style.left=move.offsetLeft+1+"px";
    		back.style.marginLeft=now-1+"px";//这是今天须要先查的关键点margin-left在这里能够写成marginLeft。这里的Left注意大写L
    	},10);
    }
    </script>
    这样简单实现了所须要的效果。这次是全然自己依据自己的想象做出的实现,尽管写的非常乱。可是这会在看到代码效果的时候还是特别开心,由于这是自己思考的结晶啊。不是分析别人代码的结果,开森啊,哈哈,神一样的男人。加油加油...


    今天交钥匙了,去看了下房子。比方今租的要好多了。周末搬家,哎,没有买车,在城市里搬家感觉好凄慘,挪来挪去的都不方便,也真苦了媳妇了,陪我东跑西颠的。我欠她的实在太多了。真希望能够快点交房,就不用到处找房子租住了....





  • 相关阅读:
    使用栈检测括号是否成对出现
    java多线程基本概述(十七)——原子性和易变性
    java多线程基本概述(十六)——捕获异常
    java多线程基本概述(十五)——DaemonThread
    java多线程基本概述(十四)——Thread内部类的几种写法
    java多线程基本概述(十三)——Executor
    java多线程基本概述(十二)——多线程与单例
    java多线程基本概述(十一)——ReadWriteLock
    java多线程基本概述(十)——Condition
    java多线程基本概述(九)——Lock(3)
  • 原文地址:https://www.cnblogs.com/yxysuanfa/p/6921278.html
Copyright © 2011-2022 走看看