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

最新推荐文章于 2024-05-08 13:28:00 发布

iteye_19391

最新推荐文章于 2024-05-08 13:28:00 发布

阅读量282

点赞数

分类专栏： Translation 文章标签： html5 chrome safari

本文链接：https://blog.csdn.net/iteye_19391/article/details/82443214

版权

Translation 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

原文地址：[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. 绘图元素本身


<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);
    }
}

这就是第一步，未来我会发布新的内容。

iteye_19391

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【翻译】使用HTML5写游戏：第一步

原文地址：[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没玩过这游戏，可以试一下，有个免费的版本，不要怪...
复制链接

扫一扫

专栏目录