HTML5贪吃蛇代码

首先声明，这是网上摘录的贪吃蛇完整代码，放在我博客上仅作学习用。

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>贪吃蛇</title>
    <style type="text/css">
*{margin:0;padding: 0;font-family: "Microsoft YaHei";}
#page{margin-right: auto;margin-left: auto; margin-top: 20px;height: 600px; width: 980px; }
#yard{ width: 800px;border: 1px solid gray;box-shadow: 0 0 10px black; float: right;}
#mark{font-weight: 800;}
#mark_con{ color: red; }
button{width: 50px; }
a{text-decoration:none;}
</style>
<script type="text/javascript">
        //伪常量
        var BLOCK_SIZE = 20;        //格子大小
        var COLS = 40;                        //列数
        var ROWS = 30;                        //行数
        //变量
        var snakes = [];                //保存蛇坐标
        var c = null;                        //绘图对象
        var toGo = 3;                        //行进方向
        var snakecount = 4;                //蛇身数量
        var interval = null;        //计时器
        var foodX = 0;                        //食物X轴坐标
        var foodY = 0;                        //食物Y轴坐标
        var oMark = null;                //分数显示框
        var isPause = false;        //是否暂停
        // 绘图函数
        function draw(){
            c.clearRect(0,0,BLOCK_SIZE * COLS, BLOCK_SIZE * ROWS);
            //画出横线
            for( var i = 1; i <= ROWS; i++ ) {
                c.beginPath();
                c.moveTo(0, i * BLOCK_SIZE);
                c.lineTo(BLOCK_SIZE * COLS, i * BLOCK_SIZE);
                c.strokeStyle = "gray";
                c.stroke();
            }
            //画出竖线
            for(var i = 1; i <= COLS; i++){
                c.beginPath();
                c.moveTo(i * BLOCK_SIZE, 0);
                c.lineTo(i * BLOCK_SIZE, BLOCK_SIZE * ROWS);
                c.stroke();
            }
            //画出蛇
            for (var i = 0; i < snakes.length; i++){
                c.beginPath();
                c.fillStyle = "green";
                c.fillRect(snakes[i].x, snakes[i].y, BLOCK_SIZE, BLOCK_SIZE);
                c.moveTo(snakes[i].x, snakes[i].y);
                c.lineTo(snakes[i].x + BLOCK_SIZE, snakes[i].y);
                c.lineTo(snakes[i].x + BLOCK_SIZE, snakes[i].y + BLOCK_SIZE);
                c.lineTo(snakes[i].x, snakes[i].y + BLOCK_SIZE);
                c.closePath();
                c.strokeStyle = "red";
                c.stroke();
            }
            //画出食物
            c.beginPath();
            c.fillStyle = "yellow";
            c.fillRect(foodX, foodY, BLOCK_SIZE, BLOCK_SIZE);
            c.moveTo(foodX, foodY);
            c.lineTo(foodX + BLOCK_SIZE, foodY);
            c.lineTo(foodX + BLOCK_SIZE, foodY + BLOCK_SIZE);
            c.lineTo(foodX, foodY + BLOCK_SIZE);
            c.closePath();
            c.strokeStyle = "red";
            c.stroke();
        }
        //游戏初始化
        function start(){
            for( var i = 0; i < snakecount; i++){
                snakes[i] = {x: i * BLOCK_SIZE, y: 0};
            }
            addFood();
            //draw();
            oMark.innerHTML = 0;
        }
        //移动函数
        function move(){
            switch(toGo){
                case 1: //左边
                    snakes.push({x: snakes[snakecount - 1].x - BLOCK_SIZE, y: snakes[snakecount - 1].y});
                break;
                case 2: //上边
                    snakes.push({x: snakes[snakecount - 1].x, y: snakes[snakecount - 1].y - BLOCK_SIZE});
                break;
                case 3: //右边
                    snakes.push({x: snakes[snakecount - 1].x + BLOCK_SIZE, y: snakes[snakecount - 1].y});
                break;
                case 4: //下边
                    snakes.push({x: snakes[snakecount - 1].x, y: snakes[snakecount - 1].y + BLOCK_SIZE});
                break;
                default:;
            }
            snakes.shift();
            isEat();
            isDie();
            draw();
        }
        //吃到食物判断
        function isEat(){
            if (snakes[snakecount - 1].x == foodX && snakes[snakecount - 1].y == foodY) {
                oMark.innerHTML = (parseInt(oMark.innerHTML) + 1).toString();
                addFood();
                addSnake();
            }
        }
        //添加蛇身
        function addSnake(){
            snakecount++;
            snakes.unshift({x:BLOCK_SIZE * COLS, y:BLOCK_SIZE * ROWS});
        }
        //交互响应函数
        function keydown(keyCode){
                switch(keyCode){
                        case 37: //左边
                                if(toGo != 1 && toGo != 3) toGo = 1;break;
                        case 38: //上边
                                if(toGo != 2 && toGo != 4)        toGo = 2;break;
                        case 39: //右边
                                if(toGo != 3 && toGo != 1)         toGo = 3;break;
                        case 40: //下的
                                if(toGo != 4 && toGo != 2)        toGo = 4;break;
                        case 80: //开始/暂停
                                if(isPause){
                                        interval = setInterval(move,200);
                                        isPause = false;
                                        document.getElementById('pause').innerHTML = "Pause";
                                }else{
                                        clearInterval(interval);
                                        isPause = true;
                                        document.getElementById('pause').innerHTML = "Start";
                                }
                                break;
                }
        }
        //制造食物
        function addFood(){
                foodX = Math.floor(Math.random() * (COLS - 1)) * BLOCK_SIZE;
                foodY = Math.floor(Math.random() * (ROWS - 1)) * BLOCK_SIZE;
                // console.log(foodX + " -- " + foodY);
        }
        //死亡判断
        function isDie(){
                if(snakes[snakecount - 1].x == -20 || snakes[snakecount - 1].x == BLOCK_SIZE * COLS
                        || snakes[snakecount - 1].y == -20 || snakes[snakecount - 1].y == BLOCK_SIZE * ROWS){
                        alert("Game Over!");
                        clearInterval(interval);
                }
                for(var i = 0; i < snakecount - 1; i++){
                        if(snakes[snakecount - 1].x == snakes[i].x && snakes[snakecount - 1].y == snakes[i].y){
                                clearInterval(interval);
                                alert("Game Over!");
                        }
                }
        }
        // 启动函数
        window.onload = function(){
            c = document.getElementById('canvas').getContext('2d');
            oMark = document.getElementById('mark_con');
            start();
            interval = setInterval(move,100);
            document.onkeydown = function(event){
                var event = event || window.event;
                keydown(event.keyCode);
            }
        }
