`

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

游戏IEFirefoxJ#JavaScript 
阅读更多 
<!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;
}
分享到：
| osCache 配置说明
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Javascript小游戏：贪吃蛇+详细注释.doc

    小游戏：贪吃蛇+详细注释.doc 代码 做一个简单的游戏

    JS制作的贪吃蛇小游戏

    纯JS制作的贪吃小游戏！简单易懂！注释详细！可做课程项目设计之用

    JavaScript 网页版贪吃蛇游戏代码

    JavaScript版贪吃蛇游戏，网页小游戏代码分享，这类小游戏可以很好的用JS来实现，游戏速度由快、中、慢可选，按“空格键” 开始/暂停，方向键控制蛇身运动方向，若要想研究代码原理，可关注代码中的注释，写的非常好...

    Javascript实现贪吃蛇小游戏（含详细注释）

    本文实例为大家分享了Javascript实现贪吃蛇小游戏的具体代码，供大家参考，具体内容如下 前言 原生JavaScript实现贪吃蛇小游戏 GitHub地址 直接复制可用 index.html &lt;!DOCTYPE html&gt; &lt;html lang=en&gt; &lt;...

    鸿蒙——贪吃蛇项目源码

    鸿蒙——贪吃蛇项目源码，HarmonyOS实战 | 贪吃蛇游戏 | JS全注释

    javascript 写的贪吃蛇游戏

    javascript 写的贪吃蛇游戏，内包括一个HTML DOM操作的小工具和贪吃蛇游戏的代码，注释很详细

    javaScript贪吃蛇源代码

    javaScript贪吃蛇源代码，详细的javaScript贪吃蛇代码，里面都写了注释

    前端实现贪吃蛇小游戏！

    通过Vue3仿照经典版贪吃蛇功能，食物随机位置，蛇可进行移动，吃到食物后身体变长一节，同时分数+1，分数每累积10分等级+1，等级越高蛇移动速度越快，蛇撞墙后或者撞击身体后游戏结束清零重新开始！下载资源后运行两...

    web前端 贪吃蛇小游戏 用javascript实现的适合初学者入门 简单易懂

    使用javascript 写的贪吃蛇小游戏，是自己一行行代码敲出来的，带有注释，简单易懂，适合初学者入门。能快速让你对web前端用javascript制作小游戏有个基础的了解。

    贪吃蛇小游戏前端代码.zip

    探索Java前端HTML贪吃蛇小游戏代码项目，重温经典游戏的魅力！ 贪吃蛇游戏是一款经典的游戏，自诞生以来一直备受玩家喜爱。我们为您精心准备了一套Java前端HTML贪吃蛇小游戏代码项目，让您轻松重温这款经典游戏的...

    JavaScript贪吃蛇.zip

    JavaScript实现网页版本的贪吃蛇小游戏，内含详细注释，且包含图片文件夹，CSS，JS文件夹，index.html

    20行js代码实现的贪吃蛇小游戏

    最近在csdn上看到一位大神用20行代码就写出了一个贪吃蛇的小游戏，感觉被惊艳到了，就试着读了一下这段代码，阅读过程中不断为作者写法的巧妙而叫绝，其中我发现自己对运算符优先级和一些js的技巧不是很清楚，所以看...

    jquery网页版贪吃蛇

    学习jQuery后，编写一个简单的贪吃蛇小游戏。注释完整，代码结构清晰。

    JS实现简单贪吃蛇小游戏

    本文实例为大家分享了JS实现简单贪吃蛇游戏的具体代码，供大家参考，具体内容如下 1、使用语言 HTML+CSS+JavaScript 2、使用工具 visual studio code 3、GitHub项目地址：贪吃蛇 4、项目运行截图： 5、项目功能...

    JavaScript面向对象编程小游戏—贪吃蛇代码实例

    用JavaScript 语言编写的游戏小程序–贪吃蛇. ​ 代码注释详细,逻辑清晰 . 非常适合新手前端开发者, 锻炼JavaScript语言的面向对象的编程思想.  该小Demo已上传GitHub,欢迎下载! 觉得好的话,随手给个star, 您的...

    HTML5贪吃蛇中文版.zip

    HTML5贪吃蛇中文版基于HTML5 canvas制作，贪吃蛇网页版小游戏，代码附带详细中文注释，供大家参考。

    JAVA贪吃蛇游戏毕业设计(源代码+论文).rar

    SpringBoot 毕业设计，SpringBoot 课程设计，基于SpringBoot+Vue开发的，含有代码注释，新手也可看懂。ssm整合开发，小程序毕业设计、期末大作业、课程设计、高分必看，下载下来，简单部署，就可以使用。 包含：...

    javascript实现简单的贪吃蛇游戏

    javascript实现简单的贪吃蛇游戏，功能很简单，代码也很实用，就不多废话了，小伙伴们参考注释吧。 &lt;html&gt; &lt;head&gt; &lt;meta http-equiv='content-type' content='text/html;charset=utf-8'&gt; &lt;...

    c语言贪吃蛇游戏的双人对战版.rar

    SpringBoot 毕业设计，SpringBoot 课程设计，基于SpringBoot+Vue开发的，含有代码注释，新手也可看懂。ssm整合开发，小程序毕业设计、期末大作业、课程设计、高分必看，下载下来，简单部署，就可以使用。 包含：...

Magicbox
Global site tag (gtag.js) - Google Analytics