JS小游戏贪吃蛇+详细注释

最新推荐文章于 2024-09-04 19:45:00 发布
最新推荐文章于 2024-09-04 19:45:00 发布
阅读量95 收藏 1
点赞数
分类专栏： javascript 文章标签： 游戏 IE Firefox J# JavaScript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_7530/article/details/81858963
版权 
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>贪吃蛇 - by CNwander</title>
<style type="text/css">
* {margin:0; padding:0}
body {background:#333; -moz-user-select:none; text-align:center; font-size:12px}
table {margin:80px auto 10px auto; overflow:hidden; border-collapse:collapse; }
td {width:20px; height:20px; border:1px solid #eee; background:#f4f4f4}
.cover {background:#39c;}
.food {background:#093}.
block {background:#333}
.brake {background:#f00}
.skate {background:#00f}
#say {margin-top:50px; color:white}
#help {width:420px; margin:0 auto; line-height:17px; color:white}
#help span {float:left; margin-right:10px}
#help .box {width:15px; height:15px; margin-right:5px; border:1px solid white}
#btnStart {clear:both; width:100px; height:30px; margin-top:10px; padding:0; background:#bbb; color:#222; border:1px solid #fff; border-bottom-color:#000; border-right-color:#000; cursor:pointer}
</style>
<script type="text/javascript">
// code by CNwander.
// common 
function $(str) {
	return document.getElementById(str);
}
function $tag(str,target) {
	target = target || document;
	return target.getElementsByTagName(str);
}
// global
// constvar WIDTH = 20, //网格宽度
	HEIGHT = 20, //网格高度
	SAY = ["相当不错，虽然说和CNwander还不是一个级别的","可以啊，再加点油都可以和CNwander媲美了！","一个字，牛，连CNwander都甘拜下风了","差不多行了，别把游戏玩爆了"];
var len = 3, //蛇的长度
	speed, //爬行速度
	gridElems = multiArray(WIDTH,HEIGHT), //单元格对象	carrier, //承载对象(食物，障碍，滑板，刹车)
	snake, //蛇每节的坐标点
	info, //交互对话
	btnStart, //开始按钮
	topScore = len,
	snakeTimer, //蛇行走计时器
	brakeTimers = [], //随机刹车
	skateTimers = [], //随机滑板
	directkey; // 方向键值 37-40 左上右下
window.onload = function(){
	info = $("say");
	btnStart = $("btnStart");
	initGrid(); //网格初始化
	document.onkeydown = attachEvents; //绑定方向事件	btnStart.onclick = function (e) {		btnStart.blur(); //firefox中必须释放焦点
		start(); //游戏开始		btnStart.setAttribute("disabled",true);		btnStart.style.color = "#aaa";
	}
}
//开始游戏function start() {
	len = 3;
	speed = 10;
	directkey = 39;
	carrier = multiArray(WIDTH,HEIGHT);
	snake = new Array();
	clear();
	initSnake(); //蛇初始化
	addObject("food");
	walk();
	addRandomBrake();
}
//创建网格
function initGrid() {
	var body = $tag("body")[0];
	var table = document.createElement("table"),		tbody = document.createElement("tbody")
	for(var j = 0; j < HEIGHT; j++) {
  		var col = document.createElement("tr");  		for(var i = 0; i < WIDTH; i++) {  			var row = document.createElement("td");			gridElems[i][j] = col.appendChild(row);  		}		tbody.appendChild(col);  	}	table.appendChild(tbody);	$("snakeWrap").appendChild(table);
}
//创建蛇
function initSnake() {
	var pointer = randomPointer(len-1, len-1, WIDTH/2);	for(var i = 0; i < len; i++) {
		var x = pointer[0] - i,
			y = pointer[1];
		snake.push([x,y]);
		carrier[x][y] = "cover";
	}
}
//添加键盘事件
function attachEvents(e) {
	e = e || event;
	directkey = Math.abs(e.keyCode - directkey) != 2 && e.keyCode > 36 && e.keyCode < 41 ? e.keyCode : directkey; //非方向键、反向无效
	return false;
}function walk() {
	if(snakeTimer) window.clearInterval(snakeTimer);	snakeTimer = window.setInterval(step, Math.floor(3000/speed));
}
function step() {
	//获取目标点
	var headX = snake[0][0],
		headY = snake[0][1];
	switch(directkey) {
		case 37: headX -= 1; break;
		case 38: headY -= 1; break;
		case 39: headX += 1; break
		case 40: headY += 1; break;
	}	//碰到边界，阻挡物，则结束游戏
	if(headX >= WIDTH || headX < 0 || headY >= HEIGHT || headY < 0 || carrier[headX][headY] == "block" || carrier[headX][headY] == "cover" ) {
		trace("GAME OVER");
		if(getText($("score"))*1 < len) trace(len,$("score"));
		btnStart.removeAttribute("disabled");		btnStart.style.color = "#000";		window.clearInterval(snakeTimer);
		for(var i = 0; i < brakeTimers.length; i++) window.clearTimeout(brakeTimers[i]);
		for(var i = 0; i < skateTimers.length; i++) window.clearTimeout(skateTimers[i]);
		return;
	}
	//加速	if(len % 4 == 0 && speed < 60 && carrier[headX][headY] == "food") {
		speed += 5;
		walk();
			trace("加速！");
	}
	//捡到刹车
	if(carrier[headX][headY] == "brake") {
		speed = 5;
		walk();
		trace("恭喜！捡到刹车一个。");
	}
	//遭遇滑板
	if(carrier[headX][headY] == "skate") {
		speed += 20;
		walk();
		trace("遭遇滑板！");
	}
		//添加阻挡物
	if(len % 6 == 0 && len < 60 && carrier[headX][headY] == "food") {
		addObject("block");
	}
		//对话
	if(len <= 40 && len % 10 == 0) {
		var cheer = SAY[len/10-1];
		trace(cheer);
	}
		//吃东西
	if(carrier[headX][headY] != "food") {
		var lastX = snake[snake.length-1][0],			lastY = snake[snake.length-1][1];		carrier[lastX][lastY] = false;
		gridElems[lastX][lastY].className = "";		snake.pop();
	} else {
		carrier[headX][headY] = false;
		trace("吃到食物");
		addObject("food");
	}
	snake.unshift([headX,headY]);
	carrier[headX][headY] = "cover";
	gridElems[headX][headY].className = "cover";		len = snake.length;
}
//添加物品
function addObject(name) {
	var p = randomPointer();
	carrier[p[0]][p[1]] = name;
	gridElems[p[0]][p[1]].className = name;
}
//添加随机数量刹车和滑板
function addRandomBrake() {
	var num = randowNum(1,5);
	for(var i = 0; i < num; i++) {		brakeTimers.push( window.setTimeout(function(){addObject("brake")},randowNum(10000,100000)) );		skateTimers.push( window.setTimeout(function(){addObject("skate")},randowNum(5000,100000)) );
	}
		 
}
//输出信息
function trace(sth,who) {
	who = who || info;
	if(document.all) who.innerText = sth;
	else who.textContent = sth;
}
//获取信息
function getText(target) {
	if(document.all) return target.innerText;
	else return target.textContent;
}
//创建二维数组
function multiArray(m,n) {
	var arr =  new Array(n);
	for(var i=0; i<m; i++)
 		arr[i] = new Array(m);
	return arr;
}
//清除画面
function clear() {
	for(var y = 0; y < gridElems.length; y++) {		for(var x = 0; x < gridElems[y].length; x++) {			gridElems[x][y].className = "";
		}
	}
}
//产生指定范围随机点
function randomPointer(startX,startY,endX,endY) {
	startX = startX || 0;
	startY = startY || 0;
	endX = endX || WIDTH;
	endY = endY || HEIGHT;
	var p = [],
		x = Math.floor(Math.random()*(endX - startX)) + startX,
		y = Math.floor(Math.random()*(endY - startY)) + startY;
	if(carrier[x][y]) return randomPointer(startX,startY,endX,endY);
	p[0] = x;
	p[1] = y;
	return p;
}
//产生随机整数
function randowNum(start,end) {	
return Math.floor(Math.random()*(end - start)) + start;
}
</script>
</head>
<body onselectstart="return false">
	<div id="say">贪吃蛇</div>
    <div id="snakeWrap"></div>
    <div id="help">
    	<span class="box food"></span><span>绿色食物</span>
        <span class="box block"></span><span>灰色dp</span>
        <span class="box skate"></span><span>蓝色滑板</span>
        <span class="box brake"></span><span>红色刹车</span>
        <span style="float:right">最高分：<strong id="score">0</strong></span>
        <input type="button" id="btnStart" value="开始游戏" />
    </div>
</body>
</html>

 

Tips: (老鸟跳过，希望对新手有所帮助)

  1. IE: element.innerText = FF: element.textContent；
  2. setAttribute("cellpadding","0")在IE中无效，正确写法cellPadding (一不小心就犯错了)；
  3. FF中，使用绑定在某元素上的键盘事件前，先让它获得焦点，document也不例外，这容易疏忽；
  4. 在IE中create table element，记得加tbody；

代码（有详细注释）：

// code by CNwander.
// common 
function $(str) {
    return document.getElementById(str);
}
function $tag(str,target) {
    target = target || document;
    return target.getElementsByTagName(str);
}
// global
// const
var WIDTH = 20, //网格宽度
    HEIGHT = 20, //网格高度
    SAY = ["相当不错，虽然说和CNwander还不是一个级别的","可以啊，再加点油都可以和CNwander媲美了！","一个字，牛，连CNwander都甘拜下风了","差不多行了，别把游戏玩爆了"];
var len = 3, //蛇的长度
    speed, //爬行速度
    gridElems = multiArray(WIDTH,HEIGHT), //单元格对象
    carrier, //承载对象(食物，障碍，滑板，刹车)
    snake, //蛇每节的坐标点
    info, //交互对话
    btnStart, //开始按钮
    topScore = len,
    snakeTimer, //蛇行走计时器
    brakeTimers = [], //随机刹车
    skateTimers = [], //随机滑板
    directkey; // 方向键值 37-40 左上右下
window.onload = function(){
    info = $("say");
    btnStart = $("btnStart");
    initGrid(); //网格初始化
    document.onkeydown = attachEvents; //绑定方向事件
    btnStart.onclick = function (e) {
        btnStart.blur(); //firefox中必须释放焦点
        start(); //游戏开始
        btnStart.setAttribute("disabled",true);
        btnStart.style.color = "#aaa";
    }
}
//开始游戏
function start() {
    len = 3;
    speed = 10;
    directkey = 39;
    carrier = multiArray(WIDTH,HEIGHT);
    snake = new Array();
    clear();
    initSnake(); //蛇初始化
    addObject("food");
    walk();
    addRandomBrake();
}
//创建网格
function initGrid() {
    var body = $tag("body")[0];
    var table = document.createElement("table"),
        tbody = document.createElement("tbody")
    for(var j = 0; j < HEIGHT; j++) {  
        var col = document.createElement("tr");  
        for(var i = 0; i < WIDTH; i++) {  
            var row = document.createElement("td");
            gridElems[i][j] = col.appendChild(row);  
        }
        tbody.appendChild(col);  
    }
    table.appendChild(tbody);
    $("snakeWrap").appendChild(table);
}
//创建蛇
function initSnake() {
    var pointer = randomPointer(len-1, len-1, WIDTH/2);
    for(var i = 0; i < len; i++) {
        var x = pointer[0] - i,
            y = pointer[1];
        snake.push([x,y]);
        carrier[x][y] = "cover";
    }
}
//添加键盘事件
function attachEvents(e) {
    e = e || event;
    directkey = Math.abs(e.keyCode - directkey) != 2 && e.keyCode > 36 && e.keyCode < 41 ? e.keyCode : directkey; //非方向键、反向无效
    return false;
}
function walk() {
    if(snakeTimer) window.clearInterval(snakeTimer);
    snakeTimer = window.setInterval(step, Math.floor(3000/speed));
}
function step() {
    //获取目标点
    var headX = snake[0][0],
        headY = snake[0][1];
    switch(directkey) {
        case 37: headX -= 1; break;
        case 38: headY -= 1; break;
        case 39: headX += 1; break
        case 40: headY += 1; break;
    }
    //碰到边界，阻挡物，则结束游戏
    if(headX >= WIDTH || headX < 0 || headY >= HEIGHT || headY < 0 || carrier[headX][headY] == "block" || carrier[headX][headY] == "cover" ) {
        trace("GAME OVER");
        if(getText($("score"))*1 < len) trace(len,$("score"));
        btnStart.removeAttribute("disabled");
        btnStart.style.color = "#000";
        window.clearInterval(snakeTimer);
        for(var i = 0; i < brakeTimers.length; i++) window.clearTimeout(brakeTimers[i]);
        for(var i = 0; i < skateTimers.length; i++) window.clearTimeout(skateTimers[i]);
        return;
    }
    //加速
    if(len % 4 == 0 && speed < 60 && carrier[headX][headY] == "food") {
        speed += 5;
        walk();    
        trace("加速！");
    }
    //捡到刹车
    if(carrier[headX][headY] == "brake") {
        speed = 5;
        walk();
        trace("恭喜！捡到刹车一个。");
    }
    //遭遇滑板
    if(carrier[headX][headY] == "skate") {
        speed += 20;
        walk();
        trace("遭遇滑板！");
    }    
    //添加阻挡物
    if(len % 6 == 0 && len < 60 && carrier[headX][headY] == "food") {
        addObject("block");
    }    
    //对话
    if(len <= 40 && len % 10 == 0) {
        var cheer = SAY[len/10-1];
        trace(cheer);
    }    
    //吃东西
    if(carrier[headX][headY] != "food") {
        var lastX = snake[snake.length-1][0],
            lastY = snake[snake.length-1][1];
        carrier[lastX][lastY] = false;
        gridElems[lastX][lastY].className = "";
        snake.pop();
    } else {
        carrier[headX][headY] = false;
        trace("吃到食物");
        addObject("food");
    }
    snake.unshift([headX,headY]);
    carrier[headX][headY] = "cover";
    gridElems[headX][headY].className = "cover";
    
    len = snake.length;
}
//添加物品
function addObject(name) {
    var p = randomPointer();
    carrier[p[0]][p[1]] = name;
    gridElems[p[0]][p[1]].className = name;
}
//添加随机数量刹车和滑板
function addRandomBrake() {
    var num = randowNum(1,5);
    for(var i = 0; i < num; i++) {
        brakeTimers.push( window.setTimeout(function(){addObject("brake")},randowNum(10000,100000)) );
        skateTimers.push( window.setTimeout(function(){addObject("skate")},randowNum(5000,100000)) );
    }         
}
//输出信息
function trace(sth,who) {
    who = who || info;
    if(document.all) who.innerText = sth;
    else who.textContent = sth;
}
//获取信息
function getText(target) {
    if(document.all) return target.innerText;
    else return target.textContent;
}
//创建二维数组
function multiArray(m,n) {
    var arr =  new Array(n);
    for(var i=0; i<m; i++) 
        arr[i] = new Array(m);
    return arr;
}
//清除画面
function clear() {
    for(var y = 0; y < gridElems.length; y++) {
        for(var x = 0; x < gridElems[y].length; x++) {
            gridElems[x][y].className = "";
        }
    }
}
//产生指定范围随机点
function randomPointer(startX,startY,endX,endY) {
    startX = startX || 0;
    startY = startY || 0;
    endX = endX || WIDTH;
    endY = endY || HEIGHT;
    var p = [],
        x = Math.floor(Math.random()*(endX - startX)) + startX,
        y = Math.floor(Math.random()*(endY - startY)) + startY;
    if(carrier[x][y]) return randomPointer(startX,startY,endX,endY);
    p[0] = x;
    p[1] = y;
    return p;
}
//产生随机整数
function randowNum(start,end) {
    return Math.floor(Math.random()*(end - start)) + start;
}
iteye_7530
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript经典小游戏
02-24
很了二天时间下载并整理代码格式，确认运行效果，最终将几个感觉还不错的打包，供亲们下载！优点：代码格式良好，经过测试可以运行，内容经典包含：坦克（超猛）、俄罗斯方块、贪吃蛇、打雷、三子棋等六6个，希望能给深入学习JavaScript的童鞋们带来帮助
JS互动小游戏
01-18
JS互动小游戏
JS小游戏 - 盖房子 改进版
03-10
游戏说明：<br>一个5*5的方格 打算往每个格子里放房子,有4种颜色的房子 <br>蓝色的房子 占10人口 随便放在哪里都行 <br>红色的房子 占20人口 要求和蓝色的房子相邻 <br>绿色的房子 占30人口 要求和蓝色，红色的房子相邻 <br>黄色的房子 占40人口 要求和蓝色，红色，绿色的房子相邻 <br>问 如何放置 才能使5*5的格子占用的人口数量最大?<br><br>操作说明：<br>拉动各颜色的房子到欲放置的格子处释放鼠标，如果格子符合该颜色房子的需求则房子成功放入，否则房子不放入，如：欲放黄色房子，则本格子上下左右需存在蓝绿红三种房子。 <br>单击任何一个格子弹出该格子当前可放入的房子选项，双击房子即可放入，或者选中其中一个后按回车或点选择亦可放入。 <br>双击有房子的格子或房子即可拆掉此房子。 <br>键盘操作： <br>按上下左右箭头可在表格内移动，当前格子背景色为黑色，如无选中则从第一行第一列开始，按回车后选择房子，按Delete或“.”为拆掉房子。 <br>如果弹出选择房子时，上下左右箭头为选择当前格子可用的房子(如：向放黄色房子需先在需要放置的格子上下左右格放好蓝绿红房子，方可选择)，按下回车后此房子加入格子内，Esc键为不做选择并关掉选择房子。 <br>如果拆除房子的邻居有对本房子要求时本房子不可拆除，需先拆除对于本房子做要求的房子，如：想拆掉蓝色房子，但上下左右有红色房子则需先拆掉红色房子方可拆掉蓝色房子。 <br>按Ctrl+Z可后退一步，如果后退后未再做操作按Ctrl+Y可前进一步，可多次后退或前进（在房子总数足够或后退步数足够的情况下），反之后退前进无效。
js小游戏实现简单打飞机
04-01
由于这只是基本实现，所以没有兼容性可言，火狐，马桶等流畅运行，IE就算了，没考虑过，供新手了解一下还是可以的，注释我感觉写的挺多的吧，每个实现都有注释。
原生js实现扫雷小游戏
11-29
这里是博客介绍地址：https://blog.csdn.net/zmdmwh/article/details/84579884 。
Javascript小游戏：贪吃蛇+详细注释.doc
04-21
本文档是一个使用 Javascript 开发的小游戏贪吃蛇，包含详细的注释代码，帮助开发者快速理解和学习游戏的开发过程。 知识点： 1. HTML 结构：文档使用 XHTML 1.0 Transitional 文档类型，定义了 HTML 结构的基本...
Javascript实现贪吃蛇小游戏（含详细注释）
01-22
本文实例为大家分享了Javascript实现贪吃蛇小游戏的具体代码，供大家参考，具体内容如下 前言 原生JavaScript实现贪吃蛇小游戏 GitHub地址 直接复制可用 index.html <!DOCTYPE html> <html lang=en> <...
20行js代码实现的贪吃蛇小游戏
01-19
最近在csdn上看到一位大神用20行代码就写出了一个贪吃蛇的小游戏，感觉被惊艳到了，就试着读了一下这段代码，阅读过程中不断为作者写法的巧妙而叫绝，其中我发现自己对运算符优先级和一些js的技巧不是很清楚，所以看...
javascript 贪吃蛇(详细注释版)
10-29
由于所给内容中包含部分重复信息以及扫描错误，接下来我将基于这些信息，提炼出与标题“javascript 贪吃蛇(详细注释版)”相关的主要知识点，并对其中的面向对象编程进行详细说明。 知识点一：贪吃蛇游戏开发概述 ...
JS实现贪吃蛇游戏
11-27
通过JS实现贪吃蛇功能 1、登录功能，程序运行时必须输入一个名称 2、蛇吃到实物可变长，碰到自己或着墙壁死亡，显示分数 3、游戏过程中动态显示分数变化 4、将数据存入本地文件score.txt（需要ActiveX插件，IE浏览器支持，只保存最高分数）
利用js实现贪吃蛇小游戏
08-05
使用HTML、CSS、JavaScript技术实现简单的贪吃蛇小游戏
原生js写一个贪吃蛇小游戏(内含详细注释)
le__seul的博客
05-12 3599
很简单的贪吃蛇实现，游戏效果如下图
30分钟带你过一遍js基本语法--附带js小游戏（建议收藏）
zzh的博客
10-10 1192
前端学习必不可少的脚本语言javascript，js的基础语法，原生js是之后学习的基础。 js简单语法实例 基本输入输出 <script type="text/javascript"> var a = prompt("输入name:"); alert("你好"+a); // 使用 window.alert() 弹出警告框。 window.alert(3+8);...
贪吃蛇来啦，js代码，有详细注释，初学者参考，共勉
khadijiah的博客
08-23 1597
实现简单的贪吃蛇，200行代码，有详细注释，初学者参考，共勉
JS实现扫雷游戏（源代码带注释）
weixin_46019681的博客
10-04 3098
JS实现简单的扫雷游戏（源代码带注释）可以直接运行
js开发实现简单贪吃蛇游戏（20行代码）
热门推荐
程序猿开发日志【学习永无止境】
03-30 8万+
曾经诺基亚的贪吃蛇风靡一时，在游戏匮乏的年代，用java实现太难，现在网页制作20行代码就做成一个简单的demo了，时代在进步啊 代码： 01 <!doctype html> 02 html> 03 body> 04 ca
1.第二阶段x86游戏实战2-前言
最新发布
计算机王的博客
09-04 488
游戏逆向、游戏安全、游戏攻防、c++、反游戏外挂、保姆级攻略、Windows
使用jsp实现贪吃蛇小游戏详细教程
"本文介绍了如何使用JSP技术在网页上实现一个简单的贪吃蛇小游戏，主要涉及HTML、CSS和JavaScript的结合应用。" 在本文中，作者分享了一种使用JSP来实现贪吃蛇小游戏的方法。游戏的核心在于利用前端技术构建游戏...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值