玩一组奇妙的打字游戏

玩一组奇妙的打字游戏 <!DOCTYPE html> <html> <!--made in 花小柒--> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> html, body { height: 100%; }

    body {
        background-color: #333;
    }

    div {
        color: white;
    }

    #content {
        position: absolute;
        width: 500px;
    }

    .game {
        position: absolute;
        left: 0;
        top: 0;
    }

    #start {
        background-color: white;
        border: 0;
        font-size: 25px;
        width: 80px;
        height: 30px;
        cursor: pointer;
    }
</style>

</head>

<body>

<input type="button" name="start" id="start" value="开始" /> 分数: 倒计时:30

<canvas id="myCanvas"></canvas>

<script type="text/javascript"> var start = document.getElementById("start"); var times = document.getElementById("times"); var score = document.getElementById("score"); var canvas = document.getElementById("myCanvas"); var cxt = canvas.getContext("2d"); canvas.width = document.documentElement.clientWidth; canvas.height = document.documentElement.clientHeight; var letStr = "abcdefghijklmnopqrstuvwsyz"; //随机数 function rand(min, max) { return parseInt(Math.random() * (max - min + 1) + min); } //创建字母对象 function Letter() { this.x = rand(0, canvas.width - 25); this.y = 0; this.speedY = rand(1, 6); this.val = letStr[rand(0, 25)]; this.color = ["magenta", "golden","yellow"] } //画的方法 Letter.prototype.draw = function() { cxt.font = "Bold 25px verdana"; cxt.fillStyle = this.color[rand(0, 2)]; cxt.shadowColor = "darkblue"; cxt.shadowBlur = 15; cxt.fillText(this.val, this.x, this.y); } //移动的方法 Letter.prototype.move = function() { this.y += this.speedY; } //删除超除屏幕的对象 Letter.prototype.clear = function() { if(this.y >= canvas.height) { return true; } else { return false; } } //盛放对象的数组 var letterArr = []; //控制对象产生速度的数字 var index = 0; var timer = null; var game = null; start.onclick = function() { clearInterval(timer); clearInterval(game); game = setInterval(function() { cxt.clearRect(0, 0, canvas.width, canvas.height); //先创建对象 if(index % 20 == 0) { index++; var letter = new Letter(); letterArr.push(letter); } for(var i = 0; i