1. [图片] E6~0%QPA46ER843UQJ$0Z`H.jpg


​2. [文件] snake.html 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>The snake game</title>
</head>
<script type="text/javascript">
    function log(msg) {
        console.log(msg);
    }
</script>
 
<body>
 
 
    <canvas id="canvas">
        Your browser cannot support html5.  
    </canvas>
 
    <script type="text/javascript">
        this.onkeydown = function(e) {
            var code = e.keyCode;
            if (code == 37)
                changeMove(3);
            if (code == 38)
                changeMove(0);
            if (code == 39)
                changeMove(1);
            if (code == 40)
                changeMove(2);
        }
        function changeMove(val) {
            if ((move == 0 || move == 2) && (val == 2 || val == 0))
                return;http://www.huiyi8.com/hunsha/chuangyi/​
            if ((move == 3 || move == 1) && (val == 1 || val == 3))
                return;创意婚纱照片
            move = val;
        }
 
        function dead(snake) {
            // 撞墙壁
            switch (move) {
            case 0:
                if (snake[0] < 0) {
                    log('up:' + snake[0]);
                    return true;
                }
                break;
            case 1:
                if (snake[0] % 20 == 0) {
                    log('right:' + snake[0]);
                    return true;
                }
                break;
            case 2:
                if (snake[0] >= 400) {
                    log('down:' + snake[0]);
                    return true;
                }
                break;
            case 3:
                if ((snake[0] + 1) % 20 == 0) {
                    log('left:' + snake[0]);
                    return true;
                }
                break;
            default:
                break;
            }
            // 咬自己
            for(var i = 1; i < snake.length ; i ++) {
                if(snake[0] == snake[i]) {
                    log('self:' + snake[0]);
                    return true;
                }
            }
            return false;
        }
        // rand=-1表示食物被吃，要求重新生成食物
        function run(rand) {
            //ctx.fillStyle = '#000000';
            ctx.clearRect(100, 100, 300, 300);
            // 画布容器
            var container = new Array(400);
            for ( var i = 0; i < container.length; i++) {
                container[i] = 0;
            }
            for ( var i in snake) {
                container[snake[i]] = 1;
            }
            // 生成食物
            if(rand == -1) {
                var rands = [];
                for ( var i in container) {
                    if (container[i] == 0)
                        rands.push(i);
                }
                rand = rands[parseInt(Math.random() * rands.length)];
            }
            // 放入画布容器
            container[rand] = 1;
            for ( var i = 0; i < container.length; i++) {
                if (container[i] == 0) {
                    ctx.fillRect(100 + sw * (i % 20),
                            100 + sw * parseInt((i / 20)), sw, sw);
 
                    ctx.strokeRect(100 + sw * (i % 20),
                            100 + sw * parseInt((i / 20)), 10, sw);
                } else {
                    ctx.strokeRect(100 + sw * (i % 20),
                            100 + sw * parseInt((i / 20)), sw, sw);
                }
            }
            var slen = snake.length;
            var shead = snake[0], send = snake[slen - 1];
            ctx.fillStyle = '#000000';
            ctx.fillRect(100 + sw * (shead % 20), 100 + sw * parseInt((shead / 20)), sw, sw);
            //ctx.fillRect(100 + sw * (shead % 20), 100 + sw * parseInt((shead / 20)), sw, sw);
            ctx.fillStyle = '#ff0000';
            ctx.beginPath();
            ctx.arc((100 + sw * (shead % 20)) + sw / 2, (100 + sw * parseInt((shead / 20))) + sw / 2, sw / 2, 0, Math.PI * 2, false);
            //不关闭路径路径会一直保留下去，当然也可以利用这个特点做出意想不到的效果
            ctx.closePath();
            ctx.fill();
            ctx.fillStyle = '#000000';
            //ctx.strokeRect(100 + sw * (shead % 20), 100 + sw
            //      * parseInt((shead / 20)), sw, sw);
            for ( var i = slen - 1; i > 0; i--) {
                snake[i] = snake[i - 1];
            }
            switch (move) {
            case 0:
                snake[0] = shead - 20;
                break;
            case 1:
                snake[0] = shead + 1;
                break;
            case 2:
                snake[0] = shead + 20;
                break;
            case 3:
                snake[0] = shead - 1;
                break;
            default:
                break;
            }
            // 死亡
            if (dead(snake)) {
                alert('game over');
                return false;
            }
            // 蛇吃到食物，增加移动次数，到达蛇尾，把食物放到蛇数组
            if (eat && ms++ == slen) {
                ms = 0;
                snake.push(send);
                eat = false;
            }
            // 吃到食物，重新生成食物
            if (snake[0] == rand) {
                eat = true;
                rand = -1;
            }
            setTimeout('run(' + rand + ')', speed);
        }
        //log(snake);
        //for(var i = 0; i < 300; i ++)
        var canvas = document.getElementById('canvas');
        canvas.width = 400;
        canvas.height = 400;
        var ctx = canvas.getContext('2d');
        var snake = []; // 蛇对象
        snake.push(205);
        snake.push(204);
        snake.push(203);
        snake.push(202);
        snake.push(201);
        // move：移动方式[0, 1, 2, 3] = [up, right, down, left]
        // ms：当蛇吃到食物后的移动次数，以此来判断增加蛇数组长度
        // eat：蛇是否吃到食物
        // sw：蛇方块宽度
        // speed：速度ms
        var move = 1, ms = 0, eat = false, sw = 10, speed = 50;
        run(-1);
 
        log(canvas);
    </script>
</body>
</html>

简易html5贪吃蛇的更多相关文章

  1. WebGL实现HTML5贪吃蛇3D游戏

    js1k.com收集了小于1k的javascript小例子,里面有很多很炫很酷的游戏和特效,今年规则又增加了新花样,传统的classic类型基础上又增加了WebGL类型,以及允许增加到2K的++类型, ...

  2. [置顶] 63行代码完美实现html5 贪吃蛇游戏

    以前也很少关注html5,感觉选择html已经慢慢成为趋势,想了解下.就找了个游戏学习了,写完这个游戏感觉html5和js结合很紧密,如果js不是特别好.估计需要先补习下js,这个只是个人的建议,不一 ...

  3. JavaScript 实现简易版贪吃蛇（Day_13）

    时光永远在变迁,你始终要丢下过去. 使用语言 JavaScript  概述 运用JavaScript  实现简易版<贪吃蛇>.     Html 页面 1 <!DOCTYPE htm ...

  4. 使用TypeScript实现简单的HTML5贪吃蛇游戏

    TypeScript是一种由微软开发的自由和开源的编程语言.它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程.安德斯·海尔斯伯格,C#的首席架构师,已 ...

  5. Javascript基础示例：用JS写简易版贪吃蛇（面向对象）

    废话不多说,代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...

  6. HTML5贪吃蛇源代码

    显示效果例如以下:点击这里!       代码下载:点击这里! <script> function show(){  var date = new Date(); //日期对象  var ...

  7. python贪吃蛇

    代码地址如下:http://www.demodashi.com/demo/13335.html 一.先展示python贪吃蛇效果 二.操作说明 按键 功能 UP 向上移动 DOWN 向下移动 LEFT ...

  8. WebGL实现HTML5的3D贪吃蛇游戏

    js1k.com收集了小于1k的javascript小例子,里面有很多很炫很酷的游戏和特效,今年规则又增加了新花样,传统的classic类型基础上又增加了WebGL类型,以及允许增加到2K的++类型, ...

  9. [原创]html5游戏_贪吃蛇

    代码随便写写,尚有许多不足,PC与手机端皆可运行 手机端滑屏操作,PC端方向键操作 疑问: 生成食物,与判断是否可以移动方面 有两种实现方式, 1.使用js内存,数组循环判断 2.使用dom的quer ...

随机推荐

  1. 17、Spring Boot普通类调用bean【从零开始学Spring Boot】

    转载:http://blog.csdn.net/linxingliang/article/details/52013017 我们知道如果我们要在一个类使用spring提供的bean对象,我们需要把这个 ...

  2. 将VS2010里的红色波浪线去掉

    有时候,程序编译没错,却出现了一堆的红色波浪形,看着就烦. 解决方案:在VAssistX菜单栏->Visual Assist X Options->展开Advanced->Under ...

  3. js:string转int

    http://blog.csdn.net/leidengyan/article/details/5503594 <script>     var   str='1250' ;   aler ...

  4. JSP简单练习-用Servlet获取表单数据

    // javaBean代码 package servlet; import java.io.*; import javax.servlet.*; import javax.servlet.http.* ...

  5. SpringBoot启动流程分析（二）：SpringApplication的run方法

    SpringBoot系列文章简介 SpringBoot源码阅读辅助篇: Spring IoC容器与应用上下文的设计与实现 SpringBoot启动流程源码分析: SpringBoot启动流程分析(一) ...

  6. Java中的线程池ExecutorService

    示例 import java.util.concurrent.ExecutorService; import java.util.concurrent.Executors; import java.u ...

  7. jQuery入门知识点

    <精通ASP.NET MVC3框架>第20章 1.jQuery文件jquery-1.5.1.js:jquey核心库常规版jquery-1.5.1.min.js:jquery核心库最小化版j ...

  8. HTML5实现两个视频循环播放！

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. PythonCookBook笔记——函数

    函数 可接受任意数量参数的函数 接受任意数量的位置参数,使用*参数. 接受任意数量的关键字参数,使用**参数. 只接受关键字参数的函数 强制关键字参数放在某个参数后或直接单个之后. 给函数参数增加元信 ...

  10. charles 4.x 破解版安装 以及使用

    下载地址 https://pan.baidu.com/s/1dFvYM7B 破解方法 未破解的情况下,每30分钟会弹出一个提示,然后关闭软件 将压缩包内的 charles.jar 复制到安装目录下,替 ...