【翻译】使用HTML5写游戏：第一步

帅的相对论

2012-11-18

原文地址：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 var