html5游戏制作入门系列教程（二）

今天&＃xff0c;我们继续html5游戏制作入门系列的系列文章。今天&＃xff0c;我们将继续基础知识&＃xff08;也许甚至是高级技巧的基础&＃xff09;。我要告诉你如何具有渐变颜色填充对象&＃xff0c;绘制文本&＃xff0c;使用自定义的字体绘制文本&＃xff0c;基本的动画&＃xff0c;以及最重要的UI元素 – 按钮。

我们以前的文章中&＃xff0c;你可以在这里阅读&＃xff1a;html5游戏制作入门系列教程&＃xff08;一&＃xff09;。我们会用到以前的脚本&＃xff0c;并将其功能加强。我要绘制文本&＃xff0c;使用自定义字体&＃xff0c;动画对象&＃xff08;方形&＃xff09;与渐变色填充&＃xff0c;将利用“播放/暂停”按钮暂停动画。

这里有我们的演示和下载包&＃xff1a;

在线演示 源码下载

好吧&＃xff0c;下载所需文件&＃xff0c;让我们开始编码&＃xff01;

步骤1&＃xff1a; HTML

这里是我演示的HTML

index.html

步骤2&＃xff1a;CSS

下面是CSS样式。

/* general styles */
*{margin:0;padding:0;
}
&＃64;font-face {font-family: "DS-Digital";src: url("Ds-digib.ttf");
}
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;
}
#scene {background-image:url(01.jpg);position:relative;
}

注意&＃64; font-face的这种使用方式&＃xff0c;自定义字体文件&＃xff08;TTF&＃xff09;连接到我们的教程中&＃xff08;在画布上绘制&＃xff09;。

步骤3&＃xff1a; JS

var canvas, ctx;
var circles &＃61; [];
var selectedCircle;
var hoveredCircle;
var button;
var moving &＃61; false;
var speed &＃61; 2.0;// -------------------------------------------------------------// objects :function Circle(x, y, radius){this.x &＃61; x;this.y &＃61; y;this.radius &＃61; radius;
}function Button(x, y, w, h, state, image) {this.x &＃61; x;this.y &＃61; y;this.w &＃61; w;this.h &＃61; h;this.state &＃61; state;this.imageShift &＃61; 0;this.image &＃61; image;
}
// -------------------------------------------------------------// draw functions :function clear() { // clear canvas functionctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}function drawCircle(ctx, x, y, radius) { // draw circle functionctx.fillStyle &＃61; &＃39;rgba(255, 35, 55, 1.0)&＃39;;ctx.beginPath();ctx.arc(x, y, radius, 0, Math.PI*2, true);ctx.closePath();ctx.fill();ctx.lineWidth &＃61; 1;ctx.strokeStyle &＃61; &＃39;rgba(0, 0, 0, 1.0)&＃39;;ctx.stroke(); // draw border
}function drawScene() { // main drawScene functionclear(); // clear canvas// draw the title textctx.font &＃61; &＃39;42px DS-Digital&＃39;;ctx.textAlign &＃61; &＃39;center&＃39;;ctx.fillStyle &＃61; &＃39;#ffffff&＃39;;ctx.fillText(&＃39;Welcome to lesson #2&＃39;, ctx.canvas.width/2, 50);var bg_gradient &＃61; ctx.createLinearGradient(0, 200, 0, 400);bg_gradient.addColorStop(0.0, &＃39;rgba(255, 0, 0, 0.8)&＃39;);bg_gradient.addColorStop(0.5, &＃39;rgba(0, 255, 0, 0.8)&＃39;);bg_gradient.addColorStop(1.0, &＃39;rgba(0, 0, 255, 0.8)&＃39;);ctx.beginPath(); // custom shape beginctx.fillStyle &＃61; bg_gradient;ctx.moveTo(circles[0].x, circles[0].y);for (var i&＃61;0; i&＃61; 385) {speed &＃61; -speed;}// central object behaviorif (moving) {circles[0].x -&＃61; speed;circles[0].y -&＃61; speed;circles[1].x &＃43;&＃61; speed;circles[1].y -&＃61; speed;circles[2].x &＃43;&＃61; speed;circles[2].y &＃43;&＃61; speed;circles[3].x -&＃61; speed;circles[3].y &＃43;&＃61; speed;}drawCircle(ctx, circles[0].x, circles[0].y, (hoveredCircle &＃61;&＃61; 0) ? 25 : 15);drawCircle(ctx, circles[1].x, circles[1].y, (hoveredCircle &＃61;&＃61; 1) ? 25 : 15);drawCircle(ctx, circles[2].x, circles[2].y, (hoveredCircle &＃61;&＃61; 2) ? 25 : 15);drawCircle(ctx, circles[3].x, circles[3].y, (hoveredCircle &＃61;&＃61; 3) ? 25 : 15);// draw buttonctx.drawImage(button.image, 0, button.imageShift, button.w, button.h, button.x, button.y, button.w, button.h);// draw textctx.font &＃61; &＃39;30px DS-Digital&＃39;;ctx.fillStyle &＃61; &＃39;#ffffff&＃39;;ctx.fillText(&＃39;Play/Pause&＃39;, 135, 480);ctx.fillText(button.state, 135, 515);
}// -------------------------------------------------------------// initialization$(function(){canvas &＃61; document.getElementById(&＃39;scene&＃39;);ctx &＃61; canvas.getContext(&＃39;2d&＃39;);var circleRadius &＃61; 15;var width &＃61; canvas.width;var height &＃61; canvas.height;// lets add 4 circles manuallycircles.push(new Circle(width / 2 - 20, height / 2 - 20, circleRadius));circles.push(new Circle(width / 2 &＃43; 20, height / 2 - 20, circleRadius));circles.push(new Circle(width / 2 &＃43; 20, height / 2 &＃43; 20, circleRadius));circles.push(new Circle(width / 2 - 20, height / 2 &＃43; 20, circleRadius));// load the guide sprite imagebuttonImage &＃61; new Image();buttonImage.src &＃61; &＃39;button.png&＃39;;buttonImage.onload &＃61; function() {}button &＃61; new Button(50, 450, 180, 120, &＃39;normal&＃39;, buttonImage);// binding mousedown event (for dragging)$(&＃39;#scene&＃39;).mousedown(function(e) {var mouseX &＃61; e.layerX || 0;var mouseY &＃61; e.layerY || 0;for (var i&＃61;0; i button.x && mouseX button.y && mouseY button.x && mouseX button.y && mouseY });

