html部分
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link type="text/css" href="../css/mypanel.css" rel="stylesheet">
</head>
<body>
<div id="gamePanel">
<table id="gameTable">
</table>
</div>
<div id="center">
<div class="score">
分数:<span id="code">0</span>
</div>
<div class="tool">
<span style="margin: 0px auto;">道具:</span>
<table>
<tr>
<td><button>道具1</button></td>
<td><button>道具1</button></td>
</tr>
<tr>
<td><button>道具1</button></td>
<td><button>道具1</button></td>
</tr>
</table>
</div>
<div class="move">
<table>
<tr>
<td></td>
<td><button οnclick="changeDirect('up')" >上</button></td>
<td></td>
</tr>
<tr>
<td><button οnclick="changeDirect('left')" >左</button></td>
<td></td>
<td><button οnclick="changeDirect('right')" >右</button></td>
</tr>
<tr>
<td></td>
<td><button οnclick="changeDirect('down')" >下</button></td>
<td></td>
</tr>
</table>
</div>
</div>
<div id="foot">
<div class="initGame">
<table>
<tr>
<td>行</td>
<td><input type="text" name="row" id="rowNum" value="请输入行数" οnclick="clean(this)" /></td>
</tr>
<tr>
<td>列</td>
<td><input type="text" name="col" id="colNum" value="请输入列数" οnclick="clean(this)" /></td>
</tr>
<tr>
<td colspan="2"><button οnclick="start()" >确定</button></td>
</tr>
</table>
</div>
</div>
<script type="text/javascript" src="../js/mypanel.js" ></script>
</body>
</html>
css部分
#gamePanel{
float:left;
width:600px;
height:600px;
border:1px solid red;
background-color: gray;
}
#gamePanel table{
padding:0px;
margin:50px auto;
height:500px;
width:500px;
border:1px solid green;
background-color: black;
}
#gamePanel table td{
margin:0px;
padding:0px;
border:1px solid black;
}
#center{
float:left;
width:200px;
height:600px;
border:1px solid green;
}
#center .score{
width:200px;
text-align:center;
margin:20px auto;
}
#center .tool{
width:200px;
height:100px;
margin-top:50px;
text-align: center;
}
#center .tool table{
margin:10px auto;
width:150px;
height:50px;
}
#center .move{
width:200px;
height:100px;
}
#center .move table{
width:200px;
margin:0px auto;
margin-top:20px;
}
#center .move button{
width:50px;
height:30px;
}
#foot{
float:left;
width:200px;
height:600px;
border:1px solid blue;
}
#foot .initGame table{
text-align:center;
width:200px;
height:100px;
margin:50px auto;
}
#foot #rowNum,#foot #colNum{
width:130px;
}
js部分
var row; //行
var col; //列
var arr = new Array();
var head = new Array(); //蛇头
var body = new Array(); //身子
var foot = new Array(); //尾巴
var snakeArr = new Array();
var food = new Array(); //储存食物坐标
var code = 0; //分数
var flag = 0;
var direct = "right";
var plus=new Array();//要增加的
var bound=new Array();//障碍物
//清空输入框文字
function clean(z) {
z.value = "";
}
//初始化
function initGame() {
flag = 1;
document.getElementById("gameTable").innerHTML = "";
row = document.getElementById("rowNum").value;
col = document.getElementById("colNum").value;
for (var m = 0; m < row; m++) {
arr[m] = new Array();
var h = document.createElement("tr");
for (var n = 0; n < col; n++) {
var l = document.createElement("td");
h.appendChild(l);
arr[m][n] = l;
}
document.getElementById("gameTable").appendChild(h);
}
snakeArr[0] = [ row / 2, col / 2 ];
snakeArr[1] = [ row / 2, col / 2 - 1 ];
snakeArr[2] = [ row / 2, col / 2 - 2 ];
makeSnake();
createFood();
makeBound();
}
//生成食物
function createFood() {
for (var k = 0; k < 3; k++) {
food[k] = new Array();
var foodRow = Math.floor(Math.random() * (parseInt(row) ));
var foodCol = Math.floor(Math.random() * (parseInt(col)));
while(check(foodRow,foodCol)){
foodRow = Math.floor(Math.random() * (parseInt(row) ));
foodCol = Math.floor(Math.random() * (parseInt(col)));
}
food[k][0] = foodRow;
food[k][1] = foodCol;
arr[foodRow][foodCol].style.backgroundColor = "yellow";
}
}
//检查食物,障碍物是否在蛇身上
function check(x,y){
for (var i = 0; i < snakeArr.length; i++) {
for (var j = 0; j < 2; j++) {
var snakeX = snakeArr[i][0];
var snakeY = snakeArr[i][1];
if(x==snakeX&&y==snakeY){
return true;
}
}
}
return false;
}
//画蛇
function makeSnake() {
for (var i = 0; i < snakeArr.length; i++) {
for (var j = 0; j < 2; j++) {
var snakeX = snakeArr[i][0];
var snakeY = snakeArr[i][1];
arr[snakeX][snakeY].style.backgroundColor = "green";
}
}
arr[snakeArr[0][0]][snakeArr[0][1]].style.backgroundColor = "pink";
arr[snakeArr[snakeArr.length-1][0]][snakeArr[snakeArr.length-1][1]].style.backgroundColor = "pink";
}
//将蛇清除
function cleanSnake() {
for (var i = 0; i < snakeArr.length; i++) {
for (var j = 0; j < 2; j++) {
var snakeX = snakeArr[i][0];
var snakeY = snakeArr[i][1];
arr[snakeX][snakeY].style.backgroundColor = "black";
}
}
}
//记录分数
function countScore(v, n) {
for (var t = 0; t < food.length; t++) {
if (food[t][0] == v && food[t][1] == n) {
console.log(snakeArr);
snakeArr[snakeArr.length]=[plus[0],plus[1]];
code++;
makeSnake();
document.getElementById("code").innerHTML = code;
if (code % 3 == 0 && code >= 3) {
createFood();
}
}
}
}
//死于障碍物
function die1(){
for (var t = 0; t < bound.length; t++) {
if (bound[t][0] == snakeArr[0][0] && bound[t][1] == snakeArr[0][1]) {
window.clearInterval(window.t);
alert("die***");
}
}
}
//死于自己吃自己
function die2(){
for (var i = 1; i < snakeArr.length; i++) {
if(snakeArr[0][0]==snakeArr[i][0]&&snakeArr[0][1]==snakeArr[i][1]){
window.clearInterval(window.t);
alert("die...");
}
}
}
//制造障碍物
function makeBound(){
for (var k = 0; k < 5; k++) {
var boundRow = Math.floor(Math.random() * (parseInt(row) ));
var boundCol = Math.floor(Math.random() * (parseInt(col)));
while(check(boundRow,boundCol)){
boundRow = Math.floor(Math.random() * (parseInt(row) ));
boundCol = Math.floor(Math.random() * (parseInt(col)));
}
bound[k]=[boundRow,boundCol];
arr[boundRow][boundCol].style.backgroundColor = "red";
}
}
//判断是否撞边
function outIndex() {
if (snakeArr[0][0] > row - 1) {
snakeArr[0][0] = row - 1;
alert("GAME OVER");
clearInterval(t);
}
if (snakeArr[0][1] > col - 1) {
snakeArr[0][1] = col - 1;
alert("GAME OVER");
clearInterval(t);
}
if (snakeArr[0][0] < 0) {
snakeArr[0][0] = 0;
alert("GAME OVER");
clearInterval(t);
}
if (snakeArr[0][1] < 0) {
snakeArr[0][1] = 0;
alert("GAME OVER");
clearInterval(t);
}
}
//蛇移动
function move() {
x = direct;
if (x == "up") {
cleanSnake();
if (snakeArr[0][0] <= snakeArr[1][0]) {
plus[0]=snakeArr[snakeArr.length - 1][0];
plus[1]=snakeArr[snakeArr.length - 1][1];
for (var i = snakeArr.length - 1; i > 0; i--) {
snakeArr[i][0] = snakeArr[i - 1][0];
snakeArr[i][1] = snakeArr[i - 1][1];
}
snakeArr[0][0] = snakeArr[0][0] - 1;
outIndex();
die1();
die2();
}
makeSnake();
countScore(snakeArr[0][0], snakeArr[0][1]);
} else if (x == "down") {
cleanSnake();
if (snakeArr[0][0] >= snakeArr[1][0]) {
plus[0]=snakeArr[snakeArr.length - 1][0];
plus[1]=snakeArr[snakeArr.length - 1][1];
for (var i = snakeArr.length - 1; i > 0; i--) {
snakeArr[i][0] = snakeArr[i - 1][0];
snakeArr[i][1] = snakeArr[i - 1][1];
}
snakeArr[0][0] = snakeArr[0][0] + 1;
outIndex();
die1();
die2();
}
makeSnake();
countScore(snakeArr[0][0], snakeArr[0][1]);
} else if (x == "right") {
cleanSnake();
if (snakeArr[0][1] >= snakeArr[1][1]) {
plus[0]=snakeArr[snakeArr.length - 1][0];
plus[1]=snakeArr[snakeArr.length - 1][1];
for (var i = snakeArr.length - 1; i > 0; i--) {
snakeArr[i][0] = snakeArr[i - 1][0];
snakeArr[i][1] = snakeArr[i - 1][1];
}
snakeArr[0][1] = snakeArr[0][1] + 1;
outIndex();
die1();
die2();
}
makeSnake();
countScore(snakeArr[0][0], snakeArr[0][1]);
} else if (x == "left") {
cleanSnake();
if (snakeArr[0][1] <= snakeArr[1][1]) {
plus[0]=snakeArr[snakeArr.length - 1][0];
plus[1]=snakeArr[snakeArr.length - 1][1];
for (var i = snakeArr.length - 1; i > 0; i--) {
snakeArr[i][0] = snakeArr[i - 1][0];
snakeArr[i][1] = snakeArr[i - 1][1];
}
snakeArr[0][1] = snakeArr[0][1] - 1;
outIndex();
die1();
die2();
}
makeSnake();
countScore(snakeArr[0][0], snakeArr[0][1]);
}
}
function startGame() {
move();
}
function changeDirect(x) {
direct = x;
}
function start() {
initGame();
window.t= window.setInterval("startGame()", 500);
}