文档章节

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

没有更多内容

加载失败,请刷新页面

加载更多

学习设计模式——命令模式

参考博客 1. 认识命令模式 1. 定义:将一个请求封装成为一个对象,从而可以用不同的请求对客户进行参数化,对请求排队或记录请求日志,并支持可撤销操作。 2. 组织结构: Commond:定义命令的...

江左煤郎
16分钟前
0
0
字典树收集(非线程安全,后续做线程安全改进)

将500W个单词放进一个数据结构进行存储,然后进行快速比对,判断一个单词是不是这个500W单词之中的;来了一个单词前缀,给出500w个单词中有多少个单词是该前缀. 1、这个需求首先需要设计好数据结...

算法之名
昨天
6
0
GRASP设计模式

此文参考了这篇博客,建议读者阅读原文。 面向对象(Object-Oriented,OO)是当下软件开发的主流方法。在OO分析与设计中,我们首先从问题领域中抽象出领域模型,在领域模型中以适当的粒度归纳...

克虏伯
昨天
0
0
Coding and Paper Letter(四十)

资源整理。 1 Coding: 1.Tomislav Hengl撰写的非官方作者指南:Michael Gould•Wouter Gerritsma。 UnofficialGuide4Authors 2.R语言包rwrfhydro,社区贡献的工具箱,用于管理,分析和可视化...

胖胖雕
昨天
0
0
JAVA 内存回收

参考:https://www.cnblogs.com/leesf456/p/5218594.html 1,JMV 中哪些可以作为 GC Root? 1. 虚拟机栈(栈帧中的局部变量区,也叫做局部变量表)中引用的对象。 2. 方法区中的类静态属性引...

Carlyle_Lee
昨天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部