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

最新推荐文章于 2020-11-02 15:14:31 发布
最新推荐文章于 2020-11-02 15:14:31 发布
阅读量700 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/linfenliang/article/details/39374083
版权
运行代码框
<!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
// 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 [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 );
  for(var i = 0; i < skateTimers.length; i++) window.clearTimeout(skateTimers );
  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  = 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>灰色毒品</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 [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 );
        for(var i = 0; i < skateTimers.length; i++) window.clearTimeout(skateTimers );
        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  = 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;
}
清山随笔
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS贪吃蛇游戏
EnVon的专栏
07-06 2317
JS贪吃蛇游戏，个人练习之用，放在这备份一下 ！
js小游戏案例（贪吃蛇）
ICY___的博客
02-23 2975
贪吃蛇是我们都玩过的游戏，也是一代人的回忆。今天就带大家用原生js实现贪吃蛇游戏功能。 基本思路：随机创建地图；利用top和left值，利用坐标的传递使蛇动起来；随机在地图上显示食物；利用蛇头的坐标进行判断； 优化细节； 开发模式：单例模式；（开发模式有时间一并分享给大家） 实现效果如下： 代码如下： &lt;!DOCTYPE html&gt; &lt;html lang="...
Javascript小游戏：贪吃蛇+详细注释.doc
04-21
小游戏：贪吃蛇+详细注释.doc 代码 做一个简单的游戏
JS实现贪吃蛇小游戏(详细注释)
xiao祁的博客
08-14 446
小游戏目录结构 游戏运行效果图 HTML代码 css代码 js代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style media="screen"> *{ margin: 0; ...
贪吃蛇来啦，js代码，有详细注释，初学者参考，共勉
khadijiah的博客
08-23 1590
实现简单的贪吃蛇，200行代码，有详细注释，初学者参考，共勉
Javascript实现贪吃蛇小游戏（含详细注释）
01-22
本文实例为大家分享了Javascript实现贪吃蛇小游戏的具体代码，供大家参考，具体内容如下 前言 原生JavaScript实现贪吃蛇小游戏 GitHub地址 直接复制可用 index.html <!DOCTYPE html> <html lang=en> <...
javascript 贪吃蛇(详细注释版)
10-29
由于所给内容中包含部分重复信息以及扫描错误，接下来我将基于这些信息，提炼出与标题“javascript 贪吃蛇(详细注释版)”相关的主要知识点，并对其中的面向对象编程进行详细说明。 知识点一：贪吃蛇游戏开发概述 ...
20行js代码实现的贪吃蛇小游戏
01-19
最近在csdn上看到一位大神用20行代码就写出了一个贪吃蛇的小游戏，感觉被惊艳到了，就试着读了一下这段代码，阅读过程中不断为作者写法的巧妙而叫绝，其中我发现自己对运算符优先级和一些js的技巧不是很清楚，所以看...
贪吃蛇的详细注释
12-27
VC++6.0win32 application开发的贪吃蛇详细代码注释或伪代码
js小游戏之贪吃蛇
06-23
总的来说，这个"js小游戏之贪吃蛇"项目展示了JavaScript作为动态语言的强大能力，通过简单的代码就能实现一个互动性强、趣味性高的游戏。对于学习JavaScript的初学者来说，这是一个很好的实践项目，可以帮助他们理解...
js实现贪吃蛇小游戏----代码详解
qq_47815128的博客
11-02 554
js实现贪吃蛇小游戏----代码详解 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>贪吃蛇</title> <style> .game-area{ height: 600px; width: 600px; backgrou
我的JS 简单的贪吃蛇小游戏
qq_33368722的博客
01-22 229
刚学完js基础，想写个小游戏练练手，就写了这个最简单的贪吃蛇的小游戏。很多不足的，不喜勿喷。欢迎同道交流。前后历经三四天，代码写了两天！离自己的要求差了好远，我是希望一个上午或者下午写完的，结果却这么久。汗颜，这样子可以找到工作吗？？？温馨提示：开始玩不要按向下键哦，否则一口咬死自己，哈哈。 上代码： 贪吃蛇 *{ margin: 0px;padding: 0px;
JS 原生js实现贪吃蛇小游戏（含详细注释）
夏沐的博客
02-28 5696
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;title&lt;/title&gt; &lt;style&gt; .map{ width:800px; height:600px;
Javascript 实现扫雷小游戏（含详细注释）
chenyu-max
08-14 4644
样例展示 文件夹结构 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JS扫雷</title> <link rel="style
教你如何用JavaScript写个贪吃蛇出来(超详细)
热门推荐
qq_40060770的博客
03-15 1万+
贪吃蛇大家都玩过，但你会制作嘛？听起来好像很难的样子，其实非常的简单，话不多说直接上代码 我们先把dom结构写出来 <div id="content"> <div id="snake"> <div class="box head"></div> &...
ant-design-vue-2.2.0-beta.5.zip
最新发布
08-26
基于 Ant Design 和 Vue 的企业级 UI 组件库
python单机小游戏贪吃蛇并加上注释
06-08
好的，下面是带有注释的Python单机小游戏贪吃蛇的实现过程： ```python # 导入必要的模块 import pygame import random # 初始化Pygame pygame.init() # 设置游戏窗口大小和标题 window_width = 640 window_...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值