风或许自媒体
风或许自媒体

原生JavaScript实现贪吃蛇的游戏

贪吃蛇游戏的思考步骤： 
1.默认初始值（3个）默认向右走
2.封装函数move，去移动蛇
3.去监听键盘的事件，看用户的怎么移动蛇
4.去判断碰到墙就死亡，结束游戏
5.去完成投放食物的封装函数
6.去实现蛇的吃食物的函数

其实我们触发键盘事件，我们是这么处理的，这是一种比较简单的想法。

一个div是40px，当横着三个div数组，往右。数组0是蛇头，那么当移动时是最后一个div 的left和top值变，变成蛇头的left值变大40，top值不变，top值直接就是蛇头的top。

原生JavaScript实现贪吃蛇的游戏_第1张图片


效果图：

原生JavaScript实现贪吃蛇的游戏_第2张图片


源码：




    
    贪吃蛇游戏

你可能感兴趣的:(前端从入门到放弃)

  • 前端从入门到放弃 javascript
    helloworld本文由博客群发一文多发等运营工具平台OpenWrite发布
  • 前端从入门到放弃 javascript
    helloworld本文由博客群发一文多发等运营工具平台OpenWrite发布
  • Web前端从入门到放弃（js事件的分类和介绍） 杜克灿
    js事件的分类和介绍一、一般的js事件（红色为常用的）1、鼠标事件：onclick——鼠标点击时触发此事件ondblclick——鼠标双击时触发此事件onmouseover——当鼠标移动到某对象范围的上方时触发此事件onmouseout——当鼠标离开某对象范围时触发此事件onmousemove——鼠标移动时触发此事件（抚摸）onmousedown——按下鼠标时触发此事件onmouseup——鼠标按
  • Web前端从入门到放弃(css3选择器的总结) 杜克灿 web前端从入门到放
    Web前端从入门到放弃(css3选择器的总结)一、基本选择器选择器类型功能描述*通配选择器选择文档中所有的html元素E元素选择器选择指定的类型的html元素idID选择器选择指定ID属性值为“id”的任意类型的元素.class类选择器选择指定的class属性值为“class”的任意类型的任意多元素selector1，selector2群组选择器将每一个选择器匹配的元素集合并二、层次选择器选择器类
  • Web前端从入门到放弃(jq选择器的归纳总结) 杜克灿
    jq选择器的归纳总结一、什么是jqjq就是人家把js的函数封装好的一个库。二、为什么要用jq1、简化了js的复杂操作2、无需在去关心兼容性问题（最爽的一点）3、提供了大量的使用方法三、jq的选择器1、基本选择器#id通过元素的id属性中给定的值$("#myDiv");element指向DOM节点的标签名$("div");.class一个元素可以有多个类，只要有一个符合就能被匹配$(".myClas
  • Web前端从入门到放弃（js函数声明和调用、有参函数和无参函数、有返回值） 杜克灿
    js函数声明和调用、有参函数和无参函数、有返回值一、js函数声明和调用1、js函数声明：方法一：关键字函数名、形参根具体据情况写（形参可不写）function函数名(形参){函数体}方法二：直接量varfn=function函数名(形参){函数体}方法三：构造函数法varfn=newFunction(函数体);2、js函数调用：*函数名就等于函数体，函数名（）等于执行函数*functionaa()
  • Web前端从入门到放弃(js全局变量、局部变量、闭包) 杜克灿
    js全局变量、局部变量、闭包一、js全局变量在方法外部声明的变量声明方式1：vartest;vartest=5;需注意的是该句不能包含在function内，否则是局部变量。这是第一种方式声明全局变量。声明方式2：test=5;没有使用var，直接给标识符test赋值，这样会隐式的声明了全局变量test。即使该语句是在一个function内，当该function被执行后test变成了全局变量。声明方
  • Web前端从入门到放弃（js数据类型、变量命名规范） 杜克灿
    js数据类型、变量命名规范一、js数据类型1、基本数据类型String——字符串Number——数字a.该类型的表示方法有两种形式，第一种是整数，第二种为浮点数。b.整数可以通过十进制，八进制，十六进制的字面值来表示（10进制的值=parseInt(变量，进制)）Boolean——布尔a.布尔类型有两个值：truefalseb.Bloolean()函数，可以将其他类型的值转换为布尔类型Null——
  • Web前端从入门到放弃（js事件的分类和介绍） 杜克灿
    js事件的分类和介绍一、一般的js事件（红色为常用的）1、鼠标事件：onclick——鼠标点击时触发此事件ondblclick——鼠标双击时触发此事件onmouseover——当鼠标移动到某对象范围的上方时触发此事件onmouseout——当鼠标离开某对象范围时触发此事件onmousemove——鼠标移动时触发此事件（抚摸）onmousedown——按下鼠标时触发此事件onmouseup——鼠标按
  • Web前端从入门到放弃（ 固定顶部菜单） 杜克灿
    固定顶部菜单当鼠标滚动到200px时，出现固定在顶部的菜单*{margin:0;padding:0;border:none;}#box{width:950px;height:4135px;background:#9BD7F8;margin:0auto;position:relative;}#head{width:950px;height:150px;background:#C2351D;posit
  • Javascript中，长犯的错误（转载） lxt410725
    十个JavaScript中易犯的小错误，你中了几枪前端从入门到放弃部落在今天，JavaScript已经成为了网页编辑的核心。尤其是过去的几年，互联网见证了在SPA开发、图形处理、交互等方面大量JS库的出现。如果初次打交道，很多人会觉得js很简单。确实，对于很多有经验的工程师，或者甚至是初学者而言，实现基本的js功能几乎毫无障碍。但是JS的真实功能却比很多人想象的要更加多样、复杂。JavaScrip
  • ViewController添加button按钮解析。（翻译） 张亚雄 c
    <div class="it610-blog-content-contain" style="font-size: 14px"></div>//  ViewController.m //  Reservation software // //  Created by 张亚雄 on 15/6/2.
  • mongoDB 简单的增删改查 开窍的石头 mongodb
       在上一篇文章中我们已经讲了mongodb怎么安装和数据库/表的创建。在这里我们讲mongoDB的数据库操作       在mongo中对于不存在的表当你用db.表名 他会自动统计 下边用到的user是表明，db代表的是数据库       添加(insert):
  • log4j配置 0624chenhong log4j
    1) 新建java项目 2) 导入jar包，项目右击，properties—java build path—libraries—Add External jar，加入log4j.jar包。 3) 新建一个类com.hand.Log4jTest package com.hand; import org.apache.log4j.Logger; public class
  • 多点触摸(图片缩放为例) 不懂事的小屁孩 多点触摸
    多点触摸的事件跟单点是大同小异的，上个图片缩放的代码，供大家参考一下 import android.app.Activity; import android.os.Bundle; import android.view.MotionEvent; import android.view.View; import android.view.View.OnTouchListener
  • 有关浏览器窗口宽度高度几个值的解析 换个号韩国红果果 JavaScripthtml
    1 元素的 offsetWidth 包括border padding  content  整体的宽度。 clientWidth  只包括内容区 padding 不包括border。 clientLeft =  offsetWidth -clientWidth  即这个元素border的值 offsetLeft  若无已定位的包裹元素
  • 数据库产品巡礼：IBM DB2概览 蓝儿唯美 db2
    IBM DB2是一个支持了NoSQL功能的关系数据库管理系统，其包含了对XML，图像存储和Java脚本对象表示（JSON）的支持。DB2可被各种类型的企 业使用，它提供了一个数据平台，同时支持事务和分析操作，通过提供持续的数据流来保持事务工作流和分析操作的高效性。 DB2支持的操作系统 DB2可应用于以下三个主要的平台:   工作站，DB2可在Linus、Unix、Windo
  • java笔记5 a-john java
    控制执行流程： 1，true和false    利用条件表达式的真或假来决定执行路径。例：（a==b）。它利用条件操作符“==”来判断a值是否等于b值，返回true或false。java不允许我们将一个数字作为布尔值使用，虽然这在C和C++里是允许的。如果想在布尔测试中使用一个非布尔值，那么首先必须用一个条件表达式将其转化成布尔值，例如if(a!=0)。 2，if-els
  • Web开发常用手册汇总 aijuans PHP
    一门技术，如果没有好的参考手册指导,很难普及大众。这其实就是为什么很多技术，非常好，却得不到普遍运用的原因。 正如我们学习一门技术，过程大概是这个样子： ①我们日常工作中，遇到了问题，困难。寻找解决方案，即寻找新的技术； ②为什么要学习这门技术？这门技术是不是很好的解决了我们遇到的难题，困惑。这个问题，非常重要，我们不是为了学习技术而学习技术，而是为了更好的处理我们遇到的问题，才需要学习新的
  • 今天帮助人解决的一个sql问题 asialee sql
                今天有个人问了一个问题，如下： type     AD      value          A  
  • 意图对象传递数据 百合不是茶 android意图IntentBundle对象数据的传递
    学习意图将数据传递给目标活动; 初学者需要好好研究的       1,将下面的代码添加到main.xml中    <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http:/
  • oracle查询锁表解锁语句 bijian1013 oracleobjectsessionkill
    一.查询锁定的表 如下语句，都可以查询锁定的表 语句一： select a.sid, a.serial#, p.spid, c.object_name, b.session_id, b.oracle_username, b.os_user_name from v$process p, v$s
  • mac osx 10.10 下安装 mysql 5.6 二进制文件［tar.gz］ 征客丶 mysqlosx
    场景：在 mac osx 10.10 下安装 mysql 5.6 的二进制文件。 环境：mac osx 10.10、mysql 5.6 的二进制文件 步骤：[所有目录请从根“/”目录开始取，以免层级弄错导致找不到目录] 1、下载 mysql 5.6 的二进制文件，下载目录下面称之为 mysql5.6SourceDir； 下载地址：http://dev.mysql.com/downl
  • 分布式系统与框架 bit1129 分布式
    RPC框架 Dubbo 什么是Dubbo   Dubbo是一个分布式服务框架，致力于提供高性能和透明化的RPC远程服务调用方案，以及SOA服务治理方案。其核心部分包含:    远程通讯: 提供对多种基于长连接的NIO框架抽象封装，包括多种线程模型，序列化，以及“请求-响应”模式的信息交换方式。    集群容错: 提供基于接
  • 那些令人蛋痛的专业术语 白糖_ springWebSSOIOC
    spring 【控制反转(IOC)/依赖注入(DI)】： 由容器控制程序之间的关系，而非传统实现中，由程序代码直接操控。这也就是所谓“控制反转”的概念所在：控制权由应用代码中转到了外部容器，控制权的转移，是所谓反转。 简单的说：对象的创建又容器(比如spring容器)来执行，程序里不直接new对象。 Web 【单点登录(SSO)】：SSO的定义是在多个应用系统中，用户
  • 《给大忙人看的java8》摘抄 braveCS java8
    函数式接口：只包含一个抽象方法的接口 lambda表达式：是一段可以传递的代码       你最好将一个lambda表达式想象成一个函数，而不是一个对象，并记住它可以被转换为一个函数式接口。 事实上，函数式接口的转换是你在Java中使用lambda表达式能做的唯一一件事。   方法引用：又是要传递给其他代码的操作已经有实现的方法了，这时可以使
  • 编程之美-计算字符串的相似度 bylijinnan java算法编程之美
    public class StringDistance { /** * 编程之美 计算字符串的相似度 * 我们定义一套操作方法来把两个不相同的字符串变得相同，具体的操作方法为： * 1.修改一个字符（如把“a”替换为“b”）; * 2.增加一个字符（如把“abdd”变为“aebdd”）; * 3.删除一个字符（如把“travelling”变为“trav
  • 上传、下载压缩图片 chengxuyuancsdn 下载
    /** * * @param uploadImage --本地路径(tomacat路径) * @param serverDir --服务器路径 * @param imageType --文件或图片类型 * 此方法可以上传文件或图片.txt,.jpg,.gif等 */ public void upload(String uploadImage,Str
  • bellman-ford(贝尔曼-福特)算法 comsci 算法F#
    Bellman-Ford算法(根据发明者 Richard Bellman 和 Lester Ford 命名)是求解单源最短路径问题的一种算法。单源点的最短路径问题是指：给定一个加权有向图G和源点s，对于图G中的任意一点v，求从s到v的最短路径。有时候这种算法也被称为 Moore-Bellman-Ford 算法，因为 Edward F. Moore zu 也为这个算法的发展做出了贡献。 与迪科
  • oracle ASM中ASM_POWER_LIMIT参数 daizj ASMoracleASM_POWER_LIMIT磁盘平衡
    ASM_POWER_LIMIT 该初始化参数用于指定ASM例程平衡磁盘所用的最大权值，其数值范围为0~11，默认值为1。该初始化参数是动态参数，可以使用ALTER  SESSION或ALTER  SYSTEM命令进行修改。示例如下： SQL>ALTER  SESSION  SET   Asm_power_limit=2;
  • 高级排序:快速排序 dieslrae 快速排序
    public void quickSort(int[] array){ this.quickSort(array, 0, array.length - 1); } public void quickSort(int[] array,int left,int right){ if(right - left <= 0
  • C语言学习六指针_何谓变量的地址 一个指针变量到底占几个字节 dcj3sjt126com C语言
    # include <stdio.h> int main(void) { /* 1、一个变量的地址只用第一个字节表示 2、虽然他只使用了第一个字节表示，但是他本身指针变量类型就可以确定出他指向的指针变量占几个字节了 3、他都只存了第一个字节地址，为什么只需要存一个字节的地址，却占了4个字节，虽然只有一个字节， 但是这些字节比较多，所以编号就比较大，
  • phpize使用方法 dcj3sjt126com PHP
    phpize是用来扩展php扩展模块的，通过phpize可以建立php的外挂模块,下面介绍一个它的使用方法,需要的朋友可以参考下 安装（fastcgi模式）的时候，常常有这样一句命令： 代码如下: /usr/local/webserver/php/bin/phpize   一、phpize是干嘛的？ phpize是什么？ phpize是用来扩展php扩展模块的，通过phpi
  • Java虚拟机学习 - 对象引用强度 shuizhaosi888 JAVA虚拟机
    本文原文链接：http://blog.csdn.net/java2000_wl/article/details/8090276 转载请注明出处！ 无论是通过计数算法判断对象的引用数量，还是通过根搜索算法判断对象引用链是否可达，判定对象是否存活都与“引用”相关。 引用主要分为 ：强引用(Strong Reference)、软引用(Soft Reference)、弱引用(Wea
  • .NET Framework 3.5 Service Pack 1（完整软件包）下载地址 happyqing .net下载framework
      Microsoft .NET Framework 3.5 Service Pack 1（完整软件包）  http://www.microsoft.com/zh-cn/download/details.aspx?id=25150 Microsoft .NET Framework 3.5 Service Pack 1 是一个累积更新，包含很多基于 .NET Framewo
  • JAVA定时器的使用 jingjing0907 javatimer线程定时器
    1、在应用开发中，经常需要一些周期性的操作，比如每5分钟执行某一操作等。 对于这样的操作最方便、高效的实现方式就是使用java.util.Timer工具类。 privatejava.util.Timer timer; timer = newTimer(true); timer.schedule( newjava.util.TimerTask() { public void run()
  • Webbench 流浪鱼 webbench
    首页下载地址 http://home.tiscali.cz/~cz210552/webbench.html Webbench是知名的网站压力测试工具，它是由Lionbridge公司（http://www.lionbridge.com）开发。 Webbench能测试处在相同硬件上，不同服务的性能以及不同硬件上同一个服务的运行状况。webbench的标准测试可以向我们展示服务器的两项内容：每秒钟相
  • 第11章 动画效果（中） onestopweb 动画
    index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/
  • windows下制作bat启动脚本. sanyecao2314 javacmd脚本bat
    java -classpath C:\dwjj\commons-dbcp.jar;C:\dwjj\commons-pool.jar;C:\dwjj\log4j-1.2.16.jar;C:\dwjj\poi-3.9-20121203.jar;C:\dwjj\sqljdbc4.jar;C:\dwjj\voucherimp.jar com.citsamex.core.startup.MainStart
  • Java进行RSA加解密的例子 tomcat_oracle java
    加密是保证数据安全的手段之一。加密是将纯文本数据转换为难以理解的密文；解密是将密文转换回纯文本。 　　数据的加解密属于密码学的范畴。通常，加密和解密都需要使用一些秘密信息，这些秘密信息叫做密钥，将纯文本转为密文或者转回的时候都要用到这些密钥。 　　对称加密指的是发送者和接收者共用同一个密钥的加解密方法。 　　非对称加密(又称公钥加密)指的是需要一个私有密钥一个公开密钥，两个不同的密钥的
  • Android_ViewStub 阿尔萨斯 ViewStub
    public final class ViewStub extends View java.lang.Object android.view.View android.view.ViewStub 类摘要： ViewStub 是一个隐藏的，不占用内存空间的视图对象，它可以在运行时延迟加载布局资源文件。当 ViewSt
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他