看你有多色,前一阵在朋友圈很火的一个游戏,前两天写到半夜两点,自己把他写出来了,供学习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