JavaScript强化教程 - 六步实现贪食蛇

1.首先创建div 并且给div加样式

<div id="pannel" style="width: 500px;height: 500px;z-index: 1;opacity: 0.5"></div>

给 <style...> 地图（div和表格）、所有的块（蛇头，食物身体加样式）

2.创建地图

    document.write("<table cellspacing='0px'>");

    for (var i = 0; i < 10; i++) {... }

    document.write("</table>");

3.调用createNode函数创建块

 var pannel = document.getElementById("pannel");

    function createNode(type) {... } //[i][b]根据type创建块（0头部 1食物 2身体）

[/b][/i]    //申请一些变量以便以后调用

    var allNode = new Array();//存所有吃到的身体

    var fooldNode = null;//指向食物a

    var headNode = null;//指向头部b

    headNode = createNode(0);//创建头部A

    headNode.value = 39;//给头部一个方向  37左 38上 39右 40下

    fooldNode = createNode(1);//创建食物B

4.定时器

function moveNode() {...};

setInterval(moveNode, 500);启动定时器

document.onkeydown = function () {通过

event.keyCode改变headNode.value

实现用户按键改变蛇头自动移动的方向}

6.核心逻辑
在第4中的 function moveNode() {...}; 定时执行此函数
实现了：1.移动所有身体
2.移动蛇头
3.创建新块并且新块在蛇尾产生，方向与蛇尾相同
------------------------------------------------------------------------------------------------

实现源码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        * {

            padding: 0;

            margin: 0;

        }

        td {

            width: 48px;

            height: 48px;

            border: solid 1px darkorange;

        }

        div {

            position: absolute;

            width: 50px;

            height: 50px;

        }

    </style>

</head>

<body>

<div id="pannel" style="width: 500px;height: 500px;z-index: 1;opacity: 0.5"></div>

<script>

    document.write("<table cellspacing='0px'>");

    for (var i = 0; i < 10; i++) {

        document.write("<tr>");

        for (var j = 0; j < 10; j++) {

            document.write("<td></td>");

        }

        document.write("</tr>");

    }

    document.write("</table>");

    //创建头部

    var pannel = document.getElementById("pannel");

    function createNode(type) {

        var div = document.createElement("div");

        pannel.appendChild(div);

        div.style.left = parseInt(Math.random() * 10) * 50 + "px";

        div.style.top = parseInt(Math.random() * 10) * 50 + "px";

        switch (type) {

            case 0:

                div.style.background = "red";//头

                break;

            case 1:

                div.style.background = "blue";//食物

                break;

            case 2:

                div.style.background = "yellow";//身体

                break;

        }

        return div;

    }

    var allNode = new Array();

    var fooldNode = null;

    var headNode = null;

    headNode = createNode(0);

    headNode.value = 39;

    fooldNode = createNode(1);

    function moveNode() {

//移动所有身体

        if (allNode.length > 0) {

            for (var n = allNode.length - 1; n >= 0; n--) {

                switch (parseInt(allNode[n].value)) {

                    case 37:

                        allNode[n].style.left = parseInt(allNode[n].style.left) - 50 + "px";

                        break;

                    case 38:

                        allNode[n].style.top = parseInt(allNode[n].style.top) - 50 + "px";

                        break;

                    case 39:

                        allNode[n].style.left = parseInt(allNode[n].style.left) + 50 + "px";

                        break;

                    case 40:

                        allNode[n].style.top = parseInt(allNode[n].style.top) + 50 + "px";

                        break;

                }

                if(n>0){

                    allNode[n].value = allNode[n-1].value;

                }else {

                    allNode[n].value = headNode.value;

                }

            }

        }

        var px = parseInt(headNode.style.left);

        var py = parseInt(headNode.style.top);

        switch (headNode.value) {

            case 37:

                headNode.style.left = px - 50 + "px";

                break;

            case 38:

                headNode.style.top = py - 50 + "px";

                break;

            case 39:

                headNode.style.left = px + 50 + "px";

                break;

            case 40:

                headNode.style.top = py + 50 + "px";

                break;

        }

        //碰撞检测

        if (headNode.style.left == fooldNode.style.left &&

                headNode.style.top == fooldNode.style.top) {

            var newbody = createNode(2);

            var lastbody = null;

            if (allNode.length == 0) {

                lastbody = headNode;

            } else {

                lastbody = allNode[allNode.length - 1];

            }

            newbody.value = lastbody.value;

//            lastbody.style.left = parseInt(lastbody.style.left)-50+"px";

            switch (parseInt(lastbody.value)) {

                case 37:

                    newbody.style.left = parseInt(lastbody.style.left) + 50 + "px";

                    newbody.style.top = lastbody.style.top;

                    break;

                case 38:

                    newbody.style.top = parseInt(lastbody.style.top) + 50 + "px";

                    newbody.style.left = lastbody.style.left;

                    break;

                case 39:

                    newbody.style.left = parseInt(lastbody.style.left) - 50 + "px";

                    newbody.style.top = lastbody.style.top;

                    break;

                case 40:

                    newbody.style.top = parseInt(lastbody.style.top) - 50 + "px";

                    newbody.style.left = lastbody.style.left;

                    break;

            }

            allNode.push(newbody);

            fooldNode.style.left = parseInt(Math.random() * 10) * 50 + "px";

            fooldNode.style.top = parseInt(Math.random() * 10) * 50 + "px";

        }//碰撞end

    }

    setInterval(moveNode, 500);

    document.onkeydown = function () {

        switch (event.keyCode) {

            case 37:

                headNode.value = 37;

                break;

            case 38:

                headNode.value = 38;

                break;

            case 39:

                headNode.value = 39;

                break;

            case 40:

                headNode.value = 40;

                break;

        }

    }

