karlew > HTML5小游戏 > canvas实现的找不同色块游戏

canvas实现的找不同色块游戏

4-18 7,197 views

去年挺火的一个游戏，当时想做但因为颜色不知道怎么根据难度调整，今天有空的时候尝试写了出来，可能不是很专业，但至少难度还是比较符合常理的，颜色差距会随着正确次数越多而逐渐缩小。

QQ截图20160418171618

演示链接：http://wx.karlew.com/findcolor/

下面是完整代码：

  1. <html>
  2. <head>
  3. <title>找不同色块的游戏</title>
  4. <style>
  5.     body{
  6.         padding:0;
  7.         margin:0;
  8.         width:100%;
  9.         height:100%;
  10.         background-color:#f3f3f3;
  11.         overflow:hidden;
  12.         display: table;
  13.     }
  14.     div{
  15.         display: table-cell;
  16.         vertical-align: middle;
  17.         text-align: center;
  18.     }
  19. </style>
  20. </head>
  21. <body>
  22.     <div>
  23.         <canvas id='canvas'>您的浏览器不支持canvas</canvas>
  24.     </div>
  25. </body>
  26. </html>
  28. <script>
  29.     canvas = document.getElementById('canvas'),
  30.     size = window.innerWidth<window.innerHeight?window.innerWidth:window.innerHeight
  31.     canvas.width = size
  32.     canvas.height = size
  33.     ctx = canvas.getContext('2d')
  34.     var rank=0,n=2
  35.     targetX=parseInt(Math.random()*n)
  36.     targetY=parseInt(Math.random()*n)
  37.     addRect()
  39.     canvas.onclick = function(e){
  40.         bcr =canvas.getBoundingClientRect()
  41.         clickX = e.clientX- bcr.left *(canvas.width / bcr.width)
  42.         clickY = e.clientY- bcr.top *(canvas.height / bcr.height)
  43.         if(checkArea(clickX,clickY)){
  44.             rank++
  45.             ctx.clearRect(0,0,size,size)
  46.             if(rank>60){
  47.                 alert("天才，你已经通关了，得分为"+rank+"分")
  48.                 rank=0
  49.                 n=2
  50.             }else if(n<8){
  51.                 n++
  52.             }
  53.         }else{
  54.             alert("游戏结束，你的分数为："+rank+"分")
  55.             ctx.clearRect(0,0,size,size)
  56.             rank=0
  57.             n=2
  58.         }
  59.         targetX = parseInt(Math.random()*n)
  60.         targetY = parseInt(Math.random()*n)
  61.         addRect()
  62.     }
  64.     //判断点击的位置是否为不同色块所在区域
  65.     function checkArea(clickX,clickY){
  66.         beginX = size*targetX/n
  67.         endX = size*(targetX+1)/n
  68.         beginY = size*targetY/n
  69.         endY = size*(targetY+1)/n
  70.         if(clickX>=beginX&&clickX<=endX&&clickY>=beginY&&clickY<=endY){
  71.             return true
  72.         }else{
  73.             return false
  74.         }
  75.     }
  77.     //向canvas添加多个矩形
  78.     function addRect(){
  79.         itemSize = size/n
  80.         rectSize = itemSize-size*0.06/n
  81.         rectPadding = size*0.03/n
  82.         rectRadius = size*0.1/n
  83.         colorArr = setColor()
  84.         color = colorArr.color
  85.         scolor = colorArr.scolor
  86.         for(var x=0;x<n;x++){
  87.             for(var y=0;y<n;y++){
  88.                 if(x!=targetX||y!=targetY){
  89.                     drawRect(color,x*itemSize+rectPadding,y*itemSize+rectPadding,rectSize,rectSize,rectRadius)
  90.                 }else{
  91.                     drawRect(scolor,x*itemSize+rectPadding,y*itemSize+rectPadding,rectSize,rectSize,rectRadius)
  92.                 }
  93.             }
  94.         }
  95.     }
  97.     //画圆角矩形，r为圆角半径
  98.     function drawRect(color,x,y,w,h,r) {
  99.         ctx.beginPath()
  100.         ctx.moveTo(x-r,y)
  101.         ctx.arcTo(x+w,y,x+w,y+h,r)
  102.         ctx.arcTo(x+w,y+h,x,y+h,r)
  103.         ctx.arcTo(x,y+h,x,y,r)
  104.         ctx.arcTo(x,y,x+r,y,r)
  105.         ctx.fillStyle = color
  106.         ctx.fill()
  107.     }
  109.     //颜色配置
  110.     function setColor(){
  111.         rgbArr = [ parseInt(Math.random()*100+150), parseInt(Math.random()*250), parseInt(Math.random()*200) ]
  112.         rgbArr.sort(randomsort);
  113.         red=rgbArr[0]
  114.         green=rgbArr[1]
  115.         blue=rgbArr[2]
  116.         //设置颜色数字变化范围
  117.         if(Math.random()>0.5){
  118.             index = parseInt((100-rank)/5)
  119.         }else{
  120.             index = -parseInt((100-rank)/5)
  121.         }
  122.         color="rgb("+red+", "+green+", "+blue+")"
  123.         scolor="rgb("+(red+index)+", "+(green+index)+", "+(blue+index)+")"
  124.         return{
  125.             color:color,
  126.             scolor:scolor
  127.         }
  128.     }
  130.     //打乱颜色数组数组
  131.     function randomsort() {
  132.         return Math.random()>0.5 ? -1 : 1
  133.     }
  135. </script>

版权属于: karlew

原文地址: https://www.karlew.com/archives/386

转载时必须以链接形式注明原始出处及本声明。

欢迎留言