开发第一个Html5游戏(二)
今天我们继续学习Html5系列游戏开发,我们会在第一章的基础上做一些扩展,加入颜色渐变、
绘制文本、自定义文本样式、以及动画,我们还将学习UI中一个非常重要的元素,按钮。
我们的上一篇文章: (译)开发第一个Html5游戏(一)
.
JS代码:(完整代码请看文章结尾链接)
var canvas, ctx; var circles = []; var selectedCircle; var hoveredCircle; var button; var moving = false; var speed = 2.0; // ------------------------------------------------------------- // objects : function Circle(x, y, radius){ this.x = x; this.y = y; this.radius = radius; } function Button(x, y, w, h, state, image) { this.x = x; this.y = y; this.w = w; this.h = h; this.state = state; this.imageShift = 0; this.image = image; } // ------------------------------------------------------------- // draw functions : function clear() { // clear canvas function ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); } function drawCircle(ctx, x, y, radius) { // draw circle function ctx.fillStyle = 'rgba(255, 35, 55, 1.0)'; ctx.beginPath(); ctx.arc(x, y, radius, 0, Math.PI*2, true); ctx.closePath(); ctx.fill(); ctx.lineWidth = 1; ctx.strokeStyle = 'rgba(0, 0, 0, 1.0)'; ctx.stroke(); // draw border } function drawScene() { // main drawScene function clear(); // clear canvas // 绘制文本 ctx.font = '42px DS-Digital'; ctx.textAlign = 'center'; ctx.fillStyle = '#ffffff'; ctx.fillText('Welcome to lesson #2', ctx.canvas.width/2, 50); //这里实现颜色渐变 var bg_gradient = ctx.createLinearGradient(0, 200, 0, 400); bg_gradient.addColorStop(0.0, 'rgba(255, 0, 0, 0.8)'); bg_gradient.addColorStop(0.5, 'rgba(0, 255, 0, 0.8)'); bg_gradient.addColorStop(1.0, 'rgba(0, 0, 255, 0.8)'); ctx.beginPath(); // custom shape begin ctx.fillStyle = bg_gradient; 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(); // custom shape end ctx.fill(); // fill custom shape ctx.lineWidth = 2; ctx.strokeStyle = 'rgba(0, 0, 255, 0.5)'; ctx.stroke(); // draw border // reverting direction if (circles[0].x <= 300 || circles[0].x >= 385) { speed = -speed; } // 实现图像抖动 if (moving) { circles[0].x -= speed; circles[0].y -= speed; circles[1].x += speed; circles[1].y -= speed; circles[2].x += speed; circles[2].y += speed; circles[3].x -= speed; circles[3].y += speed; } drawCircle(ctx, circles[0].x, circles[0].y, (hoveredCircle == 0) ? 25 : 15); drawCircle(ctx, circles[1].x, circles[1].y, (hoveredCircle == 1) ? 25 : 15); drawCircle(ctx, circles[2].x, circles[2].y, (hoveredCircle == 2) ? 25 : 15); drawCircle(ctx, circles[3].x, circles[3].y, (hoveredCircle == 3) ? 25 : 15); // draw button ctx.drawImage(button.image, 0, button.imageShift, button.w, button.h, button.x, button.y, button.w, button.h); // draw text ctx.font = '30px DS-Digital'; ctx.fillStyle = '#ffffff'; ctx.fillText('Play/Pause', 135, 480); ctx.fillText(button.state, 135, 515); } // ------------------------------------------------------------- // initialization $(function(){ canvas = document.getElementById('scene'); ctx = canvas.getContext('2d'); var circleRadius = 15; var width = canvas.width; var height = canvas.height; // lets add 4 circles manually circles.push(new Circle(width / 2 - 20, height / 2 - 20, circleRadius)); circles.push(new Circle(width / 2 + 20, height / 2 - 20, circleRadius)); circles.push(new Circle(width / 2 + 20, height / 2 + 20, circleRadius)); circles.push(new Circle(width / 2 - 20, height / 2 + 20, circleRadius)); // 图片按钮 buttonImage = new Image(); buttonImage.src = 'images/button.png'; buttonImage.onload = function() { } button = new Button(50, 450, 180, 120, 'normal', buttonImage); // binding mousedown event (for dragging) $('#scene').mousedown(function(e) { var mouseX = e.layerX || 0; var mouseY = e.layerY || 0; for (var i=0; i<circles.length; i++) { // checking through all circles - are mouse down inside circle or not 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; } } // button behavior if (mouseX > button.x && mouseX < button.x+button.w && mouseY > button.y && mouseY < button.y+button.h) { button.state = 'pressed'; button.imageShift = 262; } }); $('#scene').mousemove(function(e) { // binding mousemove event for dragging selected circle 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); // changing position of selected circle } hoveredCircle = undefined; for (var i=0; i<circles.length; i++) { // checking through all circles - are mouse down inside circle or not 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; circles[hoveredCircle] = new Circle(circleX, circleY, 25); break; } } // button behavior if (button.state != 'pressed') { button.state = 'normal'; button.imageShift = 0; if (mouseX > button.x && mouseX < button.x+button.w && mouseY > button.y && mouseY < button.y+button.h) { button.state = 'hover'; button.imageShift = 131; } } }); $('#scene').mouseup(function(e) { // on mouseup - cleaning selectedCircle selectedCircle = undefined; // button behavior if (button.state == 'pressed') { moving = !moving; } button.state = 'normal'; button.imageShift = 0; }); setInterval(drawScene, 30); // loop drawScene });
相关推荐
HTML5游戏开发是近年来互联网技术发展的一个热点,尤其随着移动设备的普及,它为开发者提供了在网页和移动平台上创建互动游戏的新途径。这两本《HTML5游戏开发实践指南》和《HTML5游戏开发》的书籍将深入探讨这个...
HTML5游戏开发的五个最佳实践.pdf是一篇关于HTML5游戏开发的文章,文章中提到了HTML5的特点和优势,以及五个最佳实践来提高HTML5游戏开发的效率和质量。下面是对文章的详细解读和知识点的总结。 HTML5的特点和优势 ...
1. **Canvas元素**:HTML5的Canvas是一个二维可绘图区域,通过JavaScript来绘制图形,包括游戏中的角色、背景和动态效果。开发者可以通过`context`对象的各种方法如`fillRect()`、`strokeRect()`、`beginPath()`等...
随着HTML5标准的不断成熟和完善,它已经成为一个非常有吸引力的游戏开发平台,特别是在移动设备上。 - **特点**: - **开放性**:HTML5是一种开放的技术,无需任何插件即可在现代浏览器中运行。 - **跨平台性**:...
HTML5的Canvas元素提供了一个二维绘图表面,允许开发者通过JavaScript进行动态图形绘制。在这个项目中,吃豆人、幽灵、墙壁等元素都是在Canvas上用线条、形状和图像进行渲染的。 2. **JavaScript和框架** HTML5...
HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行动态图形绘制,为创建丰富的交互式应用和游戏提供了可能。在这个“HTML5 Canvas游戏开发实战”中,我们将深入探讨如何利用Canvas API来构建游戏,...
在这批源码中,Canvas尤其值得关注,它是HTML5中的一个二维绘图上下文,允许开发者通过JavaScript直接在网页上绘制图形,实现游戏中的动态效果和交互。 CSS3则扩展了CSS的功能,提供了更丰富的样式控制,包括但不...
2. Canvas游戏开发:Canvas是HTML5中的一个绘图元素,通过JavaScript进行动态绘图,实现游戏场景、角色动画和交互效果。开发者需要掌握路径绘制、图像处理、定时器事件等技巧。 3. Web Audio API:HTML5的Web Audio...
《Cocos2d-Js开发之旅-从HTML5到原生手机游戏》是一本深入探讨Cocos2d-Js框架的书籍,旨在帮助开发者从HTML5游戏开发过渡到原生移动平台的游戏制作。Cocos2d-Js是Cocos2d-x家族的一员,是一个跨平台的、基于...
接下来,lufylegend框架是一个专门用于HTML5游戏开发的库,它简化了HTML5 Canvas的使用,提供了更加方便的游戏开发接口和组件。lufylegend包含了一系列的游戏开发工具,如场景管理、动画系统、物理引擎等,帮助...
◆ 阐释如何择机选用三种主要方法(CSS3、SVG或画布)之一来构建HTML游戏 ◆ 介绍使用HTML5构建实时多玩家游戏的标准模式 ◆ 讲述JavaScript游戏开发基础知识 ◆ 分步讲解如何创建2D平台动作游戏以及构建非传统多人...
01 HTML5 Canvas核心技术—图形、动画与游戏开发 02 HTML5 Games Development by Example 03 HTML5 Games Most Wanted (HTML5游戏编程必备) 04 HTML5 在游戏开发中的应用
Canvas是HTML5中的一个核心元素,它是一个二维绘图上下文,允许开发者在网页上进行动态图形绘制。通过JavaScript,我们可以操纵Canvas的每一个像素,实现各种复杂的动画效果和游戏逻辑。Canvas的API提供了画线、填充...
1. **HTML5 Canvas**: HTML5的Canvas元素是一个二维绘图表面,允许开发者通过JavaScript进行动态图形绘制。在这些小游戏案例中,大部分的游戏逻辑和动画效果都是通过Canvas API实现的,例如`drawImage()`用于绘制...
近年来,基于HTML5技术的游戏开发已经成为游戏行业最热门的关键词之一。基于HTML5技术的游戏开发有其独特的跨平台性和轻量性,获得了很好的用户体验。 HTML5游戏开发的优势包括: 1. 安全:HTML5游戏与APP游戏的...
第1篇 益智游戏 第1章 连连看游戏 第2章 黑白棋游戏 第3章 汉诺塔游戏 第4章 推箱子游戏 第5章 扫雷游戏 第6章 七巧板游戏 第7章 21点扑克牌游戏 第8章 人物拼图游戏(一) 第9章 人物拼图游戏(二) ...
【标题】基于lufylegend.js开发的HTML5小游戏 HTML5小游戏的开发近年来变得越来越流行,这得益于HTML5技术的不断成熟以及浏览器对它的广泛...这对于想要踏入HTML5游戏开发领域的初学者来说,是一个很好的实践案例。
总的来说,财神HTML5游戏源码是一个可以让你深入了解HTML5游戏开发的实践案例,通过对源码的学习和实践,你可以提升自己在Web游戏开发领域的技能,同时也能了解到如何将HTML5的新特性应用到实际项目中。
《UE5 100%蓝图开发Steam 多人孤岛生存游戏》是一门专注于使用虚幻引擎5(UE5)进行游戏开发的课程。在这个课程中,开发者将学习如何利用UE5强大的蓝图系统,完全不涉及任何编程语言,来构建一款在Steam平台上发布的...