专栏首页ZackSockHTML+JS实现简单贪吃蛇游戏

HTML+JS实现简单贪吃蛇游戏

因为js是单线程的,所以有js写贪吃蛇可以少考虑很多东西,感觉非常方便。今天给大家介绍一个非常简单的贪吃蛇写法。我说的非常简单勒,就是指没有游戏结束,也不会变长。哈哈,反正就是非常简单了。

大概就是这个样子,可以移动可以随机出现食物,也可以出食物。

先给大家看看HTML代码,这个比较简单:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<style>
    #container{

    }
    #map{
        width: 500px;
        height: 500px;
        margin: 30px auto;
        background-color: antiquewhite;
        position: relative;
    }
    #snake{
        width: 10px;
        height: 10px;
        background-color: red;
        position: absolute;
        top: 100px;
    }
</style>
<body>
<div id="container">
    <!-- 地图的div -->
    <div id="map">
        <div id="snake"></div>
    </div>
</div>
<script type="text/javascript" src="index.js"></script>
</body>
</html>

里面就三个div,就不多说了。

然后是js代码,首先获取snake的div:

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

判断按钮,把方向记录下来(wasd、上左下右):

//这里的direction、up、down、right、left这些变量是在前面定义的
if(e.keyCode == 119){
    //上
    direction = up;
}else if(e.keyCode == 115){
    //下
    direction = down;
}else if(e.keyCode == 100){
    //右
    direction = right
}else if(e.keyCode == 97){
    //左
    direction = left;
}

判断方向后,就要开始移动了。这里就需要使用定时器:

//这个的move方法是自己定义的
time = setInterval(move, 200);

然后说一下move方法,先获取snake的div,然后获取div距浏览器上面和左边的距离:

//获取div
var snake = document.getElementById("snake");

//获取div离顶部的距离
var top_length = snake.offsetTop;

//获取div离左边的距离
var left_length = snake.offsetLeft;

然后判断方向移动,这里就写一个方向,其他的也差不多:

//根据先前保存的direction,分辨方向
switch (direction){
    case up:
            //当top_length>0的时候,说明还没有到顶部,可以继续往上移动
            if(top_length > 0){
                //每次向上移动10px
                top_length -= 10;

                //改变snake距顶部的距离
                snake.style.top = top_length + "px";
            }
            break;
}

移动的时候随机出现食物:

//显示食物
if(food == null){
    //当食物为空时,就显示食物。
    showFood();
}else{
    var map = document.getElementById("map");
    
    //判断蛇是否吃到食物
    if(left_length == food.offsetLeft && top_length == food.offsetTop){
        
        //当蛇吃到食物时,移除食物,并致为null
        map.removeChild(food);
        food = null;
    }
}

最后是showFood()方法,先随机产生上左边距:

var food_top = Math.floor(Math.random()*50)*10;
var food_left = Math.floor(Math.random()*50)*10;

创建食物,然后拼接到map上:

//关联Map
var map = document.getElementById("map");

//创建food
food = document.createElement("div");

//拼接food
map.appendChild(food);

然后设置食物的属性:

//设置绝对布局,和上左距离
food.style.width = "10px";
food.style.height = "10px";
food.style.position = "absolute";
food.style.backgroundColor = "blue";
food.style.top = food_top + "px";
food.style.left = food_left + "px";

差不多就是这样了。下面给大家看看全部的js代码:

/**
 * Created by Administrator on 2018/11/21.
 */
var time;
var direction;
var up = 1;
var down = 2;
var left = 3;
var right = 4;
var food;

onkeypress = function(e){
    window.clearInterval(time);
    var snake = document.getElementById("snake");
    var top_length = snake.offsetTop;
    if(e.keyCode == 119){
        //上
        direction = up;
    }else if(e.keyCode == 115){
        //下
        direction = down;
    }else if(e.keyCode == 100){
        //右
        direction = right
    }else if(e.keyCode == 97){
        //左
        direction = left;
    }
    time = setInterval(move, 200);
};

