首页 > 代码库 > 【整理】HTML5游戏开发学习笔记（1）-骰子游戏
【整理】HTML5游戏开发学习笔记（1）-骰子游戏
《HTML5游戏开发》，该书出版于2011年，似乎有些老，可对于我这样没有开发过游戏的人来说，却比较有吸引力，选择自己感兴趣的方向来学习html5,css3，相信会事半功倍。不过值得注意的是，该书的游戏是些小的游戏，内容相对比较基础，而且html5标准已经正式发布，可能会和书中所描述有少许出处。当然了，书中的小游戏还是比较不错的，适合我这样的前端开发不咋地的来练手，学习方式是在以自己的思路实现之后，再来看书中的实现思路，因为每个人有自己的开发习惯。
1.预备知识
在做第一个骰子游戏开发前，必须知道在html5中，如何绘制矩形和圆形
/*获取2d绘图上下文 var ctx = document.getElementById(‘diceCanvas‘).getContext(‘2d‘) */ /*绘制矩形 ctx.lineWidth = 1 ctx.strokeStyle = ‘#000‘ ctx.strokeRect(100,50,100,100) ctx.fillStyle = ‘#f00‘ ctx.fillRect(100,50,100,100) */ /*绘制圆形或弧形.关闭路径，如果不关闭，这绘制的是不闭合的半圆 ctx.lineWidth = 1 ctx.strokeStyle = ‘#000‘ ctx.beginPath() ctx.arc(200,200,50,0,2*Math.PI*90/360,false) ctx.closePath() ctx.stroke() */
2.实现思路
设计和思考整个游戏中涉及的对象，包括骰子和游戏玩法。
为了简化在绘制每个圆点的时候对坐标的定位计算，我选择九宫格的布局，所以增加了个九宫格坐标对象
3.代码
/*九宫格坐标图*/ function NineBlockBoxMap(squareSize){ var size = squareSize/3, maps = [[],[],[]], x,y, n = 3 for(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} } /*骰子*/ function Dice(){ var opts, ctx, maps function clearCanvas(){ //WARNNING : 不能清除整个Canvas画布,而是要清除当前骰子尺寸的部分画布，因为整个画布有多个骰子 //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,i for(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 = [] //根据1-6的骰子点数在九宫格图中绘制1-6个圆点 switch(num){ case 1 : points.push(maps.locate(1,1,opts.diceX,opts.diceY)) break case 2 : points.push(maps.locate(0,1,opts.diceX,opts.diceY)) points.push(maps.locate(2,1,opts.diceX,opts.diceY)) break case 3 : points.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)) break case 4 : points.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)) break case 5 : points.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)) break case 6 : points.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)) break default : alert(num + ‘ num must be 1~6‘) break } ctx.fillStyle = opts.dotFillStyle doDraw(points) } function drawDice(){ //绘制骰子矩形 ctx.lineWidth = opts.diceLineWidth ctx.strokeStyle = opts.diceStrokeStyle ctx.strokeRect(opts.diceX,opts.diceY,opts.diceWidth,opts.diceHeight) //绘制骰子上的圆点 var num = dotRandom() drawDots(num) return num } function extend(opt1,opt2){ var name opt1 = 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‘, dotFillStyle : ‘#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){ //清除当前骰子的绘图区域 clearCanvas() var num = drawDice() if(typeof onThrow === ‘function‘){ onThrow(num) } return this } } }//end-Dice /*游戏规则 2个骰子之和（2-12） 第一次（7，11） 胜 第一次（2，3，12 ）输 第一次 （4，5，6，8，9，10），继续 （第二次（7）输，如果正好和之前相同的点数则 胜，否则继续） */ var GameResult = {Lose:-1,Unknown:0,Win:1} var rule = function GameRule(){ var throwCount = 0 var continual = false var previousSum = 0 return { getResult : 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 = sum continual = ( result==GameResult.Unknown ) return result }, reset : function(result){ if(result==GameResult.win||result==GameResult.Lose){ throwCount = 0 continual = false previousSum = 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.Unknown sum = 0 //投掷骰子1 dice1.throwDice(function(num){ dice1TextBox.value = http://www.mamicode.com/num>
4.优化和完善
精简代码和抽象，增加记录得分，初始一定金额等效功能，使其更像是个赌博游戏。
【整理】HTML5游戏开发学习笔记（1）-骰子游戏
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。