原生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. ...
随机推荐
- Linux驱动手动绑定和解绑定
Linux内核从2.6.13-rc3开始,提供了在用户空间,可动态的绑定和解绑定设备和设备驱动之间关系的功能.在这之前,只能通过insmod(modprobe)和rmmod来绑定和解绑,而且这种绑定和 ...
- 常用Windows DOS命令项目部署经常用到
img { max-width: 100% } 前两天部署.netcore项目,首先是生产环境域名访问不了,再到.netcore项目IIS部署502.5,在到莫名其妙的500,在排查项目部署问题的时候 ...
- qt中moc的作用
Qt 将源代码交给标准 C++ 编译器,如 gcc 之前,需要事先将这些扩展的语法去除掉.完成这一操作的就是 moc. moc 全称是 Meta-Object Compiler,也就是"元对 ...
- [国嵌攻略][119][Linux中断处理程序设计]
裸机中断: 1.中断统一入口. 2.注册中断处理程序. 3.根据中断源编号,调用中断处理程序. Linux中断 1.在entry-armv.S中的_irq_svc是中断统一入口. 2.获取产生中断源的 ...
- [国嵌笔记][028][Bootloader设计蓝图]
Bootloader的作用就是启动Linux内核 U-Boot简介 1.U-Boot是用于多种嵌入式CPU(ARM.x86.MIPS等)的bootloader程序,U-Boot不仅支持嵌入式Linux ...
- jQuery 函数位于一个 document ready 函数中
在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中: $(document).ready(function(){ --- jQuery functions go h ...
- JVM核心之JVM运行和类加载全过程
为什么研究类加载全过程? 有助于连接JVM运行过程 更深入了解java动态性(解热部署,动态加载),提高程序的灵活性 类加载机制 JVM把class文件加载到内存,并对数据进行校验.解析和初始化,最终 ...
- CCF系列之门禁系统(201412-1)
试题编号:201412-1试题名称:门禁系统时间限制: 2.0s内存限制: 256.0MB 问题描述 涛涛最近要负责图书馆的管理工作,需要记录下每天读者的到访情况.每位读者有一个编号,每条记录用读者的 ...
- Oracle临时表空间组
Oracle 10g之前,同一用户的多个会话只可以使用同一个临时表空间,因为在给定的时间只有一个临时表空间默认给用户,为了解决这个潜在的瓶颈,Oracle支持临时表空间组即包含多个临时表空间的集合.临 ...
- excel去除空格
=SUBSTITUTE(Sheet1!A1," ","") 在sheet2中输入上述公式,然后再通过拖拽复制公式,即可以很快的将sheet1中的数据全部处理.