自己开发个游戏其实挺简单（这是一个神奇的游戏-看透美女其实很容易）

 

 

一日上网无意弹出一个《看透美女其实很容易》的游戏广告，flash。

觉得挺神奇的。不过懂程序的人一眼就看出怎么做的。

这样的游戏很容易实现，两张图片的简单替换，用javascript就可以轻松搞定，遂小试一下。

游戏的素材取自《妄撮（Mosatsu）》。

游戏的代码就很简单了，随便网上找下图片放大，鼠标悬停放大然后改一改，一个游戏就完成了。

Js代码 复制代码
  1. <script type="text/javascript">   
  2. //<![CDATA[   
  3. function showImg1(t){   
  4. document.getElementById("loadtext").style.display='none';   
  5. //alert(document.getElementById("before").src);   
  6. document.getElementById("before").src=t+".jpg";   
  7. document.getElementById("before").style.display='';   
  8.   
  9. }   
  10.   
  11. function showImg2(t){   
  12.     document.getElementById("after").src="0"+t+".jpg";   
  13.     document.getElementById("after").style.display='';   
  14. }   
  15.   
  16. function loadImg(t){   
  17.     var o2= new Image();   
  18.     o2.src = "0"+t+".jpg";   
  19.       if(o2.complete){   
  20.   
  21.         showImg2(t);   
  22.         x=new zoomBox('zoomPan','zoom')   
  23.       }else{   
  24.         o2.onload = function(){   
  25.   
  26.          showImg2(t);   
  27.          x=new zoomBox('zoomPan','zoom')   
  28.         };   
  29.         o2.onerror = function(){   
  30.   
  31.           window.alert('美女加载失败，请重试');   
  32.   
  33.         };   
  34.       }   
  35. }   
  36.   
  37. function zoomBox() {this.index.apply(this, arguments)}   
  38. zoomBox.prototype = {   
  39.     index: function(win,zoom) {   
  40.         var win=document.getElementById(win);   
  41.         var box=document.getElementById(zoom);   
  42.         var img=box.getElementsByTagName('IMG')[0];   
  43.         var zoom=img.width/win.getElementsByTagName('IMG')[0].width;   
  44.         var z=Math.round(box.offsetWidth/2);   
  45.         win.onmousemove=function (e){   
  46.             e = e || window.event;   
  47.             var x=e.clientX,y=e.clientY, ori=win.getBoundingClientRect();   
  48.             if (x>ori.right+20||y>ori.bottom+20||x<ori.left-20||y<ori.top-20)box.style.display='none';   
  49.             x-=ori.left;   
  50.             y-=ori.top;   
  51.             box.style.left=x-z+'px';   
  52.             box.style.top=y-z+'px';   
  53.             img.style.left=-x*zoom+z+'px';   
  54.             img.style.top=-y*zoom+z+'px';   
  55.         }   
  56.         win.onmouseover=function (){box.style.display=''}   
  57.     }   
  58. };   
  59.   
  60.     var str=location.href; //取得整个地址栏   
  61.     //document.getElementById("loadtext").style.display='';   
  62.     document.getElementById("before").style.display='none';   
  63.     document.getElementById("after").style.display='none';   
  64.     var s=str.indexOf("?");    
  65.     var t=str.substring(s+1);//    
  66.   
  67.     var o= new Image();   
  68.     o.src = t+".jpg";   
  69.        
  70.       if(o.complete){   
  71.         showImg1(t);   
  72.         loadImg(t);   
  73.   
  74.       }else{   
  75.         o.onload = function(){   
  76.          showImg1(t);   
  77.          loadImg(t);   
  78.         };   
  79.         o.onerror = function(){   
  80.           window.alert('美女加载失败，请重试');   
  81.   
  82.         };   
  83.       }  
<script type="text/javascript">
//<![CDATA[
function showImg1(t){
document.getElementById("loadtext").style.display='none';
//alert(document.getElementById("before").src);
document.getElementById("before").src=t+".jpg";
document.getElementById("before").style.display='';

}

function showImg2(t){
    document.getElementById("after").src="0"+t+".jpg";
    document.getElementById("after").style.display='';
}

function loadImg(t){
    var o2= new Image();
    o2.src = "0"+t+".jpg";
      if(o2.complete){

        showImg2(t);
        x=new zoomBox('zoomPan','zoom')
      }else{
        o2.onload = function(){

         showImg2(t);
         x=new zoomBox('zoomPan','zoom')
        };
        o2.onerror = function(){

          window.alert('美女加载失败，请重试');

        };
      }
}

function zoomBox() {this.index.apply(this, arguments)}
zoomBox.prototype = {
    index: function(win,zoom) {
        var win=document.getElementById(win);
        var box=document.getElementById(zoom);
        var img=box.getElementsByTagName('IMG')[0];
        var zoom=img.width/win.getElementsByTagName('IMG')[0].width;
        var z=Math.round(box.offsetWidth/2);
        win.onmousemove=function (e){
            e = e || window.event;
            var x=e.clientX,y=e.clientY, ori=win.getBoundingClientRect();
            if (x>ori.right+20||y>ori.bottom+20||x<ori.left-20||y<ori.top-20)box.style.display='none';
            x-=ori.left;
            y-=ori.top;
            box.style.left=x-z+'px';
            box.style.top=y-z+'px';
            img.style.left=-x*zoom+z+'px';
            img.style.top=-y*zoom+z+'px';
        }
        win.onmouseover=function (){box.style.display=''}
    }
};

    var str=location.href; //取得整个地址栏
    //document.getElementById("loadtext").style.display='';
    document.getElementById("before").style.display='none';
    document.getElementById("after").style.display='none';
    var s=str.indexOf("?"); 
    var t=str.substring(s+1);// 

    var o= new Image();
    o.src = t+".jpg";
    
      if(o.complete){
        showImg1(t);
        loadImg(t);

      }else{
        o.onload = function(){
         showImg1(t);
         loadImg(t);
        };
        o.onerror = function(){
          window.alert('美女加载失败，请重试');

        };
      }

 

代码逻辑性不是很强，可能有点乱。只是提供一种游戏的思想而已。

游戏效果图：

测试链接1：http://www.xmsydw.com/game/see1/see/?1

测试链接2：http://www.xmsydw.com/game/see2

posted @ 2012-04-19 10:26  看透美女  阅读(779)  评论(1)    收藏  举报