JS贪吃蛇游戏
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>JS贪吃蛇游戏</title>
<style>
* {
margin: 0;
padding: 0;
} .box {
width: 482px;
margin: 0 auto;
} .box .main {
float: left;
border: 1px solid #ccc;
} .box .info {
line-height: 60px;
} .box .info p {
float: left;
margin-right: 20px;
} .main .row {
overflow: hidden;
} .main .col,
.main .active {
float: left;
width: 20px;
height: 20px;
} .main .active {
background: red;
}
</style>
<script>
// 模仿jquery获取元素
function $(selector, content) { content = content || document; var sTag = selector.charAt(),
arr = [],
allName = content.getElementsByTagName('*'); if (sTag === '#') { selector = selector.substring(1); // console.log(selector);
return content.getElementById(selector); } else if (sTag === '.') { selector = selector.substring(1); for (var i = 0; i < allName.length; i++) {
var sstr = allName[i].className.indexOf(selector); if (sstr != -1) {
arr.push(allName[i]);
};
}; // console.log(arr);
return arr; } else {
return content.getElementsByTagName(selector);
};
} window.onload = function() {
var oMap = $('#map');
oMap.innerHTML = ''; var nRow = 20, //行
nCol = 20, //列
g = 3, //蛇默认蛇身长度
x = 0, //蛇头在哪一行
y = g - 1, //蛇头在那一列
foodX = 0,
foodY = 0; //食物的x,y轴位置 // 蛇的长度
var aSnakes = new Array();
var timer = null;
var score = 0;
var speed = 200; //默认初始速度
// 添加地图布局
var AllCols = new Array();
for (var i = 0; i < nRow; i++) {
var row = document.createElement('div');
row.className = 'row'; var aRow = new Array();
for (var j = 0; j < nCol; j++) {
var col = document.createElement('div');
col.className = 'col'; row.appendChild(col) aRow[j] = col; //添加col到数组中
}; // 把所有row的col 添加到数组中
AllCols[i] = aRow;
oMap.appendChild(row)
}; // 循环蛇长度
for (var k = 0; k < g; k++) {
AllCols[0][k].className = 'col active';
aSnakes[k] = AllCols[0][k];
}; // 第一个蛇隐藏
function firstHide(obj) {
obj[0].className = 'col';
} // 最后一个蛇，往前挪动
function lastShow(obj) {
obj[obj.length - 1].className = 'col active';
} // 控制键盘方向
var dir = 'right',
oldDir = dir;
var fa = false;
document.onkeydown = function(ev) {
var ev = ev || event; // 保存上一个值
oldDir = dir; dir = ev.keyCode; // 排除所有非方向箭
if (dir>40 || dir<37) {
dir = oldDir;
}; // 排除相反方向，如果正在向下移动，按上则无效
if (dir == 38 && oldDir == 'bottom') {
dir = 'bottom';
} else if (dir == 39 && oldDir == 'left') {
dir = 'left'
} else if (dir == 40 && oldDir == 'top') {
dir = 'top'
} else if (dir == 37 && oldDir == 'right') {
dir = 'right'
}; // 正常行走
if (dir == 39) {
dir = 'right';
} else if (dir == 38) {
dir = 'top'; } else if (dir == 37) {
dir = 'left'; } else if (dir == 40) {
dir = 'bottom';
} }; // 生成食物坐标
function food() {
foodX = Math.floor(Math.random() * nRow) //食物在哪一行
foodY = Math.floor(Math.random() * nCol) //食物在哪一列 // 排除在自己身上
if (AllCols[foodX][foodY].className == 'col active') {
food();
} else {
AllCols[foodX][foodY].className = 'col active';
}; };
food(); // 蛇吃到虫子新增长度
function addSnake() {
aSnakes[aSnakes.length] = AllCols[foodX][foodY];
g += 1;
score += 1; if (speed == 100) {
speed -= 10
} else if (speed == 50) {
speed -= 5
} else {
speed -= 20;
}; document.getElementById('score').innerHTML = score;
food();
} // 游戏结束
function gameOver() {
alert('游戏结束！');
clearTimeout(timer);
}; // 检测是否碰到自身
function checkMe(arr) {
var bflag = true; for (var i = 0; i < aSnakes.length; i++) {
if (aSnakes[i] == arr) {
bflag = false;
};
}; return bflag;
}; // 游戏开始
function start() { switch (dir) {
case 'left': // 是否撞到墙
if (y - 1 >= 0) { // 是否吃到自身
if (checkMe(AllCols[x][y - 1])) { // 蛇尾隐藏
firstHide(aSnakes) if (x == foodX && y - 1 == foodY) {
addSnake(); } else {
for (var i = 0; i < aSnakes.length - 1; i++) {
aSnakes[i] = aSnakes[i + 1]
};
aSnakes[g - 1] = AllCols[x][y - 1];
}; // 新蛇头显示
lastShow(aSnakes) y -= 1; timer = setTimeout(start, speed); } else {
gameOver(); }; } else {
gameOver();
}; break; case 'top': // 是否撞到墙
if (x - 1 >= 0) { // 是否吃到自身
if (checkMe(AllCols[x - 1][y])) { // 蛇尾隐藏
firstHide(aSnakes) if (x - 1 == foodX && y == foodY) {
addSnake();
} else {
for (var i = 0; i < aSnakes.length - 1; i++) {
aSnakes[i] = aSnakes[i + 1]
};
aSnakes[g - 1] = AllCols[x - 1][y];
}; // 新蛇头显示
lastShow(aSnakes) x -= 1; timer = setTimeout(start, speed); } else {
gameOver(); }; } else {
gameOver();
}; break; case 'right': // 是否撞到墙
if (y + 1 < nCol) {
// 是否吃到自身
if (checkMe(AllCols[x][y + 1])) { // 蛇尾隐藏
firstHide(aSnakes) if (x == foodX && y + 1 == foodY) {
addSnake();
} else {
for (var i = 0; i < aSnakes.length - 1; i++) {
aSnakes[i] = aSnakes[i + 1]
};
aSnakes[g - 1] = AllCols[x][y + 1];
}; // 新蛇头显示
lastShow(aSnakes) // aSnakes[g - 1] = AllCols[x][y-1]; //倒数第二个
// console.log(aSnakes[g - 1],AllCols[x][y - 1]); y += 1; timer = setTimeout(start, speed); } else {
gameOver(); }; } else {
gameOver();
}; break; case 'bottom':
// console.log(aSnakes[g - 1]); // 是否撞到墙
if (x + 1 < nRow) { // 是否吃到自身
if (checkMe(AllCols[x + 1][y])) { // 蛇尾隐藏
firstHide(aSnakes) if (x + 1 == foodX && y == foodY) {
addSnake();
} else {
for (var i = 0; i < aSnakes.length - 1; i++) {
aSnakes[i] = aSnakes[i + 1]
};
aSnakes[g - 1] = AllCols[x + 1][y]; }; // 新蛇头显示
lastShow(aSnakes) x += 1; timer = setTimeout(start, speed); } else {
gameOver(); }; } else {
gameOver();
};
break;
} // console.log(aSnakes); } var oStart = document.getElementById("start");
oStart.onclick = function() {
start();
};
};
</script>
</head> <body>
<div class="box">
<h1>JS贪吃蛇游戏</h1>
<div class="info">
<p class="text">您的分数：<span id="score">0</span>分</p>
<p>按[上下左右]方向键吃虫</p>
<input id="start" type="button" value="开始游戏" />
</div>
<div class="main" id="map"></div>
</div>
</body> </html>
JS贪吃蛇游戏的更多相关文章
- 原生Js贪吃蛇游戏实战开发笔记
前言 本课程是通过JavaScript结合WebAPI DOM实现的一版网页游戏---贪吃蛇的开发全过程,采用面向以象的思想设计开发.通过这个小游戏的开发, 不仅可以掌握JS的语法的应用,还可以学会D ...
- 100行JS实现HTML5的3D贪吃蛇游戏
js1k.com收集了小于1k的javascript小例子,里面有很多很炫很酷的游戏和特效,今年规则又增加了新花样,传统的classic类型基础上又增加了WebGL类型,以及允许增加到2K的++类型, ...
- 一个原生JS实现的不太成熟的贪吃蛇游戏
一个初初初初级前端民工 主要是记录一下写过的东西,复习用 大佬们如果看到代码哪里不符合规范,或者有更好写法的,欢迎各位批评指正 十分感谢 实现一个贪吃蛇游戏需要几步? 1.有地图 2.有蛇 3.有食物 ...
- WebGL实现HTML5的3D贪吃蛇游戏
js1k.com收集了小于1k的javascript小例子,里面有很多很炫很酷的游戏和特效,今年规则又增加了新花样,传统的classic类型基础上又增加了WebGL类型,以及允许增加到2K的++类型, ...
- H5实现的可自定义贪吃蛇游戏
原创游戏,使用lufylegend.js开发 用canvas实现的贪吃蛇游戏,与一般的贪吃蛇游戏不同,图片经过美工设计,代码设计支持扩展和自定义. 游戏元素丰富,包括障碍物(仙人掌),金币(奖励),苹 ...
- 使用electron为贪吃蛇游戏创建全局快捷键
上图就是我们的简体版贪吃蛇游戏,我们可以看到使用键盘上面的上下左右可以对贪吃蛇进行控制. The picture above is our simplified version of Snake Ea ...
- Android快乐贪吃蛇游戏实战项目开发教程-01项目概述与目录
一.项目简介 贪吃蛇是一个很经典的游戏,也很适合用来学习.本教程将和大家一起做一个Android版的贪吃蛇游戏. 我已经将做好的案例上传到了应用宝,无病毒.无广告,大家可以放心下载下来把玩一下.应用宝 ...
- 用C++实现的贪吃蛇游戏
我是一个C++初学者,控制台实现了一个贪吃蛇游戏. 代码如下: //"贪吃蛇游戏"V1.0 //李国良于2016年12月29日编写完成 #include <iostream& ...
- 用OpenGL简单编写的一个最简单贪吃蛇游戏
刚学OpenGL的时候,写的一个最简单的贪吃蛇游戏代码 如下: //贪吃蛇游戏 #include<stdio.h> #include<stdlib.h> #include< ...
随机推荐
- java-常用快捷键
alt+/:代码提示 ctrl+/:代码提示 ctrl+1:快速生成impl代码
- android的消息处理机制（图+源码分析）——Looper,Handler,Message
android源码中包含了大量的设计模式,除此以外,android sdk还精心为我们设计了各种helper类,对于和我一样渴望水平得到进阶的人来说,都太值得一读了.这不,前几天为了了解android ...
- LabVIEW设计模式系列——资源关闭后错误处理
标准: 1.很多引用资源其打开函数和关闭函数对错误处理的方式有所不同:2.一般地NI的Help里对打开函数的错误端子的解释是这样的:如错误发生在VI或函数运行之前,VI或函数将把错误输入值传递至错误输 ...
- (转载)equals与==
引言:从一个朋友的blog转过来的,里面解决了两个困扰我很久的问题.很有久旱逢甘霖的感觉. 概述: A.==可用于基本类型和引用类型:当用于基本类型时候,是比较值是否相同:当用于引用类型 ...
- GUI编程笔记（java）08：GUI通过鼠标移动到按钮上更改背景色案例
首先我们看看源代码如下: package cn.itcast_06; import java.awt.Button; import java.awt.Color; import java.awt.Fl ...
- 如何快速学习bootstrap
bootstrap中文网http://www.bootcss.com/解决了我所有使用bootstrap的问题,从0开始,下面的全部链接都是该网站的子链接.例子http://v3.bootcss.co ...
- C# Java DES加密解密
转自http://www.cnblogs.com/zhuiyi/archive/2013/04/01/2993201.html 最近被DES加解密弄得超级郁闷,我用C#的方法加密得到的密文老是跟客户给 ...
- 什么是WordPress？
(今天由于好友 肖知虎的 的需求 , 我开始了帮助小虎建站的需求, 就这样开始学习了Wordpress. 这些文章就是为了记录这些我在学习过程当中的心得,和记录下来的文字而已) 什么是WordPre ...
- mvc5 + ef6 + autofac搭建项目（四）
在列表页面,点击新增,弹出窗口实现视屏上传,这里存在一个问题,就是大文件上传的问题,iis出于安全问题,有限制,当然这不是大问题,解决也很容易: 见截图: 请忽略视屏文件,看得懂的请装作不懂. 源码 ...
- Java:Date、Calendar、Timestamp的使用
一.Java.util.Date 该对象包含了年月日时分秒信息.具体使用如下代码: //String 转换为Date private static void dateDemo() throws Par ...