手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆
浏览模式: 标准 | 列表Tag:div

JS实现的街头霸王

Submitted by gouki on 2011, April 11, 10:21 AM

自从canvas越来越被大多数人接受后，基于它的游戏也越来越多了。。。
而这个，居然没用canvas也能实现这样的效果，看这里：http://www.cnblogs.com/Random/archive/2011/04/11/2011962.html

作者这么说了：
继 《天机》 之后，这次又山寨了个名为《街斗霸主》的经典格式游戏《街头霸王》的模仿版Demo，花了几个月的业余时间写了这么个东西，算是对目前的技术学习的一种练习吧。

其实这种练习的结果不是很重要，主要是体会其中的过程，虽然大部分的时间是在痛苦中渡过，但也是有很多收获的，同时也暴露出很多技术方面的不足，也为以后的学习明确了一些目标。

技术方面因为考虑到大部分IE用户（而且是非IE9），所以没有用HTML5的canvas，用的div的方式处理的，这样挑战也相对大了一些，

不过确实，性能上还是不理想，IE下的表现还是比较糟糕（特别是IE6。。。恩。。。- -！）。
目前兼容IE6/7/8(理论上也兼容IE9，只是没有测试)，safari，FF3.5+(因为FF2.0/3.0不支持水平翻转的样式。。- -！)，Chrome，Opera。
自己写了一个小型框架，包括了开发流程和js类库，类库用了OOP Like的方式包了个语法糖衣，看上去还算是像个OOP的样子，不过因为为了追求“优雅”，直接扩展了function的prototype，所以不建议在其它地方使用。
框架开发的整体思路就是用PHP作后端代码合并输出，js代码里用$import去建立了各个代码文件之间的关系，然后页面引用合并js的PHP文件，该模式需要在本地建立一个web服务器才能作测试，并且需要设置hosts为 127.0.0.1 aralork

　　游戏说明

 

　　　　游戏是一个Demo版本，实现了核心的整体流程。游戏分为“单人游戏”模式、“双人对战”模式和“练习模式”三种玩法，不过其实实现都是一样，只是改改初始化的参数而已，挺坑爹的。。。

　　　　游戏只需要键盘操作，不需要鼠标，

　　　　菜单的操作是方向键移动，Enter键选择，ESC键取消；

　　　　玩家1的操作:

　　　　   上：W，下：S，左：A，右：D，拳：J / K / L，腿：U / I / O

 　　　　玩家2的操作:

　　　　  上：↑，下：↓，左：←，右：→，拳：小键盘 1 / 2 / 3，腿：小键盘 4 / 5 / 6

　　　　这里的 ↑ ↓ ← → 代表方向键。

　　　　游戏演示地址

 　　　　完整源代码下载

Tags: js, 街霸, div, canvas

Javascript | 评论:1 | 阅读:19657

关于div行高的巨细问题(如何设置 div 的最小高度)

Submitted by gouki on 2009, September 15, 7:09 AM

页面中随便放一个div，宽度100%来控制高度，这经常会遇到，但如何设置最小高度呢？这篇文章的作者就介绍了一点点技巧：

    IE6中，使用CSS定义DIV的高度的时候经常遇到这个问题，就是当DIV的最小高度小于一定的值以后，就会发现，无论你怎么设置最小高度，Div的高 度会固定在一个值不再发生变动，这个问题很是烦人。这是因为在IE6中，系统默认的并非是Div有一个默认的高度，而是你没有解决一个隐藏的参 数，font-size，这个是ie6中对于Div属性中的 font-size大小和你系统css中定义的font-size有很大关系，因此必须单独定义这个Div的font-size，这样才能解决这个问题。

这个问题出现在IE6中；

IE6中的div默认有个最小字体高度，div的最小高度就是这个高度，除非你改变这个字体的大小。
这样来加： .style1{height:1px;font-size:0;}

比如想用一个div来做一个1px高的红色线条

在没有设置字体大小的时候会发现高度并没有预期的效果  

XML/HTML代码
  1. <style type="text/css">  
  2. .style1{  
  3. height:1px;  
  4. background:red;  
  5. }  
  6. </style>  
  7. <div class="style1"></div>  

设置了font-size:0会得到的情况是果然行高变为指定的1px，代码：

XML/HTML代码
  1. <style   type = "text/css" >    
  2. .style1{    
  3. font-size:0;    
  4. height:1px;    
  5. background:red;    
  6. }    
  7. </style >  
  8. <div class = "style1" > </div>  
