"Finishing" HTML5 game Development Study notes (1)-Dice game

"HTML5 game Development", the book published in 2011, it seems that some old, but I have not developed a game for people, but more attractive, choose their interests in the direction to learn HTML5,CSS3, I believe will be more effective. However, it is worth noting that the book's game is a small game, the content is relatively basic, and the HTML5 standard has been officially released, and the book may be described in a little bit of provenance. Of course, the Book of the small game is still relatively good, suitable for my front-end development is not so much to practiced hand, the way of learning is to achieve their own ideas, and then look at the book in the realization of ideas, because everyone has their own development habits.

1. Pre-knowledge
Before you do the first dice game development, you must know how to draw rectangles and circles in HTML5

/* Get 2d drawing context var ctx = document.getElementById (' Dicecanvas '). GetContext (' 2d ') *//* draw Rectangle ctx.linewidth = 1ctx.strokestyle = ' #000 ' Ctx.strokerect (100,50,100,100) Ctx.fillstyle = ' #f00 ' Ctx.fillrect (100,50,100,100) *//* Draw a circle or arc. Close the path, if not closed, this draws the non-closed semicircle ctx.linewidth = 1ctx.strokestyle = ' #000 ' Ctx.beginpath () Ctx.arc (200,200,50,0,2* Math.pi*90/360,false) Ctx.closepath () Ctx.stroke () */

2. Implement ideas
design and think about the objects involved in the entire game, including dice and gameplay.
In order to simplify the position calculation of coordinates when plotting each dot, I chose the layout of the nine Gongge, so I added a nine grid coordinate object

3. Code

