JavaScript与html5写的贪吃蛇完整代码

查看运行效果可访问http://www.codesocang.com/texiao/youxitexiao/2014/0402/7045.html#

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>js网页版的贪吃蛇游戏</title>
<style type="text/css">
#container{
width: 1000px;
margin: 0 auto;
}
#ground{
position: relative;
width: 1000px;
height: 500px;
background: #e6df6d;
}
#control{
width: 998px;
height: 60px;
line-height: 60px;
background: #cce290;
}
#banner{
float: left;
margin-left: 10px;
font: bold 18px;
}
#buttons{
float: right;
margin-right: 10px;
}
ul#speed{
float: left;
margin: 10px auto;
height: 40px;
line-height: 40px;
list-style: none;
text-align: center;
}
#speed li{
cursor: pointer;
background: #f6ff9f;
float: left;
width: 60px;
height: 100%;
margin-right: 12px;
border-radius: 30px;
}
#intro{
height: 50px;
width: 100%;
position: relative;
background:#cce290 url(http://www.codefans.net/jscss/demoimg/201403//key.jpg) no-repeat;
}
#intro h4 {
float: left;
text-indent: 220px;
}
#intro p{
width: 600px;
position: absolute;
top: -10px;
left: 320px;
line-height: 20px;
}
.food{
position: absolute;
background: #8b0 url(http://www.codefans.net/jscss/demoimg/201403//body.gif);
}
.block{
float: left;
width: 20px;
height: 20px;
overflow: hidden;
}
.snake-block{
position: absolute;
background: red;
}
#h-down,#t-down{
transform: rotate(90deg);
-ms-transform: rotate(90deg);/* IE 9 */
-webkit-transform: rotate(90deg);/* Safari and Chrome */
-o-transform: rotate(90deg);/* Opera */
-moz-transform: rotate(90deg);/* Firefox */
}
#h-up,#t-up{
transform: rotate(-90deg);
-ms-transform: rotate(-90deg);/* IE 9 */
-webkit-transform: rotate(-90deg);/* Safari and Chrome */
-o-transform: rotate(-90deg);/* Opera */
-moz-transform: rotate(- 90deg);/* Firefox */
}
#h-left,#t-left{
transform: rotate(180deg);
-ms-transform: rotate(180deg);/* IE 9 */
-webkit-transform: rotate(180deg);/* Safari and Chrome */
-o-transform: rotate(180deg);/* Opera */
-moz-transform: rotate(180deg);/* Firefox */
}
</style>
</head>
<body>
<div id="container">
<div id="ground">
</div>
<div id="control">
<span id="banner">JavaScript sneaker by 王洁</span>
<ul id="speed">
<li >一级</li>
<li >二级</li>
<li >三级</li>
<li id="sub-v">减速</li>
<li id="add-v">加速</li>
</ul>
<span></span>
<div id="buttons">
<button id="start">开始</buutton>
<button id="purse">暂停</button>
</div>
</div>
<div id="intro">
<h4>游戏说明：</h4>
<p>上下左右键控制蛇的转向，当吃的食物达到一定数量计数值加倍，当吃到类蛇身的食物时蛇身剪短但计数仍增加
</p>
</div>
</div>
<script type="text/javascript">
var oGround = document.getElementById('ground');
var oControl = document.getElementById('control');
var aSpan = oControl.getElementsByTagName('span');
var oSubDiv = createDiv();
oSubDiv.style.display = "none";
oGround.appendChild(oSubDiv);
//创建蛇
var aSnaker = [];
for(var i=3;i>0; i--){
var oDiv = document.createElement('div');
oDiv.style.left = i*20+'px';
oDiv.style.top = '60px';
oDiv.className = "block snake-block";
if(i==3)
oDiv.style.background = "url(/jscss/demoimg/201403//head.png)";
else if(i==2)
oDiv.style.background = "url(http://www.codefans.net/jscss/demoimg/201403//body.png)";
else
oDiv.style.background = "url(http://www.codefans.net/jscss/demoimg/201403//tail.png)";
//oDiv.innerHTML = 4-i;
aSnaker.push(oDiv);
oGround.appendChild(oDiv);
}
var oFood;
function divPos(){
var iLeft,iTop;
var flag = false;
do{
iLeft = parseInt(Math.random()*50)*20+'px';
iTop = parseInt(Math.random()*25)*20+'px';
for(var i=0;i<aSnaker.length;i++){
if(iLeft==aSnaker[i].style.left && iTop==aSnaker[i].style.top){
flag = true;
break;
}
}
}while(flag)
return {iLeft:iLeft,iTop:iTop};
}
function createFood(){//创建食物
oFood = document.createElement('div');
oFood.style.left = divPos().iLeft;
oFood.style.top = divPos().iTop;
oFood.className = 'block food';
oGround.appendChild(oFood);
}
createFood();
function createDiv(){
var oDiv = document.createElement("div");
oDiv.className = "block";
oDiv.style.background = "url(http://www.codefans.net/jscss/demoimg/201403//body.png)";
oDiv.style.position = "absolute";
return oDiv;
}
function addDiv(tailTop,tailLeft){
var oDiv = createDiv();
oDiv.style.top = tailTop +"px";
oDiv.style.left = tailLeft+"px";
oGround.appendChild(oDiv);
aSnaker.splice(aSnaker.length-1,0,oDiv);
}
//食物添加到尾巴的前面后计算尾巴现在应有的坐标
function priTail(headLeft,headTop,tailLeft,tailTop,moveDir){
// console.log(tailLeft+','+tailTop+','+headLeft+','+headTop);
if(tailLeft == headLeft||moveDir=="right" || moveDir=="left"){
if(tailTop>headTop)
tailTop -= 20;
else if(tailTop<headTop)
tailTop += 20;
// console.log(tailLeft+','+tailTop+','+headLeft+','+headTop);
}else if(tailTop == headTop||moveDir=="up" || moveDir=="down"){
if(tailLeft >headLeft)
tailLeft -= 20;
else if(tailLeft>headLeft)
tailLeft += 20;
// console.log(tailLeft+','+tailTop+','+headLeft+','+headTop);
}
return {tailTop: tailTop,
tailLeft:tailLeft};
}
//食物达到一定数量吃到SubDiv就减去一段身体，但计数值仍增长
function subDiv(){
}
var sum = 0;//对吃的食物数计数
var moveDir = 'right';
function move(){
//蛇身整体移动
for(var i=aSnaker.length-1;i>0;i--){
aSnaker[i].style.left = aSnaker[i-1].style.left;
aSnaker[i].style.top = aSnaker[i-1].style.top;
//console.log(i+','+aSnaker[i].style.left+','+aSnaker[i].style.top);
}
var snakeHead = aSnaker[0];
var headLeft = parseInt(snakeHead.style.left);
var headTop = parseInt(snakeHead.style.top);
switch(moveDir){
case "left":
headLeft -= 20;
break;
case "right":
headLeft += 20;
break;
case "up":
headTop -= 20;
break;
case "down":
headTop += 20;
break;
}
snakeHead.style.left = headLeft+'px';
snakeHead.style.top = headTop+'px';
aSnaker[0].id = "h-"+moveDir;
//与蛇身相撞结束游戏
for(var i=1;i<aSnaker.length;i++){
if(snakeHead.style.left==aSnaker[i].style.left && snakeHead.style.top==aSnaker[i].style.top){
reStart();
}
}
//撞墙游戏结束
if(snakeHead.style.left < "0px"|| snakeHead.style.top < "0px" || snakeHead.style.top== "500px" || snakeHead.style.left == "1000px"){
reStart();
}
var snakeTail = aSnaker[aSnaker.length-1];//获取当前的尾巴
//尾巴的转向，根据前一个的位置设置方向
if(snakeTail.style.top<aSnaker[aSnaker.length-2].style.top)
snakeTail.id = "t-down";
else if(snakeTail.style.top>aSnaker[aSnaker.length-2].style.top)
snakeTail.id = "t-up";
if(snakeTail.style.left>aSnaker[aSnaker.length-2].style.left)
snakeTail.id = "t-left";
else if (snakeTail.style.left<aSnaker[aSnaker.length-2].style.left)
snakeTail.id = "";
var tailLeft = parseInt(snakeTail.style.left);
var tailTop = parseInt(snakeTail.style.top);
//食物达到一定数量吃到SubDiv就减去一段身体，但计数值仍增长
var random = parseInt(Math.random()*8);
if(random==6 && sum>50 && oSubDiv.style.display=="none"){
oSubDiv.style.display = "block";
oSubDiv.style.left = divPos().iLeft;
oSubDiv.style.top = divPos().iTop;
//if(oSubDiv){
if(snakeHead.style.left == oSubDiv.style.left && snakeHead.style.top == oSubDiv.style.top){
console.log(aSnaker.length);
snakeTail.style.left = aSnaker[aSnaker.length-2].style.left;
snakeTail.style.top = aSnaker[aSnaker.length-2].style.top;
aSnaker.splice(aSnaker.length-3,aSnaker.length-2);
oSubDiv.style.display = "none";
console.log(aSnaker.length);
}
var t=setTimeout('oSubDiv.style.display="none"',5000);
//sum++;
}
//吃到的食物添加到尾巴的前面，分别改变尾巴和食物的定位坐标值
if(snakeHead.style.left == oFood.style.left && snakeHead.style.top == oFood.style.top){
tailLeft = snakeTail.style.left;
tailTop = snakeTail.style.top;
oFood.style.background = "url(http://www.codefans.net/jscss/demoimg/201403//body.png)";
oFood.style.top = tailTop +"px";
oFood.style.left = tailLeft+"px";
sum++;
aSnaker.splice(aSnaker.length-1,0,oFood);
tailTop = priTail(headLeft,headTop,tailLeft,tailTop,moveDir).tailTop;
tailLeft = priTail(headLeft,headTop,tailLeft,tailTop,moveDir).tailLeft;
if(sum>10&&sum<20){//食物达到一定数量有奖励
addDiv(tailTop,tailLeft);
sum++;
}
tailTop = priTail(headLeft,headTop,tailLeft,tailTop,moveDir).tailTop;
tailLeft = priTail(headLeft,headTop,tailLeft,tailTop,moveDir).tailLeft;
if(sum>20&&sum<40){//继续奖励，不过吃的太多也会死的更快
addDiv(tailTop,tailLeft);
sum++;
}
aSpan[1].innerHTML = "已吃食物"+sum+"个";
tailTop = priTail(headLeft,headTop,tailLeft,tailTop,moveDir).tailTop;
tailLeft = priTail(headLeft,headTop,tailLeft,tailTop,moveDir).tailLeft;
snakeTail.style.left = tailLeft+'px';
snakeTail.style.top = tailTop+'px';
createFood();
}
}
var timer;
var timerFlag = true;
var oStart = document.getElementById('start');
oStart.onclick = function(){
if((timerFlag&&oStart.innerHTML != "结束")||oPurse.innerHTML=="恢复"){
oStart.innerHTML = "结束";
openTimer();
timerFlag = false;
}
else if(this.innerHTML =="结束"){
clearInterval(timer);
//reStart();
}
};
var oPurse = document.getElementById('purse');
oPurse.onclick = function(){
if(!timerFlag&&this.innerHTML!="恢复"&&oStart.innerHTML=="结束"){
this.innerHTML = "恢复";
clearInterval(timer);
timerFlag =!timerFlag;
}else{
oStart.onclick();
this.innerHTML = "暂停";
timerFlag = !timerFlag;
}
};
var perTime = 300;
function openTimer(){
timer = setInterval(function(){//定时器
move();
//alert(oStart.innerHTML);
}, perTime);
}
//设置时间间隔，以改变速度
var oSpeed = document.getElementById('speed');
var aLi = oSpeed.getElementsByTagName('li');
for(var i=0;i<aLi.length;i++){//通过改变perTimer 改变时间
(function(index){
if(index<3){
aLi[index].onclick = function(){
clearInterval(timer);
switch (index){
case 0:
perTime = 400;
break;
case 1:
perTime = 200;
break;
case 2:
perTime = 60;
break;
}
if(oStart.innerHTML=="结束")
openTimer();
};
}
else if(index==3){
aLi[index].onclick = function(){
clearInterval(timer);
if(perTime>=50){
perTime += 50;
}
if(oStart.innerHTML=="结束")
openTimer();
};
}
else if(index == 4){
aLi[index].onclick = function(){
clearInterval(timer);
if (perTime<1000) {
perTime -=50;
}
if(oStart.innerHTML=="结束")
openTimer();
};
}
}
)(i);
}
function reStart(){//重新开始
clearInterval(timer);
var msg = confirm("此次游戏失败，要重新开始吗？");
//alert("Game Over");
if(msg)
window.location.reload();
}
document.onkeydown = function(e){//设置转向
e = e||window.event;
var keyCode = e.which || e.keyCode;
switch (keyCode){
case 37:
if(moveDir!="right"){
moveDir = "left";
}
break;
case 38:
if(moveDir!="down"){
moveDir = "up";
}
break;
case 39:
if(moveDir!="left"){
moveDir = "right";
}
break;
case 40:
if(moveDir!="up"){
moveDir = "down";
}
break;
}
}
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>

