原生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. ...
随机推荐
- Video Target Tracking Based on Online Learning—深度学习在目标跟踪中的应用
摘要 近年来,深度学习方法在物体跟踪领域有不少成功应用,并逐渐在性能上超越传统方法.本文先对现有基于深度学习的目标跟踪算法进行了分类梳理,后续会分篇对各个算法进行详细描述. 看上方给出的3张图片,它们 ...
- 第三方推送 JPush 配置中的引入so库问题
Gradle入门:http://www.infoq.com/cn/articles/android-in-depth-gradle/ 当所需要的so库已经复制到libs目录下,系统还是提示 找不到so ...
- 关于nginx中不用.htaccess 用在ningx.conf中配置的问题
官网一直出现http://4**.**..7/php/index.php/admin/base/getConfigs报错404错误问题, 问题一:URL重写问题(nginx配置问题) 问题二:vue中 ...
- dedecms中{dede:myad name='about'/} 修改内容
网站首页index.htm中调用这个命令,显示一段文字,但是想要修改内容.所以想知道这个命令指定的文件内容在哪里寻找或者指定内容在哪里修改? 匿名 | 浏览 6036 次 发布于2014-02-19 ...
- yourphp目录结构
Yourphp企业网站管理系统是一款完全开源免费的PHP+MYSQL系统.核心采用了Thinkphp框架等众多开源软件,同时核心功能也作为开源软件发布的网站后台管理系统. 二.目录说明 /Cache ...
- nginx版本如何选择？
生产环境使用Stable version:最新稳定版,现在最新的版本是nginx-1.8.1 注意各版本的区别:Nginx官网提供了三个类型的版本 1.Mainline version:Mainlin ...
- SQL作业及调度创建
转自:http://www.cnblogs.com/accumulater/p/6223909.html --定义创建作业 转自http://hi.baidu.com/procedure/blog/i ...
- hashCode方法和equals方法比较
为什么用HashCode比较比用equals方法比较要快呢?我们要想比较hashCode与equals的性能,得先了解HashCode是什么. HashCode HashCode是jdk根据对象的地址 ...
- Azure Powershell使用已有特殊化非托管磁盘创建ARM虚拟机
生成已有特殊化非托管磁盘的方法主要有如下两种: 1.使用StorageExplorer存储管理工具,复制特殊化磁盘到一个新的容器下 2.New Portal中删除虚拟机,默认vhd文件会保留在存储账号 ...
- java中String的.trim()方法
该方法去除两边的空白符 原理: 看看源码实现 public String trim() { int len = value.length; ; char[] val = value; /* avoid ...