/* Nine Gongge coordinates map */function nineblockboxmap (squaresize) {var size = Squaresize/3,maps = [[],[],[]],x,y,n = 3for (x=0; x<n; x + +) { for (y=0; y<n; y++) {Maps[x][y] = {x:x*size + SIZE/2, Y:y*size + size/2}//alert (maps[x][y].x+ ' | ') +MAPS[X][Y].Y)}}this.maps = Maps}nineblockboxmap.prototype.locate = function (x,y,offsetx,offsety) {var map = This.maps [x] [Y]return {x:map.x+offsetx,y:map.y+offsety}}/* dice */function Dice () {var opts,ctx,mapsfunction clearcanvas () {// Warnning: You can't erase the entire canvas, but you want to clear some of the canvas for the current dice size, because the entire canvas has multiple dice//ctx.clearrect (0,0,opts.canvaswidth,opts.canvasheight) Ctx.clearrect (Opts.dicex,opts.dicey,opts.dicewidth+2*opts.dicelinewidth,opts.diceheight+2*opts.dicelinewidth)} function Dotrandom () {return Math.floor (Math.random () *6+1)}function drawdots (num) {var dodraw = function (points) {var Point,ifor (i=0; i<points.length; i++) {point = Points[i]ctx.beginpath () Ctx.arc (point.x,point.y,opts.dotradius,0, Math.pi*2,false) Ctx.closepath () Ctx.fill ()}}var points = []//plots 1-6 dots in nine Gongge graphs based on 1-6 dice points switch (num) {Case 1: Points.push (Maps.locate (1,1,opts.dicex,opts.dicey)) Breakcase 2:p oints.push (Maps.locate (0,1,opts.diceX, Opts.dicey)) Points.push (Maps.locate (2,1,opts.dicex,opts.dicey)) Breakcase 3:p oints.push (Maps.locate (2,0, Opts.dicex,opts.dicey) Points.push (Maps.locate (1,1,opts.dicex,opts.dicey)) Points.push (Maps.locate (0,2, Opts.dicex,opts.dicey)) Breakcase 4:p Oints.push (Maps.locate (0,0,opts.dicex,opts.dicey)) Points.push (Maps.locate ( 0,2,opts.dicex,opts.dicey) Points.push (Maps.locate (2,0,opts.dicex,opts.dicey)) Points.push (Maps.locate (2,2, Opts.dicex,opts.dicey)) Breakcase 5:p Oints.push (Maps.locate (0,0,opts.dicex,opts.dicey)) Points.push (Maps.locate ( 0,2,opts.dicex,opts.dicey) Points.push (Maps.locate (1,1,opts.dicex,opts.dicey)) Points.push (Maps.locate (2,0, Opts.dicex,opts.dicey)) Points.push (Maps.locate (2,2,opts.dicex,opts.dicey)) Breakcase 6:p Oints.push (Maps.locate ( 0,0,opts.dicex,opts.dicey) Points.push (Maps.locate (0,2,opts.dicex,opts.dicey)) Points.push (Maps.locate (0,1, Opts.dicex,opts.dicey)) Points.push (MAPs.locate (2,1,opts.dicex,opts.dicey)) Points.push (Maps.locate (2,0,opts.dicex,opts.dicey)) Points.push ( Maps.locate (2,2,opts.dicex,opts.dicey)) Breakdefault:alert (num + ' num must be 1~6 ') Break}ctx.fillstyle = Opts.dotfillstyledodraw (points)}function Drawdice () {//Draw dice Rectangle ctx.linewidth = Opts.diceLineWidthctx.strokeStyle = Opts.diceStrokeStylectx.strokeRect (Opts.dicex,opts.dicey,opts.dicewidth,opts.diceheight)//Draw the dot on the dice var num = Dotrandom () drawdots (num) return num}function extend (opt1,opt2) {var nameopt1 = opt1| | {}opt2 = opt2| | {}for (name in Opt2) {Opt1[name] = opt1[name]| | Opt2[name]}return Opt1}return {init:function (options) {opts = Extend (options,{canvasid: ' Dicecanvas ', canvaswidth:400 , Canvasheight:400,dicewidth:90,diceheight:90,dicex:50,dicey:50,dicelinewidth:5,dicestrokestyle: ' #000 ', DotFil Lstyle: ' #000 ', dotradius:10}) var canvas = document.getElementById (OPTS.CANVASID) if (canvas==null| | Canvas.tagname!== ' canvas ') {alert (' element must be CANVAS tag. ') Return}ctx = Canvas.getContext (' 2d ') maps = new Nineblockboxmap (opts.dicewidth) return this},throwdice:function (Onthrow) {// Clears the drawing area of the current Dice Clearcanvas () var num = Drawdice () if (typeof Onthrow = = = ' function ') {onthrow (num)}return this}}}//end-dice/* Game Rules 2 Dice and (2-12) first (7,11) win the first (2,3,12) lost the first (4,5,6,8,9,10), Continue (the second (7) loss, if exactly and before the same points are won, otherwise continue) */var Gameresult = {lose:- 1,unknown:0,win:1}var rule = function gamerule () {var throwcount = 0var continual = Falsevar Previoussum = 0return {Getresu Lt:function (sum) {var result = Gameresult.unknown,sum = parseint (sum) throwcount++if (throwcount==1) {if (sum==7| | sum==11) {result = Gameresult.win}else if (sum==2| | sum==3| | SUM==12) {result = Gameresult.lose}}else if (throwcount>1 && continual) {if (throwcount==2&&sum==7) { result = Gameresult.lose}else if (sum==previoussum) {result = Gameresult.win}}previoussum = Sumcontinual = (result== Gameresult.unknown) return result},reset:function (Result) {if (result==gameresult.win| | Result==gameresult.lose) {Throwcount = 0continual = falseprevioussum = 0}}} ()/*app*/var Throwdicebutton = document.getElementById (' Throwdicebutton ') var Dice1TextBox = document.getElementById (' Dice1textbox ') var dice2textbox = document.getElementById (' Dice2textbox ') var ResultTextBox = document.getElementById (' Resulttextbox ') var Dice1 = new Dice (). Init () var dice2 =new Dice (). Init ({dicex:200,dicey:50, }) Throwdicebutton.onclick = function () {var result = Gameresult.unknownsum = 0//throw Dice 1dice1.throwdice (function (num) { Dice1textbox.value = numsum + = num})//Throw Dice 2dice2.throwdice (function (num) {dice2textbox.value = numsum + = num}) result = Rule.getresult (sum) rule.reset (Result) if (Result==gameresult.win) {resulttextbox.value = ' you Win: ' + sum}else if ( Result==gameresult.lose) {Resulttextbox.value = ' you lose: ' + sum}else{resulttextbox.value = ' Play again: ' + Sum}}

4. Optimization and improvement
Streamline the code and abstraction, increase the record score, and initial a certain amount equivalent to make it more like a gambling game.

"Finishing" HTML5 game Development Study notes (1)-Dice game