(译)开发第一个Html5游戏(四)
本章我们继续学习用Html5 canvans 开发游戏,本章我们将加入播放声音功能,以及让游戏精灵跟随我们的鼠标运动。
JS代码:(完整代码请看文章结尾链接)
// inner variables
var canvas, ctx;
var backgroundImage;
var iBgShiftX = 100;
var dragon;
var dragonW = 75; // dragon width
var dragonH = 70; // dragon height
var iSprPos = 0; // initial sprite frame
var iSprDir = 4; // initial dragon direction
var dragonSound; // dragon sound
var wingsSound; // wings sound
var bMouseDown = false; // mouse down state
var iLastMouseX = 0;
var iLastMouseY = 0;
// -------------------------------------------------------------
// objects :
function Dragon(x, y, w, h, image) {
this.x = x;
this.y = y;
this.w = w;
this.h = h;
this.image = image;
this.bDrag = false;
}
// -------------------------------------------------------------
// draw functions :
function clear() { // clear canvas function
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}
function drawScene() { // main drawScene function
clear(); // clear canvas
// draw background
iBgShiftX -= 4;
if (iBgShiftX <= 0) {
iBgShiftX = 1045;
}
ctx.drawImage(backgroundImage, 0 + iBgShiftX, 0, 1000, 940, 0, 0, 1000, 600);
// update sprite positions
iSprPos++;
if (iSprPos >= 9) {
iSprPos = 0;
}
// in case of mouse down - move dragon more close to our mouse
if (bMouseDown) {
if (iLastMouseX > dragon.x) {
dragon.x += 5;
}
if (iLastMouseY > dragon.y) {
dragon.y += 5;
}
if (iLastMouseX < dragon.x) {
dragon.x -= 5;
}
if (iLastMouseY < dragon.y) {
dragon.y -= 5;
}
}
// draw dragon
ctx.drawImage(dragon.image, iSprPos*dragon.w, iSprDir*dragon.h, dragon.w, dragon.h, dragon.x - dragon.w/2, dragon.y - dragon.h/2, dragon.w, dragon.h);
}
// -------------------------------------------------------------
// initialization
$(function(){
canvas = document.getElementById('scene');
ctx = canvas.getContext('2d');
var width = canvas.width;
var height = canvas.height;
// load background image
backgroundImage = new Image();
backgroundImage.src = 'images/hell.jpg';
backgroundImage.onload = function() {
}
backgroundImage.onerror = function() {
console.log('Error loading the background image.');
}
// 'Dragon' music init
dragonSound = new Audio('media/dragon.wav');
dragonSound.volume = 0.9;
// 'Wings' music init
wingsSound = new Audio('media/wings.wav');
wingsSound.volume = 0.9;
wingsSound.addEventListener('ended', function() { // looping wings sound
this.currentTime = 0;
this.play();
}, false);
wingsSound.play();
// initialization of dragon
var oDragonImage = new Image();
oDragonImage.src = 'images/dragon.gif';
oDragonImage.onload = function() {
}
dragon = new Dragon(400, 300, dragonW, dragonH, oDragonImage);
$('#scene').mousedown(function(e) { // binding mousedown event (for dragging)
var mouseX = e.layerX || 0;
var mouseY = e.layerY || 0;
if(e.originalEvent.layerX) { // changes for jquery 1.7
mouseX = e.originalEvent.layerX;
mouseY = e.originalEvent.layerY;
}
bMouseDown = true;
if (mouseX > dragon.x- dragon.w/2 && mouseX < dragon.x- dragon.w/2 +dragon.w &&
mouseY > dragon.y- dragon.h/2 && mouseY < dragon.y-dragon.h/2 +dragon.h) {
dragon.bDrag = true;
dragon.x = mouseX;
dragon.y = mouseY;
}
});
$('#scene').mousemove(function(e) { // binding mousemove event
var mouseX = e.layerX || 0;
var mouseY = e.layerY || 0;
if(e.originalEvent.layerX) { // changes for jquery 1.7
mouseX = e.originalEvent.layerX;
mouseY = e.originalEvent.layerY;
}
// saving last coordinates
iLastMouseX = mouseX;
iLastMouseY = mouseY;
// perform dragon dragging
if (dragon.bDrag) {
dragon.x = mouseX;
dragon.y = mouseY;
}
// change direction of dragon (depends on mouse position)
if (mouseX > dragon.x && Math.abs(mouseY-dragon.y) < dragon.w/2) {
iSprDir = 0;
} else if (mouseX < dragon.x && Math.abs(mouseY-dragon.y) < dragon.w/2) {
iSprDir = 4;
} else if (mouseY > dragon.y && Math.abs(mouseX-dragon.x) < dragon.h/2) {
iSprDir = 2;
} else if (mouseY < dragon.y && Math.abs(mouseX-dragon.x) < dragon.h/2) {
iSprDir = 6;
} else if (mouseY < dragon.y && mouseX < dragon.x) {
iSprDir = 5;
} else if (mouseY < dragon.y && mouseX > dragon.x) {
iSprDir = 7;
} else if (mouseY > dragon.y && mouseX < dragon.x) {
iSprDir = 3;
} else if (mouseY > dragon.y && mouseX > dragon.x) {
iSprDir = 1;
}
});
$('#scene').mouseup(function(e) { // binding mouseup event
dragon.bDrag = false;
bMouseDown = false;
// play dragon sound
dragonSound.currentTime = 0;
dragonSound.play();
});
setInterval(drawScene, 30); // loop drawScene
});
原文地址 http://www.script-tutorials.com/html5-game-development-lesson-4/
Demo地址 http://www.script-tutorials.com/demos/186/index.html
源码下载 http://www.script-tutorials.com/demos/186/source.zip
分享到:
相关推荐
本资源“新手入门级html5游戏开发源码(蘑菇熊)”是一个很好的起点,它提供了一系列逐步教程,帮助初学者理解游戏开发的核心概念。 首先,我们来看标题中的"蘑菇熊",这很可能是游戏的主题或主角,展示了如何设计...
HTML5游戏开发素材 HTML5游戏开发素材 HTML5游戏开发素材 HTML5游戏开发素材
《HTML5 Canvas游戏开发实战》.(张路斌).pdf电子高清扫描版
HTML5小游戏源码集合是一个非常宝贵的资源,尤其对于想要学习和提升HTML5游戏开发技能的开发者来说。这个压缩包包含了80个不同的小游戏,每个都是按照微信小游戏的标准和风格设计的,提供了丰富的实践素材和灵感来源...
HTML5游戏开发是近年来随着移动互联网发展而兴起的一个热门领域,尤其在《Jungle Man》这样的游戏中得到了广泛应用。本文将深入探讨HTML5游戏开发的相关知识点,包括技术基础、开发工具、游戏引擎以及实际案例分析。...
HTML5,即第五代超文本标记语言,引入了一系列新的元素、API和功能,使得开发者能够创建功能丰富、交互性强且适应多平台的应用程序。 首先,HTML5的核心优势在于其对移动设备的原生支持。它提供了离线存储能力...
《HTML5 Canvas 开发详解》第二版pdf 版
HTML5微信小游戏是一种基于HTML5技术开发的轻量级游戏,它们可以在微信内置浏览器中运行,无需用户下载安装,只需扫一扫或点击链接即可快速体验。这些小游戏通常利用了HTML5的Canvas、WebGL等图形渲染技术,以及Web ...
这个压缩包集合了91个HTML小游戏源码,对于初学者来说,这是一个非常宝贵的资源,可以帮助他们理解游戏开发的基本原理和实践技巧。 首先,让我们详细探讨HTML在小游戏开发中的作用。HTML(HyperText Markup ...
《游戏开发技术总结(经典之作)第四集源代码》的发布,无疑为追求卓越的游戏开发者们提供了一个深入学习与实践的平台。本文将从游戏类库的使用、程序的运行与测试、以及创新性思维在游戏开发中的应用三个方面详细...
1. **HTML5 Canvas**: HTML5的Canvas元素是一个二维绘图表面,允许开发者通过JavaScript进行动态图形绘制。在这些小游戏案例中,大部分的游戏逻辑和动画效果都是通过Canvas API实现的,例如`drawImage()`用于绘制...
2-117 第一人称射击游戏开发模板FPS2-117 第一人称射击游戏开发模板FPS2-117 第一人称射击游戏开发模板FPS2-117 第一人称射击游戏开发模板FPS2-117 第一人称射击游戏开发模板FPS2-117 第一人称射击游戏开发模板FPS2-...
HTML5作为现代网页开发的标准,引入了一系列增强网页体验的功能,对于初学者来说,它提供了一个友好的学习平台,尤其是对想要尝试游戏开发的人来说。 Canvas是HTML5中的一个核心元素,它是一个二维绘图上下文,允许...
HTML5游戏开发中,加载图片和显示进度条是至关重要的技术环节,特别是在处理大量资源或者大型游戏时。本文将深入探讨这两个主题,并提供相应的实践应用。 首先,让我们了解HTML5如何加载图片。在HTML中,我们可以...
在这个"我和小狗的一天"的HTML5养成游戏中,我们可以看到HTML5技术在游戏开发中的实际应用,为用户提供了一种全新的娱乐体验。 首先,HTML5的Canvas元素是游戏的核心部分,它是用于在网页上进行动态图形绘制的画布...
总之,"html5手机端2048微信游戏源码下载"不仅是一个游戏,更是学习HTML5游戏开发、提升编程技能的实践案例。通过对源码的解析和学习,开发者可以深化对HTML5技术的理解,同时也能提升在游戏设计和用户体验方面的...
HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行动态图形绘制,创建丰富的交互式用户体验,包括动画和游戏。这个“HTML5 Canvas核心技术图形、动画与游戏开发完整源码”压缩包可能包含了多个示例...
总结来说,这个"html5实现拼图小游戏"是一个很好的学习案例,它展示了HTML5、JavaScript以及可能的第三方库(如LufyLegend)如何协同工作来创建一个互动娱乐项目。通过分析和理解这个项目的源码,我们可以深入了解...
HTML5 Canvas核心技术 图形、动画与游戏开发,HTML5 Canvas核心技术 图形、动画与游戏开发
HTML5 Canvas核心技术 图形 动画与游戏开发