<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>贪吃蛇</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
body {
width: 900px;
height: 600px;
}
#screen {
width: 600px;
height: 500px;
background: black;
position: absolute;
left: 300px;
top: 100px;
}
#box {
width: 500px;
height: 400px;
position: absolute;
left: 50px;
top: 30px;
background: grey;
}
#button {
width: 400px;
height: 40px;
background: green;
position: absolute;
left: 100px;
top: 450px;
text-align: center;
line-height: 40px;
}
#d1 {
width: 8px;
height: 8px;
position: absolute;
left: 200px;
top: 200px;
background: black;
border: 1px black solid;
z-index: 1000;
}
#d2 {
width: 8px;
height: 8px;
position: absolute;
left: 200px;
top: 210px;
background: blue;
border: 1px black solid;
}
#d3 {
width: 8px;
height: 8px;
position: absolute;
left: 200px;
top: 220px;
background: green;
border: 1px black solid;
}
#d4 {
width: 8px;
height: 8px;
position: absolute;
left: 200px;
top: 230px;
background: red;
border: 1px black solid;
}
#d5 {
width: 8px;
height: 8px;
position: absolute;
left: 200px;
top: 240px;
background: red;
border: 1px black solid;
}
#d6 {
width: 8px;
height: 8px;
position: absolute;
left: 200px;
top: 250px;
background: red;
border: 1px black solid;
}
</style>
<script type="text/javascript">
var timer = null;
var dir = '';
var name = null;
var oDiv = null;
var boxDiv = null;
var sDiv = null;
var aDiv = null;
var speed = 10;
var time = 500;
window.onload = function() {
boxDiv = document.getElementById('box');
sDiv = document.getElementById('screen');
aDiv = boxDiv.getElementsByTagName('div');
newEgg();
}
document.onkeydown = function(ev) {
var oEvent = ev || event;
clearInterval(timer);
if (oEvent.keyCode == 37) {
name = 'left';
dir = 'west';
} else if (oEvent.keyCode == 39) {
name = 'left';
dir = 'east';
} else if (oEvent.keyCode == 38) {
name = 'top';
dir = 'north';
} else if (oEvent.keyCode == 40) {
name = 'top';
dir = 'south';
}
move();
timer = setInterval(move, 500);
};
function move() {
for (var i = aDiv.length - 1; i > 0; i--) {
aDiv[i].style.left = aDiv[i - 1].offsetLeft + 'px';
aDiv[i].style.top = aDiv[i - 1].offsetTop + 'px';
}
if (name == 'left') {
if (dir == 'west') {
aDiv[0].style[name] = aDiv[0].offsetLeft - speed + 'px';
} else if (dir == 'east') {
aDiv[0].style[name] = aDiv[0].offsetLeft + speed + 'px';
}
} else if (name == 'top') {
if (dir == 'north') {
aDiv[0].style[name] = aDiv[0].offsetTop - speed + 'px';
} else if (dir == 'south') {
aDiv[0].style[name] = aDiv[0].offsetTop + speed + 'px';
}
}
ifTouch();
if ((aDiv[0].offsetLeft == oDiv.offsetLeft - 50) && (aDiv[0].offsetTop == oDiv.offsetTop - 30)) {
boxDiv.appendChild(oDiv);
oDiv.style.top = aDiv[aDiv.length - 2].offsetTop + 'px';
oDiv.style.left = aDiv[aDiv.length - 2].offsetLeft + 'px';
newEgg();
}
}
function newEgg() {
oDiv = null;
oDiv = document.createElement('div');
oDiv.style.display = 'none';
oDiv.style.position = 'absolute';
oDiv.style.background = 'red';
oDiv.style.width = '8px';
oDiv.style.height = '8px';
oDiv.style.borderWidth = '1px';
oDiv.style.borderColor = 'black';
oDiv.style.borderStyle = 'solid';
oDiv.style.zIndex = '100';
sDiv.appendChild(oDiv);
oDiv.style.display = 'block';
while (true) {
var l = parseInt(Math.random() * 49) * 10 + 50;
var t = parseInt(Math.random() * 39) * 10 + 40;
for (var i = 0; i < aDiv.length; i++) {
if ((l == aDiv[i].offsetLeft + 50) && (t == aDiv[i].offsetTop + 30)) {
continue;
}
break;
}
break;
}
oDiv.style.left = l + 'px';
oDiv.style.top = t + 'px';
}
function gameover() {
clearInterval(timer);
aDiv = null;
name = '';
dir = '';
alert('GAME OVER');
}
function ifTouch() {
if (aDiv[0].offsetLeft < 0) {
aDiv[0].style.left = 0 + 'px';
gameover();
} else if (aDiv[0].offsetLeft > boxDiv.offsetWidth - aDiv[0].offsetWidth) {
aDiv[0].style.left = boxDiv.offsetWidth - aDiv[0].offsetWidth + 'px';
gameover();
}
if (aDiv[0].offsetTop < 0) {
aDiv[0].style.top = 0 + 'px';
gameover();
} else if (aDiv[0].offsetTop > boxDiv.offsetHeight - aDiv[0].offsetHeight) {
aDiv[0].style.top = boxDiv.offsetHeight - aDiv[0].offsetHeight + 'px';
gameover();
}
for (var i = aDiv.length - 1; i > 0; i--) {
if ((aDiv[0].offsetLeft == aDiv[i].offsetLeft) &&
(aDiv[0].offsetTop == aDiv[i].offsetTop)) {
gameover();
}
}
}
</script>
</head>
<body>
<div id="screen">
<div id="box">
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
<div id="d5"></div>
<div id="d6"></div>
</div>
<div id='button'>
点击屏幕后按方向键开始游戏。
<!--
<input id="go" type="button" value="开始">
<input id="pause" type="button" value="暂停">
<input id="end" type="button" value="结束"> -->
</div>
</div>
</body>
</html>
js实例---贪吃蛇
猜你喜欢
转载自blog.csdn.net/h1234561234561/article/details/87990869
今日推荐
周排行