文档章节

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

哟猫Intry
 哟猫Intry
发布于 2016/06/23 16:20
字数 714
阅读 15
收藏 3

本文为H5EDU机构官方的HTML5培训教程,主要介绍贪食蛇
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);启动定时器

5.

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>

http://www.h5edu.cn/htm/step/h5edu_44.html

© 著作权归作者所有

共有 人打赏支持
哟猫Intry
粉丝 0
博文 46
码字总数 31138
作品 0
昌平
iOS下JS与OC互相调用(六)--WKWebView + WebViewJavascriptBridge

iOS下JS与OC互相调用(六)--WKWebView + WebViewJavascriptBridge 转载:原地址 https://www.jianshu.com/p/e951af9e5e74 上一篇文章介绍了UIWebView 如何通过WebViewJavascriptBridge 来实现......

法斗斗
05/11
0
0
JS三教九流系列-jquery实例开发到插件封装2

我们先写实例,然后有必要在分装为插件,最后做更高级的处理! 封装插件基础学习 http://my.oschina.net/u/2352644/blog/487688 前面的7个实例在这里 http://my.oschina.net/u/2352644/blog...

透笔度
2015/08/13
0
0
如何入门微信小游戏开发,有哪些学习资料?

开发微信小游戏并非难事 1.首先,微信小游戏的开发方法 可以看到微信游戏的开发方式 答主有一些COCOS的开发经验,于是这里我们主要探讨COCOS制作小游戏的方法 2.需要学习什么 JS(JavaScrip...

qq_40126542
05/05
0
0
javascript学习资料分享

有志于web前端工作的话,javascript的知识是必不可少的。越学,我越觉得自己所欠缺的越多。路漫漫其修远兮,吾将上下而求索。下面将一些好的资料分享给大家。 JavaScript学习资料: (1)遇见...

小微
2012/04/06
0
5
15分钟学会写chrome插件

chrome插件灰常简单,看看配置文件怎么写你就可以直接参照api文档, 天高任你飞了。 chrome官方API地址:https://developer.chrome.com/extensions/apiindex chrome官方入门教程(自己写的更粗暴...

狮城蜗牛
2015/01/24
0
10

没有更多内容

加载失败,请刷新页面

加载更多

下一页

JS:异步 - 面试惨案

为什么会写这篇文章,很明显不符合我的性格的东西,原因是前段时间参与了一个面试,对于很多程序员来说,面试时候多么的鸦雀无声,事后心里就有多么的千军万马。去掉最开始毕业干了一年的Jav...

xmqywx
今天
0
0
Win10 64位系统,PHP 扩展 curl插件

执行:1. 拷贝php安装目录下,libeay32.dll、ssleay32.dll 、 libssh2.dll 到 C:\windows\system32 目录。2. 拷贝php/ext目录下, php_curl.dll 到 C:\windows\system32 目录; 3. p...

放飞E梦想O
今天
0
0
谈谈神秘的ES6——(五)解构赋值【对象篇】

上一节课我们了解了有关数组的解构赋值相关内容,这节课,我们接着,来讲讲对象的解构赋值。 解构不仅可以用于数组,还可以用于对象。 let { foo, bar } = { foo: "aaa", bar: "bbb" };fo...

JandenMa
今天
1
0
OSChina 周一乱弹 —— 有人要给本汪介绍妹子啦

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @莱布妮子 :分享水木年华的单曲《中学时代》@小小编辑 手机党少年们想听歌,请使劲儿戳(这里) @须臾时光:夏天还在做最后的挣扎,但是晚上...

小小编辑
今天
21
5
centos7安装redis及开机启动

配置编译环境: sudo yum install gcc-c++ 下载源码: wget http://download.redis.io/releases/redis-3.2.8.tar.gz 解压源码: tar -zxvf redis-3.2.8.tar.gz 进入到解压目录: cd redis-3......

hotsmile
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部