html5游戏怎么写

1.HTML5游戏是怎么做的

从学习HTML开始,建议先去w3school找一些HTML教程,

再去买本HTML5的书研究网页。 最好还要学好css和JavaScript,这对于HTML的处理有很大作用的配合,而且最好能掌握jQuery。

都建议用引擎,其实现在压根没有什么很完善的HTML5游戏引擎,都处于发展阶段,本身HTML5就是新兴技术,入引擎首先得去理解引擎里各种组件,然后还未必知道组件为什么要这么写.

如何上手?

1,用canvas画张图片,写两个字

2,用循环函数改变图片和文字的属性让他们动起来

3,旋转,放大缩小,位移,混合,透明。.

4,绑定按键事件,去控制元素的属性

好了,差不多像个游戏了

这个过程会学到很多javascript的处理经验.比较懒的人就会开始想办法写对象复用调取和设置属性.

然后就会去考虑一些增加的部分:鼠标事件,触控事件,绘制性能优化,屏幕适配,资源载入。..

逐渐的就丰富起来了,就这样。

2.如何开发一个简单的html5小游戏

创建画布// Create the canvas var canvas = document.createElement("canvas"); var ctx = canvas.getContext("2d"); canvas.width = 512; canvas.height = 480; document.body.appendChild(canvas); 首先我们需要创建一张画布作为游戏的舞台。

这里通过JS代码而不是直接在HTML里写一个元素目的是要说明代码创建也是很方便的。有了画布后就可以获得它的上下文来进行绘图了。

然后我们还设置了画布大小,最后将其添加到页面上。准备图片// 背景图片 var bgReady = false; var bgImage = new Image(); bgImage.onload = function () { bgReady = true; }; bgImage.src = "images/background.png"; 游戏嘛少不了图片的,所以我们先加载一些图片先。

简便起见,这里仅创建简单的图片对象,而不是专门写一个类或者Helper来做图片加载。bgReady这个变量用来标识图片是否已经加载完成从而可以放心地使用了,因为如果在图片加载未完成情况下进行绘制是会报错的。

整个游戏中需要用到的三张图片:背景,英雄及怪物我们都用上面的方法来处理。游戏对象// 游戏对象 var hero = { speed: 256, // 每秒移动的像素 x: 0, y: 0 }; var monster = { x: 0, y: 0 }; var monstersCaught = 0; 现在定义一些对象将在后面用到。

我们的英雄有一个speed属性用来控制他每秒移动多少像素。怪物游戏过程中不会移动,所以只有坐标属性就够了。

monstersCaught则用来存储怪物被捉住的次数。处理用户的输入// 处理按键 var keysDown = {}; addEventListener("keydown", function (e) { keysDown[e.keyCode] = true; }, false); addEventListener("keyup", function (e) { delete keysDown[e.keyCode]; }, false); 现在开始处理用户的输入(对初次接触游戏开发的前端同学来说,这部分开始可能就需要一些脑力了)。

在前端开发中,一般是用户触发了点击事件然后才去执行动画或发起异步请求之类的,但这里我们希望游戏的逻辑能够更加紧凑同时又要及时响应输入。所以我们就把用户的输入先保存下来而不是立即响应。

为此,我们用keysDown这个对象来保存用户按下的键值(keyCode),如果按下的键值在这个对象里,那么我们就做相应处理。开始一轮游戏// 当用户抓住一只怪物后开始新一轮游戏 var reset = function () { hero.x = canvas.width / 2; hero.y = canvas.height / 2; // 将新的怪物随机放置到界面上 monster.x = 32 + (Math.random() * (canvas.width - 64)); monster.y = 32 + (Math.random() * (canvas.height - 64)); }; reset方法用于开始新一轮和游戏,在这个方法里我们将英雄放回画布中心同时将怪物放到一个随机的地方。

