今天,我已经准备了一个新的游戏 – SkyWalker。基本上 – 这是用飞飞行模拟射击类游戏。我们的目标到达终点线。这个游戏还有其它一些特点,例如使用飞机运动动画和爆炸动画,多按键处理(例如同时移动和攻击),有 一定的水平长度,增强了碰撞检测(现在的敌人可能会损坏我们的飞机) ,生命值和分数等游戏参数。你可以点击这里阅读这一系列教程的前一篇文章:html5游戏制作入门系列教程(七)。我们将基于之前的程序和代码进行开发。
这里有我们的演示和下载包:
好吧,下载所需文件,让我们开始编码!
步骤1:HTML
下面是基本的HTML代码:
这里是我演示的HTML,非常简单,对不对?
<!DOCTYPE html> <html lang="en" > <head> <meta charset="utf-8" /> <meta name="author" content="Script Tutorials" /> <title>html5游戏制作入门系列教程(八)</title> <!-- add styles --> <link href="css/main.css" rel="stylesheet" type="text/css" /> <!-- add scripts --> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <script src="js/jquery.js"></script> <script src="js/script.js"></script> </head> <body> <header> <h2>html5游戏制作入门系列教程(八) (<a href="http://html5gamedev.org/?p=348">返回原文</a>)</h2> </header> <div class="container"> <canvas id="scene" width="700" height="700" tabindex="1"></canvas> </div> </body> </html>
步骤2:JS
// inner variables var canvas, ctx; // images var backgroundImage; var oRocketImage; var oExplosionImage; var introImage; var oEnemyImage; var iBgShiftY = 9300; //10000 (level length) - 700 (canvas height) var bPause = true; // game pause var plane = null; // plane object var rockets = []; // array of rockets var enemies = []; // array of enemies var explosions = []; // array of explosions var planeW = 200; // plane width var planeH = 110; // plane height var iSprPos = 2; // initial sprite frame for plane var iMoveDir = 0; // move direction var iEnemyW = 128; // enemy width var iEnemyH = 128; // enemy height var iRocketSpeed = 10; // initial rocket speed var iEnemySpeed = 5; // initial enemy speed var pressedKeys = []; // array of pressed keys var iScore = 0; // total score var iLife = 100; // total life of plane var iDamage = 10; // damage per enemy plane var enTimer = null; // random timer for a new enemy // ------------------------------------------------------------- // objects : function Plane(x, y, w, h, image) { this.x = x; this.y = y; this.w = w; this.h = h; this.image = image; this.bDrag = false; } function Rocket(x, y, w, h, speed, image) { this.x = x; this.y = y; this.w = w; this.h = h; this.speed = speed; this.image = image; } function Enemy(x, y, w, h, speed, image) { this.x = x; this.y = y; this.w = w; this.h = h; this.speed = speed; this.image = image; } function Explosion(x, y, w, h, sprite, image) { this.x = x; this.y = y; this.w = w; this.h = h; this.sprite = sprite; this.image = image; } // ------------------------------------------------------------- // get random number between X and Y function getRand(x, y) { return Math.floor(Math.random()*y)+x; } // Display Intro function function displayIntro() { ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); ctx.drawImage(introImage, 0, 0,700, 700); } // Draw Main scene function function drawScene() { if (! bPause) { iBgShiftY -= 2; // move main ground if (iBgShiftY < 5) { // Finish position bPause = true; // draw score ctx.font = '40px Verdana'; ctx.fillStyle = '#fff'; ctx.fillText('Finish, your score: ' + iScore * 10 + ' points', 50, 200); return; } // process pressed keys (movement of plane) processPressedKeys(); // clear canvas ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); // draw background ctx.drawImage(backgroundImage, 0, 0 + iBgShiftY, 700, 700, 0, 0, 700, 700); // draw plane ctx.drawImage(plane.image, iSprPos*plane.w, 0, plane.w, plane.h, plane.x - plane.w/2, plane.y - plane.h/2, plane.w, plane.h); // draw rockets if (rockets.length > 0) { for (var key in rockets) { if (rockets[key] != undefined) { ctx.drawImage(rockets[key].image, rockets[key].x, rockets[key].y); rockets[key].y -= rockets[key].speed; // if a rocket is out of screen - remove it if (rockets[key].y < 0) { delete rockets[key]; } } } } // draw explosions if (explosions.length > 0) { for (var key in explosions) { if (explosions[key] != undefined) { // display explosion sprites ctx.drawImage(explosions[key].image, explosions[key].sprite*explosions[key].w, 0, explosions[key].w, explosions[key].h, explosions[key].x - explosions[key].w/2, explosions[key].y - explosions[key].h/2, explosions[key].w, explosions[key].h); explosions[key].sprite++; // remove an explosion object when it expires if (explosions[key].sprite > 10) { delete explosions[key]; } } } } // draw enemies if (enemies.length > 0) { for (var ekey in enemies) { if (enemies[ekey] != undefined) { ctx.drawImage(enemies[ekey].image, enemies[ekey].x, enemies[ekey].y); enemies[ekey].y -= enemies[ekey].speed; // remove an enemy object if it is out of screen if (enemies[ekey].y > canvas.height) { delete enemies[ekey]; } } } } if (enemies.length > 0) { for (var ekey in enemies) { if (enemies[ekey] != undefined) { // collisions with rockets if (rockets.length > 0) { for (var key in rockets) { if (rockets[key] != undefined) { if (rockets[key].y < enemies[ekey].y + enemies[ekey].h/2 && rockets[key].x > enemies[ekey].x && rockets[key].x + rockets[key].w < enemies[ekey].x + enemies[ekey].w) { explosions.push(new Explosion(enemies[ekey].x + enemies[ekey].w / 2, enemies[ekey].y + enemies[ekey].h / 2, 120, 120, 0, oExplosionImage)); // delete enemy, rocket, and add +1 to score delete enemies[ekey]; delete rockets[key]; iScore++; } } } } // collisions with plane if (enemies[ekey] != undefined) { if (plane.y - plane.h/2 < enemies[ekey].y + enemies[ekey].h/2 && plane.x - plane.w/2 < enemies[ekey].x + enemies[ekey].w && plane.x + plane.w/2 > enemies[ekey].x) { explosions.push(new Explosion(enemies[ekey].x + enemies[ekey].w / 2, enemies[ekey].y + enemies[ekey].h / 2, 120, 120, 0, oExplosionImage)); // delete enemy and make damage delete enemies[ekey]; iLife -= iDamage; if (iLife <= 0) { // Game over bPause = true; // draw score ctx.font = '38px Verdana'; ctx.fillStyle = '#fff'; ctx.fillText('Game over, your score: ' + iScore * 10 + ' points', 25, 200); return; } } } } } } // display life and score ctx.font = '14px Verdana'; ctx.fillStyle = '#fff'; ctx.fillText('Life: ' + iLife + ' / 100', 50, 660); ctx.fillText('Score: ' + iScore * 10, 50, 680); } } // Process Pressed Keys function function processPressedKeys() { if (pressedKeys[37] != undefined) { // 'Left' key if (iSprPos > 0) { iSprPos--; iMoveDir = -7; } if (plane.x - plane.w / 2 > 10) { plane.x += iMoveDir; } } else if (pressedKeys[39] != undefined) { // 'Right' key if (iSprPos < 4) { iSprPos++; iMoveDir = 7; } if (plane.x + plane.w / 2 < canvas.width - 10) { plane.x += iMoveDir; } } } // Add Enemy function (adds a new enemy randomly) function addEnemy() { clearInterval(enTimer); var randX = getRand(0, canvas.height - iEnemyH); enemies.push(new Enemy(randX, 0, iEnemyW, iEnemyH, - iEnemySpeed, oEnemyImage)); var interval = getRand(1000, 4000); enTimer = setInterval(addEnemy, interval); // loop } // Main Initialization $(function(){ canvas = document.getElementById('scene'); ctx = canvas.getContext('2d'); // load background image backgroundImage = new Image(); backgroundImage.src = 'images/levelmap.jpg'; backgroundImage.onload = function() { } backgroundImage.onerror = function() { console.log('Error loading the background image.'); } introImage = new Image(); introImage.src = 'images/intro.jpg'; // initialization of empty rocket oRocketImage = new Image(); oRocketImage.src = 'images/rocket.png'; oRocketImage.onload = function() { } // initialization of explosion image oExplosionImage = new Image(); oExplosionImage.src = 'images/explosion.png'; oExplosionImage.onload = function() { } // initialization of empty enemy oEnemyImage = new Image(); oEnemyImage.src = 'images/enemy.png'; oEnemyImage.onload = function() { } // initialization of plane var oPlaneImage = new Image(); oPlaneImage.src = 'images/plane.png'; oPlaneImage.onload = function() { plane = new Plane(canvas.width / 2, canvas.height - 100, planeW, planeH, oPlaneImage); } $(window).keydown(function (evt){ // onkeydown event handle var pk = pressedKeys[evt.keyCode]; if (! pk) { pressedKeys[evt.keyCode] = 1; // add all pressed keys into array } if (bPause && evt.keyCode == 13) { // in case of Enter button bPause = false; // start main animation setInterval(drawScene, 30); // loop drawScene // and add first enemy addEnemy(); } }); $(window).keyup(function (evt) { // onkeyup event handle var pk = pressedKeys[evt.keyCode]; if (pk) { delete pressedKeys[evt.keyCode]; // remove pressed key from array } if (evt.keyCode == 65) { // 'A' button - add a rocket rockets.push(new Rocket(plane.x - 16, plane.y - plane.h, 32, 32, iRocketSpeed, oRocketImage)); } if (evt.keyCode == 37 || evt.keyCode == 39) { // revert plane sprite to default position if (iSprPos > 2) { for (var i = iSprPos; i >= 2; i--) { iSprPos = i; iMoveDir = 0; } } else { for (var i = iSprPos; i <= 2; i++) { iSprPos = i; iMoveDir = 0; } } } }); // when intro is ready - display it introImage.onload = function() { displayIntro(); // Display intro once } });
在主初始化函数里,加载所有要用到的图像(地图,介绍对话框,火箭,爆炸精灵,敌人和飞行器精灵)。接着,为了处理多个按键,我们必须使用一个数组 (pressedKeys)来存储所有按下的键(然后,在主场景的渲染,我们将使用该数组来操纵我们的飞机)。想要知道如何处理多个按键,看看这段代码:
var pressedKeys = []; // array of pressed keys $(window).keydown(function (evt){ // onkeydown event handle var pk = pressedKeys[evt.keyCode]; if (! pk) { pressedKeys[evt.keyCode] = 1; // add all pressed keys into array } }); $(window).keyup(function (evt) { // onkeyup event handle var pk = pressedKeys[evt.keyCode]; if (pk) { delete pressedKeys[evt.keyCode]; // remove pressed key from array } });
这项技术使我们能够轻松处理多个按键响应。那么,在主场景的渲染过程中,我们进行背景,主平面,火箭(我们的飞机),敌人和爆炸动画等对象的绘制。 一旦打中敌人, 触发绘制敌人爆炸的精灵动画。最后,只要敌人接触到我们的飞机 – 他们发生爆炸的同时也会损坏我们的飞机。而且,如果我们的生命值为零甚至更低,则游戏结束。为了实现碰撞和爆炸,我用下面的代码:
if (plane.y - plane.h/2 < enemies[ekey].y + enemies[ekey].h/2 && plane.x - plane.w/2 < enemies[ekey].x + enemies[ekey].w && plane.x + plane.w/2 > enemies[ekey].x) { explosions.push(new Explosion(enemies[ekey].x + enemies[ekey].w / 2, enemies[ekey].y + enemies[ekey].h / 2, 120, 120, 0, oExplosionImage)); // delete enemy and make damage delete enemies[ekey]; iLife -= iDamage; if (iLife <= 0) { // Game over bPause = true; // draw score ctx.font = '38px Verdana'; ctx.fillStyle = '#fff'; ctx.fillText('Game over, your score: ' + iScore * 10 + ' points', 25, 200); return; } }
步骤3:资源文件
游戏制作需要使用如下的游戏资源文件,包括图片和声音文件,这些你都可以在下载包中找到。
enemy.png, explosion.png, intro.jpg, levelmap.jpg, plane.png, rocket.png
结论
超级酷,不是吗?我会很高兴看到您的评论和意见。祝你好运!
转载请注明:HTML5游戏开发者社区 » html5游戏制作入门系列教程(八)
相关推荐
NULL 博文链接:https://justcoding.iteye.com/blog/2166578
NULL 博文链接:https://justcoding.iteye.com/blog/2166576
NULL 博文链接:https://justcoding.iteye.com/blog/2166903
NULL 博文链接:https://justcoding.iteye.com/blog/2166906
NULL 博文链接:https://justcoding.iteye.com/blog/2166904
NULL 博文链接:https://justcoding.iteye.com/blog/2166905
NULL 博文链接:https://justcoding.iteye.com/blog/2166577
Dreamweaver8 基础入门教程,TeliuTe系列教程之Dreamweaver8基础入门,一步一步教你学会Dreamweaver网页设计。 使用说明:解压后,请使用IE打开index.html即可。 1. 学习平台为Dreamweaver 8.0 中文版; 2. 本软件...
本套 《HTML5 零基础入门课程》,是专门面向未来的 web 开发人员打造的入门课程,零基础即可学习,从最简单的标签,一一讲解,不再纠结老式的 HTML4、XHTML1.0 的规范,直接上手 HTML5。为以后学习更深入的 web 开发...
系列文章 https://www.cnblogs.com/densen2014/p/16027851.html Blazor入门100天 演示地址:https://blazor.app1.es 1.使用JS隔离封装viewerjs库 2.使用JS隔离制作手写签名组件 3.使用JS隔离封装ZXing扫码 4.使用JS...
网管教程 从入门到精通软件篇 ★一。★详细的xp修复控制台命令和用法!!! 放入xp(2000)的光盘,安装时候选R,修复! Windows XP(包括 Windows 2000)的控制台命令是在系统出现一些意外情况下的一种非常有效的...
HTML 不是一种编程语言,而是一种标记语言 (markup language),是网页制作所必备的。 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML或XML等文件样式的计算机语言。 CSS不仅可以静态地修饰网页,...
5-4-4 设定图表的数据系列格式 5-5 关于窗体与数据输入的二三事 自我突破练习 第6章 无人能敌的数据查询 6-1 数据记录的排序技巧 6-1-1 设置升序或降序排序 6-1-2 使用筛选窗口设置排序方式 6-1-3 取消和应用...
5-4-4 设定图表的数据系列格式 5-5 关于窗体与数据输入的二三事 自我突破练习 第6章 无人能敌的数据查询 6-1 数据记录的排序技巧 6-1-1 设置升序或降序排序 6-1-2 使用筛选窗口设置排序方式 6-1-3 取消和应用...
你只需要30分钟就可以将PHP的核心语言特点全部掌握,你可能已经非常了解HTML,甚至你已经知道怎样用编辑设计软件或者手工来制作好看的WEB站点。由于PHP代码能够无障碍的添加进你的站点,在你设计和维护站点的同时,...
在写作的同时我参考了网上jQuery的系列教程文章, 在博客园和Google上并没有找到让我满意的系列教程. 我喜欢将知识系统的,深入浅出的讲解.不喜欢写那种"学习笔记"式的文章. 同时本系列将很快全部写完(有工作压力就是...
常用编码工具类,支持base64,md5,des,crc32 也谈谈技术面试 在C#里把ArrayList转换为Array 或 把Array转换为ArrayList C# 2.0 在.NET 2.0中,让你的组件也可以绑定 .NET20 一种简单的窗口控件UI状态控制方法 翻译MSDN...