Address: http://www.script-tutorials.com/html5-game-development-lesson-2/
Today, we will continue to develop the HTML5 game series. This article continues to learn basic knowledge (which may include some advanced knowledge ). We will show you how to fill the image with gradient, draw text with a specific font, as well as basic animations. The most important thing is the use of the UI element Button.
For previous articles, visit http://www.cnblogs.com/pigzhu/archive/2013/05/26/3100018.html. I will continue to use the previous Code (to enhance its functionality ). I will use a specific font to draw text, fill a square with a changing size with a gradient, and draw a button to control the square animation.
Step 1: HTML
Index.html
<!DOCTYPE html>Step 2: CSS
Css/main.css
/* general styles */*{ margin:0; padding:0;}@font-face { font-family: "DS-Digital"; src: url("../fonts/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(../images/01.jpg); position:relative;}Step 3: JS
Js/jquery-2.0.0.min.js (1.5.2 is used in the original article)
In this example, we use jQuery. jQuery can easily bind different events (such as mouse events). script. js is the most important file because it processes all the logic:
Var canvas, ctx; var circles = []; var selectedCircle; var hoveredCircle; var button; var moving = false; // identify whether to move the circle var speed = 2.0; // Circle movement speed 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; // you have not understood the role of this attribute. image = image;} function clear () {ctx. clearRec T (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 (); ctx. lineWidth = 1; ctx. strokeStyle = 'rgba (0, 0, 0, 1.0) '; ctx. stroke (); // border of the drawing} function drawScene () {clear (); // draw text ctx on the canvas. font = '42px DS-Digital '; ctx. textAlign = 'center'; ctx. fillStyl E = '# ffff'; ctx. fillText ('Welcome to lesson # 2', ctx. canvas. width/2, 50); // gradient 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 (); 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 (); ctx. fill (); ctx. lineWidth = 2; ctx. strokeStyle = 'rgba (0, 0,255, 0.5) '; ctx. stroke (); // change the moving 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 the image ctx. drawImage (button. image, 0, button. imageShift, button. w, button. h, button. x, button. y, button. w, button. h); // ctx. drawImage (button. image, 0, 0, button. w, button. h, button. x, button. y, button. w, button. h); ctx. font = '30px DS-Digital '; ctx. fillStyle = '# ffff'; ctx. fillText ('play/pause', 135,480); ctx. fillText (button. state, 135,515) ;}$ (function () {canvas = document. getElementById ('s Cene '); ctx = canvas. getContext ('2d '); // obtain the Drawing operation context var circleRadius = 15; var width = canvas. width; var height = canvas. height; circles. push (new Circle (width/2-20, height/2-20, circleRadius); // Circle circles in the upper left corner. 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); $ ('# scene '). mousedown (function (e) {var mouseX = e. originalEvent. layerX | 0; var mouseY = e. originalEvent. layerY | 0; for (var I = 0; I <circles. length; I ++) {var circleX = circles [I]. x; var circleY = circles [I]. y; var ra Dius = circles [I]. radius; if (Math. pow (mouseX-circleX, 2) + Math. pow (mouseY-circleY, 2) <Math. pow (radius, 2) {selectedCircle = I; break ;}} 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) {var mouseX = e. originalEvent. layerX | 0; var mouseY = e. origi NalEvent. layerY | 0; if (selectedCircle! = Undefined) {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; circles [hoveredCircl E] = new Circle (circleX, circleY, 25); break ;}} 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) {selectedCircle = undefined; if (button. state = 'pressed ') {moving =! Moving;} button. state = 'normal'; button. imageShift = 0 ;}); setInterval (drawScene, 30 );});The above Code does not understand the function of imageShift in the Button. Which one knows how to tell me?
Download link: http://www.script-tutorials.com/demos/157/source.zip
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
