VML一游戏类应用,赛车轨迹

在VML绘图中,当绘制shap的时候,网上普遍有个说法是通过调整CoordOrig可以调整坐标 系的原点位置可经过很多尝试以后依旧没有任何反应,当调整这个值的时候。

而且发现默认状态下,v:shape根本没有CoordOrig属性(null),后来终于发现,其实坐 标系的调整是通过改变CoordSize和shap本身的style.left/style.top来调整的。

一个width和height都是400的shape类型DOM,当绘制的内容超出范围的时候依然能够显示 ,没有任何影响。

所以,实际上原点始终在DOM的左上角,不同的是,我们的绘图区域可以超过DOM的左上角 !!

CoordSize="400,-400"  的时候,表示DOM的右下角坐标是(400,-400), 而 DOM的左上角始终是(0,0)

所以,就得到以后右为正的X轴和上为正的Y轴, 这时再进行绘图,就是以DOM的左上角为 原点的一个常规数学坐标系。下面是一则对line的小应用。经过改进的话可以做成一个简单的类似贪吃蛇的游戏。使用键盘的左右键来调整方向,上下键调整速度

<html xmlns="http://www.w3.org/1999/xhtml"
   xmlns:v="urn:schemas-microsoft-com:vml"
   xmlns:o="urn:schemas-microsoft-com:office:office" lang="en">
