玩一组奇妙的打字游戏

玩一组奇妙的打字游戏

<!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>

<div id="content">

    <div class="game">

        <input type="button" name="start" id="start" value="开始" />

        <span>分数:</span><span id="score"></span>

        <span>倒计时:</span><span id="times">30</span>

    </div>

</div>

<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 < letterArr.length; i++) {

                letterArr[i].move();

                if(letterArr[i].clear()) {

                    letterArr.splice(i, 1);

                    i--;

                } else {

                    letterArr[i].draw();

                }

            }

            index++;

        }, 30);

        //倒计时

 

        timer = setInterval(function() {

            times.innerHTML = times.innerHTML - 0 - 1;

            if(times.innerHTML == 0) {

                clearInterval(1);

                clearInterval(2);

                alert("分数是:" + score.innerHTML);

                location.reload();

            }

        }, 1000);

        document.onkeypress = function(ev) {

            var evObj = ev || window.event;

            //将对应的ASC转成字符

            var str = String.fromCharCode(evObj.keyCode);

            for(var i = 0; i < letterArr.length; i++) {

                if (letterArr[i].val == str) {

                    letterArr.splice(i,1);

                    i--;

                    score.innerHTML = score.innerHTML - 0 + 1;

                    break;

                }

            }

        }

    }

</script>

</body>

 

</html>

对于课程中的疑问,大家可以加 web前端学习部落22群 120342833和其他老师还有众多的小伙伴们进行沟通交流哦,群里还有不少技术大拿、行业大牛 可以一起探讨问题,我们也会安排专业的技术老师为大家答疑解惑呢!

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值