JavaScript与html5写的贪吃蛇完整代码的更多相关文章

用 Python 写个贪吃蛇，保姆级教程！
本文基于 Windows 环境开发,适合 Python 新手本文作者:HelloGitHub-Anthony HelloGitHub 推出的<讲解开源项目>系列,本期介绍 Python ...
原生js写的贪吃蛇网页版游戏特效
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <bo ...
WebGL实现HTML5的3D贪吃蛇游戏
js1k.com收集了小于1k的javascript小例子,里面有很多很炫很酷的游戏和特效,今年规则又增加了新花样,传统的classic类型基础上又增加了WebGL类型,以及允许增加到2K的++类型, ...
[原创]html5游戏_贪吃蛇
代码随便写写,尚有许多不足,PC与手机端皆可运行手机端滑屏操作,PC端方向键操作疑问: 生成食物,与判断是否可以移动方面有两种实现方式, 1.使用js内存,数组循环判断 2.使用dom的quer ...
100行JS实现HTML5的3D贪吃蛇游戏
js1k.com收集了小于1k的javascript小例子,里面有很多很炫很酷的游戏和特效,今年规则又增加了新花样,传统的classic类型基础上又增加了WebGL类型,以及允许增加到2K的++类型, ...
JavaScript面向对象编程小游戏---贪吃蛇
1 面向对象编程思想在程序项目中有着非常明显的优势: 1- 1 代码可读性高.由于继承的存在,即使改变需求,那么维护也只是在局部模块 1- 2 维护非常方便并且成本较低. 2 这个demo是采用了 ...
HTML5+CSS+JS 贪吃蛇demo
我写博客的主要目的就是温习所学的知识,自己以前写的游戏当然不能放过! 这款网页版贪吃蛇是大一下册学习网页前端时老师教我们写的,由于那个时候初学网页前端,所以这款游戏是纯原生Java Script写的, ...
关于用Java写的贪吃蛇游戏的一些感想
学习Java有那么一个月了,兴趣还是挺高的.然而最近老师布置的一个迷宫问题,着实让我头疼了一两个礼拜,以至于身心疲惫,困扰不安.无奈,暂且先放下这个迷宫问题,写个简单点的贪吃蛇程序,以此来提高低落的情 ...
使用Python写一个贪吃蛇
参考代码http://blog.csdn.net/leepwang/article/details/7640880 我在程序中加入了分数显示,三种特殊食物,将贪吃蛇的游戏逻辑写到了SnakeGame的 ...

