开源游戏

12、开源游戏-“胡子”地图绘制和游戏主循环设计

﹥>﹥吖頭↗ 提交于 2020-03-01 14:05:17
在前面中我们初始化了游戏的资源,这次我们来说下地图的绘制和游戏主循环设计。 地图 绘制 以前说过地图是用tiled画好,导出为图片形式的,所以地图的绘制,就是把这个图片绘制到canvas的过程。这样绘制地图就简单了,使用drawImage方法绘制即可。 这里有个2问题,1是地图的大小一般肯定是大于canvas的,所以我们只是把地图的一部分绘制到了canvas上,2是地图的移动。1中的地图的复制位置是根据2中地图的移动距离来确定的。我们的思路如下:记录鼠标移动的xy坐标值,然后根据xy值和 canvas边缘做比较,当靠近边缘时,我们就移动地图一段距离,重复这个过程,直到地图绘制完。 其实我们上面的思路中,就是在改变 drawImage方法的参数过程,那么来看下 drawImage方法: 定义和用法 drawImage() 方法绘制一幅图像。 语法 drawImage( image , x , y ) drawImage( image , x , y , width , height ) drawImage( image , sourceX , sourceY , sourceWidth , sourceHeight , destX , destY , destWidth , destHeight ) image 所要绘制的图像。 这必须是表示 <img> 标记或者屏幕外图像的

06、开源游戏-“胡子”开始界面设计-代码

痞子三分冷 提交于 2020-03-01 13:09:12
项目地址 code.google地址: https://outlaw.googlecode.com/svn/trunk git.oschina地址: https://git.oschina.net/eternal_rider/outlaw 在开始界面中,玩家要选择大当家、游戏类型(单人、多人),还可设置游戏(音乐等)和查看作者信息。 如下图所示: 开始界面设计代码 我们首先引入了jquery库、common.js,styles.css, common.js为处理用户选择的事件; styles.css定义了所有样式。 我们通过样式class来控制div是显示隐藏。 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>胡子-即时战略游戏</title> <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/common.js" type="text/javascript" charset="utf-8"></script> <link rel="stylesheet" href="styles.css" type="text/css" media="screen" charset=

09、开源游戏-“胡子”开始游戏前03-总结

穿精又带淫゛_ 提交于 2020-03-01 10:05:51
这几天我们干了很多事,我们总结一下。 首先,设计了游戏的选择界面、操作主界面,虽然很粗糙,但是只要你看了就知道他代表的意思,以后在具体实现时我们会在雕琢一下。 接着,我们做了主页index.html,罗列了很多的div,来实现界面的效果。 最后,我们写了很多的js,来实现不同的功能。 在前面我们细说了每个js的功能,但是如果你注意的话,我们唯独没说其中的game.js,是这个js不重要吗?我们看下他的代码 var game = { init:function(){ }, start:function(){ } } 几乎什么也没有,但它确实最重要的一个js,如果要比的话,我想他应该是大当家(在没有nodejs时),呵呵。其他的js都被它使用,它控制着游戏的逻辑。 开发游戏虽然复杂,但它的原理却出奇的简单,就是循环或者绘制擦除重复这2步,为什么说这个呢?因为胡子的game.js也是这样绘制擦除循环这步,来完成建筑物、车辆、人员、子弹的绘制,这个会在以后具体说明,胡子是一个即时战略游戏,我可以保证胡子不是那种简单的 即时战略,起码也有红色警戒最核心的功能(呵呵,我的目标),就是说他绘制的单位会很多,我们粗略分几类起码有建筑物类、车辆类、兵(人)、资源类、其他类(树木、石头等)等,所以如果用game.js来绘制所有这些,肯定不是一个好的做法。 我本身是是搞java的,java的面向对象

07、开源游戏-“胡子”开始游戏前01

雨燕双飞 提交于 2020-03-01 10:05:33
游戏开始前的各种资源初始化,玩家事件的绑定,信息的本地存储 (这是用了库store虽然自己写也很简单,但这个做了合成,更小)。 开始界面修改 增加了loading场景和游戏主场景(目前为空) <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>胡子-即时战略游戏</title> <link rel="stylesheet" href="styles.css" type="text/css" media="screen" charset="utf-8"> <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/store.js" type="text/javascript" charset="utf-8"></script> <script src="js/resourceloader.js" type="text/javascript" charset="utf-8"></script> <script src="js/singlegame.js" type="text/javascript" charset="utf-8"></script> <script src="js

01、开源游戏-“胡子”项目启动

不羁的心 提交于 2020-03-01 10:05:00
如果你看过之前的文章,你就会明白我们什么这么写,如果你没看,也没必要解释了。 开源游戏“胡子”,今天正式开始设计。 “胡子”是一款以html5开发的一款即时战略游戏,即大家说的RTS,可以单人游戏和多人对战。 单人游戏时,故事情节为东北土匪的事。具体故事还在构思中。为什么叫“胡子”那,很简单,东北人把土匪叫“胡子”。我就是东北人 。 下一次我们写写怎么设计这个游戏。 来源: oschina 链接: https://my.oschina.net/u/933274/blog/208569

08、开源游戏-“胡子”开始游戏前02

早过忘川 提交于 2020-03-01 09:43:39
资源加载器 resourceloader.js 初始化 资源加载器用于读取图片和音乐, 在前面的代码( main.js )中,我们初始化了它,下面我们详细说下,因为它在以后中会经常用到,游戏中所有的资源都由它来读取。 $(window).load(function() { resourceloader.init(); sounds.init(); if (resourceloader.loaded){ sounds.bgMusic(); } else { resourceloader.onload = sounds.bgMusic; } if(store.get('data')){ $("#checkbullet").css({"top":store.get('data').checkbullety}); }else{ store.set('data',{hero:"hero1",checkbullety:"160px",task:0}); } }); 资源加载器都干什么事情呢?读取资源,这个是最终我们想要干的事,我们还得考虑下,读取完了之后怎么办?图片也分很多类型,音乐同样如此,常用的.mp3也不是所有的浏览器都能直接播放的,下面是几种流行的音频格式被浏览器支持的情况(来源于网络,未全部测试,也许最新版本中已经有所变化,也说不定)。 虽然可以在<audio

那些适合日常使用的开源工具和应用(娱乐篇)

做~自己de王妃 提交于 2019-12-03 18:31:03
本系列文章将针对办公、设计、娱乐、教育等日常使用场景,进行一些开源工具和应用的推荐,希望能对大家有所帮助。优秀的实在太多,篇幅有限,仅列出部分,发现更多可以利用 OSC 的搜索工具。喜欢请关注、收藏、评论,欢迎打赏~~ Part 1: 那些适合日常使用的开源工具和应用(办公篇) Part 2: 那些适合日常使用的开源工具和应用(设计篇) Part 3:娱乐篇 影视 音乐 游戏 一、影视 1、VLC Media Player VLC Media Player 是知名的开源视频播放器,功能强大,它可以播放来自网络、摄像头、磁盘、光驱的文件,支持包括 MPEG 1/2/4,、H264、 VC-1、DivX、 WMV、 Vorbis、AC3、AAC等格式的解码。且无广告,无跟踪用户的行为。 VLC Media Player 适用 Windows、Linux、OS X、Android、iOS、Windows Phone 等多个平台,可设置成中文。据悉,最新发布的 3.0预览版 还支持 360 度视频,允许查看全景照片。 开源协议: GPLv2 2、MPlayer MPlayer 同样是一款知名的开源视频播放器,支持MPEG / VOB、AVI、Ogg / OGM、VIVO、ASF / WMA / WMV、QT / MOV / MP4、RealMedia、Matroska