用canvas写看你有多色游戏

最新推荐文章于 2024-09-16 13:39:40 发布

ubuntugx

最新推荐文章于 2024-09-16 13:39:40 发布

阅读量593

点赞数

分类专栏： JavaScript 文章标签：游戏 canvas javascript 看你有多色

本文链接：https://blog.csdn.net/u011035046/article/details/48913049

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

运行效果