开源游戏 | 易学教程

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

阅读更多关于 12、开源游戏-“胡子”地图绘制和游戏主循环设计

在前面中我们初始化了游戏的资源，这次我们来说下地图的绘制和游戏主循环设计。地图绘制以前说过地图是用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、开源游戏-“胡子”开始界面设计-代码

阅读更多关于 06、开源游戏-“胡子”开始界面设计-代码

项目地址 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=

04、开源游戏-“胡子”界面设计

阅读更多关于 04、开源游戏-“胡子”界面设计

遵循一些RTS游戏通用界面设计，胡子界面设计如下，效果图只附上一张主界面的，其他会在游戏开发时贴上。主界面设计情节界面设计大当家选择界面单人多人加载界面来源： oschina 链接： https://my.oschina.net/u/933274/blog/209073

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

阅读更多关于 09、开源游戏-“胡子”开始游戏前03-总结

这几天我们干了很多事，我们总结一下。首先，设计了游戏的选择界面、操作主界面，虽然很粗糙，但是只要你看了就知道他代表的意思，以后在具体实现时我们会在雕琢一下。接着，我们做了主页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

阅读更多关于 07、开源游戏-“胡子”开始游戏前01

游戏开始前的各种资源初始化，玩家事件的绑定，信息的本地存储（这是用了库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、开源游戏-“胡子”项目启动

阅读更多关于 01、开源游戏-“胡子”项目启动

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

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

阅读更多关于 08、开源游戏-“胡子”开始游戏前02

资源加载器 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

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

阅读更多关于那些适合日常使用的开源工具和应用（娱乐篇）

本系列文章将针对办公、设计、娱乐、教育等日常使用场景，进行一些开源工具和应用的推荐，希望能对大家有所帮助。优秀的实在太多，篇幅有限，仅列出部分，发现更多可以利用 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

订阅开源游戏