<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>贪吃蛇</title>
<style>
#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(img/snack/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(img/snack/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);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
-moz-transform: rotate(90deg);
}
#h-up,
#t-up {
transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
}
#h-left,
#t-left {
transform: rotate(180deg);
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-o-transform: rotate(180deg);
-moz-transform: rotate(180deg);
}
</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">开始</button>
<button id="purse">暂停</button>
</div>
</div>
<div id="intro">
<h4>游戏说明：</h4>
<p>上下左右键控制蛇的转向，当吃的食物达到一定数量计数值加倍，当吃到类蛇身的食物时蛇身剪短但计数仍增加</p>
</div>
</div>
<script>
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(img/snack/head.png)";
} else if(i == 2) {
oDiv.style.background = "url(img/snack/body.png)";
} else {
oDiv.style.background = "url(img/snack/tail.png)"
}
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(img/snack/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) {
if(tailLeft == headLeft || moveDir == "right" || moveDir == "left") {
if(tailTop > headTop) {
tailTop -= 20;
} else if(tailTop < headTop) {
tailTop += 20;
}
} else if(tailTop == headTop || moveDir == "up" || moveDir == "down") {
if(tailLeft > headLeft) {
tailLeft -= 20;
} else if(tailLeft > headLeft) {
tailLeft += 20;
}
}
return {
tailTop: tailTop,
tailLeft: tailLeft
};
}
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;
}
var snackHead = aSnaker[0];
var headLeft = parseInt(snackHead.style.left);
var headTop = parseInt(snackHead.style.top);
switch(moveDir) {
case "left":
headLeft -= 20;
break;
case "right":
headLeft += 20;
break;
case "up":
headTop -= 20;
break;
case "down":
headTop += 20;
break;
}
snackHead.style.left = headLeft + 'px';
snackHead.style.top = headTop + 'px';
aSnaker[0].id = "h-" + moveDir;
for(var i = 1; i < aSnaker.length; i++) {
if(snackHead.style.left == aSnaker[i].style.left && snackHead.style.top == aSnaker[i].style.top) {
reStart();
}
}
if(snackHead.style.left < "0px" || snackHead.style.top < "0px" || snackHead.style.top == "500px" || snackHead.style.left == "1000px") {
reStart();
}
var snackTail = aSnaker[aSnaker.length - 1];
if(snackTail.style.top < aSnaker[aSnaker.length - 2].style.top) {
snackTail.id = "t-down";
} else if(snackTail.style.top > aSnaker[aSnaker.length - 2].style.top) {
snackTail.id = "t-up";
}
if(snackTail.style.left > aSnaker[aSnaker.length - 2].style.left) {
snackTail.id = "t-left";
} else if(snackTail.style.left < aSnaker[aSnaker.length - 2].style.left) {
snackTail.id = "";
}
var tailLeft = parseInt(snackTail.style.left);
var tailTop = parseInt(snackTail.style.top);
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(snackHead.style.left == oSubDiv.style.left && snackHead.style.top == oSubDiv.style.top) {
console.log(aSnaker.length);
snackTail.style.left = aSnaker[aSnaker.length - 2].style.left;
snackTail.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);
}
if(snackHead.style.left == oFood.style.left && snackHead.style.top == oFood.style.top) {
tailLeft = snackTail.style.left;
tailTop = snackTail.style.top;
oFood.style.background = "url(img/snack/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;
tailTop = 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;
snackTail.style.left = tailLeft + 'px';
snackTail.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);
}
};
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();
}, perTime);
}
var oSpeed = document.getElementById('speed');
var aLi = oSpeed.getElementsByTagName('li');
for(var i = 0; i < aLi.length; i++) {
(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("此次游戏失败，要重新开始吗？");
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>
04-17
9万+
9万+
03-31
2万+
2万+
03-11
991
991
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
