原文地址:
http://jacebook.co.uk/blog/2010/09/11/html5-writing-a-game/
使用HTML5写游戏:第一步
我原来为iPhone写过“弹跳动物”游戏(如果你有iPhone没玩过这游戏,可以试一下,有个免费的版本,不要怪我在这插播广告),现在想用HTML5实现一个同样的游戏。我也不知道为什么,可能只是觉得很有趣。我了解了很多内容并且希望能和大家在网上分享。
如果大家感兴趣,我会添加完整的功能(目前只是有个小熊可以跳来跳去,并有一些声音)并且用它作为学习HTML5的资料。我不知道你是怎么样的,但是如果我设置一个目标,我发现那比只是看看资料学习效果更明显。
我只在Chrome和Safari测试过,但是我也很希望知道它在其他浏览器是否有效,很显然,浏览器应该支持HTML5的特性,尤其是绘图和音频部分。
我在源代码中加了注释来说明它如何工作,但是如果有人在理解上有困难,可以发表评论,我会尽力解释清楚。
当前版本发布到这里
http://jacebook.co.uk/share/html5/。如果想了解创作游戏的过程就读下去吧。
第一步:小熊原型,树木背景和音效
HTML部分非常简单
1. 有一个按钮可以开始或者停止游戏
2. 有一个DIV包括一些样式,可以隐藏光标
3. 绘图元素本身
<body>
<input id="ss" type="button" value="start/stop"/>
<div id="container" style="border:1px solid; cursor:none; width:480px; height:320px;">
<canvas id="canvas" width="480" height="320" >
</canvas>
</div>
</body>
我打算用鼠标来控制蘑菇的移动(向左,向右)来拦住小动物。很显然,我没有使用iPhone上可用的加速计接口,与键盘相比我更倾向于鼠标。
Javascript代码很直接,就是有点多。
//Variables to handle game parameters
var gameloopId;
var speed=2;
var horizontalSpeed = speed;
var verticalSpeed = speed;
var bearX=100;
var bearY=100;
var screenWidth;
var screenHeight
var gameRunning = false;
var mushroomX;
var mushroomY;
var ctx;
//Create images
var mushroomImg = new Image();
var backgroundForestImg = new Image();
var bearEyesOpenImg = new Image();
var bearEyesClosedImg = new Image();
//Create and load sounds
var boing1 = new Audio("sounds/boing_1.mp3");
var boing2 = new Audio("sounds/boing_2.mp3");
var boing3 = new Audio("sounds/boing_3.mp3");
var boing4 = new Audio("sounds/boing_4.mp3");
var boing5 = new Audio("sounds/boing_5.mp3");
var awwwww = new Audio("sounds/crowdgroan.mp3");
//Wait for DOM to load and init game
$(document).ready(function(){
init();
});
function init(){
initSettings();
loadImages();
//add event handler to surrounding DIV to monitor mouse move and update mushroom's x position
$("#container").mousemove(function(e){
mushroomX = e.pageX;
});
//add event handler for clicking on start/stop button and toggle the game play
$("#ss").click(function (){
toggleGameplay();
});
}
function initSettings()
{
//Get a handle to the 2d context of the canvas
ctx = document.getElementById('canvas').getContext('2d');
//Calulate screen height and width
screenWidth = parseInt($("#canvas").attr("width"));
screenHeight = parseInt($("#canvas").attr("height"));
//center mushroom on the horizontal axis
mushroomX = parseInt(screenWidth/2);
mushroomY = screenHeight - 40;
}
//load all images for game
function loadImages()
{
mushroomImg.src = "images/mushroom.png";
backgroundForestImg.src = "images/forest1.jpg";
bearEyesOpenImg.src = "images/bear_eyesopen.png";
bearEyesClosedImg.src = "images/bear_eyesclosed.png";
}
//Main game loop, it all happens here!
function gameLoop(){
//Clear the screen (i.e. a draw a clear rectangle the size of the screen)
ctx.clearRect(0, 0, screenWidth, screenHeight);
ctx.save();
//Move the bear in the current direction
bearX+= horizontalSpeed;
bearY += verticalSpeed;
//Draw the backgrounf forest
ctx.drawImage(backgroundForestImg, 0, 0);
//Draw the mushroom
ctx.drawImage(mushroomImg, mushroomX, mushroomY);
//Draw the bear (if he's going down open eyes!)
if(verticalSpeed>0)
{
ctx.drawImage(bearEyesOpenImg, bearX, bearY);
}
else
{
ctx.drawImage(bearEyesClosedImg, bearX, bearY);
}
ctx.restore();
//Has the bear reached the far right hand side?
if(bearX>screenWidth - bearEyesOpenImg.width)
{
//bouncing off the right hand side so play boing and reverse horizontal speed
boing2.play();
horizontalSpeed =-speed;
}
//Has bear reached the far left hand side?
if(bearX<0)
{
//bouncing off the left hand side so play boing and reverse horizontal speed
boing3.play();
horizontalSpeed = speed;
}
//Has bear hit the bottom of the screen - Ouch!
if(bearY>screenHeight - bearEyesOpenImg.height)
{
//Bouncing off bottom, so play boing and reverse vertical speed
awwwww.play();
verticalSpeed = -speed;
toggleGameplay();
}
//Has bear hit to the top of the screen
if(bearY<0)
{
//Bouncing off top, so play boing and reverse vertical speed
boing4.play();
verticalSpeed = speed;
}
//Has bear hit mushroom
if((bearX>mushroomX && bearX< (mushroomX + mushroomImg.width)) && (bearY>(screenHeight - 80)))
{
boing1.play();
verticalSpeed = -speed;
}
}
//Start/stop the game loop (and more importantly that annoying boinging!)
function toggleGameplay()
{
gameRunning = !gameRunning;
if(gameRunning)
{
clearInterval(gameloopId);
gameloopId = setInterval(gameLoop, 10);
}
else
{
clearInterval(gameloopId);
}
}
这就是第一步,未来我会发布新的内容。
分享到:
相关推荐
本示例是使用HTML5代码写的飞机射击游戏,游戏简单易上手,而且代码详尽,非常适合学习。 游戏规则:A为进攻。左右方向键控制方向。 建议开发童鞋使用统一开发环境UDE来进行查看、调试、开发~~~统一开发环境是一款...
这款《狙击野鸭》的游戏就是用纯 Javascript写成的,作者用了20个小时开发出来这个500行js代码的游戏,虽然比不上“愤怒的小鸟”,但各种游戏元素基本都有,如果能经过精 心对它再设计,我相信它完全不会输于愤怒的...
这是一款HTML5实现的街头霸王游戏源码,游戏中可以操控人物各项技能,并且能实现大战电脑或双人对战,游戏中还附有背景音乐效果。此外这款游戏源码开放,是研究和学习html5游戏制作的极佳参考! 游戏说明如下: ...
NULL 博文链接:https://nhy520.iteye.com/blog/1948460
开源html5格斗游戏源码(支持网络对战),名为mk.js,带服务端,使用HTML5 canvas和javascript编写 mk.js共有三种游戏模式: 基本模式:只能操纵一个角色 多人模式:允许两个玩家在一台电脑上对战 网络模式:允许两...
第一步: 新建一个web项目 将bootstrap下载下来的文件放入WEB-INF下面的,lib目录下,新建一个bootstrap文件: 第二步: 新建一个index.jsp文件,引入所使用的css.js和bootstrap的: 注意这里的要缓存<!DOCTYPE ...
HTML5: 用于构建游戏的基本结构和画布。 JavaScript: 用于实现游戏逻辑和交互功能。 资源文件: 游戏场景中使用的图片。 游戏功能: 游戏初始化: 加载游戏资源,初始化游戏画布、场景、鱼群、子弹等对象。 游戏循环:...
HTML5有望成为网络游戏开发的热门新平台,其跨平台性已奠定了其未来发展的基础。本资源为那些愿意学习或使用HTML5及相关Web技术开发交互式游戏的开发者而编写,为大家讲解HTML5游戏开发基础教程及分享实战经验。
一个用html5开发的弹球小游戏,涉及技术包括画布的使用及碰撞检测
包含:别踩白块儿、大鱼吃小鱼、弹球打砖块、飞机大战、青蛙吃苍蝇、青蛙吃苍蝇、一个都不能死、蜘蛛纸牌 1.网页作品简介 :HTML期末大学生网页设计作业 A+水平 ,喜欢的可以下载,文章页支持手机PC响应式布局。 2....
名称:BubbleBreak 类型:摄像头互动游戏 开发工具:vs2008 技术平台:MFC OpenCV directShow 作者:FIA E-mail:iamfia@sina.com 完全开源,仅供参考
话不多说html5 图画板写的一个小游戏 原形为是男人成果30秒 上下左右 wasd控制 ctrl键可加速
HTML5游戏源码,各个好用,非常好玩,下面小编整理了一些最近很火的微信游戏,上传到空间主机即可。 游戏有:2048、全民寻找房祖名、数钱数到手抽筋、疯狂打企鹅、暴打神经猫、切西瓜、激光战警、微信找你妹、疯狂挠...
第一本:[HTML5绘图].(HTML5.Canvas).Steve.Fulton&Jeff.Fulton.文字版; 第二本:Building Websites with HTML5 to Work with Mobile Phones; 第三本:Rockable.Decoding.HTML5.2012.RETAIL.eBook-repackb00k...
该源码仅供学习使用,欢迎访问我的博客:http://blog.csdn.net/crow_html5
这个是我做的第一个html5的小游戏DEMO,可以直接用浏览器打开,如果浏览器不支持html5的话,可以装一个chrome来运行。游戏用的是第三方的开源引擎做的,代码不多,结构简单。为了方便新手来一起学习HTML5游戏的开发...
《HTML5 Canvas核心技术:图形、动画与游戏开发》是HTML5 Canvas领域的标杆之作,也是迄今为止该领域内容最为全面和深入的著作之一,是公认的权威经典、Amazon五星级超级畅销书、资深技术专家David Geary最新力作。...
使用html5 canvas标签实现手写 但是效果不是很好 没有笔锋 后续慢慢改进 感谢实现过程中帮助我的人
使用html5编写的一个简单的3D圣诞树网页,希望能有所帮助
第一步:确保本机已安装八爪鱼采集软件,并已有帐号登录使用 第二步:双击.otd后缀的文件,等待启动导入程序 第三步:导入程序启动后,按提示操作即可。 八爪鱼下载、更多精彩视频教程、免费规则请前往八爪鱼大学:...