第11讲 Untangle Puzzle Game 信息学院孙辉
第11讲 信息学院 孙辉 Untangle Puzzle Game
基于canvas的解题游戏 关于HTML5解题游戏 1.最标点击小球可以随意拖动 2.不相文的线，比较细，成绿色：相文的线，比较粗，成红色 3.进度计算方法：绿色线数/总线数100,100%时进入下一关 4,共3关，比较简单，初字HTML5做的练习 HTML5解题游戏 第1关，进度0%
基于canvas的解题游戏
问题分析 ■过关条件：拖动小球使得所有的线条都不相交 ■游戏中的元素 小球 线 ·鼠标事件 ·获取鼠标位置 ·检测鼠标事件是否发生在小球上 ·检测线的交点
问题分析 ▪过关条件：拖动小球使得所有的线条都不相交 ▪游戏中的元素 ▪小球 ▪线 ▪鼠标事件 ▪获取鼠标位置 ▪检测鼠标事件是否发生在小球上 ▪检测线的交点
1、Canvas上画圆 $(function({ var canvas=document.getElementByld("game"); var ctx canvas.getContext("2d"); ctx.fillSyle="rgba(200,200,100,.6)"; ctx.beginPath(); ctx.arc(100,100,50,0,Math.PI*2,true); ctx.closePath(); ctx.fill(); 房
1、Canvas上画圆 $(function(){ var canvas = document.getElementById("game"); var ctx = canvas.getContext("2d"); ctx.fillSyle = "rgba(200, 200, 100, .6)"; ctx.beginPath(); ctx.arc(100,100, 50, 0, Math.PI*2, true); ctx.closePath(); ctx.fill(); });
2、随机画出5个圆，并保存圆的位置 $(function(){ var canvas =document.getElementByld("game"); var ctx =canvas.getContext("2d"); var circleRadius =10; var width =canvas.width; var height=canvas.height; /draw 5 circles randomly; var circleCount =5; for(var i=0;i<circleCount;i++){ var x=Math.random()*width; var y=Math.random()*height; drawCircles(ctx,x,y,circleRadius); untangleGame.circles.push(new Circle(x,y,circleRadius));
2、随机画出5个圆，并保存圆的位置 $(function(){ var canvas = document.getElementById("game"); var ctx = canvas.getContext("2d"); var circleRadius = 10; var width = canvas.width; var height = canvas.height; // draw 5 circles randomly; var circleCount = 5; for (var i = 0; i < circleCount; i++) { var x = Math.random()*width; var y = Math.random()*height; drawCircles(ctx, x, y, circleRadius); untangleGame.circles.push(new Circle(x, y, circleRadius)); } });