JS版贪吃蛇（菜鸟级别）--大神勿进！

最新推荐文章于 2024-08-08 13:37:43 发布

莫北_1

最新推荐文章于 2024-08-08 13:37:43 发布

阅读量1.2k

点赞数

分类专栏： JavaScript 文章标签： JS小游戏 JavaScript 贪吃蛇

本文链接：https://blog.csdn.net/chenxl5/article/details/8980005

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Snake.aspx.cs" Inherits="Snake" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
table
{
height: 402px;
width: 402px;
border: 1px solid red;
}
td
{
border-style: none;
}
tr
{
border-style: none;
}
</style>
<script type="text/javascript">
var sceneSize = 40; //场景大小
var snake; //贪吃蛇实例
var curDirection = 1; //默认方向
var timeSpeed = 400; //速度
var curPoint;//当前苹果的坐标
var processId;//执行进程ID
var countValue = 0;//总分
Array.prototype.every = function (f) { //ECMAScript5才支持every方法，之前的版本必须手动实现数组的every方法
var returnValue = true;
for (var i = 0; i < this.length; i++) {
returnValue = f(this[i]);
if (!returnValue) return false;
}
return returnValue;
}
function Snake(startPoint, endPoint) {/*初始化贪吃蛇*/
this.StartPoint = startPoint;//起始坐标
this.EndPoint = endPoint;//终止坐标
this.PointArray = function () {
var newPointArray = new Array();
var count = 0;
for (var i = startPoint.x; i <= endPoint.x; i++) {
newPointArray[count++] = new Point(i, startPoint.y);
var id = "td_" + i + "_" + startPoint.y;
var td = document.getElementById(id);
SetCellBackGroud(i, startPoint.y, "red");
}
return newPointArray;
} ()
}
Snake.prototype = {
Move: function (direction) {//移动实做 direction:1向上 2向下 3向左 4向右
var x;
var y;
var startPoint = this.PointArray[0];
switch (direction) {
case 1:
{
x = startPoint.x;
y = startPoint.y - 1;
}
break;
case 2:
{
x = startPoint.x;
y = startPoint.y + 1;
}
break;
case 3:
{
x = startPoint.x - 1;
y = startPoint.y;
}
break;
case 4:
{
x = startPoint.x + 1;
y = startPoint.y;
}
break;
}
var newPointArray = this.PointArray;
var point = new Point(x, y);
//往头插入一个节点
if (point.x == sceneSize || point.y == sceneSize || point.x < 0 || point.y < 0 || !newPointArray.every(function (p) {
return p.x != point.x || p.y != point.y;
})) {
alert("游戏失败!!!!请重新开始!!!");
clearInterval(processId);
return;
}
newPointArray.unshift(point);
SetCellBackGroud(point.x, point.y, "red");
if (point.Equal(curPoint)) {//吃苹果
ShowRandomPoint();
countValue = countValue + 10;
document.getElementById("counter").innerHTML = countValue;
}
else {
//删除尾部的节点
popPoint = newPointArray.pop();
SetCellBackGroud(popPoint.x, popPoint.y, "");
}
timeSpeed = timeSpeed - (newPointArray.length - 4) * 10;
//this.PointArray.Move(new Point(x, y));
}
}
function SetCellBackGroud(x, y, colorValue) {
var id = "td_" + x + "_" + y;
var td = document.getElementById(id);
td.style.backgroundColor = colorValue;
}

function Point(x, y) {
this.x = x;
this.y = y;
}
Point.prototype.Equal = function (point) {
if (point.x == this.x && point.y == this.y) return true;
return false;
}
function InitSnake(length) {
var Max = Math.round(Math.random() * 100 % (sceneSize / 2 - 1 - length) * 2) + length; ;
var y = Math.round(Math.random() * 100 % (sceneSize / 2 - 1) * 2);
snake = new Snake(new Point(Max - length, y), new Point(Max, y));
}

function ShowRandomPoint() { /*随机出现一个苹果(坐标不包含在SnakeArray中)*/
var pointArray = snake.PointArray;
var x = Math.round(Math.random() * 100 % (sceneSize - 1));
var y = Math.round(Math.random() * 100 % (sceneSize - 1));
if (pointArray.every(function (p) {
return p.x != x || p.y != y;
})) {
curPoint = new Point(x, y);
SetCellBackGroud(x, y, "blue");
}
else {
ShowRandomPoint();
}

}

function DoCrateGrid() { /*创建场景*/
var innerHtml = "<div style='width:402px;height402px'>" + function () {
var table = "<table cellspacing='0px'>" + function () {
var trHtml = "";
for (var j = 0; j < sceneSize; j++) {
var tr = "<tr>" + function () {
var tdHtml = "";
for (var i = 0; i < sceneSize; i++) {
tdHtml += "<td id='td_" + i + "_" + j + "' ></td>";
}
return tdHtml;
} () + "</tr>";
trHtml += tr;
}
return trHtml;
} ()
+ "</table>";
return table;
} () + "<div id='starDiv' style='width:120px; height:20px; background-color:green;position:relative; left:100px;top:-190px' ><span>请按任意键开始!</span></div></div><div style='clear:both'></div>" + "<div style='width:800px; height:50px; float:left '><span>总分:</span><span style='margin-left:50px' id='counter'>0</span></div>";
this.form1.innerHTML = innerHtml;
InitSnake(3);
ShowRandomPoint();
}

function DoKeyPress() {
var code = window.event.keyCode; //direction:1向上 2向下 3向左 4向右
//向左
if (code == 37) {
if (curDirection != 4)
curDirection = 3;

} //向上
else if (code == 38) {
if (curDirection != 2)
curDirection = 1;

}
else if (code == 39) {
if (curDirection != 3)
curDirection = 4;

}
else if (code == 40) {
if (curDirection != 1)
curDirection = 2;
}
if (!processId||processId.toString() == "undefined") {
processId = setInterval(DoMove, timeSpeed);
document.getElementById("starDiv").style.display = "none";
}
}

function DoMove() {
snake.Move(curDirection);
}
</script>
</head>
<body οnlοad="javascript:DoCrateGrid()" οnkeydοwn="javascript:DoKeyPress()">
<form id="form1" runat="server" οnkeypress="">
<div>
</div>
</form>
</body>

</html>

/*简单实现JS版贪吃蛇,这两天刚学习JS 拿来练练手，本人是菜鸟..大神勿扰哈.*/