更新对象// 更新游戏对象的属性 var update = function (modifier) { if (38 in keysDown) { // 用户按的是↑ hero.y -= hero.speed * modifier; } if (40 in keysDown) { // 用户按的是↓ hero.y += hero.speed * modifier; } if (37 in keysDown) { // 用户按的是← hero.x -= hero.speed * modifier; } if (39 in keysDown) { // 用户按的是→ hero.x += hero.speed * modifier; } // 英雄与怪物碰到了么? if ( hero.x <= (monster.x + 32) && monster.x <= (hero.x + 32) && hero.y <= (monster.y + 32) && monster.y <= (hero.y + 32) ) { ++monstersCaught; reset(); } }; 这就是游戏中用于更新画面的update函数,会被规律地重复调用。首先它负责检查用户当前按住的是中方向键,然后将英雄往相应方向移动。

有点费脑力的或许是这个传入的modifier 变量。你可以在main 方法里看到它的来源,但这里还是有必要详细解释一下。

它是基于1开始且随时间变化的一个因子。例如1秒过去了,它的值就是1,英雄的速度将会乘以1,也就是每秒移动256像素;如果半秒钟则它的值为0.5,英雄的速度就乘以0.5也就是说这半秒内英雄以正常速度一半的速度移动。

理论上说因为这个update 方法被调用的非常快且频繁,所以modifier的值会很小,但有了这一因子后,不管我们的代码跑得快慢,都能够保证英雄的移动速度是恒定的。现在英雄的移动已经是基于用户的输入了,接下来该检查移动过程中所触发的事件了,也就是英雄与怪物相遇。

这就是本游戏的胜利点,monstersCaught +1然后重新开始新一轮。渲染物体// 画出所有物体 var render = function () { if (bgReady) { ctx.drawImage(bgImage, 0, 0); } if (heroReady) { ctx.drawImage(heroImage, hero.x, hero.y); } if (monsterReady) { ctx.drawImage(monsterImage, monster.x, monster.y); } // 计分 ctx.fillStyle = "rgb(250, 250, 250)"; ctx.font = "24px Helvetica"; ctx.textAlign = "left"; ctx.textBaseline = "top"; ctx.fillText("Monsterrs caught: " + monstersCaught, 32, 32); }; 之前的工作都是枯燥的,直到你把所有东西画出来之后。

首先当然是把背景图画出来。然后如法炮制将英雄和怪物也画出来。

这个过程中的顺序是有讲究的,因为后画的物体会覆盖之前的物体。这之后我们改变了一下Canvas的绘图上下文的样式并调用fillText来绘制文字,也就是记分板那一部分。

本游戏没有其他复杂的动画效果和打斗场面,绘制部分大功告成!主循环函数// 游戏主函数 var main = function () { var now = Date.now(); var 。

3.为什么我要自己写html5游戏引擎

用html5写游戏,会面临一系列的问题,情况很复杂。而当下热衷于html5开发游戏的,有两拨不同的人——熟悉dom、css、js、web2.0的传统前端开发工程师和熟悉canvas的传统游戏开发工程师。这两拨人的背景截然不同,所以在很多问题的处理上有出入。

1)js语法简单,很多高级一点的语法特性都没有,不适合直接拿来开发大型项目。

js核心语法只经过一个星期就设计完成了,很仓促。它在设计之初主要是为是给页面写一点“表单验证”之类的小功能,它是基于对象的语言,但extend、mix-in、import等语法都没有提供,因为打从一开始js之父从没想过有一天js会变得如此重要。在web2.0时代,有大量的DHTML需求,所以大型一些的js框架都会着手解决“大型项目可维护性”方面的问题,扩展js语言,通过封装api模拟高级语法特性,例如YUI3和Dojo。

extend和mix-in之类的还好解决一点,特别值得一提的是js模块化问题。js原生不提供import和包的机制,所以聪明的工程师自己封装了相关的api,更在近两年形成了commonJS规范。模块化、动态加载、依赖处理非常非常重要,不解决这个问题,很难优雅地处理大型项目。

html5游戏,首先它得是个js大型项目。web site在这些年积累了很多这方面的经验,html5游戏开发者应该吸收这些经验,不要写出web2.0以前的js代码水平。

2)html5是web前端技术,有web方面的特殊性。

