原生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. ...
随机推荐
- 【shell mysql 导出数据到csv脚本，完美解决乱码转义符等问题】-费元星
#!/bin/bash#@author:feiyuanxing [既然笨到家,就要努力到家]#@date:2017-12-05#@E-Mail:feiyuanxing@gmail.com#@TARGE ...
- 小白的Python之路 day5 configparser模块的特点和用法
configparser模块的特点和用法 一.概述 主要用于生成和修改常见配置文件,当前模块的名称在 python 3.x 版本中变更为 configparser.在python2.x版本中为Conf ...
- dig命令
dig(域信息搜索器)命令是一个用于询问 DNS 域名服务器的灵活的工具.它执行 DNS 搜索,显示从受请求的域名服务器返回的答复.多数 DNS 管理员利用 dig 作为 DNS 问题的故障诊断, ...
- Angular 4+ Http
HTTP: 使应用能够对远端服务器发起相应的Http调用: 你要知道: HttpModule并不是Angular的核心模块,它是Angualr用来进行Web访问的一种可选方式,并位于一个名叫@angu ...
- servlet入门学习之工作原理解析
从 Servlet 容器说起 要介绍 Servlet 必须要先把 Servlet 容器说清楚,Servlet 与 Servlet 容器的关系有点像枪和子弹的关系,枪是为子弹而生,而子弹又让枪有了杀伤力 ...
- MVVM探索：从ViewModel关闭Window的最佳实践
在WPF里使用MVVM开发的时候,似乎总是不可避免的会遇到这样一个问题:ViewModel在处理完业务之后需要关闭这个Window,这时候要怎么处理? 网上有很多解决方案:有的在ViewModel抛出 ...
- 图表工具--- ECharts.js学习（一） 简单入门
ECharts.js学习(一) 在项目开发的时候,在前端的数据需要用图表的形式展示.网上搜索了一下,发现有几种统计图库.具体有哪几种可以看: 前端开发者常用的9个JavaScript图表库 EChar ...
- mysql-冗余和重复索引
mysql允许在相同列上创建多个索引,无论是有意还是无意,mysql需要单独维护重复的索引,并且优化器在优化查询的时候也需要逐个地进行考虑,这会影响性能. 重复索引是指的在相同的列上按照相同的顺序创建 ...
- 四、Html常用标签
1,列表相关标签 <ul>:定义无序列表,只能包含<li>子元素 <ol>:定义有序列表,只能包含<li>子元素,因为这个标签是有序的,所有这个标签还有 ...
- Linux下MongoDB安装和配置详解
1.下载安装包 将解压到/usr/local/mongodb 文件夹下 # mkdir /usr/local/mongodb # tar zxvf mongodb-linux-x86_64-3.2.9 ...