js贪吃蛇游戏笔记

版本0.00 http://jsbin.com/opevow/109   版本0.01http://jsbin.com/opevow/112 添加了加速功能 ,美化了下界面- -   源码https://github.com/jtyjty99999/js-/blob/master/snake.html   自学前端也已经有一段时间了，最近写了个贪吃蛇的游戏，比较简单，却遇到了很多问题，在此记录下来作为参考。 1. 存储this [crayon-50361f9fe94e1/] [crayon-50361f9fe98c7/] [crayon-50361f9fe9cae/] 在以上代码里，实例化了一个object对象。其中对象中this根据作用域链，可以取到外层的函数。 但有时候this会随着对象变化而变化，这时候就需要存储this [crayon-50361f9fea096/] [crayon-50361f9fea47f/] [crayon-50361f9fea867/] [crayon-50361f9feac4f/] 在setInterval过程中,this会指向go，go内部当然不能go了，因此用startthis存储start函数的this。 2.利用匿名函数保存变量。 [crayon-50361f9feb037/] [crayon-50361f9feb431/] [crayon-50361f9feb80e/] [crayon-50361f9febbf1/] [crayon-50361f9febfd7/] 这里head每次循环都会变化，如果不用this.run = setInterval(function () {startthis.go()}, this.step) 每次执行startthis.go()方法会重新读取一次外面的变量head，这样就达不到变化的效果了， 因此用function(){}存储setInterval中函数startthis.go()内的变量。当然也可以用闭包来存储私有变量，之前的文章写过。 [crayon-50361f9fec3c0/] [crayon-50361f9fec7a7/] 这里为啥要“重启”setInterval呢，因为setInterval启动后，就已经确定好了每次循环的步长，即使改变了step的值，也无法生效。 因此“重启”一下，载入新的step即可 4.绘制面板 在游戏里，“背景”还是蛮重要的，之前对table不是很了解（因为大家都鄙视- -）为了研究布局，研究了下table [crayon-50361f9fecb91/] document.getElementById(‘myTable’).rows[0].cells[0]可以取到第一“行”的第一“格” 对应的标签是 行tr>格子td td td 之后绘制面板的方法利用了数组的join，利用空数组把元素组合起来，从内向外先组合td,再组合tr,之后组合进table [crayon-50361f9fecf77/] [crayon-50361f9fed361/] [crayon-50361f9fed752/] [crayon-50361f9fedb34/] [crayon-50361f9fedf17/] [...]

转载于:https://www.cnblogs.com/99f2e/archive/2012/03/10/2653124.html