下面是关于一些新功能代码的解释&＃xff1a;
1&＃xff09;我们可以绘制文本&＃xff08;自定义字体&＃xff09;使用下面的代码&＃xff0c;如下&＃xff1a;

ctx.font &＃61; &＃39;42px DS-Digital&＃39;;
ctx.textAlign &＃61; &＃39;center&＃39;;
ctx.fillStyle &＃61; &＃39;#ffffff&＃39;;
ctx.fillText(&＃39;Welcome to lesson #2&＃39;, ctx.canvas.width/2, 50);

2&＃xff09;运用渐变色&＃xff1a;

var bg_gradient &＃61; ctx.createLinearGradient(0, 200, 0, 400);
bg_gradient.addColorStop(0.0, &＃39;rgba(255, 0, 0, 0.8)&＃39;);
bg_gradient.addColorStop(0.5, &＃39;rgba(0, 255, 0, 0.8)&＃39;);
bg_gradient.addColorStop(1.0, &＃39;rgba(0, 0, 255, 0.8)&＃39;);
ctx.fillStyle &＃61; bg_gradient;

3&＃xff09;按钮 – 我用一个精灵图像&＃xff0c;绘制按钮的三个状态&＃xff0c;并添加悬停/事件的事件处理程序。下面是加载和绘制图像画布的方式&＃xff1a;

buttonImage &＃61; new Image();
buttonImage.src &＃61; &＃39;button.png&＃39;;
.......
ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, width, height);

结论

超级酷&＃xff0c;不是吗&＃xff1f;我会很高兴看到您的评论和意见。祝你好运&＃xff01;

在线演示 源码下载

转载请注明&＃xff1a;HTML5游戏开发者社区 » html5游戏制作入门系列教程&＃xff08;二&＃xff09;