原文地址:[url]http://jacebook.co.uk/blog/2010/09/11/html5-writing-a-game/[/url]
[align=center][size=large][b]使用HTML5写游戏:第一步[/b][/size][/align]
我原来为iPhone写过“弹跳动物”游戏(如果你有iPhone没玩过这游戏,可以试一下,有个免费的版本,不要怪我在这插播广告),现在想用HTML5实现一个同样的游戏。我也不知道为什么,可能只是觉得很有趣。我了解了很多内容并且希望能和大家在网上分享。
如果大家感兴趣,我会添加完整的功能(目前只是有个小熊可以跳来跳去,并有一些声音)并且用它作为学习HTML5的资料。我不知道你是怎么样的,但是如果我设置一个目标,我发现那比只是看看资料学习效果更明显。
我只在Chrome和Safari测试过,但是我也很希望知道它在其他浏览器是否有效,很显然,浏览器应该支持HTML5的特性,尤其是绘图和音频部分。
我在源代码中加了注释来说明它如何工作,但是如果有人在理解上有困难,可以发表评论,我会尽力解释清楚。
当前版本发布到这里[url]http://jacebook.co.uk/share/html5/[/url]。如果想了解创作游戏的过程就读下去吧。
[b]第一步:小熊原型,树木背景和音效[/b]
[b]HTML部分非常简单[/b]
1. 有一个按钮可以开始或者停止游戏
2. 有一个DIV包括一些样式,可以隐藏光标
3. 绘图元素本身
我打算用鼠标来控制蘑菇的移动(向左,向右)来拦住小动物。很显然,我没有使用iPhone上可用的加速计接口,与键盘相比我更倾向于鼠标。
[b]Javascript代码很直接,就是有点多。[/b]
这就是第一步,未来我会发布新的内容。
[align=center][size=large][b]使用HTML5写游戏:第一步[/b][/size][/align]
我原来为iPhone写过“弹跳动物”游戏(如果你有iPhone没玩过这游戏,可以试一下,有个免费的版本,不要怪我在这插播广告),现在想用HTML5实现一个同样的游戏。我也不知道为什么,可能只是觉得很有趣。我了解了很多内容并且希望能和大家在网上分享。
如果大家感兴趣,我会添加完整的功能(目前只是有个小熊可以跳来跳去,并有一些声音)并且用它作为学习HTML5的资料。我不知道你是怎么样的,但是如果我设置一个目标,我发现那比只是看看资料学习效果更明显。
我只在Chrome和Safari测试过,但是我也很希望知道它在其他浏览器是否有效,很显然,浏览器应该支持HTML5的特性,尤其是绘图和音频部分。
我在源代码中加了注释来说明它如何工作,但是如果有人在理解上有困难,可以发表评论,我会尽力解释清楚。
当前版本发布到这里[url]http://jacebook.co.uk/share/html5/[/url]。如果想了解创作游戏的过程就读下去吧。
[b]第一步:小熊原型,树木背景和音效[/b]
[b]HTML部分非常简单[/b]
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上可用的加速计接口,与键盘相比我更倾向于鼠标。
[b]Javascript代码很直接,就是有点多。[/b]
//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);
}
}
这就是第一步,未来我会发布新的内容。