Address: http://www.script-tutorials.com/html5-game-development-lesson-1/
NextArticleNew things will be added. In this article, we created a graph with seven vertices and drew circles on these vertices, so that we can change the vertex position by dragging the circle.
We fill the image with a translucent color. This is enough for the beginning.
Step 1: HTML
Index.html
<! Doctype HTML> <HTML lang = "en">
Step 2: CSS
CSS/main.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. stuts,. 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 ;}
Step 3: JS
JS/jquery-1.5.2.min.js
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.
(The original uses jquery-1.5.2.min.js, and my own example uses jquery-2.0.0.min.js, soCodeSome minor differences)
JS/script. js
VaR canvas, CTX; var circles = []; var selectedcircle; var hoveredcircle =-1; /*** @ brief create a circle object ** @ paramx x coordinate * @ paramy y coordinate * @ paramradius radius ** @ return */function circle (X, Y, radius) {This. X = x; this. y = y; this. radius = radius;}/*** @ brief clears the canvas ** @ return */function clear () {CTX. clearrect (0, 0, CTX. canvas. width, CTX. canvas. height);}/*** @ brief draw a circle ** @ paramctx * @ paramx * @ paramy * @ paramradius ** @ return */F Unction 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 ();}/*** @ brief draw the entire canvas ** @ return */function drawscene () {clear (); // clear canvasctx. beginpath (); // customizes the image to start 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. linet O (circles [I]. x, circles [I]. y);} CTX. closepath (); // custom image end CTX. fill (); // fill custom image CTX. linewidth = 5; CTX. strokestyle = 'rgba (0, 0,255, 0.5) '; CTX. stroke (); // draw an edge for (VAR I = 0; I <circles. length; I ++) {// draw all circles drawcircle (CTX, circles [I]. x, circles [I]. y, (hoveredcircle = I )? 25: 15) ;}/// initialize $ (function () {canvas = document. getelementbyid ('Scene '); CTX = canvas. getcontext ('2d '); var circleradius = 15; var width = canvas. width; var Height = canvas. height; var circlescount = 7; // seven circles are randomly drawn for (VAR I = 0; I <circlescount; I ++) {var x = math. random () * width; var y = math. random () * height; circles. push (new circle (X, Y, circleradius);} // bind the mouse to press the event (drag) $ ('# scene '). mousedown (functi On (e) {var canvasposition = $ (this ). offset (); var mousex = E. originalevent. layerx | 0; // E. layerx, For details, see: http://blog.jquery.com/2011/11/03/jquery-1-7-released/var Mousey = E. originalevent. layery | 0; For (VAR I = 0; I <circles. length; I ++) {// determines the coordinates of the Point pressed by the mouse in the circle 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 ;}}); // bind the mouse movement event, you can drag the selected Circle $ ('# scene '). mousemove (function (e) {var mousex = E. originalevent. layerx | 0; var Mousey = E. originalevent. layery | 0; If (selectedcircle! = Undefined) {var canvasposition = $ (this ). offset (); var radius = circles [selectedcircle]. radius; circles [selectedcircle] = new circle (mousex, Mousey, radius); // change the position of the selected Circle} hoveredcircle = undefined; For (VAR I = 0; I <circles. length; I ++) {// check all circles and determine whether the mouse is pressed in the circle 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 ;}}); // release the mouse event to clear the selectedcircle $ ('# scene '). mouseup (function () {selectedcircle = undefined;}); // cyclically draw setinterval (drawscene, 30 );});
Download link: http://www.script-tutorials.com/demos/147/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
