HTML5游戏_基于DOM平台跳跃小游戏开发
关注
分享
扫一扫
文章平均质量分 58
HTML5游戏_基于DOM平台跳跃小游戏开发
爱玎科技首席执行官
爱玎科技首席执行官
展开
-
HTML5游戏_基于DOM平台跳跃小游戏开发_11.玩家精灵碰撞
HTML5游戏_基于DOM平台跳跃小游戏开发玩家精灵碰撞本章新内容原创 2021-03-10 23:15:07 · 347 阅读 · 1 评论 -
HTML5游戏_基于DOM平台跳跃小游戏开发_10.玩家精灵移动
HTML5游戏_基于DOM平台跳跃小游戏开发按键监听在 精灵.js 里添加玩家精灵函数和玩精灵动作修改 精灵.js//定义全局对象 精灵集合var 精灵集合 = { "@": 玩家精灵, "o": 金币精灵, "=": 熔岩精灵, "v": 熔岩精灵, "|": 熔岩精灵};//定义全局变量 玩家移动速度var 玩家移动速度 = 10;//定义全局变量 玩家跳跃速度var 玩家跳跃速度 = 14;//定义全局变量 重力var 重力 = 30;/** *@描原创 2021-03-04 20:22:20 · 286 阅读 · 1 评论 -
HTML5游戏_基于DOM平台跳跃小游戏开发_9.按键监听
HTML5游戏_基于DOM平台跳跃小游戏开发按键监听本章知识点:对象自定义名称属性,可以用变量来命名属性名称//这段代码把多个属性（品牌, 型号, 排量）赋给名为 汽车 的对象var 汽车1 = { 品牌: "劳斯莱斯", 型号: "幻影", 排量："6.7T"};汽车1.品牌; //劳斯莱斯var 汽车2 = { "品牌": "劳斯莱斯", 型号: "幻影", 排量："6.7T"};汽车2.品牌; //劳斯莱斯汽车2["品牌"]; //劳斯莱斯addE原创 2021-03-03 15:41:55 · 1110 阅读 · 4 评论 -
HTML5游戏_基于DOM平台跳跃小游戏开发_8.移动的熔岩精灵
HTML5游戏_基于DOM平台跳跃小游戏开发移动的熔岩精灵本章新知识障碍物 游戏中可以阻挡精灵的都为障碍物,在游戏中表现为场景边界,墙体,静止熔岩矢积 物理中称矢积,是一种在向量空间中向量的二元乘法运算.我们在工具函数.js里定义一个矢积函数用来设置游戏里所有精灵的矢积.在 工具函数.js 中添加代码/** *@描述: 生成html标签 函数 *@传参: 名称(html标签类型) 类名称(html标签类名) *@参数: *@返回值: 标签(html标签) *@创建人: 王天宇 *原创 2021-03-02 16:34:47 · 256 阅读 · 0 评论 -
HTML5游戏_基于DOM平台跳跃小游戏开发_7.浮动的金币精灵
HTML5游戏_基于DOM平台跳跃小游戏开发浮动的金币精灵本章新知识Math.PI 返回圆周率π.Math.sin() 函数返回一个数值的正弦值Math.random() 函数返回一个浮点数,伪随机数在范围从0到小于1,也就是说,从0(包括0)往上,但是不包括1(排除1)矢量 在二维及以上维度既有大小又有方向的量为矢量.我们在工具函数.js里定义一个矢量函数用来设置游戏里所有精灵的矢量,如坐标,大小等在 工具函数.js 中添加代码/** *@描述: 矢量 函数 在二维及以上维度既有大小原创 2021-02-28 22:14:44 · 322 阅读 · 2 评论 -
HTML5游戏_基于DOM平台跳跃小游戏开发_6.动画帧
HTML5基于DOM平台跳跃小游戏开发动画帧本章的知识点:window.requestAnimationFrame() 告诉浏览器你希望执行一个动画,并且要求浏览器在下次重绘之前调用指定的回调函数更新动画.该方法需要传入一个回调函数作为参数,该回调函数会在浏览器下一次重绘之前执行requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒60帧。在隐藏或不可见的元素中，re原创 2021-02-28 00:19:41 · 374 阅读 · 0 评论 -
HTML5游戏_基于DOM平台跳跃小游戏开发_5.生成关卡地图
HTML5基于DOM平台跳跃小游戏开发生成关卡地图本章的知识点:对象.prototype.新属性或方法 prototype能使您有能力向对象添加属性和方法.现在我们要把解析出来的地图元素输出到浏览器中简单说下生成关卡地图的流程1.创建游戏场景正常来说我本在body中写一个div,class=游戏场景<body> <div class="游戏场景"></div></body>但这样需要手写,我们希望在js脚本里能自动生成原创 2021-02-27 01:14:11 · 661 阅读 · 0 评论 -
HTML5游戏_基于DOM平台跳跃小游戏开发_4.解析地图数组
HTML5基于DOM平台跳跃小游戏开发解析地图数组这一章我们就要开始接触JavaScript的一些基础知识了,我会在每章最前面列出本章会用到的相关知识,方便大家学习.变量 是数据值的容器,只有一个单一值.//这段代码把一个单一值（劳斯莱斯）赋给名为 汽车品牌 的变量：var 汽车品牌 = "劳斯莱斯";对象 也可以看作变量,但是对象包含很多值.每一个值都是对象的属性.//这段代码把多个属性（品牌, 型号, 排量）赋给名为 汽车 的对象var 汽车 = { 品牌: "劳斯莱斯原创 2021-02-26 17:48:56 · 272 阅读 · 0 评论 -
HTML5游戏_基于DOM平台跳跃小游戏开发_3.设计地图
HTML5基于DOM平台跳跃小游戏开发设计地图游戏截图地图数据使用二维字符串数组保存的地图数据墙体用字符"x"表示静止熔岩用字符"!"表示下落熔岩用字符"v"表示左右平移熔岩用字符"="表示上下浮动熔岩用字符"|"表示金币用字符"o"表示玩家初始位置用字符"@"表示如截图的地图使用二维字符串数组表示如下js代码//地图数组var 地图数组 = [ [ "原创 2021-02-25 22:43:01 · 353 阅读 · 0 评论 -
HTML5游戏_基于DOM平台跳跃小游戏开发_2.绘制方块
HTML5基于DOM平台跳跃小游戏开发绘制方块地图使用table标签来制作,所以每个方块就时一个td标签方块效果分析背景: 背景色#222墙体: 背景色#444,同时有3xp的线条边框并且颜色是#333熔岩: 背景色#e55,同时有15px的阴影并且颜色是#e55金币: 50%的圆角,背景色#e2e838,同时有3xp的线条边框并且颜色是#999900,最后有5px的阴影并且颜色是#ffff00玩家: 背景色#335699,同时有5px的内阴影并且颜色是#0099ffhtml代原创 2021-02-25 20:53:29 · 370 阅读 · 4 评论 -
HTML5游戏_基于DOM平台跳跃小游戏开发_1.游戏简介
HTML5基于DOM平台跳跃小游戏开发游戏效果图需要基础知识在您继续学习之前，您需要对以下内容拥有基本的了解：HTML基础标签CSS基础样式JavaScript基础方法开发运行环境运行环境:支持html5的浏览器开发环境:文本编辑器Dome网址https://www.html5tricks.com/demo/html5-simple-mario/index.html...原创 2021-02-25 17:40:02 · 386 阅读 · 0 评论