<!DOCTYPE html>
<!--
begin : 20130506
author : Spider (利用js做数组练习)
end : 20130508
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS练习贪吃蛇游戏</title>
<style type="text/css">
*
{
margin: 0px;
padding: 0px;
}
#box
{
width: 360px;
height: 360px;
border: 1px solid #000;
background-image:url("bg.jpg");
}
.di
{
width: 10px;
height: 10px;
border: 1px solid rgba(255, 255, 255, 0.00);
float: left;
}
.she
{
width: 10px;
height: 10px;
border: 1px solid #60ff00;
float: left;
border-radius: 25px;
}
.chi
{
width: 10px;
height: 10px;
border: 1px solid #ff0000;
float: left;
}
.qiang
{
width: 10px;
height: 10px;
border: 1px solid #0026ff;
float: left;
}
.one
{
width: 10px;
height: 10px;
border: 1px solid #60ff00;
border-radius: 25px;
background-color:#60ff00;
float: left;
}
.btn
{
display:none;
}
</style>
<script type="text/javascript">
//快捷获取DOM
function A(id) {
if (typeof id == "string") {
return document.getElementById(id);
}
else if (typeof id == "object") {
return id;
}
}
//快捷获取DOM id名
function sA(id) {
if (typeof id == "string") {
return id;
}
else if (typeof id == "object") {
return id.id;
}
}
//-----------------------
//变向
function x(num) {
if ((fx == 0 || fx == 1) && (num == 2 || num == 3)) {
fx = num;
}
if ((fx == 2 || fx == 3) && (num == 0 || num == 1)) {
fx = num;
}
if (fx == num) {
lstop();
dong()
lstart(300);
}
}
//下一步
function getx() {
switch (fx) {
case 0:
return sarr[0] - 30;
case 1:
return sarr[0] + 30;
case 2:
return sarr[0] - 1;
case 3:
return sarr[0] + 1;
}
}
//幢墙判断
function zhuangq(xy) {
switch (fx) {
case 0:
return xy < 0;
case 1:
return xy > 899;
case 2:
return (sarr[0] + 1) % 30 == 1;
case 3:
return (sarr[0] + 1) % 30 == 0;
}
}
//幢自己判断
function zhuangz(xy, ar) {
for (var i = ar.length - 1 ; i >= 0; i--) {
if (xy == ar[i]) {
return true;
}
}
return false;
}
//移动
function dong() {
var xy = parseInt(getx());
if (zhuangz(xy, sarr)) {
alert("幢自己");
load();
}
else if (zhuangq(xy) || zhuangz(xy, qarr)) {
alert("幢墙");
load();
}
else {
sarr.unshift(xy);
if (chi(xy)) {
suiji();
}
else {
var zh = sarr.pop();
barr[zh].className = "di";
}
setshe();
}
}
//吃
function chi(xy) {
for (var i = 0 ; i < carr.length; i++) {
if (xy == carr[i]) {
carr.splice(i, 1);
return true;
}
}
return false;
}
//随机吃
function suiji() {
var j=carr.length;
for (var i = 0 ; i < 3 - j; i++) {
var m = sjshu();
carr.push(m);
}
}
//随机数
function sjshu() {
while (true) {
var m = parseInt(Math.random() * 1000);
if (m >= 0 && m < 900) {
if (!zhuangz(m, sarr) && !zhuangz(m, carr) && !zhuangz(m, qarr)) {
return m;
}
}
}
}
//画蛇
function setshe() {
barr[sarr[0]].className = "one";
for (var i = 1 ; i < sarr.length; i++) {
barr[sarr[i]].className = "she";
}
for (var i = 0 ; i < carr.length; i++) {
barr[carr[i]].className = "chi";
}
for (var i = 0 ; i < qarr.length; i++) {
barr[qarr[i]].className = "qiang";
}
}
//键盘上下左右
function keysxzy(e) {
var i = 0;
switch (e.key) {
case "Up":
i = 0;
break;
case "Down":
i = 1;
break;
case "Left":
i = 2;
break;
case "Right":
i = 3;
break;
}
x(i);
}
//开始
function lstart(t) {
tout = setInterval(dong, t);
}
//停止
function lstop() {
clearInterval(tout);
}
//初始化
function load() {
if (tout != undefined) {
lstop();
}
document.onkeyup = keysxzy;
fx = 3;
box = A("box");
box.innerHTML = "";
for (var i = 0 ; i < 900; i++) {
var d = document.createElement('div');
d.className = "di";
d.id = "div" + i;
box.appendChild(d);
}
sarr = [305, 304, 303, 302, 301, 300];
qarr = [607, 606, 605, 604, 603, 602, 289, 259, 229, 199, 169, 139];
carr = [];
barr = box.all;
suiji()
setshe();
}
var tout;
</script>
</head>
<body onload="load()">
<div align="center">
<br />
<div id="box">
</div>
<input id="Button1" type="button" value="动" onclick="lstart(300);" />
<input id="Button6" type="button" value="停" onclick="lstop();" />
操作: 按键盘上下左右移动
<br />
<input id="Button2" class="btn" type="button" value="上" onclick="x(0);" />
<br />
<input id="Button3" class="btn" type="button" value="左" onclick="x(2);" />
<input id="Button4" class="btn" type="button" value="右" onclick="x(3);" />
<br />
<input id="Button5" class="btn" type="button" value="下" onclick="x(1);" />
<br />
<a href="../game2/xqi.html">ie10象棋</a>
<br />
<br />
<a href="../game2/xqi2.html">ie9象棋</a>
<br />
<br />
<a href="../Default.html">返回</a>
<br />
<br />
</div>
</body>
</html>
View Code
