zoukankan      html  css  js  c++  java
  • 贪吃蛇插件

    贪吃蛇插件

    代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            *{
                margin:0;
                padding:0;
            }
            #myCanvas{
                display:block;
                margin:50px auto;
                position:relative;
            }
            #myCanvas.active:after{
                content:'结束了';
                position:absolute;
                top:0; left:0;
                bottom:0; right:0;
                margin:auto;
                background:rgba(0,0,0,.6);
            }
            .jf{
                text-align:center;
            }
        </style>
    </head>
    <body>
        <div class="tcs">
            <canvas id="myCanvas"></canvas>
            <div class="jf">
                <p>得分:<span id="num"></span></p>
                <button id="cxks">重新开始</button>
            </div>
        </div>
    
        <script>
            var c = document.getElementById('myCanvas');
            var ctx = c.getContext('2d');
    
            c.style.background = '#000';
    
            var gsize = 20;  //格子大小
            var cWIDTH = 800; //画布宽度
            var cHEIGHT = 800; //画布高度
            var X,Y; //食物坐标
            var sX = cWIDTH / 2 - gsize;
            var sY = cHEIGHT / 2; //蛇头坐标
            var sLeng = 3; //初始蛇身长度
            var sData = []; //蛇的每节坐标
            var fx = 39; //默认前行方向  37-左  38-上  39-右  40-下
            var num = 0; //积分
            var game = 0;
    
            var numHTML = document.getElementById('num');
            var cxks = document.getElementById('cxks');
    
            c.width = cWIDTH;
            c.height = cHEIGHT;
    
            function xyxian(){
                //遍历竖线
                for(var i=0;i< cWIDTH / gsize;i++){
                    ctx.beginPath();
                    ctx.strokeStyle = '#fff';
                    ctx.moveTo(i*gsize , 0);
                    ctx.lineTo(i*gsize , cHEIGHT);
                    ctx.stroke();
                }
    
                for(var i=0;i< cHEIGHT / gsize;i++){
                    ctx.beginPath();
                    ctx.strokeStyle = '#fff';
                    ctx.moveTo(0 , i*gsize);
                    ctx.lineTo(cWIDTH , i*gsize);
                    ctx.stroke();
                }
            }
            xyxian();
            
    
            function zbX(){
                var XB = Math.floor(Math.random()*cWIDTH / gsize);
                return XB * gsize
            }
    
            function zbY(){
                var YB = Math.floor(Math.random()*cHEIGHT / gsize);
                return YB * gsize
            }
    
            for(var i=0;i<sLeng;i++){
                sData[i] = [sX-i*gsize,sY];
            }
            function Sn(){
                ctx.beginPath();
                ctx.fillStyle = 'yellow';
                for(var i=0;i<sLeng;i++){
                    ctx.fillRect(sData[i][0],sData[i][1],gsize,gsize);
                    ctx.fill();
                }
    
                ctx.beginPath();
                
                for(var i=0;i<sLeng;i++){
                    if(i == 0){
                        ctx.fillStyle = 'yellow';
                    }else{
                        ctx.fillStyle = 'green';
                    }
                    ctx.fillRect(sData[i][0]+1,sData[i][1]+1,gsize-2,gsize-2);
                    ctx.fill();
                }
            }
            Sn()
    
            //随机出现食物
            function mathDian(){
                X = zbX();
                Y = zbY();
    
                return X,Y;
            }
            mathDian();
            function food(){
                ctx.beginPath();
                ctx.fillStyle = 'red';
                ctx.fillRect(X, Y , gsize , gsize);
                ctx.fill();
            }
            food();
    
            cxks.onclick = function(){
                num = 0;
                numHTML.innerHTML = num;
                fx = 39;
                if(game == 1){
                    sLeng = 3;
                    sX = cWIDTH / 2 - gsize;
                    sY = cHEIGHT / 2; //蛇头坐标
                    for(var i=0;i<sLeng;i++){
                        sData[i] = [sX-i*gsize,sY];
                    }
    
                    set = setInterval(dsn,500);
    
                    document.onkeydown=function(event){
                        ctx.clearRect(0,0,c.width,c.height); 
                        food();
                        xyxian();
                        var e = event || window.event || arguments.callee.caller.arguments[0];
                        
                        var lastData = sData[0];
                        fx = e.keyCode;
                        switch(e.keyCode){
                            case 37:
                                sData.unshift([lastData[0] - gsize , lastData[1] ]);
                                break;
                            case 38:
                                sData.unshift([lastData[0] , lastData[1] - gsize]);
                                break;
                            case 39:
                                sData.unshift([lastData[0] + gsize , lastData[1]]);
                                break;
                            case 40:
                                sData.unshift([lastData[0] , lastData[1] + gsize]);
                                break;
                        }
                        xp();
                        up();
                    }; 
                    game = 0;
                }else{
                    num = 0;
                    numHTML.innerHTML = num;
                    fx = 39;
                    for(var i=0;i<sLeng;i++){
                        sLeng = 3;
                        sX = cWIDTH / 2 - gsize;
                        sY = cHEIGHT / 2; //蛇头坐标
                        for(var i=0;i<sLeng;i++){
                            sData[i] = [sX-i*gsize,sY];
                        }
                    }
                }
                
            }
    
            function xp(){
                if(sData[0][0] == X && sData[0][1] == Y){
                    mathDian();
                    food();
                    sLeng++;
                    num += 1;
                    numHTML.innerHTML = num;
                }else{
                    ctx.clearRect(sData[sLeng-1][0], sData[sLeng-1][1], gsize, gsize);
                    sData.pop();
                }
    
                Sn();
            }
            
            document.onkeydown=function(event){
                ctx.clearRect(0,0,c.width,c.height); 
                food();
                xyxian();
                var e = event || window.event || arguments.callee.caller.arguments[0];
                
                var lastData = sData[0];
                fx = e.keyCode;
                switch(e.keyCode){
                    case 37:
                        sData.unshift([lastData[0] - gsize , lastData[1] ]);
                        break;
                    case 38:
                        sData.unshift([lastData[0] , lastData[1] - gsize]);
                        break;
                    case 39:
                        sData.unshift([lastData[0] + gsize , lastData[1]]);
                        break;
                    case 40:
                        sData.unshift([lastData[0] , lastData[1] + gsize]);
                        break;
                }
                xp();
                up();
            }; 
    
            function dsn(){
                ctx.clearRect(0,0,c.width,c.height); 
                food();
                xyxian();
                var lastData = sData[0];
                switch(fx){
                    case 37:
                        sData.unshift([lastData[0] - gsize , lastData[1] ]);
                        break;
                    case 38:
                        sData.unshift([lastData[0] , lastData[1] - gsize]);
                        break;
                    case 39:
                        sData.unshift([lastData[0] + gsize , lastData[1]]);
                        break;
                    case 40:
                        sData.unshift([lastData[0] , lastData[1] + gsize]);
                        break;
                }
                xp();
    
                up();
    
            }
    
            var set = setInterval(dsn,500)
    
            function up(){
                if(sData[0][0] >= cWIDTH || sData[0][0] < 0 || sData[0][1] >= cHEIGHT || sData[0][1] < 0){
                    alert('你死了,得分'+num);
                    clearInterval(set);
                    document.onkeydown=function(event){
                        return false;
                    }
    
                    game = 1;
    
                }
    
                for(i in sData){
                    if(sData[i][0] == sData[0][0] && sData[i][1] == sData[0][1] && i != 0){
                        alert('你死了,得分'+num);
                        clearInterval(set);
                        document.onkeydown=function(event){
                            return false;
                        }
                        game = 1;
                    }
                }
            }
    
        </script>
    </body>
    </html>
  • 相关阅读:
    Effective C++ 读书笔记之Part1.Accustoming Yourself to C++
    Effective C++ 读书笔记之Part4.Design and Declarations
    Effective C++ 读书笔记之Part5.Implementations
    给程序猿三条身体保健的建议
    亮剑.NET的系列文章之.NET详解(开端)
    [转]英特尔工具使在多个处理器上实现线程化更加轻松
    [转]TrackBack Technical Specification
    Chapter 03 Writing Executable Statements 01
    Chapter 09Manipulating Data 01
    Chapter 00 Overview to PL/SQL
  • 原文地址:https://www.cnblogs.com/xbfxzzq/p/11726410.html
Copyright © 2011-2022 走看看