zoukankan      html  css  js  c++  java
  • 68行代码实现贪吃蛇(Canvas)

    <canvas id="gc" width="400" height="400"></canvas>
    <script>
    window.onload=function() {
        canv = document.getElementById("gc");
        ctx = canv.getContext("2d");
        document.addEventListener("keydown",keyPush);
        setInterval(game,1000/15);
    }
    px=py=10;
    gs=tc=20;
    ax=ay=15;
    xv=yv=0;
    trail=[];
    tail=5;
    function game() {
        px+=xv;
        py+=yv;
        if(px<0) {
            px = tc-1;
        }
        if(px>tc-1) {
            px = 0;
        }
        if(py<0) {
            py = tc -1;
        }
        if(py>tc-1) {
            py = 0;
        }
        ctx.fillStyle = 'black';
        ctx.fillRect(0,0,canv.width,canv.height);
    
        ctx.fillStyle = 'yellow';
        for(var i=0;i<trail.length;i++) {
            ctx.fillRect(trail[i].x*gs,trail[i].y*gs,gs-2,gs-2);
            if(trail[i].x==px && trail[i].y==py) {
                tail = 5;
            }
        }
        trail.push({x:px,y:py});
        while(trail.length>tail) {
            trail.shift();
        }
        if(ax==px && ay==py) {
            tail++;
            ax=Math.floor(Math.random()*tc);
            ay=Math.floor(Math.random()*tc);
        }
        ctx.fillStyle = 'orange';
        ctx.fillRect(ax*gs,ay*gs,gs-2,gs-2);
    }
    function keyPush(evt) {
        switch(evt.keyCode) {
            case 37:
                xv=-1;yv=0;
                break;
            case 38:
                xv=0;yv=-1;
                break;
            case 39:
                xv=1;yv=0;
                break;
            case 40:
                xv=0;yv=1;
                break;
        }
    }
    </script>
  • 相关阅读:
    xshell入门及Linux常用命令
    C++之vector
    c++ 之 string
    引用 与 指针
    关于时间复杂度的计算以及相关概念
    位运算
    thymeleafDemo
    面试总结
    关于mvvm原理实现,模拟vue(3)-----发布订阅
    关于mvvm原理实现,模拟vue(2)-----模板编译
  • 原文地址:https://www.cnblogs.com/aisowe/p/15245602.html
Copyright © 2011-2022 走看看