html5开源游戏

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
订阅 html5开源游戏