`
up2pu
  • 浏览: 224305 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

阅读更多
原文地址: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相关)

    2. HTML5:HTML5是HTML(超文本标记语言)的最新主要修订版,是一种用于创建网页的标准标记语言。它支持跨平台的开发,使得开发者能创建适合多种设备和浏览器的网页应用。 描述:“毕业翻译文献资料HTML5相关,英文...

    html5+Canvas+游戏开发实战

    总的来说,"HTML5+Canvas+游戏开发实战"是一本全面的指南,涵盖了从基础到高级的游戏开发技术,结合实际案例和库的使用,帮助开发者掌握HTML5游戏开发的核心技能。通过深入学习并实践书中的内容,你可以提升自己的...

    80个HTML5小游戏源码

    HTML5小游戏源码集合是一个非常宝贵的资源,尤其对于想要学习和提升HTML5游戏开发技能的开发者来说。这个压缩包包含了80个不同的小游戏,每个都是按照微信小游戏的标准和风格设计的,提供了丰富的实践素材和灵感来源...

    html5小游戏 接水果

    HTML5小游戏“接水果”是基于网页技术开发的一款娱乐应用,它模仿了Android平台上流行的小游戏,让玩家在网页环境中也能享受到类似的游戏体验。HTML5是超文本标记语言的第五个版本,它引入了许多新的特性和功能,极...

    好玩的H5小游戏源码

    这些游戏通常基于HTML5、CSS3和JavaScript技术构建,无需下载安装即可在浏览器上运行,极大地拓宽了游戏的分发和体验方式。以下是针对给定标题和描述中提及的H5小游戏源码的一些详细知识点: 1. **3D立体拼图**:这...

    h5游戏源码(5款)

    本压缩包包含了五款HTML5小游戏的源码,对于初学者或开发者来说,这是一个极好的学习资源,能够帮助理解和掌握HTML5游戏开发的核心技巧。 1. **HTML5基础知识**:HTML5是超文本标记语言的最新版本,引入了新的元素...

    基于html5打字游戏

    【基于HTML5打字游戏】是一种利用现代网页技术构建的互动学习工具,旨在提升用户的英文打字速度和准确性。此游戏充分利用了HTML5的强大功能,尤其是Canvas和JavaScript技术,为用户提供了一个直观、有趣的打字练习...

    HTML5制作的翻牌游戏

    HTML5制作的翻牌游戏是一种基于Web技术的互动游戏,主要利用HTML5、CSS和JavaScript等前端技术实现。这个游戏特别适合初学者学习和研究,因为它将基础的网页元素与交互功能巧妙结合,提供了直观的学习实践平台。 ...

    95个HTML5微信小游戏源码

    HTML5微信小游戏是一种基于HTML5技术开发的轻量级游戏,它们可以在微信内置浏览器中运行,无需用户下载安装,只需扫一扫或点击链接即可快速体验。这些小游戏通常利用了HTML5的Canvas、WebGL等图形渲染技术,以及Web ...

    HTML5游戏源代码集合

    HTML5有望成为网络游戏开发的热门新平台,其跨平台性已奠定了其未来发展的基础。本资源为那些愿意学习或使用HTML5及相关Web技术开发交互式游戏的开发者而编写,为大家讲解HTML5游戏开发基础教程及分享实战经验。

    几十个微信H5小游戏完整源码

    微信H5小游戏是一种基于HTML5技术开发的轻量级游戏,它们可以在微信浏览器环境中直接运行,无需用户下载安装,只需点击即可游玩。这些小游戏凭借其便捷性和趣味性,深受广大用户的喜爱。以下是一些关于“几十个微信...

    JS写的猜数的小游戏,一个是步数限制的,一个是限制时间的

    在这个JS编写的猜数字游戏中,我们有两个不同的版本:一个是基于步数限制的,另一个是基于时间限制的。这个游戏的核心逻辑是让玩家在限定的条件下猜测一个由程序随机生成的数字。接下来,我们将深入探讨这两个版本的...

    微信h5游戏源码

    微信H5游戏源码是指可以在微信环境中运行的HTML5游戏的源代码,这些游戏通常基于Web技术如HTML、CSS和JavaScript开发。H5游戏因为其跨平台性和轻量级特性,近年来在移动设备上广受欢迎,尤其在微信这样的社交平台上...

    40个H5小游戏完整源码-new

    标签中提到的"HTML5 游戏 俄罗斯方块"揭示了这个源码包中可能包括了一款或几款基于HTML5技术开发的俄罗斯方块游戏。俄罗斯方块是一款经典的游戏,其源码对于初学者理解游戏逻辑和H5游戏开发有很好的学习价值。HTML5...

    几款h5游戏附带源码

    9. Touch事件和移动优化:考虑到触屏设备的广泛使用,HTML5游戏需要对触摸事件进行支持,如`touchstart`、`touchmove`和`touchend`。同时,游戏应进行响应式设计,确保在不同屏幕尺寸和分辨率的设备上都能良好运行。...

    html5 小游戏

    话不多说html5 图画板写的一个小游戏 原形为是男人成果30秒 上下左右 wasd控制 ctrl键可加速

    200多套微信HTML5游戏小游戏源码

    1. HTML5基础:HTML5是超文本标记语言的第五次重大修订,引入了许多新的元素和API,如canvas(画布)、video(视频)、audio(音频)等,为游戏开发提供了可能。在这些源码中,我们可以看到如何使用HTML5的语义化...

    撞球游戏HTML5源码

    本压缩包中的"撞球游戏HTML5源码"就是一个很好的例子,展示了HTML5在游戏开发中的应用。 【Canvas图形绘制】 HTML5的Canvas元素是这个游戏的核心部分,它允许开发者通过JavaScript来动态绘制2D图形。在这个撞球游戏...

    HTML5 CSS3 :无插件拖拽上传图片实例源码

    HTML5和CSS3是现代网页开发的两大核心技术,它们提供了许多增强用户体验的新功能。在这个"HTML5 CSS3:无插件拖拽上传图片实例源码"中,我们重点关注的是利用HTML5的拖放(Drag and Drop)API以及File API来实现图片...

Global site tag (gtag.js) - Google Analytics