设为首页收藏本站
开启辅助访问

在路上

 找回密码
 立即注册
在路上 › 站点首页 ›学习 › 查看内容

简陋的贪吃蛇

2016-12-20 13:14| 发布者: zhangjf| 查看: 424| 评论: 0

摘要: 这是一个使用html，javascript实现的简陋的贪吃蛇程序 !DOCTYPE htmlhtmlheadmeta charset=UTF-8title贪吃蛇/titlemeta name=viewport content=width=device-width, initial-s ...
这是一个使用html，javascript实现的简陋的贪吃蛇程序
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>贪吃蛇</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <style type="text/css">
  8. html,body{
  9. margin:0;
  10. padding: 0;
  11. width:100%;
  12. height:100%;
  13. background-color: #3f3f3f;
  14. }
  15. canvas{
  16. position:relative;
  17. left:50%;
  18. top:50%;
  19. margin-left:-300px;
  20. margin-top:-300px;
  21. border:1px solid #000;
  22. background-color: #f0f0f0;
  23. }
  24. </style>
  25. </head>
  26. <body>
  27. <canvas id="gameCanvas" width="600" height="600"></canvas>
  28. <script type="text/javascript" src="./js/main.js"></script>
  29. </body>
  30. </html>
复制代码
  1. (function(context){
  3. //game config
  4. var config={
  5. width:600,
  6. height:600,
  7. unit:10
  8. };
  10. //game snake
  11. var snake={
  12. body:[],
  13. v:1,
  14. direction:"left",
  16. init:function(){
  17. this.body.push({x:config.width/config.unit/2,y:config.height/config.unit/2});
  18. },
  19. draw:function(){
  20. context.save();
  21. for(var i=0;i<this.body.length;i++){
  22. context.fillRect(this.body[i].x*config.unit,this.body[i].y*config.unit,config.unit,config.unit);
  23. }
  24. context.restore();
  25. },
  26. move:function(direction){
  27. if(this.direction=="left"&&direction=="right") return;
  28. if(this.direction=="up"&&direction=="down") return;
  29. if(this.direction=="right"&&direction=="left") return;
  30. if(this.direction=="down"&&direction=="up") return;
  32. this.direction=direction||this.direction;
  34. var nextX=this.body[0].x;
  35. var nextY=this.body[0].y;
  36. if("left"==this.direction){
  37. nextX-=this.v;
  38. }else if("up"==this.direction){
  39. nextY-=this.v;
  40. }else if("right"==this.direction){
  41. nextX+=this.v;
  42. }else if("down"==this.direction){
  43. nextY+=this.v;
  44. }
  46. this.body.pop(),
  47. this.body.unshift({x:nextX,y:nextY});
  48. },
  49. eatFood:function(food){
  50. this.body.push({x:food.x,y:food.y});
  51. environment.destroyFood(food);
  52. }
  53. };
  55. var environment={
  56. currEntifyId:0,
  57. entity:[],
  59. init:function(){
  61. },
  62. nextEntifyId:function(){
  63. return this.currEntifyId++;
  64. },
  65. createFood:function(){
  66. this.entity.push({id:this.nextEntifyId(),x:parseInt(Math.random()*(config.width/config.unit)), y:parseInt(Math.random()*(config.height/config.unit)), type:"food"});
  67. },
  68. destroyFood:function(food){
  69. var newEntify=[];
  70. for(var i=0;i<this.entity.length;i++){
  71. if(this.entity[i].id==food.id) continue;
  72. newEntify.push(this.entity[i]);
  73. }
  74. this.entity=newEntify;
  75. },
  76. draw:function(){
  78. context.save();
  79. var hasFood=false;
  80. for(var i=0;i<this.entity.length;i++){
  81. if(this.entity[i].type=="food"){
  82. hasFood=true;
  83. context.fillRect(this.entity[i].x*config.unit,this.entity[i].y*config.unit,config.unit,config.unit);
  84. }
  85. }
  86. context.restore();
  88. if(!hasFood) this.createFood();
  89. }
  90. };
  92. //game event manager
  93. var gameEvent={
  94. onSnakeEatFood:function(snake,food){
  95. snake.eatFood(food);
  96. },
  97. onSnakeAgainstWall:function(){
  98. alert("game over!!!");
  99. },
  100. onSnakeEatSelf:function(){
  101. alert("game over!!!");
  102. }
  103. };
  105. //keybord event
  106. document.onkeydown=function(event){
  107. var key=event.keyCode;
  108. if(key==37){ //left
  109. snake.move("left");
  110. }else if(key==38){ //up
  111. snake.move("up");
  112. }else if(key==39){ //right
  113. snake.move("right");
  114. }else if(key==40){ //down
  115. snake.move("down");
  116. }
  117. };
  119. //init game
  120. environment.init();
  121. snake.init();
  123. //main game loop
  124. var currentFrame=0;
  125. (function gameLoop(){
  127. if(currentFrame%10==0){
  128. //clear canvas
  129. context.clearRect(0,0,config.width,config.height);
  131. //check event
  132. if(snake.body[0].x<=0||snake.body[0].y<=0||
  133. snake.body[0].x>=config.width/config.unit||snake.body[0].y>=config.height/config.unit){
  134. gameEvent.onSnakeAgainstWall();
  135. }
  136. for(var i=1;i<snake.body.length;i++){
  137. var dX2=Math.pow(snake.body[0].x-snake.body[i].x,2);
  138. var dY2=Math.pow(snake.body[0].y-snake.body[i].y,2);
  139. if((dX2+dY2)==0){
  140. gameEvent.onSnakeEatSelf();
  141. }
  142. }
  143. for(var i=0;i<environment.entity.length;i++){
  144. var entifyX=environment.entity[i].x;
  145. var entifyY=environment.entity[i].y;
  146. var entifyType=environment.entity[i].type;
  148. var dX2=Math.pow((snake.body[0].x-entifyX),2);
  149. var dY2=Math.pow((snake.body[0].y-entifyY),2);
  151. if((dX2+dY2)==0){
  152. gameEvent.onSnakeEatFood(snake,environment.entity[i]);
  153. }
  154. }
  156. //draw stage
  157. environment.draw();
  158. snake.move();
  159. snake.draw();
  160. }
  162. //next frame
  163. currentFrame++;
  164. requestAnimationFrame(gameLoop);
  165. })();
  167. })(document.getElementById("gameCanvas").getContext("2d"));
复制代码
收藏 邀请
上一篇：php随机生成国内ip地址下一篇：无限极分类删除父节点时将父节点的所有子节点删除

最新评论

相关分类

小黑屋|在路上 ( 蜀ICP备15035742号-1 )  

;

GMT+8, 2025-7-8 05:31

Copyright 2015-2025 djqfx

返回顶部