兼容IE10 FIREFOX CHROME 效果见下图
tcs.html
<html>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<head>
<title>贪吃蛇</title>
<style>
.desktop{
background-color:gray;
border:1px solid green;
width:500px;
height:500px;
}
.textbox{
width:500px;
height:500px;
top:8px;
left:550px;
position:absolute;
}
.msgbox{
top:258px;
left:200px;
color:red;
text-align:center;height:10px;line-height:10px;
position:absolute;
}
.bd{
width:10px;
height:10px;
text-align:center;height:10px;line-height:10px;
border:1px solid gray;
position:absolute;
}
.snake{
background-color:yellow;
}
.food{
background-color:red;
}
.gz{
background-color:green;
}
</style>
<script src="tcs.js"></script>
</head>
<body>
<div id="desktop" class="desktop"></div>
<div id="textbox" class="textbox">
得分：<input id="score" type="text" value="0" readonly="true"></input>
<BR/>坐标：<textarea id="vertex" cols="70" rows="5"></textarea>
</div>
<div id="msg" class="msgbox"></div>
<br/>
<input id="showGz" type="checkbox"/><label for="showGz">显示格子</label>
<input id="startbtn" type="button" value="start"/>
</body>
</html>
tcs.js
//全局参数
var snakeTrain = [],//蛇身
allFood=[],//食物仓库
block,//自动行走定时器
direction=39,//默认方向
desktop ={top:0,left:0},//桌布
foodBox = {x:0,y:0},//食物BOX
nextRandFoodIndex=0,//下一个食物随机点索引
score=0,//得分
gameStatus = 0;//游戏状态 0未启动 1运行中 -1游戏结束
//初始化方法
window.onload = function(e){
desktop.top = getTop($("desktop"));
desktop.left = getLeft($("desktop"));
initallFood();
initKeyDownListener();
$("startbtn").onclick = function(){
gameStatus = 1;
if ($("showGz").checked){
initGz();
}
initSnake();
initFood();
block = window.setInterval("startTrain()",500);
};
}
//根据id获得dom对象
function $(id){
return document.getElementById(id);
}
//随机产生一个界于min和max之间的整数
function getRandomNum(Min,Max)
{
var Range = Max - Min;
var Rand = Math.random();
return(Min + Math.round(Rand * Range));
}
//获得dom对象的top
function getTop(e){
var offset=e.offsetTop;
if(e.offsetParent!=null) offset+=getTop(e.offsetParent);
return offset;
}
//获得dom对象的left
function getLeft(e){
var offset=e.offsetLeft;
if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);
return offset;
}
//初始化食物池
function initallFood(){
for(var i=0;i<50;i++){
for(var j=0;j<50;j++){
allFood.push({x:i*10,y:j*10});
}
}
var len = allFood.length;
for(var i=0;i<len*2;i++){
var n1 = getRandomNum(0,len-1);
var n2 = getRandomNum(0,len-1);
var tmp = allFood[n1];
allFood[n1] = allFood[n2];
allFood[n2] = tmp;
}
}
//初始化食物
function initFood(addScore){
var len = allFood.length;
if (nextRandFoodIndex == len-1){
nextRandFoodIndex = 0;
}
for(var i=nextRandFoodIndex++;i<len;i++){
if (!inSnakeTrain(allFood[i].x, allFood[i].y)){
createBox(allFood[i].x, allFood[i].y, "food");
foodBox = {x:allFood[i].x , y:allFood[i].y};
break;
}
}
if (addScore){
score += 10;
$("score").value = score;
}
}
//初始化格子
function initGz(){
for(var i=0;i<50;i++){
for(var j=0;j<50;j++){
createBox(10*i,10*j,"gz");
}
}
}
//初始化蛇
function initSnake(){
var n = 3;
for(var i=0;i<n;i++){
createBox(10*i,0,"snake");
snakeTrain.push({x:10*i,y:0});
}
drawHead();
}
//初始化键盘监听事件
function initKeyDownListener(){
document.onkeydown = function(e){
if (gameStatus != 1){
return -1;
}
var code = e.keyCode;
if (code<37 || code>40){
return -1;
}
startTrain(code);
}
}
//上下左右手动行走
function leftGo(){
if (direction == 39){//朝右走，不能左转
return -1;
}
if (outside("x-")){
gameOver("撞墙啦！Game Over");
return -1;
}
if (eatSelf("x-")){
gameOver("咬到自己啦！Game Over");
return -1;
}
var len = snakeTrain.length;
var snake = snakeTrain[len-1];
if (foodBox.x == snake.x-10 && foodBox.y == snake.y){//eatting
removeBox(foodBox.x,foodBox.y,"food");
createBox(foodBox.x,foodBox.y,"snake");
snakeTrain.push({x:foodBox.x , y:foodBox.y});
initFood(true);
}else{
trainGo();
snake.x -= 10;
drawSnakeTrain();
}
}
function upGo(){
if (direction == 40){//朝下走，不能北上
return -1;
}
if (outside("y-")){
gameOver("撞墙啦！Game Over");
return -1;
}
if (eatSelf("y-")){
gameOver("咬到自己啦！Game Over");
return -1;
}
var len = snakeTrain.length;
var snake = snakeTrain[len-1];
if (foodBox.x == snake.x && foodBox.y == snake.y-10){//eatting
removeBox(foodBox.x,foodBox.y,"food");
createBox(foodBox.x,foodBox.y,"snake");
snakeTrain.push({x:foodBox.x , y:foodBox.y});
initFood(true);
}else{
trainGo();
snake.y -= 10;
drawSnakeTrain();
}
}
function rightGo(){
if (direction == 37){//朝左走，不能右转
return -1;
}
if (outside("x+")){
gameOver("撞墙啦！Game Over");
return -1;
}
if (eatSelf("x+")){
gameOver("咬到自己啦！Game Over");
return -1;
}
var len = snakeTrain.length;
var snake = snakeTrain[len-1];
if (foodBox.x == snake.x+10 && foodBox.y == snake.y){//eatting
removeBox(foodBox.x,foodBox.y,"food");
createBox(foodBox.x,foodBox.y,"snake");
snakeTrain.push({x:foodBox.x , y:foodBox.y});
initFood(true);
}else{
trainGo();
snake.x += 10;
drawSnakeTrain();
}
}
function downGo(){
if (direction == 38){//朝上走，不能南下
return -1;
}
if (outside("y+")){
gameOver("撞墙啦！Game Over");
return -1;
}
if (eatSelf("y+")){
gameOver("咬到自己啦！Game Over");
return -1;
}
var len = snakeTrain.length;
var snake = snakeTrain[len-1];
if (foodBox.x == snake.x && foodBox.y == snake.y+10){//eatting
removeBox(foodBox.x,foodBox.y,"food");
createBox(foodBox.x,foodBox.y,"snake");
snakeTrain.push({x:foodBox.x , y:foodBox.y});
initFood(true);
}else{
trainGo();
snake.y += 10;
drawSnakeTrain();
}
}
//蛇身跟上蛇头
function trainGo(){
var len = snakeTrain.length;
var i = len-1;
var tmp = snakeTrain[i];
while(i>=1){
removeBox(tmp.x,tmp.y,"snake");
var tmp2 = {'x':snakeTrain[i-1].x , 'y':snakeTrain[i-1].y};
snakeTrain[i-1].x = tmp.x;
snakeTrain[i-1].y = tmp.y;
tmp = tmp2;
i--;
}
removeBox(tmp.x,tmp.y,"snake");
}
//画蛇
function drawSnakeTrain(){
var len = snakeTrain.length;
var str = "";
for(var i=0;i<len;i++){
var snake = snakeTrain[i];
createBox(snake.x,snake.y,"snake");
str += " {x:"+snake.x+",y:"+snake.y+"}";
}
$("vertex").value = str;
}
//装饰蛇头
function drawHead(){
var snake = snakeTrain[snakeTrain.length-1];
var snake2 = snakeTrain[snakeTrain.length-2];
$("snake_"+snake.x+"_"+snake.y).style.backgroundColor = "orange";
$("snake_"+snake2.x+"_"+snake2.y).style.backgroundColor = "yellow";
}
//是否出界
function outside(act){
var snake = snakeTrain[snakeTrain.length-1];
switch(act){
case "x+":
return snake.x + 10 > 490;
case "x-":
return snake.x - 10 < 0;
case "y+":
return snake.y + 10 > 490;
case "y-":
return snake.y - 10 < 0;
}
}
//是否咬到自己
function eatSelf(act){
var snake = snakeTrain[snakeTrain.length-1];
switch(act){
case "x+":
return inSnakeTrain(snake.x + 10 , snake.y);
case "x-":
return inSnakeTrain(snake.x - 10 , snake.y);
case "y+":
return inSnakeTrain(snake.x ,snake.y + 10);
case "y-":
return inSnakeTrain(snake.x ,snake.y - 10);
}
}
//是否在火车车厢内
function inSnakeTrain(x,y){
for(var i=0;i<snakeTrain.length;i++){
var train = snakeTrain[i];
if (x== train.x && y == train.y){
return true;
}
}
return false;
}
//创建方块
function createBox(x,y,sl){
var newNode = document.createElement("div");//创建P标签
newNode.id = sl+"_"+x+"_"+y;
newNode.name = "boxs";
newNode.className="bd "+sl;
if (sl == "gz"){
newNode.style.zIndex = 1;
}else{
newNode.style.zIndex = 9;
}
document.body.appendChild(newNode);
newNode.style.left = (desktop.left+x)+"px";
newNode.style.top = (desktop.top+y)+"px";
}
//移除方块
function removeBox(x,y,sl){
document.body.removeChild($(sl+"_"+x+"_"+y));
}
//自动开火车
function startTrain(code){
if ("undefined" == typeof(code)){
code = direction;
}
var rs = 0;
switch(code){
case 37://左
rs = leftGo();
break;
case 38://上
rs = upGo();
break;
case 39://右
rs = rightGo();
break;
case 40://下
rs = downGo();
break;
}
if (rs != -1){
direction = code;
drawHead();
}
}
function gameOver(msg){
gameStatus = -1;
var link = '<a href="javascript:reloadGame()">再来一次</a>';
$("msg").innerHTML = msg+"<br/><br/>"+link;
$("msg").style.zIndex=10;
window.clearInterval(block);
}
function reloadGame(){
location.replace(location.href);
}
相关推荐
在网页游戏中，贪吃蛇是一款非常经典且受欢迎的小游戏，它的核心机制是通过用户操作控制蛇移动，吃食物后蛇身增长，碰到边界或自身则游戏结束。这个项目是利用jQuery库，结合HTML和CSS，实现了这样一个简单版的...
整个游戏是在一个<div>框子(地图)里展开的，蛇有地图里的一系列<div>构成，初始状态(刚刚打开页面)蛇是一个<div>框，蛇头和蛇尾是在一起的，就是这个<div>框，以后吃了食物后<div>个数会变多，蛇就会长长。...
例如，`<canvas>`标签用于绘制游戏画布，`<div>`用于分组元素，`<button>`用于定义交互式按钮。 2. CSS 样式设计： CSS（Cascading Style Sheets）用于美化HTML元素的外观和布局。在贪吃蛇游戏中，CSS可以用来设置...
在深入讨论如何使用JavaScript来实现一个简单的贪吃蛇游戏之前，我们首先要了解什么是贪吃蛇游戏。贪吃蛇是一款经典的电子游戏，玩家控制一个不断移动的蛇形角色，通过吃掉出现在屏幕上的食物来增长身体长度。游戏的...
在本文中，我们将探讨如何使用JavaScript实现一个简单的贪吃蛇游戏。贪吃蛇游戏是一种经典的像素级游戏，玩家通过控制蛇的移动来吃食物，每次吃到食物后，蛇的长度会增加，而游戏区域是有限的，玩家必须避免蛇头碰到...
此外，还需要定义贪吃蛇的移动方向、蛇身体的数组、食物的位置、得分、游戏速度等属性，并通过各种函数来控制游戏的行为。 ```javascript var sw = 20, // 一个方块的宽 sh = 20, // 一个方块的高 tr = 25, // ...
JavaScript实现的贪吃蛇游戏是一种基于网页的娱乐项目，它结合了HTML、CSS和JavaScript三种技术，让玩家可以在浏览器上体验经典游戏的乐趣。下面将详细解释这三个方面的知识点。 首先，HTML（HyperText Markup ...
《JavaScript实现贪吃蛇游戏详解》 贪吃蛇游戏，作为一个经典的休闲娱乐游戏，深受广大玩家喜爱。在本文中，我们将深入探讨如何使用JavaScript这一强大的客户端脚本语言来实现这样一个有趣的游戏。JavaScript作为...
例如，`<div>`标签用于创建游戏区域的容器，`<canvas>`标签用于绘制游戏画面，而`<button>`标签则用来设置开始、暂停和重置游戏的控制按钮。 CSS（Cascading Style Sheets）用于美化和定制HTML元素的样式。在贪吃蛇...
在本教程中，我们将探讨如何使用JavaScript实现一个经典的贪吃蛇游戏。首先，我们来看一下提供的文件结构，它包括HTML、CSS以及多个JavaScript文件。这些文件分别负责游戏界面的布局、食物的生成、蛇的移动与碰撞...
标题中的“DIV可移动 可实现任意拖动放大缩小”是指一种使用JavaScript技术来实现的交互功能，允许用户在网页上自由地拖动、缩放HTML中的div元素。这一功能通常用于创建用户界面元素，如窗口、面板或者任何需要动态...
根据提供的文件内容，可以详细解析出实现基于JavaScript的贪吃蛇小游戏的相关知识点。 首先，从标题和描述中可以看出，本篇文章的核心在于通过JavaScript编程语言来实现一个贪吃蛇小游戏。JavaScript是一种运行在...
在网页设计中，"js控制div左右切换带左右箭头"是一种常见的交互效果，它用于展示多内容区域，用户可以通过点击或悬浮在左、右箭头上实现内容的切换。这种效果常见于产品展示、轮播图或者选项卡式布局中，能够提供...
div实现圆角 div实现圆角 div实现圆角 div实现圆角 div实现圆角
在CSS中，我们可以使用position属性（如static, relative, absolute或fixed）来控制元素的位置，并使用top, right, bottom和left属性来精确调整元素的偏移量。 接下来，我们将使用JavaScript或者jQuery库来实现div...
【标题】：“JS实现div内滚动内容及按钮控制” 在网页设计中，有时我们需要在一个固定的div区域展示大量的文本或图片，而这个div的大小又是有限的。这时，我们可以利用JavaScript来实现div内的滚动效果，并通过按钮...
在网页设计中，"js控制层和DIV+CSS实现TAB菜单"是一个常见的技术组合，用于创建交互式的用户界面。这个主题涉及到JavaScript（JS）、层（Layer）管理、Div（CSS布局元素）以及CSS（级联样式表）的使用。下面我们将...
《jQuery实现贪吃蛇游戏详解》 在网页开发中，jQuery作为一个强大的JavaScript库，极大地简化了DOM操作、事件处理和动画制作。本篇文章将深入探讨如何利用jQuery来编写一款经典的贪吃蛇游戏，通过这个实例，我们...
在网页设计中，有时我们需要将某个`div`元素设置为全屏显示，以提供沉浸式的用户体验或特定功能的实现。JavaScript（简称js）作为一种强大的客户端脚本语言，可以帮助我们轻松实现这一需求。在这个项目中，我们使用...