JS实现——贪吃蛇

把以下代码保存成Snake.html文件，使用Google或360浏览器打开

<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8" />

  <title>Snake</title>

<style>

</style>

</head>

<body>

<div style="position: relative">

  <div style="width: 400px; font-size: 22px; border: 3px solid black;">

    分数:<span id="score"></span>

  </div>

  <canvas id="myCanvas">your browser does not support the canvas</canvas>

  <div id="help" style="position: absolute; left: 420px; top: 40px;">

    Esc: 重新开始</br>

    Enter: 开始/暂停/继续</br>

    方向键: 改变蛇的移动方向</br>

    Ctrl: 切换控制模式(影响手感)</br>

    数字1: 加速</br>

    数字2: 减速</br>

  </div>

  <div id="gameStates" style="position: absolute; left: 420px; top: 200px; color: red">

    控制模式: <span id="controlMode"></span></br>

    运动状态: <span id="pause"></span></br>

    蛇的方向: <span id="snakeDir"></span></br>

    蛇的速度: <span id="snakeSpeed"></span></br>

    蛇的长度: <span id="snakeLength"></span></br>

    <span id="info"></span>

  </div>

</div>

</body>

<script type="text/javascript">

/*

 By Problue,2015.10.15

*/

var KEY_L = 37;

var KEY_U = 38;

var KEY_R = 39;

var KEY_D = 40;

var KEY_RESET = 27

var KEY_PAUSE = 13;

var KEY_CHANGE_CONTROL_MODE = 17;

var KEY_INC_SPEED = 49;

var KEY_DEC_SPEED = 50;

var MAP_R = 20;

var MAP_C = 20;

var SNAKE_LENGTH_MAX = MAP_R * MAP_C;

var OBJ_SIZE = 20;

var OBJ = {

  EMPTY: 0,

  SNAKE_HEAD: 1,

  SNAKE_BODY: 2,

  SNAKE_TAIL: 3,

  FOOD: 4,

  STONE: 5

};

var colors = ['white', 'midnightblue', 'darkblue', 'mediumblue', 'midnightblue', 'dimgray'];

var mapData = "\

00000000000000000000\

00000000000000000000\

00000000000000000000\

50000000500000055000\

00000000000000005000\

00055000000005500000\

00050000000000500000\

00000550000550000000\

00000500000050000000\

00000000000000000000\

00000000000000000000\

00000005000050000000\

00000005500550000000\

00000500000000500000\

00000550000005500000\

00050000000000000000\

00055000000000050005\

00000000000000000000\

00000000000000000000\

00000000000000000000";

var map = [];

var snake = new Snake();

var food = new Point(0, 0);

//var time;

var pause;

var over;

var controlQueueMode;

var controlQueue = new Queue();

var score;

function Snake() {

  this.nodes = [];

  this.dir = 0;

  this.msSpeed = 0;

}

function Point(x, y) {

  this.x = x;

  this.y = y;

}

Point.prototype.clone = function() {

  return new Point(this.x, this.y);

}

Point.prototype.equals = function(other) {

  if(other === this)

    return true;

  if(!(other instanceof Point))

    return false;

  return this.x == other.x && this.y == other.y;

}

function Queue() {

  this.arr = [];

  this.head = 0;

  this.tail = 0;

}

Queue.prototype.enQueue = function(elem) {

  this.tail++;

  this.arr[this.tail] = elem;

}

Queue.prototype.deQueue = function() {

  this.head++;

  return this.arr[this.head];

}

Queue.prototype.empty = function() {

  return this.head >= this.tail;

}

Queue.prototype.clear = function() {

  this.arr.length = 0;

  this.head = 0;

  this.tail = 0;

}

start();

function start() {

  initGame();

  initMap();

  initSnake();

  drawMap();

  showGameStates();

  updateScore();

  drawSnake();

  randFood();

  drawObj(food, OBJ.FOOD);

}

function initGame() {

  canvas = document.getElementById('myCanvas');

  cxt = canvas.getContext('2d');

  canvas.width = MAP_C * OBJ_SIZE;

  canvas.height = MAP_R * OBJ_SIZE;

  canvas.style.border = '3px solid black';

  document.onkeydown = keydown;

  //time = +new Date;

  pause = true;

  over = 0;

  controlQueueMode = true;

  score = 0;

}

function initMap() {

  for(var r = 0; r < MAP_R; r++) {

    map.push([]);

    for(var c = 0; c < MAP_C; c++) {

      var obj = mapData[r * MAP_C + c] - 0;

      map[r][c] = obj;

    }

  }

}

function initSnake() {

  snake.nodes.length = 0;

  snake.nodes.push(new Point(2, 0));

  snake.nodes.push(new Point(1, 0));

  snake.nodes.push(new Point(0, 0));

  snake.dir = KEY_R;

  snake.msSpeed = 150;

}

function keydown(event) {

  var key = window.event ? event.keyCode : event.which;

  switch(key) {

  case KEY_U:

    if(snake.dir != KEY_D) {

      snake.dir = key;

      controlQueue.enQueue(snake.dir);

    }

    break;

  case KEY_D:

    if(snake.dir != KEY_U) {

      snake.dir = key;

      controlQueue.enQueue(snake.dir);

    }

    break;

  case KEY_L:

    if(snake.dir != KEY_R) {

      snake.dir = key;

      controlQueue.enQueue(snake.dir);

    }

    break;

  case KEY_R:

    if(snake.dir != KEY_L) {

      snake.dir = key;

      controlQueue.enQueue(snake.dir);

    }

    break;

  case KEY_RESET:

    start();

    break;

  case KEY_PAUSE:

    pause = !pause;

    if(!pause) {

      controlQueue.clear();

      move();

    }

    break;

  case KEY_CHANGE_CONTROL_MODE:

    controlQueueMode = !controlQueueMode;

    controlQueue.clear();

    break;

  case KEY_INC_SPEED:

    snake.msSpeed -= 10;

    break;

  case KEY_DEC_SPEED:

    snake.msSpeed += 10;

    break;

  default: ;

  }

  showGameStates();

}

function moveStep() {

  showGameStates();

  var newHead = snake.nodes[0].clone();

  var oldTail = snake.nodes[snake.nodes.length - 1].clone();

  switch(snake.dir) {

  case KEY_U:

    newHead.y--;

    break;

  case KEY_R:

    newHead.x++;

    break;

  case KEY_L:

    newHead.x--;

    break;

  case KEY_D:

    newHead.y++;

    break;

  }

  var coord = '坐标(' + snake.nodes[0].x + ',' + snake.nodes[0].y + ')是';

  info(coord + '空');

  if((newHead.x > MAP_C - 1 || newHead.x < 0) ||

     (newHead.y > MAP_R - 1 || newHead.y < 0)) {

    info(coord + '墙壁');

    over = 1;

    return;

  }

  if(isInSnake(newHead)) {

    info(coord + '自己');

    over = 2;

    return;

  }

  var thing = map[newHead.y][newHead.x];

  if(thing == OBJ.STONE) {

    info(coord + '石头');

    over = 3;

    return;

  }

  if(thing == OBJ.FOOD) {

    info(coord + '食物');

    snake.nodes.push(new Point(0, 0));

    map[newHead.y][newHead.x] = OBJ.EMPTY;

    randFood();

    drawObj(food, OBJ.FOOD);

    updateScore();

    showGameStates();

  }

  for(var i = snake.nodes.length - 1; i >= 1; i--)

    snake.nodes[i] = snake.nodes[i - 1].clone();

  snake.nodes[0] = newHead;

  drawObj(oldTail, OBJ.EMPTY);

  drawSnake();

}

function move() {

  if(pause)

    return;

  if(controlQueueMode && !controlQueue.empty())

    snake.dir = controlQueue.deQueue();

  moveStep();

  if(over) {

    over = 0;

    var turn = [];

    turn[KEY_U] = KEY_R;

    turn[KEY_D] = KEY_L;

    turn[KEY_L] = KEY_U;

    turn[KEY_R] = KEY_D;

    snake.dir = turn[snake.dir];

  }

  setTimeout(move, snake.msSpeed);

}

function isInSnake(point) {

  for(var i = 0; i < snake.nodes.length; i++)

    if(snake.nodes[i].equals(point))

      return true;

  return false;

}

function randFood() {

  function randInt(n, m) {

    return Math.floor(Math.random() * (m - n)) + n;

  }

  function smart(pt) {

    if(pt.x == snake.nodes[0].x) {

      if(snake.dir == KEY_U)

        return pt.x - snake.nodes[0].x < 0;

      if(snake.dir == KEY_D)

        return pt.x - snake.nodes[0].x > 0;

    }

    if(pt.y == snake.nodes[0].y) {

      if(snake.dir == KEY_L)

        return pt.y - snake.nodes[0].y < 0;

      if(snake.dir == KEY_R)

        return pt.y - snake.nodes[0].y > 0;

    }

    return false;

  }

  do

  {

    food.x = randInt(0, MAP_C);

    food.y = randInt(0, MAP_R);

  } while(isInSnake(food) || smart(food) ||

    map[food.y][food.x] != OBJ.EMPTY);

  map[food.y][food.x] = OBJ.FOOD;

}

function info(str) {

  $('info').innerHTML = str;

}

function showGameStates() {

  $('pause').innerHTML = pause ? '静止' : '移动';

  $('controlMode').innerHTML = controlQueueMode ? '队列' : '普通';

  var toText = [];

  toText[KEY_L] = '左';

  toText[KEY_U] = '上';

  toText[KEY_R] = '右';

  toText[KEY_D] = '下';

  $('snakeDir').innerHTML = toText[snake.dir];

  $('snakeSpeed').innerHTML = snake.msSpeed + 'ms/' + OBJ_SIZE + 'px';

  $('snakeLength').innerHTML = snake.nodes.length;

}

function updateScore() {

  $('score').innerHTML = score++;

}

function drawMap() {

  var pt = new Point(0, 0);

  for(var r = 0; r < MAP_R; r++) {

    for(var c = 0; c < MAP_C; c++) {

      if(map[r][c] == OBJ.STONE) {

        pt.x = c;

        pt.y = r;

        drawObj(pt, OBJ.STONE);

      }

    }

  }

}

function drawSnake() {

  drawObj(snake.nodes[0], OBJ.SNAKE_HEAD);

  for(var i = 1; i < snake.nodes.length - 1; i++)

    drawObj(snake.nodes[i], OBJ.SNAKE_BODY);

  drawObj(snake.nodes[snake.nodes.length - 1], OBJ.SNAKE_TAIL);

}

function drawObj(point, type) {

  cxt.fillStyle = colors[type];

  cxt.fillRect(point.x * OBJ_SIZE, point.y * OBJ_SIZE,

    OBJ_SIZE, OBJ_SIZE);

}

function $(id) {

  return document.getElementById(id);

}

</script>

</html>

出处：qq群--编程算法&思想 459909287

JS实现——贪吃蛇的更多相关文章

js版贪吃蛇
之前没有写博客的习惯,这是我的第一个博客,有些的不好的地方,希望大家多多提意见 js版的贪吃蛇相对比较简单,废话不多说直接上代码,有需要注意的地方我会标红,github源码地址https://gith ...
前端笔记之JavaScript面向对象（三）初识ES6&underscore.js&EChart.js&设计模式&贪吃蛇开发
一.ES6语法 ES6中对数组新增了几个函数:map().filter().reduce() ES5新增的forEach(). 都是一些语法糖. 1.1 forEach()遍历数组 forEach() ...
JS仿贪吃蛇：一串跟着鼠标的Div
贪吃蛇是一款80后.90后比较熟悉的经典游戏,下面通过简单的JS代码来实现低仿版贪吃蛇效果:随着鼠标的移动,在页面中呈现所有Div块跟随鼠标依次移动,效果如下图所示. <!DOCTYPE htm ...
原生JS制作贪吃蛇小游戏
感情都在代码里,来,干了!... <!doctype html> <html> <head> <meta http-equiv="Content-T ...
用Js写贪吃蛇
使用Javascript做贪吃蛇小游戏, 1.自定义地图宽高,蛇的初始速度 2.食物随机出现 3.蛇的样式属性 4.贪吃蛇玩法(吃食物,碰到边界,吃食物后加速,计分,) <!DOCTYPE ht ...
用js实现贪吃蛇
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
OC版贪吃蛇
昨天写了一个js版贪吃蛇,今天突然想写一个OC版的,来对比一下两种语言的区别 oc版功能,适配所有尺寸iphone,可暂停,可设置地图和蛇的比例,可加速对比一下会发现js版的相对OC版的会简单一些, ...
原生js写的贪吃蛇网页版游戏特效
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <bo ...
100行JS实现HTML5的3D贪吃蛇游戏
js1k.com收集了小于1k的javascript小例子,里面有很多很炫很酷的游戏和特效,今年规则又增加了新花样,传统的classic类型基础上又增加了WebGL类型,以及允许增加到2K的++类型, ...

随机推荐

MoinMoin install in apache (win)
一:下载环境 xampp:http://sourceforge.net/projects/xampp/files/XAMPP%20Windows/1.8.1/xampp-win32-1.8.1-VC9 ...
java的三大特性之一继承概述
0.继承-----注意事项 00.子类最多只能继承一个父类(指直接继承) 01.java所有的类都是Object的子类 02.JPK6.0中有202个包3777个类,接口,异常,枚举,注释和错误 03 ...
dubbo服务降级(2)
dubbo降级服务使用dubbo在进行服务调用时,可能由于各种原因(服务器宕机/网络超时/并发数太高等),调用中就会出现RpcException,调用失败. 服务降级就是指在由于非业务异常导致的服务 ...
js插件设置innerHTML时，在IE8下报错“未知运行时错误”
问题描述: 网站中使用了一个js插件,设置innerHTML时,在IE8下报错“未知运行时错误”: <div id=”divContainer”> <a name=”link”> ...
hdfs校验和
hdfs完整性:用户希望储存和处理数据的时候,不会有任何损失或者损坏.所以提供了两种校验: 1.校验和(常用循环冗余校验CRC-32). 2.运行后台进程来检测数据块. 校验和: a.写入数据节点验证 ...
1003: Redraiment的遭遇
1003: Redraiment的遭遇 Time Limit: 1000 Sec Memory Limit: 128 MBSubmit: 456 Solved: 158[Submit][Statu ...
centos7-httpd虚拟主机
Apache虚拟主机: 一台WEB服务器发布单个网站会非常浪费资源,所以一台WEB服务器上会发布多个网站, 在一台服务器上发布多网站,也称之为部署多个虚拟主机,WEB虚拟主机配置方法有三种: 基于单I ...
JavaScript -- DOM事件
什么是事件事件就是文档或浏览器窗口中发生的一些特定的交互瞬间.比如你在网页上见到的鼠标点击一个按钮,按钮的颜色发生了变化,就是因为这个标签绑定了点击事件鼠标事件 onload:页面加载时触发 on ...
十分钟看懂，未来Web前端开发最新趋势
首先,展望未来趋势我们就要弄懂过去的一年,也就是18年,web前端开发的重要新闻.重要事件和JavaScript的各种流行框架.模式发展趋势. 我们来快速回顾一下. NPM热门前端框架下载先来看最热 ...
学习JavaScript你必须掌握的8大知识点！
大知识点! 一.JavaScript思维导图之<变量>的学习二. JavaScript思维导图之<函数基础> 三.JavaScript思维导图之<基本dom操作 ...

JS实现——贪吃蛇

JS实现——贪吃蛇的更多相关文章

随机推荐

热门专题