开发第一个Html5游戏 – 1
今天我们开始用Html5开发游戏,在第一章里,我们将主要介绍基础知识 - 使用 canvas, 一些简单的对象,填充函数,
以及一些鼠标事件处理。虽然类似WebGL 制作3D等高级功能会放到以后而不是本章,但本章的内容比较基础,所以请不要忽略本章的学习。
本章我们会画一些基本的图形,并为这些图形添加可拖动的功能,我们还会实现这些图形的半透明效果。
下边就让我们开始吧。
步骤1. HTML
代码如下:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<title>HTML5 Game Development - Lesson 1 | Script Tutorials</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div class="container">
<canvas id="scene" width="800" height="600"></canvas>
</div>
<footer>
<h2>HTML5 Game Development - Lesson 1</h2>
<a href="http://www.script-tutorials.com/html5-game-development-lesson-1" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
</footer>
</body>
</html>
步骤2. CSS
/* general styles */
*{
margin:0;
padding:0;
}
body {
background-color:#bababa;
background-image: -webkit-radial-gradient(600px 300px, circle, #ffffff, #bababa 60%);
background-image: -moz-radial-gradient(600px 300px, circle, #ffffff, #bababa 60%);
background-image: -o-radial-gradient(600px 300px, circle, #ffffff, #bababa 60%);
background-image: radial-gradient(600px 300px, circle, #ffffff, #bababa 60%);
color:#fff;
font:14px/1.3 Arial,sans-serif;
min-height:1000px;
}
.container {
width:100%;
}
.container > * {
display:block;
margin:50px auto;
}
footer {
background-color:#212121;
bottom:0;
box-shadow: 0 -1px 2px #111111;
display:block;
height:70px;
left:0;
position:fixed;
width:100%;
z-index:100;
}
footer h2{
font-size:22px;
font-weight:normal;
left:50%;
margin-left:-400px;
padding:22px 0;
position:absolute;
width:540px;
}
footer a.stuts,a.stuts:visited{
border:none;
text-decoration:none;
color:#fcfcfc;
font-size:14px;
left:50%;
line-height:31px;
margin:23px 0 0 110px;
position:absolute;
top:0;
}
footer .stuts span {
font-size:22px;
font-weight:bold;
margin-left:5px;
}
h3 {
text-align:center;
}
/* tutorial styles */
#scene {
background-image:url(../images/01.jpg);
position:relative;
}
步骤3. JS
js/jquery-1.5.2.min.js
我们的Demo会用到jQuery, 这让我们很容易的实现事件绑定,
下面的代码是重点,这些代码展示如何进行画图等操作。
var canvas, ctx;
var circles = [];
var selectedCircle;
var hoveredCircle;
// -------------------------------------------------------------
// objects :
function Circle(x, y, radius){
this.x = x;
this.y = y;
this.radius = radius;
}
// -------------------------------------------------------------
// 绘图函数:
function clear() { // 清空画布
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}
function drawCircle(ctx, x, y, radius) { // 画圆
ctx.fillStyle = 'rgba(255, 35, 55, 1.0)';
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();
}
function drawScene() { // 主要的绘图操作都在这里执行
clear(); // clear canvas
ctx.beginPath(); // 绘图开始
ctx.fillStyle = 'rgba(255, 110, 110, 0.5)';
ctx.moveTo(circles[0].x, circles[0].y);
for (var i=0; i<circles.length; i++) {
ctx.lineTo(circles[i].x, circles[i].y);
}
ctx.closePath(); // 绘图结束
ctx.fill(); // fill custom shape
ctx.lineWidth = 5;
ctx.strokeStyle = 'rgba(0, 0, 255, 0.5)';
ctx.stroke(); // 给图像绘制边框
for (var i=0; i<circles.length; i++) { // 将所有的圆循环显示出来
drawCircle(ctx, circles[i].x, circles[i].y, (hoveredCircle == i) ? 25 : 15);
}
}
// -------------------------------------------------------------
// 初始化
$(function(){
canvas = document.getElementById('scene');
ctx = canvas.getContext('2d');
var circleRadius = 15;
var width = canvas.width;
var height = canvas.height;
var circlesCount = 7; // 圆的个数
for (var i=0; i<circlesCount; i++) {
var x = Math.random()*width;
var y = Math.random()*height;
circles.push(new Circle(x,y,circleRadius));
}
// 绑定鼠标按键按下事件,为实现拖动效果做准备
$('#scene').mousedown(function(e) {
var canvasPosition = $(this).offset();
var mouseX = e.layerX || 0;
var mouseY = e.layerY || 0;
for (var i=0; i<circles.length; i++) { // 对所有圆执行事件判断,是否发生鼠标点击事件
var circleX = circles[i].x;
var circleY = circles[i].y;
var radius = circles[i].radius;
if (Math.pow(mouseX-circleX,2) + Math.pow(mouseY-circleY,2) < Math.pow(radius,2)) {
selectedCircle = i;
break;
}
}
});
$('#scene').mousemove(function(e) { // 绑定鼠标移动事件
var mouseX = e.layerX || 0;
var mouseY = e.layerY || 0;
if (selectedCircle != undefined) {
var canvasPosition = $(this).offset();
var radius = circles[selectedCircle].radius;
circles[selectedCircle] = new Circle(mouseX, mouseY,radius); // 改变选中圆的位置
}
hoveredCircle = undefined;
for (var i=0; i<circles.length; i++) { // 鼠标事件监测
var circleX = circles[i].x;
var circleY = circles[i].y;
var radius = circles[i].radius;
if (Math.pow(mouseX-circleX,2) + Math.pow(mouseY-circleY,2) < Math.pow(radius,2)) {
hoveredCircle = i;
break;
}
}
});
$('#scene').mouseup(function(e) { // 如果鼠标按键抬起,将selectedCircle 标记为空
selectedCircle = undefined;
});
setInterval(drawScene, 30); // 每30毫秒重绘整张画布
});
我尽量给代码做了注释,希望对你有帮助。
ps:
原文地址 http://www.script-tutorials.com/html5-game-development-lesson-1/
Demo地址 http://www.script-tutorials.com/demos/147/index.html
源码下载 http://www.script-tutorials.com/demos/147/source.zip
分享到:
相关推荐
HTML5游戏开发是近年来互联网技术发展的一个热点,尤其随着移动设备的普及,它为开发者提供了在网页和移动平台上创建互动游戏的新途径。这两本《HTML5游戏开发实践指南》和《HTML5游戏开发》的书籍将深入探讨这个...
HTML5游戏开发的五个最佳实践.pdf是一篇关于HTML5游戏开发的文章,文章中提到了HTML5的特点和优势,以及五个最佳实践来提高HTML5游戏开发的效率和质量。下面是对文章的详细解读和知识点的总结。 HTML5的特点和优势 ...
HTML5 移动游戏开发是近年来随着移动设备普及和技术进步而兴起的一个重要领域。HTML5技术以其跨平台、易学习和高效的特点,为开发者提供了一种便捷的方式,可以在多个平台上创建丰富的互动体验,尤其是游戏。Pascal ...
HTML5是一种先进的网页标准,它极大地扩展了网页的交互性和动态性,使得开发者能够创建出更具...总的来说,"我和小狗的一天"HTML5游戏源码是一个很好的学习资源,它展示了HTML5在游戏开发中的强大功能和无限可能性。
随着HTML5标准的不断成熟和完善,它已经成为一个非常有吸引力的游戏开发平台,特别是在移动设备上。 - **特点**: - **开放性**:HTML5是一种开放的技术,无需任何插件即可在现代浏览器中运行。 - **跨平台性**:...
HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行动态图形绘制,为创建丰富的交互式应用和游戏提供了可能。在这个“HTML5 Canvas游戏开发实战”中,我们将深入探讨如何利用Canvas API来构建游戏,...
吃豆人(Pacman)是一款经典的街机游戏,用HTML5来重制这个游戏,可以深入理解HTML5的潜力和游戏开发的基本原理。 1. **HTML5 Canvas** 吃豆人游戏的核心在于图形绘制。HTML5的Canvas元素提供了一个二维绘图表面,...
《Cocos2d-Js开发之旅-从HTML5到原生手机游戏》是一本深入探讨Cocos2d-Js框架的书籍,旨在...对于希望从HTML5游戏开发转向原生平台的开发者来说,这是一个宝贵的资源库,可以帮助他们快速上手并精通Cocos2d-Js框架。
标签"html5 超级玛丽游戏"表明了这个游戏的两大核心特征:使用HTML5技术进行开发,并且是基于经典游戏《超级玛丽》的复刻。这使得游戏可以在现代浏览器上运行,无需额外的插件或应用。 压缩包中的"html5-mario"可能...
2. Canvas游戏开发:Canvas是HTML5中的一个绘图元素,通过JavaScript进行动态绘图,实现游戏场景、角色动画和交互效果。开发者需要掌握路径绘制、图像处理、定时器事件等技巧。 3. Web Audio API:HTML5的Web Audio...
HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行动态图形绘制,创造出丰富的交互式用户体验。在这个“石头剪刀布”小游戏中,HTML5 Canvas与lufylegend框架结合,构建了一个轻量级且趣味盎然的...
1. **技术的潜力**:《狙击野鸭》展示了即使是非常简单的技术组合也能创造出有趣的游戏体验,这对于那些想要入门游戏开发的程序员来说是一个极大的鼓励。 2. **持续学习的重要性**:尽管JavaScript和HTML5已经足够...
1. **HTML5 Canvas**: 大多数HTML5游戏都基于Canvas元素,这是一个可编程的画布,允许开发者通过JavaScript绘制图形,实现动态和交互性。例如,“跳一跳”游戏可能就利用了Canvas进行物理模拟和动画渲染。 2. **...
2. Canvas:Canvas是HTML5中的一个标签,用于创建图形和游戏,提供了一个可以自由绘制的区域,可以使用JavaScript来控制和操作Canvas。 3. CSS3.0:CSS3.0是最新的样式表规范,提供了许多新的功能和特性,例如圆角...
◆ 阐释如何择机选用三种主要方法(CSS3、SVG或画布)之一来构建HTML游戏 ◆ 介绍使用HTML5构建实时多玩家游戏的标准模式 ◆ 讲述JavaScript游戏开发基础知识 ◆ 分步讲解如何创建2D平台动作游戏以及构建非传统多人...
LibGDX是一个强大的开源游戏开发框架,专为创建跨平台的游戏而设计,支持Windows、Linux、Mac OS X、Android、iOS以及HTML5等平台。这个教程全集将带你逐步了解如何利用LibGDX来开发一个完整的游戏。 首先,让我们...
【标题】基于lufylegend.js开发的HTML5小游戏 HTML5小游戏的开发近年来变得越来越流行,这得益于HTML5技术的不断成熟以及浏览器对它的广泛...这对于想要踏入HTML5游戏开发领域的初学者来说,是一个很好的实践案例。
1. **Canvas**:HTML5的元素提供了动态图形绘制的能力,类似于一个画布,开发者可以通过JavaScript进行像素级别的操作,构建游戏场景、绘制角色和动画效果。 2. **WebGL**:WebGL是一种在浏览器中实现的3D图形API,...
01 HTML5 Canvas核心技术—图形、动画与游戏开发 02 HTML5 Games Development by Example 03 HTML5 Games Most Wanted (HTML5游戏编程必备) 04 HTML5 在游戏开发中的应用