function move(){
    var snake = document.getElementById("snake");
    var top_length = snake.offsetTop;
    var left_length = snake.offsetLeft;
    switch (direction){
        case up:
            if(top_length > 0){
                top_length -= 10;
                snake.style.top = top_length + "px";
            }
            break;
        case down:
            if(top_length < 490){
                top_length += 10;
                snake.style.top = top_length + "px";
            }
            break;
        case left:
            if(left_length > 0){
                left_length -= 10;
                snake.style.left = left_length + "px";
            }
            break;
        case right:
            if(left_length < 490){
                left_length += 10;
                snake.style.left = left_length + "px";
            }
            break;
    }
    //显示食物
    if(food == null){
        showFood();
    }else{
        var map = document.getElementById("map");
        //alert(left_length + ":" + food.offsetLeft + "|" + top_length + ":" + food.offsetTop);
        if(left_length == food.offsetLeft && top_length == food.offsetTop){
            map.removeChild(food);
            food = null;
        }
    }
}

/**
 * 随即出现食物
 */
function showFood(){
    var food_top = Math.floor(Math.random()*50)*10;
    var food_left = Math.floor(Math.random()*50)*10;
    var map = document.getElementById("map");
    food = document.createElement("div");
    map.appendChild(food);
    food.style.width = "10px";
    food.style.height = "10px";
    food.style.position = "absolute";
    food.style.backgroundColor = "blue";
    food.style.top = food_top + "px";
    food.style.left = food_left + "px";
}

本文分享自微信公众号 - ZackSock(AndrewRubin),作者:ZackSock

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-09-20

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 比反射更强大的技术,内省技术

    在学习Java过程中,总是层层递进的。差不多从数据类型到IO、异常就算基础部分(不同书不一样)。之后就是“内省技术”是基于反射技术的,提供了更多的便于操作Jav...

    ZackSock
  • Python生成CSDN博客分享图

    我们分享博客的方式有很多种,最常见的无非就是分享链接。或者是编辑一条消息,写上标题链接等东西。但是这种方式都不够直观,相比之下图片的方式要更引人注目。CSDN移...

    ZackSock
  • Android存储数据的三种方式

    今天来给大家讲一下Android中如何存储数据。我编写Android使用的是Java语言,所以今天讲的也是Java版的数据存储。在Android中,数据存储主要...

    ZackSock
  • 项目中Spring 声明式事务使用的一些坑点分析01

    秋日芒草
  • 30个4GB内存Rackspace云服务器45分钟内可运行1万个Docker容器

    摘要:本文主要讲述了在Rackspace上利用不到45分钟的时间在一个由30个4GB内存的云服务器组成的集群上部署10,000个Nginx 容器。具体步骤:在N...

    CSDN技术头条
  • jQuery 点击按钮打印指定文本内容

    这是在做 JavaScript 调用浏览器打印快递单功能时所遇到的一些坑,总结了一下,分享给大家

    Nian糕
  • RxJava2 源码解读之 ConcatMap

    之前分析了FlatMap发射数据无序的原因,但是没有实际用代码验证过,这里我们在分析ConcatMap源码之前,我们先运行测试代码,有个直观的感受。

    三好码农
  • Pandas-19.合并/连接

    使用how参数,指定连接方式,如果组合键没有出现在左侧或者右侧表中,连接表值为NA:

    悠扬前奏
  • Canvas

    天天_哥
  • 优雅停止 SpringBoot 服务,拒绝 kill -9 暴力停止!

    在使用 SpringBoot 的时候,都要涉及到服务的停止和启动,当我们停止服务的时候,很多时候大家都是kill -9 直接把程序进程杀掉,这样程序不会执行优雅...

    搜云库技术团队

扫码关注云+社区

领取腾讯云代金券