</script>

</body>

</html>

本文为H5EDU机构官方的HTML5培训教程，主要介绍贪食蛇
JavaScript强化教程

JavaScript强化教程 - 六步实现贪食蛇的更多相关文章

JavaScript强化教程 —— Cocos2d-JS的屏幕适配方案
1. 设置屏幕适配策略(Resolution Policy) 如果你还没有用过Resolution Policy,只需要在游戏载入过程完成之后(cc.game.onStart函数回调中),调用下面的代 ...
JavaScript强化教程——JavaScript 总结
本教程中我们向您讲授了如何向 html 页面添加 JavaScript,使得网站的动态性和交互性更强. 你已经学习了如何创建对事件的响应,验证表单,以及如何根据不同的情况运行不同的脚本. 你也学到了如 ...
JavaScript强化教程 -- cocosjs场景切换
场景切换在main.js,将StartScene作为我们初始化运行的场景,代码如下: cc.LoaderScene.preload(g_resources, function () { cc.dir ...
JavaScript强化教程——jQuery AJAX 实例
什么是 AJAX?AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML).简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据 ...
JavaScript强化教程——jQuery UI API 类别
---恢复内容开始--- 主要介绍:JavaScript强化教程—— jQuery UI API 类别 jQuery UI 在jQuery 内置的特效上添加了一些功能.jQuery UI 支持颜色动 ...
JavaScript强化教程——Cocos2d-JS中JavaScript继承
javaScript语言本身没有提供类,没有其它语言的类继承机制,它的继承是通过对象的原型实现的,但这不能满足Cocos2d-JS引擎的要求.由于Cocos2d-JS引擎是从Cocos2d-x演变而来 ...
javaScript高级教程(六) 获取窗口，屏幕，文档信息
1.屏幕坐标:相对于桌面左上角窗口坐标:相对于窗口的左上角文档坐标:相对于html文档左上角当有滚动条时,窗口坐标与文档坐标之间有区别
JavaScript贪食蛇游戏制作详解
之前闲时开发过一个简单的网页版贪食蛇游戏程序,现在把程序的实现思路写下来,供有兴趣同学参考阅读. 代码的实现比较简单,整个程序由三个类,一组常量和一些游戏逻辑以外的初始化和控制代码组成,总共400多行 ...
Javascript贪食蛇小游戏
试玩:http://hovertree.com/game/9/ 贪吃蛇是一种风靡全球的小游戏,就是一条小蛇,不停地在屏幕上游走,吃各个方向出现的蛋,越吃越长.只要蛇头碰到屏幕四周,或者碰到自己的身子, ...

随机推荐

Oracle存储过程获取YYYY-MM-DD的时间格式
环境:Oracle 10g,11g 问题重现:PL/SQL中命令窗口下,发现存储过程得到的时间格式不符合预期要求. SQL> select sysdate from dual; SYSDATE ...
IEE修改最大连接数
IEE版本:5.1.40 1.查看当前IEE最大连接数(缺省值) mysql> show variables like 'max_connections'; +----------------- ...
Testing - 质量保证与质量控制
QA QC QM 概念 Quality Assurance (质量保证) Quality Control (质量控制) Quality Manage (质量管理) 定义为达到质量要求所采取的作业技术 ...
Java生成BASE64编码
1.所需jar包: BASE64Encoder.jar 2.在导包过程中,可能会出现工程不识别的情况.即:不能找到BASE64Encoder的jar包.此时,可以有两种方法解决这个问题: a. 只需 ...
Javascript: 从prototype漫谈到继承(2)
本文同时也发表在我另一篇独立博客 <Javascript: 从prototype漫谈到继承(2)>(管理员请注意!这两个都是我自己的原创博客!不要踢出首页!不是转载!已经误会三次了!) 上 ...
IIS 服务器下载apk文件报404错
文件路径什么都对,可就是提示404错误,最后问题出在了IIS的MIME上,按照下面的办法即可解决. 1.在 IIS 管理器中,右键单击要为其添加 MIME 类型的网站或网站目录,单击"属性& ...
JS的跳转
需要在下面的button中实现跳转,之前直接写了个<a>标签,但是在手机上的效果太差了,这是老大写的 js跳转.记下来,要学会贯通. <div class="ps-lt&q ...
基于MDK-ARM创建STM32L-DISCOVERY Project
本文只针对使用MDK-ARM建立软件开发环境,并基于STM32L1xx_StdPeriph_Lib_V1.1.1库及其Examples,其余情况可参考UM1451 User manual Gettin ...
SignalR入门之持久性连接
为了保持客户端和服务端之间的持久性连接的开发性,并且使用传输在这这样的连接上发送数据,这个用来访问SignalR持久性连接的底层API提供了一个隐藏底层固有复杂性的抽象层. 事实上,通过该API访问通 ...
自己对Debug的一些感悟
A.13-03-06记. 1.当项目中发现bug的时候,首先考虑如何重现,能够重现的bug比较好找寻根源. 2.思考下以前是否发现过类似bug,是否由一些外部配置所决定. 3.有循环时候注意临界条件.

JavaScript强化教程 - 六步实现贪食蛇

JavaScript强化教程 - 六步实现贪食蛇的更多相关文章

随机推荐

热门专题