比如说跨域问题、5游戏引擎是不方便处理这些的。这些内容可以交给传统前端的框架来做。

3)canvas和DOM,不同的GUI套路。

这是个巨大的鸿沟。前端们非常熟悉的三大基本元素html + css + js,传统游戏开发工程师们很陌生。特别是神器css,传统游戏工程师们很排斥,他们知道这个东西很好,却提不起兴趣学习,他们害怕浏览器兼容问题。他们号称开发html5游戏,其实只敢用canvas相关的子集。现在绝大多数的html5游戏引擎都是基于canvas的,纯canvas。

其实css是个巨大的神器,在GUI编程方面性价比奇高。css的api设计得如此简单却出奇强大!在桌面端已经有很多软件使用c++做个框,框里套个html,所有的GUI全是用html+css+js来实现的。在移动终端phonegap也是同样的思路。

纯canvas虽然省却了css、dom、浏览器兼容的学习成本,却主动放弃了css和dom引擎提供的大量帮助。捡芝麻丢西瓜。

4)大量不同终端和平台的适配。

html5适用的终端包括pc、移动设备甚至平板电视。操作系统有windows、ios、android、win8等主流平台,还有blackberry、web os、chrome os、ubuntu touch、firefox os,甚至wii u等非主流平台。不同的操作系统、不同分辨率、不同物理尺寸。游戏的尺寸该如何取舍?是放任缩放还是做响应式设计?浏览器能否全屏?浏览器状态栏有多高?是否是从主屏打开的(ios设备)?是横屏还是竖屏?

除了上面的这些操作系统,还有人人网、微博、微信这样的平台,也是html5游戏可以发布的地方,这些地方对接入的游戏尺寸又有哪些要求和限制?我能改页面的viewport吗?还是要将游戏的根结点进行scale缩放?

除了游戏的尺寸要适配,还有输入设备也要适配。pc的输入设备是键盘和鼠标,移动设备的输入设备是触摸屏和重力感应。什么设备使用虚拟十字键,什么设备键盘操作就行了,我们还需要对当前的终端做嗅探。

适配问题是个巨大的问题,终端多也就罢了,还很可能在不停地变化,系统升个级或者出来个新设备什么的,适配方面的工作还得持续更新。这些,游戏引擎们考虑过吗?考虑得完善,能应付我的定制需要吗?引擎更新得频繁和及时吗?

4.如何开发一个简单的html5小游戏

首先我们需要创建一张画布作为游戏的舞台。

这里通过JS代码而不是直接在HTML里写一个元素目的是要说明代码创建也是很方便的。有了画布后就可以获得它的上下文来进行绘图了。

然后我们还设置了画布大小,最后将其添加到页面上。 准备图片 // 背景图片 var bgReady = false; var bgImage = new Image(); bgImage.onload = function () { bgReady = true; }; bgImage.src = "images/background.png"; 游戏嘛少不了图片的,所以我们先加载一些图片先。

简便起见,这里仅创建简单的图片对象,而不是专门写一个类或者Helper来做图片加载。bgReady这个变量用来标识图片是否已经加载完成从而可以放心地使用了,因为如果在图片加载未完成情况下进行绘制是会报错的。

整个游戏中需要用到的三张图片:背景,英雄及怪物我们都用上面的方法来处理。 游戏对象 // 游戏对象 var hero = { speed: 256, // 每秒移动的像素 x: 0, y: 0 }; var monster = { x: 0, y: 0 };。

html5游戏怎么写

转载请注明出处育才学习网 » html5游戏怎么写

知识

足字古代怎么写

阅读(201)

本文主要为您介绍足字古代怎么写,内容包括足字的古代用法,足字繁体字怎么写,“足”字的繁体字怎么写。◎ 足 zú 〈名〉(1) 会意。甲骨文字形,上面的方口象膝,下面的“止”即脚,合起来指整个脚。本义:脚(2) 同本义。秦汉以前,“足”

知识

张姓英文怎么写

阅读(262)

