原生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. ...
随机推荐
- angular-dragon-drop.js 双向数据绑定拖拽的功能
在做公司后台物流的时候,涉及到34个省市分为两个部分,一部分为配送区域,另一部分为非配送区域,想利用拖拽的功能来实现,最好两部分的数组能自动更新. 刚好找到angular-dragon-drop.js ...
- JEECG 3.7.1 版本发布，企业级JAVA快速开发平台
JEECG 3.7.1 版本发布,企业级JAVA快速开发平台 ---------------------------------------- Version: Jeecg_3.7.1项 目: ...
- timeit模块
算法是计算机处理信息的本质,因为计算机程序本质上是一个算法来告诉计算机确切的步骤来执行一个指定的任务.一般地,当算法在处理信息时,会从输入设备或数据的存储地址读取数据,把结果写入输出设备或某个存储地址 ...
- RegExp对象的三个方法
RegExp 对象有 3 个方法:test().exec() 以及 compile(). test( ) test()方法检索字符串中的指定值.返回值是true或false. 例子: 因为字符 ...
- UE4 径向模糊radiu blur
hlsl代码为: float2 ScreenMult = ; ; ] = {-0.08,-0.05,-0.03,-0.02,-0.01,0.01,0.02,0.03,0.05,0.08}; float ...
- 使用npm安装依赖，尽量别使用cnpm，会漏掉很多依赖的
使用npm安装依赖,尽量别使用cnpm,会漏掉很多依赖的
- PHP defined() 函数
定义和用法 defined() 函数检查某常量是否存在. 若常量存在,则返回 true,否则返回 false. 语法 defined(name) 参数 描述 name 必需.规定要检查的常量的名称. ...
- MySQL浅谈 LEFT JOIN
On条件(在“A left join b on conditional_expr”)决定如何从table B 中检索数据行(Matching-State); 如果B中没有行匹配On 条件,额外的B的所 ...
- C# 获取ListView中选中行中对应的列数据
C# 获取ListView中选中行中对应的列数据 ) { ListView.SelectedIndexCollection c = MediaList.SelectedIndices; ]].SubI ...
- 深入浅出讲解：php的socket通信[转]
对TCP/IP.UDP.Socket编程这些词你不会很陌生吧?随着网络技术的发展,这些词充斥着我们的耳朵.那么我想问: 1. 什么是TCP/IP.UDP?2. Sock ...