文章来源：http://www.cnblogs.com/1yuruyi/archive/2009/09/14/1566442.html

 

Tags: div

Misc | 评论:0 | 阅读:17974

用div挡住flash,给flash加上链接(兼容ie+firefox,具备a链接所有属性)

Submitted by gouki on 2009, July 10, 10:26 PM

本文来自博客园，原理，我感觉和我以前写的很象。。。我写的如何用DIV挡住SWF？差不多也是这个意思吧？

问题描述：公司合作的一个酒店预订网站需要在页面上投广告，但对方给了一个flash文件，要求链接到其首页。直接在html的flash object前面加上<a href=...>，发现链接是点不动的。

解决过程：
开发人员没有意识到这个问题，写出的问题代码如下：

 

XML/HTML代码
  1. <a href="http://www.youiyou.net">  
  2.     <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="468" height="60">  
  3.         <param name="movie" value="**.swf">  
  4.         <param name="quality" value="high">  
  5.         <embed src="*.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="468" height="60"></embed>  
  6.     </object>  
  7. </a>  

鼠标放上去是没有任何效果的，原因是默认情况下flash会被放到最高层，可能有朋友也碰到过下拉菜单被flash挡住的情况，也属于这个情况。

网上找到的解决方案是用一个透明的大button包在flash的最外层，或是用一个层盖住flash,然后定义button的onclick事件,但这种方式在firefox下工作不正常。
同时用户最关心的seo作用消失了，因为这不是一个正常的链接，是用javascript实现跳转的。

 

XML/HTML代码
  1. <button style="width:468;height:60;background:transparent;border:0;padding:0;cursor:hand" onclick="window.location.href='http://www.youiyou.net/'">   
  2.     <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="468" height="60">  
  3.         <param name="movie" value="**.swf">  
  4.         <param name="quality" value="high">  
  5.         <embed src="*.swf" wmode="transparent" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="468" height="60"></embed>  
  6.         <param name="wmode" value="transparent">  
  7.     </object>  
  8. </button>  

要想具有<a href...>的所有原生特性，最完美的方法应该就是用一个透明的<a href=...>链接盖住flash,最终我们采用了以下的代码，用一张大透明图链接盖住flash。
将flash放到了一个zindex为-1的层中，同时设置了wmode属性（代码中的 wmode="transparent" 和<param name="wmode" value="transparent">分别在firefox和ie下起作用）。
masker层是用来挡住flash所在层的，margin-top用到定位。blank.gif是一个透明的图片。效果如下所示，
大小: 14.94 K 尺寸: 500 x 58 浏览: 1789 次 点击打开新窗口浏览全图
title，鼠标手形均正常

XML/HTML代码
  1. <div style="z-index:-1">  
  2.     <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="468" height="60">  
  3.         <param name="movie" value="**.swf">  
  4.         <param name="quality" value="high">  
  5.         <embed src="*.swf" wmode="transparent" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="468" height="60"></embed>  
  6.         <param name="wmode" value="transparent">  
  7.     </object>  
  8. </div>  
  9. <div id="masker" style="cursor: hand; margin-top:-60px; width:468px; height:60px; z-index:1; visibility: visible;"><a href="http:www.youiyou.net"><img src="blank.gif" width="468" height="60" border="0" /></a></div></div>  
原文是博客园的dbgeng写的，地址为：http://www.cnblogs.com/dbgeng/archive/2009/06/27/1512320.html

Tags: div, flash

Javascript | 评论:2 | 阅读:25061

如何用DIV挡住SWF？

Submitted by gouki on 2008, March 1, 12:50 PM

div在网页显示的时候，一般情况下都是被FLASH挡住，如何用div挡住flash呢？有一个小办法。。

由于现在flash在网页上显示大多用了swfObject的JS，因此，我也就拿它来举例：

 

XML/HTML代码
  1. <div id="flashContent">对不起，你的浏览器不支持flash</div>  
  2. <script>  
  3. var fso = new SWFObject("aaa.swf", "test", "100%", "100%", "8", "#FFFFFF");   
  4. //重点在这里   
  5. fso.addParam("wmode","opaque");   
  6. fso.write("flashContent");   
  7. </scirpt>  
  8. <div style="position:absolute;left:15;top:15;width:130px;height:30px;background:white"></div>  

即，先给flash加上一个参数wmode，值为opaque，然后通过用DIV的绝对路径加上背景色来挡住flash，比如一个角，等等

Tags: div, flash

Javascript | 评论:0 | 阅读:30299