随机推荐

cisco上的RIP V2加上MD5认证配置测试成功
R1: Router#show run Building configuration... Current configuration : bytes ! version 12.3 service t ...
关于在WIN32调用一些Zw系列的文件操作函数
转自:http://blog.csdn.net/cooblily/archive/2007/10/27/1848037.aspx 都好久沒上來写文章了,都不知道做什么好,結果还是学写了一下用Nativ ...
vs2010创建和使用动态链接库(dll)
本文将创建一个简单的动态链接库,并编写一个应用台控制程序使用该动态链接库,并提出了与实现相关的几个问题,供初学者交流. 本文包含以下内容: 创建动态链接库项目向动态链接库添加类创建引用动态链接库的 ...
WCF中的由于目标计算机积极拒绝，无法连接
1.第一种情况百度上找到了这篇文章 http://blog.sina.com.cn/s/blog_6b44b2ba01016j0z.html 讲的是使用了using用完之后就释放了,得到启发,仔细 ...
team geek
1. 转载自http://book.douban.com/review/6007037/,版权归丸子(^.^)v所有. New Google employees (we call “Nooglers” ...
Unity3D-基本导航(NavMesh)功能实现
1: 打开场景 2:打开Navgation窗口菜单中: Window --> Navgation, 在Inspector旁边会出现导航界面这个Objcet的面板是对应当前选择的物体的,旁边的 ...
Android 侧边栏(使用Support Library 4提供的扩展组件)
本文转自:http://www.apkbus.com/android-117148-1-1.html 写在前面的话:接触Android已经有一段时间了,自己积累的东西也算蛮多的.总结以往的经验,凡是关 ...
HDU-2710 Max Factor
看懂: Max Factor Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) T ...
UVA 11624 Fire! (bfs)
算法指南白书分别求一次人和火到达各个点的最短时间 #include<cstdio> #include<cstring> #include<queue> #incl ...
PHP两个字符串比较（人为出错），两字符串类型和数据表面相等，但strcmp()结果不为0
PHP中,比较两个字符串是否相等用:strcmp(): PHP strcmp() 函数 PHP String 函数定义和用法 strcmp() 函数比较两个字符串. 该函数返回: 0 - 如果两个字 ...

JavaScript与html5写的贪吃蛇完整代码

JavaScript与html5写的贪吃蛇完整代码的更多相关文章

随机推荐

热门专题