欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

js面向对象案例 贪吃蛇

程序员文章站 2022-03-24 11:45:43
食物对象 工具对象 snake对象 游戏对象 main HTML CSS ......

  食物对象

 1 (function () {
 2     //map:所在的父盒子,obj自身的一些属都具有默认值
 3     function food(map, obj) {  
 4         obj = obj || {};   //没有则使用默认值      
 5         this.width = obj.width || 20;
 6         this.height = obj.height || 20;
 7         this.top = obj.top || 0;
 8         this.left = obj.left || 0;
 9         this.backgroundcolor = obj.backgroundcolor || 'green';
10         this.divarr = [];//存储$("div")的数组
11         this.map = map;
12     }
13     //在页面上用div渲染这个食物
14     food.prototype.render = function () {
15         this.divarr.push($('<div></div>'));
16         this.divarr[this.divarr.length - 1].css({
17             'width': this.width,
18             'height': this.height,
19             'position': 'absolute',
20             'backgroundcolor': this.backgroundcolor,
21         }).appendto(this.map);
22     }
23     //随机生成食物的位置,必须传入snake对象作为参数
24     food.prototype.random = function (snake) {
25         var maxx = this.map.width() / this.width - 1;//地图的最大坐标 20px一格
26         var maxy = this.map.height() / this.height - 1;
27         var x = tools.getrandom(0, maxx); //随机生成x坐标和y坐标 工具对象的方法(在下面贴出 有点画蛇添足)
28         var y = tools.getrandom(0, maxy);
29         //遍历蛇对象的节点,如果随机生成的食物坐标与蛇节点重叠再次随机食物坐标
30         for (var i = 0; i < snake.snakenode.length; i++) {
31             if (x == snake.snakenode[i].left && y == snake.snakenode[i].top) {
32                 x = tools.getrandom(0, maxx);
33                 y = tools.getrandom(0, maxy);
34                 i = 0;//再次随机食物坐标后,重置i 再次遍历
35             }
36         }
37         this.left = x;
38         this.top = y;
39         //在页面上改变食物的left,top
40         this.divarr[this.divarr.length - 1].css({ 
41             'left': this.left * this.width,
42             'top': this.top * this.height
43         });
44     }
45     window.food = food;
46 })()

  工具对象

