文档章节

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
昌平
私信 提问
JS三教九流系列-jquery实例开发到插件封装2

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

透笔度
2015/08/13
0
0
iOS下JS与OC互相调用(六)--WKWebView + WebViewJavascriptBridge

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

法斗斗
05/11
0
0
如何入门微信小游戏开发,有哪些学习资料?

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

qq_40126542
05/05
0
0
分享51本关于JavaScript方面的学习书籍(免费下载)

分享51本关于JavaScript方面的学习书籍(免费下载) 1、JavaScript面向对象15分钟教程 2、原型、作用域、闭包的完整解释 3、Javascript面向对象特性实现(封装、继承、接口) 4、JavaScript面向...

邓剑彬
2012/12/02
1K
12
IxEdit傻瓜式JavaScript开发工具(附下载、汉化版、视频教程)

IxEdit傻瓜式JavaScript开发工具(附下载、汉化版、视频教程) 从昨天看到IxEdit以后,我就被它深深的迷住了。试用、研究、汉化,整整忙活了一天。现在就将现阶段使用的感受给大家汇报一下,也...

晨曦之光
2012/03/09
381
0

没有更多内容

加载失败,请刷新页面

加载更多

使用form表单同时实现上传文件和提交文本数据

使用form表单同时实现上传文件和提交文本数据,此示例中在后台将文件上传到阿里的oss存储服务器中 申请oss相关账号: endpoint = "http://oss-cn-qingdao.aliyuncs.com"; accessKeyId = "key"...

貔貅叔
6分钟前
0
0
结合实际场景谈一谈微服务配置

作为 Nacos 5W1H 的系列文章,本文将围绕“Where”,讲述 Nacos 配置管理的三个典型的应用场景: 数据库连接信息 限流阈值和降级开关 流量的动态调度 上一篇:Nacos帮我解决了什么问题? 数据...

阿里云云栖社区
8分钟前
0
0
在Windows安装运行Kafka

https://www.cnblogs.com/flower1990/p/7466882.html 一、安装JAVA JDK 1、下载安装包 http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 注意:根据3......

洛水
10分钟前
0
0
插件

sftp Bracket Pair Colorizer Guides Auto Rename Tag Chinese (Simplified) Language Pack for Visual Studio Code...

dragon_tech
11分钟前
0
0
Missing Number(leetcode268)

Given an array containing n distinct numbers taken from 0, 1, 2, ..., n, find the one that is missing from the array. Example 1: Input: [3,0,1]Output: 2 Example 2: Input: [9,6......

woshixin
15分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部