原生js贪吃蛇
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style>
ul{
margin:0 auto;
width:600px;
}
li{
border-radius:10px;
box-sizing:border-box;
list-style:none;
float:left;
width:30px;
height:30px;
border:1px solid #6495ED;
}
.snake{
background-color:black;
}
.food{
background-color:red;
}
.headSnake{
background-color:green
}
</style>
</head>
<body>
<ul></ul>
</body>
<script>
//50X50格子，用二位数组取
var deskArr = [];
//创建文档片段
var fragment = document.createDocumentFragment() ;
for(var i=0;i<20;i++){
var rowArr = [];
for(var j=0;j<20;j++){
var li = document.createElement("li");
fragment.appendChild(li);
rowArr.push(li);
}
deskArr.push(rowArr);
}
document.querySelector("ul").appendChild(fragment);
//蛇数组
var snake = [];
//分数
var score = 0;
//蛇头1-18
var headNumX = parseInt(Math.random()*(17)+1);
//蛇头0-19
var headNumY = parseInt(Math.random()*19);
//改变蛇头的颜色
snake.push(deskArr[headNumY][headNumX]);
snake.push(deskArr[headNumY][headNumX-1]);
snake[0].className = "headSnake";
snake[1].className = "snake";
//console.log(snake); //蛇移动
//蛇移动的速度
var speed = 500;
//蛇移动的默认方向
var dir = "right";
//是否showFood
var food = 1;
//吃到食物的标志
var foodFlag = false;
function snakeMove(){
if(food==1){
foodShow();
food=0;
}
/*键盘事件
当向上键并且默认方向不是下时，dir="up"
当向下键时，dir="down"
当向左键时，dir="left"
当向右键时，dir="right"
*/
document.onkeydown = function(){
var event= window.event||arguments[0];
if(event.keyCode==37&&dir!="right"){
dir = "left";
}else if(event.keyCode == 38&&dir!="down"){
dir = "up";
}else if(event.keyCode == 40&&dir!="up"){
dir = "down";
}else if(event.keyCode == 39&&dir!="left"){
dir = "right";
}
}
//方向判断
switch (dir)
{
case "right":
headNumX++;
break;
case "left":
headNumX--;
break;
case "up":
headNumY--;
break;
case "down":
headNumY++;
break; }
snake[snake.length-1].className = "";
snake.pop();
snake[0].className="snake";
snake.unshift(deskArr[headNumY][headNumX]);
snake[0].className = "headSnake";
//判断是否吃到食物
if(snake[0]==deskArr[foodY][foodX]){
snake[0].className="snake";
if(dir =="up"){
headNumY--;
}else if(dir =="down"){
headNumY++;
}else if(dir =="left"){
headNumX--;
}else if(dir =="right"){
headNumX++;
}
snake.unshift(deskArr[headNumY][headNumX]);
snake[0].className="headSnake";
score++; foodShow(); }
liveOrDie()&&(setTimeout(snakeMove,speed)); }
setTimeout(snakeMove,speed) //随机生成一个食物
/*
随机生成foodX，foodY
0-19 0-19
判断该位置是否与身体重合
若重合，则重新取值
若不重合，则显示food
*/
var foodX;
var foodY;
function foodShow(){
foodX = parseInt(Math.random()*17+1);
foodY = parseInt(Math.random()*17+1);
var flag = 0;
for(var i=0;i<snake.length;i++){
(snake[i]==deskArr[foodY][foodX])&&(flag=1);
}
!flag?
deskArr[foodY][foodX].className = "food"
:foodShow();
}
/*判断是否游戏失败
1.撞墙
头的坐标Y 小于0或者大于19
头的坐标X 小于0或者大于19
2.撞到自己的身体
循环，当两个对象一样时，
*/
function liveOrDie(){
console.log(headNumX);
if(headNumX>19||headNumX<0||headNumY>19||headNumY<0){
alert("游戏结束"+"\n"+"最终得分"+score);
return 0 ;
}
for(var i=1;i<snake.length;i++){
if(snake[0]==snake[i]){
alert("游戏结束"+"\n"+"最终得分"+score);
return 0;
}
}
return 1; } </script>
</html>
原生js贪吃蛇的更多相关文章
- 原生Js贪吃蛇游戏实战开发笔记
前言 本课程是通过JavaScript结合WebAPI DOM实现的一版网页游戏---贪吃蛇的开发全过程,采用面向以象的思想设计开发.通过这个小游戏的开发, 不仅可以掌握JS的语法的应用,还可以学会D ...
- JS贪吃蛇游戏
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- js贪吃蛇-简单版
分享个用原生js写的贪吃蛇,最近在学java,按照当年写的 js的思路,转换成java,换汤不换药 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...
- JS贪吃蛇小游戏
效果图展示: 具体实现代码如下: (1)html部分 !DOCTYPE html> <html> <head> <meta charset="utf-8& ...
- HTML5+CSS+JS 贪吃蛇demo
我写博客的主要目的就是温习所学的知识,自己以前写的游戏当然不能放过! 这款网页版贪吃蛇是大一下册学习网页前端时老师教我们写的,由于那个时候初学网页前端,所以这款游戏是纯原生Java Script写的, ...
- js贪吃蛇（构造函数）
给大家分享一下这几天我研究的一个贪吃蛇,挺简单的,但是实现起来其实有点绕的,我给大家附上完整代码,一起分析学习一下,主要用的是构造函数. 思想: .设计蛇:属性有宽.高.方向.状态(有多少节),方法: ...
- 原生JavaScript贪吃蛇
在实例开发过程中还是能认识到很多不足的,并且加强了一些基础. 简单写一下制作过程: 1.创建画布 2.创建蛇和老鼠 坐标不能重叠 3.让蛇移动起来 4.添加死亡方法 5.添加转点坐标和方向 6.添加吃 ...
- js贪吃蛇源码
1.注意,自己引入jquery,这个demo基于jquery的,我的jquery是写的本地的 2.没有写注释,看不懂的再问我吧, <!DOCTYPE html><html> & ...
- js贪吃蛇
function init() { w = 40; m = 20; d = w * m / 2; food = null; dm = new ht.DataModel(); g3d = new ht. ...
随机推荐
- 将数据按照gzip当时解压的工具类
import java.io.ByteArrayInputStream; import java.io.ByteArrayOutputStream; import java.io.File; impo ...
- nodeJS里面的模块
this 打开cmd,执行如下命令 nodeconsole.log(this); 输出如上信息,表示this是global,每个电脑的配置信息不一样的话,可能会有所差别的. 然后新建一个文件,写下如下 ...
- url加密，一般只对参数加密
首先,很不推荐你使用get方式发送密码,最好是使用post. 原因是,你通过一个连接把用户名和密码发送到后台,即便密码不是明文,别人获取不到密码明文,但是,只要你这个连接成功登陆过,别人就可以拿这个连 ...
- 一步步部署基于Windows系统的Jenkins持续集成环境
如题:本文将介绍如何在Windows环境下运用Jenkins部署持续集成环境.之所以写本文,是因为在最近工作当中,学习使用Jenkins时,确实遇到了一些问题,而大多数教程文档都是基于Mac或是Lin ...
- get最简单直接粗爆git与github教程
Git是分布式版本控制系统(可以理解为文件管理拓展工具) github一个在线文件托管系统(可以理解为一个在线云盘) 准备工作,在git官网下载git软件件,安装git软件,以windows.为例,下 ...
- List源码学习之LinkedList
LinkedList 内部数据接口为一个链表,存储数据可为空可重复. 1.包含主要参数: //集合长度transient int size = 0; /** * 头结点 */ transient No ...
- linux workqueue的名字长度小问题
在排查一个nvme的的workqueue的问题的时候,发现nvme的queue的进程名被截断了, [root@localhost caq]# ps -ef |grep -i nvme root : ? ...
- Mysql覆盖索引 covering index 或者 index coverage
组合索引 提到组合索引,大家都知道"最左前缀"原则.例如,创建索引 idx_name_age (name,age) ,通常情况下,where age=50 或者 where age ...
- Overload&Override
Overload&Override overload-–重载 方法的重载就是在一个类中,可以定义多个有相同名字,但参数不同的方法.调用时,会根据不同的参数表选择对应的方法. 规 则:两同 ...
- python_如何对实例属性进行类型检查？
案例: 在某项目中,我们实现了一些类,并希望能像静态语言那样对他们的实例属性进行类型检查 p = Person() p.name = 'xi_xi' # 必须是str p.age = ...