本文主要为您介绍张姓英文怎么写,内容包括张姓英文缩写怎么写,张姓的英文姓氏怎么拼写,姓张的英文名。“Cheung”和“Chang”两种表达方式都存在,按不同情况可以甄别使用,具体标准如下:按中国国内的标准: Zhang;2、按港澳的英

知识

小篆的天怎么写

阅读(179)

本文主要为您介绍小篆的天怎么写,内容包括小篆的天字怎么写,小篆体的天字怎么写,天字篆书怎么写。天字的小篆写法如下图:拼音:tiān部首:一部外笔画:3总笔画:4五笔86&98:GDI结构:独体字笔顺读写:横、横、撇、捺释义:1.天

知识

css怎么写圆形

阅读(211)

本文主要为您介绍css怎么写圆形,内容包括怎样用CSS写出圆形的样式表,怎样用css写出圆形边框,怎么用CSS做出一个圆图。制作圆形:要使用CSS来制作一个圆形,我们需要一个div,被给它设置一个ID<div id="circle"></div> 圆形在设置C

知识

娱乐场所日志怎么写

阅读(187)

本文主要为您介绍娱乐场所日志怎么写,内容包括怎么写对娱乐场所的建议,娱乐场所如何建立营业日志,怎样写对娱乐场所的建议。娱乐场所基本情况年报填写有如下内容:详细填写企业的具体位置、电话、经营规模;2、企业所属的部门判别(娱乐场所一般

知识

江南春古诗怎么写

阅读(166)

本文主要为您介绍江南春古诗怎么写,内容包括江南春的古诗怎么写,江南春的古诗怎么写,古诗:江南春怎么写。江南春唐代:杜牧千里莺啼绿映红,水村山郭酒旗风。 南朝四百八十寺,多少楼台烟雨中。

知识

里的笔顺笔画怎么写

阅读(173)

本文主要为您介绍里的笔顺笔画怎么写,内容包括里面的里的笔顺怎么写,里的笔顺怎么写,“里”的笔顺怎么写。里面的“里”的笔顺写法是:竖、横折、横、横、竖、横、横、

知识

祝商祺的格式怎么写

阅读(464)

本文主要为您介绍祝商祺的格式怎么写,内容包括顺颂商祺的正确格式是什么,祝商祺的具体格式是什么,顺颂商祺使用格式。顺颂商祺,顺便祝你工作顺利的意思。过去多用于信函的结尾,“祺”有吉祥之意,书写格式为可以在正文结束后,另起一行写,行首空两

知识

怎么写我的另类妈妈

阅读(180)

本文主要为您介绍怎么写我的另类妈妈,内容包括我的另类妈妈作文800字,我的另类老妈作文,作文,《我的另类胖妈妈》读后感怎么写。我放学回家刚打开家门,就听见满屋子回旋着《猪之歌》,走进去一看,客厅的沙发上斜躺着一个美女,一边跟着哼哼,一边忙

知识

沙龙反馈怎么写

阅读(188)

本文主要为您介绍沙龙反馈怎么写,内容包括家长反馈意见怎么写,作业反馈怎么写,意见反馈表怎么写。家长意见和建议的写法 (共4篇范文)在这段时间里,孩子的进步较大。这离不开老师的精心培育,孩子进步的一点一滴都悄悄的刻在我们心里。作为家

知识

qq点击代码怎么写

阅读(172)

本文主要为您介绍qq点击代码怎么写,内容包括谁知道直接输入QQ号点击开始聊天的代码,点击图片加qq的代码怎么写,急求呀,QQ代码怎么用。1.3DQQ秀:去3D网站上登陆一下就可以,但是有时点亮过程慢,如果登陆完没亮那过2天再试下(免费,可亮) 2.摄像头:只

知识

拼音ai的格式怎么写

阅读(548)

本文主要为您介绍拼音ai的格式怎么写,内容包括所有汉字拼音ai字写法及意思,拼音“ai”怎么读,拼音ai怎么读。开 kāi <动> (会意。小篆字形,两边是两扇门,中间一横是门闩,下面是一双手,表示两手打开门闩之意。本义:开门) 开(开)kāi ⒈

知识

红领巾报作文怎么写

阅读(180)

本文主要为您介绍红领巾报作文怎么写,内容包括作文《红领巾》怎么写,请问,作文、红领巾怎么写,我爱红领巾作文怎么写。红领巾,这是一个多么光荣的称号啊!在一到六年级的生活中,红领巾成了我生活的一部分,它时时刻刻激励着我奋发向前,取得了一次

知识

年度考核登记表怎么写

阅读(300)

本文主要为您介绍年度考核登记表怎么写,内容包括工作人员年度考核登记表怎么填,事业单位年度考核登记表怎么填,教师年度考核登记表怎么填。姓 名 *** 性 别 女 年 龄 ** 政治面貌 ** 文化程度 ** 现任职务 **** 任职时间 ** 岗位职责 承担

知识

游戏串词怎么写

阅读(237)

本文主要为您介绍游戏串词怎么写,内容包括晚会游戏节目串词,年会主持的抽奖和游戏串词应该怎么写呢,晚会游戏节目串词。现在看见你的问题还来得及不?把我给别人编的串词答案给你看一下作为参考吧,如果还需要帮助就请追问一下,我再帮你解决!1.开

知识

游戏开始英文怎么写

阅读(962)

本文主要为您介绍游戏开始英文怎么写,内容包括游戏开始的英文怎么写,游戏开始用英文怎么写,游戏开始了英语怎么说。“游戏开始”用英文最标准的是:GAME STARTgame start 英 [ɡeɪm stɑːt] 美 [ɡeɪm stɑːrt]释义

知识

找游戏cp怎么写

阅读(186)

本文主要为您介绍找游戏cp怎么写,内容包括想发一天在游戏里找游戏cp的帖子,应该在游戏里怎么说,会更好找,我同桌男的找我打游戏,还在游戏中成Cp,说明什么,找了个游戏cp。嗯额。网上处cp就处呗。反正是虚拟的世界 ,又发生不了大事。除非他想

知识

介绍游戏的作文怎么写

阅读(160)

本文主要为您介绍介绍游戏的作文怎么写,内容包括作文你喜欢的游戏介绍一下,作文你喜欢的游戏介绍一下,要介绍一种我们玩的游戏,写一篇400字左右的作文。题目为老鹰抓小鸡今天,天高云淡,瓦蓝的天空飘着朵朵白云。 在一片绿草如茵的草地上,一只

知识

怎么写游戏的世界观

阅读(186)

本文主要为您介绍怎么写游戏的世界观,内容包括写一个游戏的世界观需要哪些部分,游戏中的世界观在哪里可以看见想找一个作参照谁能给一个较好范例,如何写好游戏世界观衍生小说。什么是游戏世界观? 这样宏大的话语是每一个游戏参与者必须面对

知识

旁观者游戏怎么写报告

阅读(259)

本文主要为您介绍旁观者游戏怎么写报告,内容包括旁观者beholder游戏怎么剪反政府标语,在游戏中怎样学做一个旁观者在游戏中怎样学做一个旁观者爱问知,游戏的评测报告怎么写。1. 大致上是:搜索房子 道具下面有红字点一下 发现特性 报告就完成

知识

幼儿游戏故事怎么写

阅读(220)

本文主要为您介绍幼儿游戏故事怎么写,内容包括幼儿园大班户外体育游戏故事怎么写,幼儿成长故事怎么写,幼儿成长故事怎么写。我的成长故事 ** 大家好,我叫***,我今年6岁了,很高兴在这里和大家一起分享我的成长故事,首先我要和大家分享的是我成长

知识

游戏qq群介绍怎么写

阅读(187)

本文主要为您介绍游戏qq群介绍怎么写,内容包括建qq群的群介绍怎么写,QQ群简介怎么写,群介绍怎么填写。主要看你建群是准备做什么,如果是玩玩,就写你这个群是干嘛的就行,如果你要做群排名,让更多的人收到你,那你必须要写你要做的关键词。长期潜水

[/e:loop]