<head>
<title>画斜线</title>
<!--[if !mso]>
<style>
v\:*{behavior:url(#default#VML)}
</style>
<![endif]-->
<style type="text/css">
body{padding:0px;margin:0px;}
#line{position:absolute;left:0;top:0;z-Index:3;}
</style>
</head>
<body>

<v:line id="line"></v:line>
<v:PolyLine id="pLine" filled="false" Points="0,0 0,100"></v:PolyLine>
<v:shape CoordOrig="100,100" CoordSize="200,200">

</v:shape>

<script language="javascript">
var line=document.getElementById("line");

line.to="0,0";
line.from="0,0";
with(line.stroke)
{
 Color="#FF0000";
 Weight="1px";
 EndArrow="Classic";
 DashStyle="LongDashDot";
}

line=document.getElementById("pLine");
line.style.position="absolute";
with(line.stroke)
{
 Color="#000";
 Weight="1px";
 EndArrow="Classic";
 DashStyle="Solid";
}
line.Points.value="10,10 100,100 200,300 400,500";
var html="10,10";
var direction=0;
var prePoint=[10,10];
var step=5;
function Move()
{
 var x=step*Math.cos(direction);
 var y=step*Math.sin(direction);
 var p=prePoint;
 p[0]+=x;
 p[1]-=y;
 p[0]=Math.round(p[0]);
 p[1]=Math.round(p[1]);
 if(p[0]>=0&&p[1]>=0&&step>0)
 {
  prePoint=p;
  html+=" "+prePoint[0]+","+prePoint[1];
  line.Points.value=html;
 }
}
window.setInterval(Move,50);

function document_KeyDown(e)
{
 var e=window.event;
 if(e.keyCode==37)
  direction+=0.1;
 else if(e.keyCode==39)
  direction-=0.1;
 else if(e.keyCode==38)
  step=Math.min(Math.max(step+1,1),15);
 else if(e.keyCode==40)
  step=Math.max(step-1,0);
}
document.onkeydown=document_KeyDown;
document.body.focus();
</script>
</body>
</html>

来自BestEast的技术分享, JavaScript的奇思妙想, 抛砖引玉,希望能再激起哪位的好创 意。

在一些图形应用上,VML极其之方便,但现如今日趋强大的非IE浏览器使得VML几近要退出 历史舞台了。

在绘图的组建逻辑上,其实SVG和VML有不少共同之处,如果哪位牛人能够开发出一个兼容 VML和SVG的客户端JS绘图组件……

时间: 2024-12-29 14:25:56

VML一游戏类应用,赛车轨迹的相关文章

单指操控竞速游戏 《弹弓赛车》发布

在移动平台上,单指操作的游戏非常受玩家们的欢迎,比如愤怒的小鸟和各种跑酷类游戏,但对于赛车竞速类游戏来说,单指操作就很难实现了.不过开发商Crescent Moon Games最新发布的<弹弓赛车(Slingshot Racing)>完美实现了单指操作.在<弹弓赛车>中玩家需要做的是,利用车身上配置的弹力钢索和钩爪,在过弯时选择合适时机抓住路边的柱子,再在合适时机松开,利用离心力获得加速度,完美过弯,从而取得胜利.弹弓赛车游戏画面弹弓赛车游戏画面弹弓赛车游戏画面本作画面采用了垂直视

站长浅谈:游戏类网站的运营心得

游戏永远是互联网一个不灭的话题,只要是用电脑的人,基本上都离不开游戏,很多人都是从游戏这个兴趣开始,慢慢提高电脑水平,并且进入IT世界,兴趣是动力的源泉,所以游戏类网站数量之多,游戏类网站发展到今天,分为以下几类: 一.游戏门户 提供电脑游戏.电视游戏和网络游戏的新闻.攻略.秘籍和下载等相关内容,比如游戏爱好者,这类网站通常是更新速度快,内容只能用海量来形容,需要投入大量的时间和精力,即使在今天以采集为王的时代,也显得颇为吃力,所以经营这类站点,在前期需要准备一部分的资金投入到内容维护上,不建议

WPS演示设计闯关游戏类课件的方法

  WPS演示设计闯关游戏类课件的方法          搭楼梯 1.启动WPS演示--新建一张空白幻灯片; 2.在绘图工具栏中,点击"自选图形"--基本形状--选择"立方体",拉出一个立方体出来,选中黄色句柄上下拖动调整.如图; 3.选中立方体--绘图--旋转或翻转--水平翻转; 4.填充效果--渐变--双色--颜色任意--底纹样式:垂直--变形:第1行第1列--确定; 5.复制6个楼梯排好位置,如图; 至此,我们搭建好了一个楼梯模型. 添加文字 根据教学内容自定

巧用WPS演示打造闯关游戏类趣味课件

在小学使用多媒体课件教学,要使学生不仅学到一定的知识,而且能带着浓厚的兴趣学习,使用课件与学习者之间形成良好的互动,"闯关游戏"课件成为PPT课件的首选.本文将介绍如何用WPS演示制作闯关游戏类课件,和课件制作爱好者一起交流. 一.搭楼梯 1.启动WPS演示,新建一张空白幻灯片. 2.在绘图工具栏中,点击"自选图形"--基本形状--选择"立方体",拉出一个立方体出来,选中黄色句柄上下拖动调整.如图 3.选中立方体--绘图--旋转或翻转--水平翻转

Android游戏之屏幕类TestScreen和游戏类AndroidGame设计

Android游戏之屏幕类TestScreen和游戏类AndroidGame设计   1.基础知识: A. WakeLock http://developer.android.com/reference/android/os/PowerManager.WakeLock.htmlB. requestWindowFeaturehttp://developer.android.com/reference/android/app/Activity.html#requestWindowFeature(in

游戏类网站发展新模式 类“豆瓣”式分享平台

中介交易 SEO诊断 淘宝客 云主机 技术大厅 根据艾瑞咨询发布的2010年第三季度中国网络游戏市场监测数据显示,2010年第三季度行业的交易规模达到84.2亿元,环比上涨10.1%,同比上涨22.1%.中国网络游戏市场行情的整体回暖升温.而2010第三季度中国网页游戏市场规模达为5.7亿元,环比上涨3.0%,所占市场份额基本不变.受客户端游戏推广影响,网页游戏市场增长较慢,但仍然保持上升势头.包括单机游戏.网络游戏.网页游戏三大部分的中国整体游戏市场保持着较快的上升势头,市场竞争加剧,可挖掘潜

实例分析:我做游戏类网站百度推广的前期准备

中介交易 SEO诊断 淘宝客 云主机 技术大厅 站长们都知道做搜索引擎优化是一个既花费时间又烧钱的活,做好了就会有回报,否则就只能说是浪费青春和金钱.所以在这之前必须要给自己一个理性的定位,当然目标是少不了,其中还要包括供给和需求.我在接触游戏类网站差不多两个月的时间里,每天的百度推广工作(主要是竞价排名这一块),尤其注重方向的定位,例如要考虑到自身和目标用户的各自需求,以及自己能为用户提供些什么等元素,现在把百度推广的前期工作经验更大家分享一下. 百度在中文搜索引擎的地位可谓是无法撼动,虽然个

宇峻奥汀Q2年报有望成为台湾游戏类股获利王

8月30日消息,据台湾媒体报道,游戏研发公司宇峻奥汀将于今(30)日发布半年报.分析人士表示,由于该公司上半年2款重量级游戏受到市场欢迎,加上又认列了多笔海外授权金,其上半年业绩有望赚进一个股本,稳居台湾游戏类股的每股获利王. 虽然第二季度是传统淡季,宇峻奥汀的第2季合并营收仍达3.52亿元(单位:新台币,下同),累计上半年的合并营收达8亿元,较去年同期增长65%.宇峻奥汀今年上半年表现亮丽,虽然<三国群英传2>表现持平.但<火凤三国>人气颇旺,加上<三国群英传2>在大

台湾游戏类股今年大丰收:营收及获利创新高

12月16日早间消息,据台湾媒体报道,台湾游戏类股今年大丰收,中华网龙.宇峻奥汀.鈊象电子三家公司,今年的营收.获利均创历史新高:昱泉国际因出售大陆子公司的售股利益,今年获利不但创该公司历史新高,同时将稳居游戏类股的每股获利王. 今年经济不景气.宅经济当道,对游戏公司而言,今年却是相当丰收的一年.以上市的8家游戏公司来看,有超过半数的公司今年度营收创下历年新高,包括研发公司中华网龙.宇峻奥汀,游戏营运公司游戏橘子,还有兼具渠道.营运及研发的智冠科技,以及商用游戏机及在线游戏兼具的鈊象电子等. 上