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

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



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

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

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

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

Js代码



<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('美女加载失败，请重试');

};

}

<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