自己开发个游戏其实挺简单(这是一个神奇的游戏-看透美女其实很容易)
一日上网无意弹出一个《看透美女其实很容易》的游戏广告,flash。
觉得挺神奇的。不过懂程序的人一眼就看出怎么做的。
这样的游戏很容易实现,两张图片的简单替换,用javascript就可以轻松搞定,遂小试一下。
游戏的素材取自《妄撮(Mosatsu)》。
游戏的代码就很简单了,随便网上找下图片放大,鼠标悬停放大然后改一改,一个游戏就完成了。
- <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('美女加载失败,请重试'); }; }
代码逻辑性不是很强,可能有点乱。只是提供一种游戏的思想而已。
游戏效果图: