用Js写的贪吃蛇游戏

  1. <!doctype html>
  2. <html>
  3. <head><title>snake</title>
  4. <script>
  5. function Snake(canvas){
  6. this.canvas = canvas;
  7. this.length = 0;
  8. this.direction = ‘down‘;
  9. this.body = [],
  10. this.head = function(){
  11. return this.length == 0 ? null : this.body[0];
  12. };
  13. this.isAlive = true;
  14. this.onDie = null;
  15. this.onEat = null;
  16. this.speed = 200;
  17. this.auto = null;
  18. this.turnLeft = function(){
  19. if(this.direction == ‘left‘ || this.direction == ‘right‘){
  20. return;
  21. }else{
  22. this.direction = ‘left‘;
  23. }
  24. };
  25. this.turnRight = function(){
  26. if(this.direction == ‘left‘ || this.direction == ‘right‘){
  27. return;
  28. }else{
  29. this.direction = ‘right‘;
  30. }
  31. };
  32. this.turnUp = function(){
  33. if(this.direction == ‘up‘ || this.direction == ‘down‘){
  34. return;
  35. }else{
  36. this.direction = ‘up‘;
  37. }
  38. };
  39. this.turnDown = function(){
  40. if(this.direction == ‘up‘ || this.direction == ‘down‘){
  41. return;
  42. }else{
  43. this.direction = ‘down‘;
  44. }
  45. };
  46. this.moveTo = function(x, y){
  47. this.canvas.clsCanvas(this);
  48. this.body.pop();
  49. this.length--;
  50. this.grow(x, y);
  51. this.canvas.drawSnake(this);
  52. };
  53. this.grow = function(bX, bY){
  54. var head = {
  55. x : bX,
  56. y : bY
  57. };
  58. this.body.unshift(head);
  59. this.length++;
  60. };
  61. this.stepWalk = function(){
  62. if(!this.isAlive){return;}
  63. if(!this.head()){
  64. throw new Error(‘this snake is not initialized‘);
  65. }
  66. var nextBlock, head = this.head();
  67. var nX = head.x, nY = head.y;
  68. switch(this.direction){
  69. case ‘down‘:
  70. nY = head.y + 1;
  71. break;
  72. case ‘up‘:
  73. nY = head.y - 1;
  74. break;
  75. case ‘left‘:
  76. nX = head.x - 1;
  77. break;
  78. case ‘right‘:
  79. nX = head.x + 1;
  80. break;
  81. }
  82. if(nX < 1 || nY < 1 || nX > canvas.width || nY > canvas.height || this.contains(nX, nY)){
  83. this.isAlive = false;
  84. if(this.onDie){this.onDie();}
  85. }else{
  86. nextBlock = this.canvas.getBlock(nX, nY);
  87. if(this.canvas.isFoodBlock(nextBlock)){
  88. nextBlock.setAttribute(‘food‘,‘‘);  // the food has been eaten
  89. this.grow(nX, nY);
  90. if(this.onEat){this.onEat();}
  91. var t = this;
  92. setTimeout(function(){t.stepWalk();},80 );
  93. }else{
  94. this.moveTo(nX, nY);
  95. }
  96. }
  97. };
  98. this.autoWalk = function(){
  99. var snake = this;
  100. this.auto = setInterval(function(){
  101. if(snake.isAlive){
  102. snake.stepWalk();
  103. }else{
  104. clearInterval(snake.auto);
  105. }
  106. }, this.speed );
  107. };
  108. this.contains = function(x,y){
  109. var len = this.length, snakeBody = this.body, b;
  110. for(var i=0;i<len;i++){
  111. b = snakeBody[i];
  112. if(b.x == x && b.y == y){
  113. return true;
  114. }
  115. }
  116. return false;
  117. };
  118. this.init = function(length){
  119. if(length<this.canvas.height){
  120. for(var i=0; i<length;i++){
  121. this.grow(1, i+1);
  122. }
  123. };
  124. this.canvas.drawSnake(this);
  125. this.canvas.createFood();
  126. },
  127. this.pause = function(){
  128. if(this.auto){
  129. clearInterval(this.auto);
  130. this.auto = null;
  131. }
  132. };
  133. }
  134. function SnakeCanvas(div){
  135. this.target = div;
  136. this.createView();
  137. }
  138. SnakeCanvas.prototype = {
  139. width: 20,
  140. height: 16,
  141. currentSnake : null,
  142. createView : function(){
  143. var i = 0, span;
  144. addClass(this.target, ‘target‘);
  145. while(i < 320){
  146. span = document.createElement(‘span‘);
  147. span.id = ‘span_‘ + (++i);
  148. addClass(span, ‘blocks‘);
  149. this.target.appendChild( span );
  150. }
  151. },
  152. getBlock : function(x, y){
  153. return document.getElementById(‘span_‘ + (y ? ((y-1) * this.width + x) : (x+1)));
  154. },
  155. activateBlock : function(block){
  156. block.setAttribute(‘act‘, ‘true‘);
  157. addClass(block, ‘snake-body‘);
  158. },
  159. inActivateBlock: function(block){
  160. block.setAttribute(‘act‘, ‘‘);
  161. removeClass(block, ‘snake-body‘);
  162. },
  163. switchBlock: function(block){
  164. var active = block.getAttribute(‘act‘);
  165. if(active){
  166. this.inActivateBlock(block);
  167. }else{
  168. this.activateBlock(block);
  169. }
  170. },
  171. isFoodBlock: function(block){
  172. return !!(block.getAttribute(‘food‘));
  173. },
  174. createFood : function(){
  175. var posX = 0, posY = 0, done = false, block;
  176. while( !done){
  177. posX = Math.floor(Math.random() * (this.width + 1));
  178. posY = Math.floor(Math.random() * (this.height + 1));
  179. if(posX == 0){ posX = 1;} if(posY == 0){ posY = 1;}
  180. block = this.getBlock(posX, posY);
  181. if(!this.currentSnake || (!this.currentSnake.contains(posX, posY))){
  182. block.setAttribute(‘food‘, ‘true‘);
  183. this.switchBlock(block);
  184. done = true;
  185. }
  186. }
  187. },
  188. clsCanvas : function(snake){
  189. var snakeBlock, i = 0;
  190. if(snake){
  191. for(;i<snake.length;i++){
  192. snakeBlock = snake.body[i];
  193. this.inActivateBlock(this.getBlock(snakeBlock.x, snakeBlock.y));
  194. }
  195. }else{
  196. while(i< this.width * this.height){
  197. this.inActivateBlock(this.getBlock(i));
  198. }
  199. }
  200. },
  201. drawSnake : function(snake){
  202. var snakeBlock;
  203. for(var i=0;i<snake.length;i++){
  204. snakeBlock = snake.body[i];
  205. this.activateBlock(this.getBlock(snakeBlock.x, snakeBlock.y));
  206. }
  207. this.currentSnake = snake;
  208. }
  209. };
  210. //---------------------------//
  211. function trim(text){
  212. var rnotwhite = /\S/,
  213. // Used for trimming whitespace
  214. trimLeft = /^\s+/,
  215. trimRight = /\s+$/;
  216. // IE doesn‘t match non-breaking spaces with \s
  217. if ( rnotwhite.test( "\xA0" ) ) {
  218. trimLeft = /^[\s\xA0]+/;
  219. trimRight = /[\s\xA0]+$/;
  220. }
  221. return text.toString().replace( trimLeft, "" ).replace( trimRight, "" );
  222. }
  223. function addClass(elem, className){
  224. var setClass;
  225. if ( elem.nodeType === 1 ) {
  226. if ( !elem.className ) {
  227. elem.className = className;
  228. } else {
  229. setClass = " " + elem.className + " ";
  230. if ( !~setClass.indexOf( " " + className + " " ) ) {
  231. setClass += className + " ";
  232. }
  233. elem.className = trim(setClass);
  234. }
  235. }
  236. }
  237. function removeClass(elem, value){
  238. var className;
  239. if ( elem.nodeType === 1 && elem.className ) {
  240. if ( value ) {
  241. className = (" " + elem.className + " ").replace( /[\n\t\r]/g, " " );
  242. className = className.replace(" " + value + " ", " ");
  243. elem.className = trim( className );
  244. } else {
  245. elem.className = "";
  246. }
  247. }
  248. }
  249. function keyDown(e){
  250. if(!snake || !snake.isAlive) {
  251. return;
  252. }
  253. e=e||window.event;
  254. var keyCode = e.keyCode||e.which||e.charCode;
  255. switch(keyCode){
  256. case 37://左
  257. snake.turnLeft();
  258. break;
  259. case 38://上
  260. snake.turnUp();
  261. break;
  262. case 39://右
  263. snake.turnRight();
  264. break;
  265. case 40://下
  266. snake.turnDown();
  267. break;
  268. case 80://p 暂停or开始
  269. case 229:
  270. if(snake.auto){
  271. snake.pause();
  272. }else{
  273. snake.autoWalk();
  274. }
  275. break;
  276. }
  277. }
  278. if(document.attachEvent){
  279. document.attachEvent(‘onkeydown‘, keyDown);
  280. }else if(document.addEventListener){
  281. document.addEventListener(‘keydown‘, keyDown, false);
  282. }
  283. </script>
  284. <style>
  285. div{
  286. margin: 20px auto;
  287. }
  288. .target{
  289. display:block;
  290. width: 400px;
  291. height: 320px;
  292. border: 1px solid black;
  293. overflow: hidden;
  294. }
  295. .blocks{
  296. display:block;
  297. width: 18px;
  298. height: 18px;
  299. border: 1px dotted #ddd;
  300. float:left;
  301. }
  302. .snake-body{
  303. background-color: #111;
  304. border-style: solid;
  305. }
  306. </style>
  307. </head>
  308. <body>
  309. <h1>Snake</h1>
  310. <div id=‘t‘></div>
  311. <div>
  312. 操作提示：按上下左右键操作，按 P 键暂停或继续
  313. </div>
  314. <script>
  315. var canvas = new SnakeCanvas( document.getElementById(‘t‘) );
  316. var snake = new Snake( canvas );
  317. snake.onDie = function(){
  318. alert(‘game over‘);
  319. };
  320. snake.onEat = function(){
  321. snake.canvas.createFood();
  322. };
  323. snake.init(3);
  324. snake.autoWalk();
  325. // snake.pause();
  326. </script>
  327. </html>
