用canvas写看你有多色游戏

看你有多色，前一阵在朋友圈很火的一个游戏，前两天写到半夜两点，自己把他写出来了，供学习JavaScript的canvas人看。

没有用什么特别的技术，简单易懂。

html文件很简单，放一个canvas控件，关联css和js文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><link type="text/css" rel="stylesheet" href="css/style.css">
</head>
<body><canvas id="canvas">对不起，您的浏览器不支持canvas</canvas>
<div id="time">剩余时间:60秒</div>
<div id="count">第1关</div></body>
<script type="text/javascript" src="js/mainScript.js"></script>
</html>

js文件

初始化游戏

function initGame(){canvas=document.getElementById("canvas");canvas.width=window.innerWidth;canvas.height=window.innerHeight;// 给canvas添加单击事件canvas.addEventListener("mousedown",click);n=2;count=1;time=60;if(canvas.getContext("2d")){context=canvas.getContext("2d");addRect();}var timeDiv=document.getElementById("time");timeDiv.innerHTML="剩余时间:"+time;var countDiv=document.getElementById("count");countDiv.innerHTML="第"+count+"关";countDown();
}

调用倒计时函数

// 倒计时函数
function countDown(){var timeDiv=document.getElementById("time");var t=setInterval(function(){time--;timeDiv.innerHTML="剩余时间:"+time+"秒";if(time<=0){clearInterval(t);alert("游戏结束，您闯过了"+count+"关");initGame();}},1000)
}

定义canvas的大小

// 定义Canvas的大小，以宽和高中最小的那个为准
function getSize() {if (window.innerHeight >= window.innerWidth) {return window.innerWidth;} else {return window.innerHeight-60;}
}

创建一个方块

/** 创建一个方块的函数* cxt:画笔* n: 一共创建几个方块* x:方块在屏幕上的x坐标,如0,1,2* y:方块在屏幕上的y坐标* color:创建方块的颜色* chooseColor:需要变浅的方块的颜色*/
function createRect(n,x,y,color){context.beginPath();// 画正方形context.fillStyle=color;context.fillRect(x*getSize()/n-5,y*getSize()/n-5,getSize()/n-5,getSize()/n-5);context.closePath();
}

单击后添加方块，有一个方块的透明度是其他的0.9

// 向屏幕里面添加方块
function addRect() {var rColor=parseInt(Math.random()*255);var gColor=parseInt(Math.random()*255);var bColor=parseInt(Math.random()*255);var color="rgb("+rColor+","+gColor+","+bColor+")";var colorChoose="rgba("+rColor+","+gColor+","+bColor+",0.9)";// 随机生成x和y作为变成浅色的位置x = parseInt(Math.random() * n);y = parseInt(Math.random() * n);for (var i = 0; i < n; i++) {for (var j = 0; j < n; j++) {if(x!=i||y!=j) {createRect(n, i, j, color);  // 画方块}}}createRect(n, x, y, colorChoose);
}

单击时触发的事件

// 点击的函数
function click() {//  记录现在的点的坐标// event.preventDefault();//var touch = event.touches[0];var indexX = event.clientX;  // 触摸点的X轴坐标var indexY = event.clientY;if(indexX>x*getSize()/n-5&&indexX<(getSize()/n-5+x*getSize()/n-5)&&indexY>y*getSize()/n-5+60&&indexY<(y*getSize()/n-5+getSize()/n-5+60)){if(n<8){n++;}count++;var countDiv=document.getElementById("count");countDiv.innerHTML="第"+count+"关";context.clearRect(0,0,getSize(),getSize());addRect();}
}

css文件中简单的进行布局

html,body{position: relative;width: 100%;height: 100%;overflow: hidden;margin: 0;
}#canvas{position: absolute;top:60px;left: 0;width: 100%;margin: 0 auto;
}#time,#count{position: absolute;top: 0;left: 0;height: 30px;font-size: 1.5em;
}

运行效果

手机端运行效果

以上就是主要方法了，源代码的下载地址

http://download.csdn.net/detail/u011035046/9156823

用canvas写看你有多色游戏相关推荐

封装构造函数，用canvas写饼状图和柱状图
封装构造函数,用canvas写饼状图和柱状图封装函数 // 场景 function XDLScence( options ) {this.stage = options.stage;//执行场景的初 ...
怎么画图自动生成HTML,用canvas写一个简易画图工具
本文将为您描述用canvas写一个简易画图工具,具体操作方法: Document style="border:1px solid #000000;">您的浏览器不支持canv ...
c语言写一个格子涂色的游戏,不一样的涂色游戏小程序，这个魔力贴贴涂色游戏有点意思...
原标题:不一样的涂色游戏小程序,这个魔力贴贴涂色游戏有点意思 30000+游戏爱好者已加入我们! 沐沐带你发现好游戏! <魔力贴贴>游戏小程序好玩吗? <魔力贴贴>小游戏怎么玩 ...
用Canvas写桌球游戏！！！
声明:本文为原创文章,如需转载,请注明来源WAxes,谢谢! 昨天上班的时候闲着无事,就用Canvas写了个桌球游戏来玩玩....所以就拿这游戏上来水一发.或许对一些刚学canvas的人有帮助. 话说 ...
html填色游戏源码,canvas的填色画游戏代码
canvas的填色画游戏代码 html5 canvas填色画游戏代码是一款适合儿童玩的益智类填色游戏,通过选中色块,来给模型填充颜色.支持多种模型选择填色效果. function extend(O1, ...
简单的运动学，用canvas写弹力球
声明:本文为原创文章,如需转载,请注明来源WAxes,谢谢! 跟之前的随笔一样,因为本人仍是菜鸟一只,所以用到的技术比较简单,不适合大神观看...... 学canvas学了有一个多礼拜了,觉得canv ...
使用HTML5的Canvas和raycasting创建一个伪3D游戏(part1)
使用HTML5的Canvas和raycasting创建一个伪3D游戏(part1) 刚来这找到一篇好文,自己翻译了下:(原文:http://dev.opera.com/articles/view/cr ...
使用HTML5 canvas和光线投影算法创建伪3D 游戏
为什么80%的码农都做不了架构师?>>> 作者 Jacob Seidelin · 2008年11月28日本文翻译自 Creating pseudo 3D games with ...
基于Canvas的js简单版接元宝游戏
本游戏是基于canvas的简单版接元宝游戏v1.0.0版本,往后还会进一步完善,游戏代码git地址:https://github.com/luqiren/Canvas.git 里面的gold_v1.0 ...
Creator填色游戏的一种实现方案
前言先上一个辛苦弄出来的gif效果.写公众号时间不长,很多技巧还在慢慢跟小伙伴学习.可关注公众号,回复"绘图"或者"填色"都可获得demo的git地址.请使用 ...

用canvas写看你有多色游戏

用canvas写看你有多色游戏相关推荐

最新文章

热门文章

用canvas写 看你有多色 游戏

用canvas写 看你有多色 游戏相关推荐

最新文章

热门文章

用canvas写看你有多色游戏

用canvas写看你有多色游戏相关推荐