1 (function(){
2     var tools = {
3         getrandom:function(min,max){
4             return math.floor(math.random()*(max - min +1)+min);
5         }
6     }
7     window.tools = tools;
8 })()

     snake对象

  1 (function () {
  2      //map:所在的父盒子,obj自身的一些属都具有默认值
  3     function snake(map, obj) {
  4         obj = obj || {}; //没有则使用默认值      
  5         this.width = obj.width || 20;
  6         this.height = obj.height || 20;
  7         this.divarr = []; //存储组成蛇的div盒子
  8         this.map = map;
  9         this.directioncode = obj.directioncode || 39;
 10         this.snakenode = [{ //初始蛇的节点
 11             left: 2,
 12             top: 4,
 13             background: 'red'
 14         }, {
 15             left: 1,
 16             top: 4,
 17             background: 'blue'
 18         }, {
 19             left: 0,
 20             top: 4,
 21             background: 'blue'
 22         }]
 23     }
 24     //在页面上用div渲染蛇
 25     snake.prototype.render = function () {
 26         //遍历蛇的节点(snakenode)
 27         for (var i = 0, len = this.snakenode.length; i < len; i++) {
 28             this.divarr.push($('<div></div>'));//生成div,将div记录在蛇的divarr中
 29             this.divarr[this.divarr.length - 1].css({
 30                 'width': this.width,
 31                 'height': this.height,
 32                 'position': 'absolute',
 33                 'left': this.snakenode[i].left * this.width,
 34                 'top': this.snakenode[i].top * this.height,
 35                 'backgroundcolor': this.snakenode[i].background
 36             }).appendto(this.map);
 37         }
 38     }
 39     //根据蛇的方向(directioncode)改变蛇的节点(snakenode)的坐标
 40     //思路是蛇最后的节点移动到前一个节点位置,直到蛇头根据方向移动一格
 41     //37 38 39 40 是上下左右的按键码,65 68 83 87 是wasd的键码
 42     //需要参数 定时器的标记(在游戏对象中生成)
 43     snake.prototype.move = function (timgerid) {
 44         //蛇身体
 45         for (var i = this.snakenode.length - 1; i > 0; i--) {
 46             this.snakenode[i].left = this.snakenode[i - 1].left;
 47             this.snakenode[i].top = this.snakenode[i - 1].top;
 48         }
 49         //蛇头
 50         switch (this.directioncode) {
 51             case 39:
 52                 this.snakenode[0].left += 1;
 53                 break;
 54             case 37:
 55                 this.snakenode[0].left -= 1;
 56                 break;
 57             case 38:
 58                 this.snakenode[0].top -= 1;
 59                 break;
 60             case 40:
 61                 this.snakenode[0].top += 1;
 62                 break;
 63             case 68:
 64                 this.snakenode[0].left += 1;
 65                 break;
 66             case 65:
 67                 this.snakenode[0].left -= 1;
 68                 break;
 69             case 87:
 70                 this.snakenode[0].top -= 1;
 71                 break;
 72             case 83:
 73                 this.snakenode[0].top += 1;
 74                 break;
 75             default:
 76                 break;
 77         }
 78         //获取地图的最大坐标,如果蛇头的坐标越界则提示游戏结束
 79         var maxx = this.map.width() / this.width;
 80         var maxy = this.map.height() / this.height;
 81         var snakeheadx = this.snakenode[0].left;
 82         var snakeheady = this.snakenode[0].top;
 83         if (snakeheadx < 0 || snakeheadx >= maxx || snakeheady < 0 || snakeheady >= maxy) {
 84             clearinterval(timgerid);//清除定时器,游戏结束
 85             alert('game over');
 86         }
 87 
 88     }
 89     //根据蛇的节点(snakenode)改变存储在divarr中的div的坐标
 90     //感觉删除div 重新生成div 可能会消耗浏览器性能
 91     snake.prototype.change = function () {
 92         for (var i = 0, len = this.divarr.length; i < len; i++) {
 93             this.divarr[i].css({
 94                 'left': this.snakenode[i].left * this.width,
 95                 'top': this.snakenode[i].top * this.height,
 96                 'backgroundcolor': this.snakenode[i].background
 97             })
 98         }
 99     }
100     //snake的eat方法,需要参数 食物对象 定时器的标记
101     snake.prototype.eat = function (food, timgerid) {
102         //判断蛇头与食物坐标是否重合
103         var a = this.snakenode[0].left == food.left;
104         var b = this.snakenode[0].top == food.top;
105         //判断蛇头与蛇身坐标是否重合
106         for (var i = this.snakenode.length - 1; i > 0; i--) {
107             var c = this.snakenode[0].left == this.snakenode[i].left;
108             var d = this.snakenode[0].top == this.snakenode[i].top;
109             if (c && d) {//蛇吃到自己了
110                 clearinterval(timgerid);
111                 alert('game over');
112             }
113         }
114          //当蛇头与食物坐标重合
115         if (a && b) {
116             //food.divarr[food.divarr.length - 1]代表最新生成的食物div
117             //将这个div记录在蛇的divarr中,在蛇节点(snakenode)中追加一个与之对应的节点
118             //在蛇移动时 改变节点坐标,然后根据节点坐标 改变这个div的坐标
119             this.divarr.push(food.divarr[food.divarr.length - 1]);
120             this.snakenode.push({
121                 background: 'blue',
122                 left: 0,
123                 top: 0
124             });
125             food.render(); //重新生成食物
126             food.random(this);//随机坐标
127         }
128     }
129     window.snake = snake;
130 })();

  游戏对象

 1 (function () {
 2     var that; //存储生成的游戏对象,因为定时器中的this指向window
 3     var kcode = 39; //默认值与蛇的方向相同,存储临时方向按键码,因为在蛇移动之前时方向键可以被按多次
 4     function game(map) {
 5         this.map = map;
 6         this.snake = new snake(this.map); //生成snake(蛇)对象
 7         this.food = new food(this.map);//生成food(食物)对象
 8         that = this; //记录自己
 9         this.timgerid = null; //记录定时器(让蛇移动的定时器)
10     }
11     //通过原型添加一个开始的方法
12     game.prototype.star = function () {
13         this.food.render(); //生成(渲染)食物
14         this.food.random(this.snake);//随机食物的坐标,参数为snake对象,防止食物在蛇节点(snakenode)上
15         this.snake.render();//生成(渲染)蛇
16         kdown(); //开启(onkeydown),记录用户的所按的键码
17         runsnake(); //开启定时器,使蛇移动
18     }
19 
20     function kdown() {
21         $(window).on('keydown', function (e) {
22             kcode = e.keycode;//记录用户的所按的键码
23         })
24     }
25     //一个函数,参数 code 临时按键码,用来判断蛇的方向,让蛇无法掉头(方向不能直接从上变下)
26     function changingdirectionsuddenly(code) {
27         var b = code == 37 || code == 38 || code == 39 || code == 40 || code == 68 || code == 65 || code == 87 || code == 83;
28         if (b) {
29             if ((that.snake.directioncode === 39 || that.snake.directioncode == 68) && code !== 37 && code !== 65) {
30                 that.snake.directioncode = code;
31             }
32             if ((that.snake.directioncode === 37 || that.snake.directioncode == 65) && code !== 39 && code !== 68) {
33                 that.snake.directioncode = code;
34             }
35             if ((that.snake.directioncode === 38 || that.snake.directioncode == 87) && code !== 40 && code !== 83) {
36                 that.snake.directioncode = code;
37             }
38             if ((that.snake.directioncode === 40 || that.snake.directioncode == 83) && code !== 38 && code !== 87) {
39                 that.snake.directioncode = code;
40             }
41         }
42         return that.snake.directioncode;
43     }
44     //蛇移动
45     function runsnake() {
46         //记录定时器,开启定时器让蛇连续移动
47         that.timgerid = setinterval(function () {
48             //在蛇移动时判断方向。
49             // 如果在用户按下时判断方向,会导致连续按键使蛇掉头(先按左再按下,表现为掉头)
50             changingdirectionsuddenly(kcode); 
51             // that.snake.eat(that.food, that.timgerid);//调用蛇的eat方法判断蛇是否吃到啥
52             // //先吃还是先移动呢?好像没啥区别
53             that.snake.move(that.timgerid);//调用蛇的move方法移动蛇节点一个
54             that.snake.change();//调用蛇的change方法改变构成蛇的div的坐标
55             that.snake.eat(that.food, that.timgerid);
56         }, 300)
57     }
58 
59     window.game = game;
60 })()

   main

1 (function () {
2     var game = new game($('#box'));
3     game.star();
4 })();

   html

 1 <!doctype html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="utf-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="x-ua-compatible" content="ie=edge">
 8     <title>document</title>
 9     <link rel="stylesheet" href="css/style.css">
10 </head>
11 
12 <body>
13     <div id="box">
14     </div>
15 </body>
16 <script src="js/jquery-1.12.2.js"></script>
17 <script src="js/tools.js"></script>
18 <script src="js/food.js"></script>
19 <script src="js/snake.js"></script>
20 <script src="js/game.js"></script>
21 <script src="js/main.js"></script>
22 
23 </html>

  css

 

1 #box{
2     width: 200px;
3     height: 160px;
4     margin: 0 auto;
5     background-image: url(../images/ditu.jpg);//一个正方形图片,没有也不影响
6     /* background-color: #3c3c3c; */
7     position: relative;
8     overflow: hidden;
9 }