时间： 2024-10-09 01:08:10

用Js写的贪吃蛇游戏的相关文章

原生js写的贪吃蛇网页版游戏

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>原生js写的贪吃蛇网页版游戏</title> </head> <body><div><A href="http://www.999jiujiu.com/">h

用JS实现的贪吃蛇游戏

需要用到html.css.javascript 和 DOM 这些知识点就可以了.主要是js,其他只是一些基本的知识.js貌似也不是很难.但是问题就在这里,即使知识点都会了,但是还是无法综合运用把东西做出来 游戏界面 先把整个游戏界面做出来: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>贪吃蛇</title&

JS贪吃蛇游戏

<!DOCTYPE html><html> <head>    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <title>JS贪吃蛇游戏</title>    <style>    * {        margin: 0;    

手起刀落-一起来写经典的贪吃蛇游戏

回味 小时候玩的经典贪吃蛇游戏我们印象仍然深刻,谋划了几天,小时候喜欢玩的游戏,长大了终于有能力把他做出来(从来都没有通关过,不知道自己写的程序,是不是能通关了...),好了,闲话不多谈,先来看一下效果吧!! 功能和小时候玩的贪吃蛇一样, 1.选择速度 slow normal fast 2.选择是否有墙作为障碍物 on off 看完效果就先附上地址喽:大山深处修炼的小龙虾,欢迎fork. 结构分解 如果构建一个简单的经典贪吃蛇游戏呢?我们根据面板可以分解出如下结构: 因为其他面板比较简单,我们重

JavaScript与html5写的贪吃蛇完整代码

JavaScript与html5写的贪吃蛇完整代码 查看运行效果可访问http://www.codesocang.com/texiao/youxitexiao/2014/0402/7045.html# <!doctype html><html lang="en"><head><meta charset="utf-8"><title>js网页版的贪吃蛇游戏</title><style typ

WebGL实现HTML5的3D贪吃蛇游戏

js1k.com收集了小于1k的javascript小例子,里面有很多很炫很酷的游戏和特效,今年规则又增加了新花样,传统的classic类型基础上又增加了WebGL类型,以及允许增加到2K的++类型,多次想尝试提交个小游戏但总无法写出让自己满意还能控制在这么小的字节范围. 自己写不出来,站在巨人肩膀总是有机会吧,想起<基于HTML5的电信网管3D机房监控应用>这篇提到的threejs,babylonjs和Hightopo的几种基于WebGL的3D引擎,突然想挑战下自己实现个100行JS的3D小

Qt版贪吃蛇游戏

Qt版贪吃蛇游戏 转载请标明出处:牟尼的专栏 http://blog.csdn.net/u012027907 最近在学习Qt,用了一个多月的时间掌握了Qt中最基本的知识,也完成了<Qt版音乐播放器>.<Qt版贪吃蛇游戏>.<Qt版双人俄罗斯方块>以及<Qt版科学计算器>等,之前在VC下写过这些程序,所以在Qt下只是改变了显示等语句,我写过<C++版贪吃蛇游戏>.<VC版贪吃蛇游戏>,当时将与显示等无关的东西封装起来,在Qt下直接用,只

基于控制台实现贪吃蛇游戏

1).引言 学习编程,我个人觉得最好的办法就是根据自己的水平不断的给自己设定一个小目标.而这个小目标就是一个有意思的项目,通过完成这个项目,对自己的成果(也包括失败的)进行分析总结,从中提炼出对应的技术并分享出来,不断的往复,如此,为的就是让我们永远保持编写程序的兴趣和热情,完了,还提高我们的技术.而本文就是总结自己的一个小目标(基于控制台实现的贪吃蛇游戏而写的总结) 2).技术实现 大家小时候一定玩过贪吃蛇的游戏.贪吃蛇游戏的控制过程其实也不复杂.简单的可以概括为以下4个部分. 1.1  .组

做一个简单的贪吃蛇游戏

这是一个贪吃蛇游戏,你可以忽略他的外表,好了,先上html代码 <style type="text/css"> * {margin: 0;padding: 0;} #container {width: 1000px;height: 550px;border: 1px solid #000;margin: 0 auto;} #container #ground {width: 1000px;height: 500px;background-color:#eeeeee;posi