</script>
</head>
<body>

HTML5贪吃蛇代码相关推荐

用html编写一个贪吃蛇,HTML编写的贪吃蛇代码
<HTML编写的贪吃蛇代码>由会员分享,可在线阅读,更多相关<HTML编写的贪吃蛇代码(14页珍藏版)>请在人人文库网上搜索. 1.使用表格 var fangxiang;fan ...
c语言安卓贪吃蛇代码下载,C语言贪吃蛇代码
c语言编写贪吃蛇源代码,简单易懂,文件为VC源代码.如果你正在学习c语言,就来下载吧.很经典的 C语言贪吃蛇代码部分 #include #include #include#include #defin ...
【无标题】学习贪吃蛇代码
学习贪吃蛇代码
贪吃蛇的c语言程序码,C语言贪吃蛇代码下载_C语言贪吃蛇代码官方下载-太平洋下载中心...
C语言编写贪吃蛇源代码,简单易懂,文件为VC源代码.如果你正在学习c语言,就来下载吧.很经典的. C语言贪吃蛇代码原理: 产生一个固定大小没有边界的游戏区域,蛇从区域的中心开始,由玩家通过键盘控制蛇的 ...
c语言程序的英式棋盘,使用棋盘法的贪吃蛇代码
使用棋盘法的贪吃蛇代码在我此前发了一篇对其他人的贪吃蛇C代码的分析和注释,在那个代码中的算法主要是用一个线性表存储蛇的所有身体节点的位置.然后随着游戏进行,需要把相应的蛇身节点依次平移一次(把数组里 ...
c语言字符蛇代码,C语言实现贪吃蛇代码
本文实例为大家分享了C语言实现贪吃蛇代码的具体代码,供大家参考,具体内容如下 #include"stdafx.h" #include #include #include #incl ...
python贪吃蛇代码课程设计_ｃ语言课程设计之贪吃蛇代码及思路　ｃ语言课程设计报告之贪吃蛇...
原文作者:aircraft 原文地址:https://www.cnblogs.com/DOMLX/p/8846529.html 注:本文档需与c语言课程设计之贪吃蛇文档配套使用.c语言实现贪吃蛇代码可 ...
面向对象编程java小游戏_JavaScript面向对象编程小游戏---贪吃蛇代码实例
1 面向对象编程思想在程序项目中有着非常明显的优势: 1- 1 代码可读性高.由于继承的存在,即使改变需求,那么维护也只是在局部模块 1-2 维护非常方便并且成本较低. 2 这个demo是采用了面向 ...
html游戏贪吃蛇代码,html5贪吃蛇游戏使用63行代码完美实现
以前也很少关注html5,感觉选择html已经慢慢成为趋势,想了解下.就找了个游戏学习了,写完这个游戏感觉html5和js结合很紧密,如果js不是特别好.估计需要先补习下js,这个只是个人的建议,不一 ...

HTML5贪吃蛇代码

HTML5贪吃蛇代码相关推荐

最新文章

热门文章