js贪吃蛇-简单版
分享个用原生js写的贪吃蛇,最近在学java,按照当年写的 js的思路,转换成java,换汤不换药
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Language" content="en" /> <meta http-equiv="Content-Type" content="text/html; charset=utf8" /> <title>title</title> <style type="text/css"> table{ border: 1px solid gray; border-collapse:collapse; } td{ width:2px; height:2px; } .red{ background-color:black; } .black{ background-color: red; } </style> <script type="text/javascript" > (function(window){ function bind( fn, context ) { if ( typeof context === "string" ) { var tmp = fn[ context ]; context = fn; fn = tmp; } var slice = Array.prototype.slice; // Simulated bind var args = slice.call( arguments, 2 ), proxy = function() { return fn.apply( context, args.concat( slice.call( arguments ) ) ); }; return proxy; } function extend(o1, o2) { for (var i in o2) o1[i] = o2[i]; return o1; } function clog(d){ try{ console.log(d); }catch(e){}; } function each(obj, callback, args) { var name,i = 0, len = obj.length, isObj = len == undefined; if(args){ if(isObj){ for(name in obj){ if(callback.apply(obj[name], args) === false ) break; } }else{ for(;i < len;){ if(callback.apply(obj[i++], args) === false ) break; } } }else{ if(isObj){ for(name in obj){ if(callback.call(obj[name], name, obj[name]) === false ) break; } }else{ for(;i < len;){ if(callback.call(obj[i], i, obj[i++]) === false ) break; } } } } function range(m, n) { var arr = []; for(;m <= n; m++){ arr[m] = m; } return arr; } var css = { hasClass: function(a, b) { return RegExp("\\b" + b + "\\b").test(a.className) }, addClass: function(a, b) { if (!this.hasClass(a, b)) a.className = a.className + " " + b }, removeClass: function(a, b) { a.className = a.className.replace(RegExp("\\b" + b + "\\b"), "") } }; function Snake(conf) { var conf = extend({ x: 0, y: 4, keycode: 39, move_arr: [[0,0,0],[0,1,1],[0,2,2],[0,3,3]], food_arr: [], step: 0, t_size: 40, speed: 100 }, conf); extend(this, conf); this.init(); }; Snake.prototype.init = function() { var self = this, timer, auto = function() { if(self.x >= 0 && self.x < self.t_size && self.y >= 0 && self.y < self.t_size && self.is_moved()){ self.direct_opt(); timer = setTimeout(auto, self.speed); } }; this.last_keycode = this.keycode; this.allow_arr = range(0, this.t_size * this.t_size - 1); this.drawTable(); //按下按键 document.onkeydown = function (e){ var _code = (window.event||e).keyCode; if(self.last_keycode != _code && Math.abs(_code-self.last_keycode) != 2){ self.last_keycode = self.keycode = _code; } clearTimeout(timer); auto(); } var func = bind(this.random_food, this); each(range(0,8), func); this.random_food(); auto(); } Snake.prototype.two2one = function(num, scale) { scale = scale || this.t_size; if(typeof num == 'number'){ return [Math.floor(num/scale), num%scale]; }else{ return num[0] * scale + num[1]; } } Snake.prototype.is_moved = function() { var td = this.table.rows[this.x].cells[this.y] return !css.hasClass(td, 'red'); } Snake.prototype.random_food = function() { var self = this, rand = function(m, n) { return Math.floor(Math.random() * ( n - m + 1) + m); }, in_array = function(val, arr) { var flag = false; for(var i = 0; i < arr.length; i++){ if(arr[i] == val){ flag = true; } } return flag; }, get_no_moved_arr = function() { var tmp_arr = [],moved_arr = self.move_arr, arr = [], f_arr, move_num, moved_str; if(self.food_arr.length > 0) { moved_arr = moved_arr.concat(self.food_arr); } for(var i = 0; i < self.move_arr.length; i++) { tmp_arr.push(self.move_arr[i][2]); } moved_str = ',' + tmp_arr.join(',') + ','; for(var i = 0; i < self.allow_arr.length; i++) { if(moved_str.indexOf(',' + self.allow_arr[i] + ',') === -1) { arr.push(self.allow_arr[i]); } } move_num = arr[rand(0, arr.length - 1)]; f_arr = self.two2one(move_num) self.food_arr.push(f_arr.concat(move_num)); return f_arr; }, no_moded_arr = get_no_moved_arr(); var rand_handler = this.table.rows[no_moded_arr[0]].cells[no_moded_arr[1]]; css.addClass(rand_handler, 'black'); } Snake.prototype.drowSnake = function() { for(var i = 0; i < this.move_arr.length; i++){ var cur = this.move_arr[i], cur_handler = this.table.rows[cur[0]].cells[cur[1]]; if(!css.hasClass(cur_handler, 'red')){ css.addClass(cur_handler, 'red'); } } } Snake.prototype.drawTable = function() { document.body.innerHTML = 'total score: <span id="score">0</span>'; var table = document.createElement('table'); this.table = table; for(var i = 0; i < this.t_size; i++){ var row = table.insertRow(0); for(var j = 0; j < this.t_size; j++){ row.insertCell(0); } } this.score = document.getElementById('score'); document.body.appendChild(table); this.drowSnake(); } Snake.prototype.direct_opt = function() { this.move_arr.push([this.x, this.y, this.two2one([this.x, this.y], this.t_size - 1)]); this.drowSnake(); var next_pos = this.table.rows[this.x].cells[this.y]; if(this.step++ && !css.hasClass(next_pos, 'black')){ var last_pos = this.move_arr.shift(); css.removeClass(this.table.rows[last_pos[0]].cells[last_pos[1]], 'red'); } if(css.hasClass(next_pos, 'black')){ css.removeClass(next_pos, 'black'); this.score.innerHTML = parseInt(this.score.innerHTML) + 10; this.food_arr.shift(); this.random_food(); if(this.speed >80 && (this.move_arr.length - 4) % 10 == 0) { this.speed *= 0.9; } } switch(+this.keycode){ case 37: this.y--; break; case 38: this.x--; break; case 39: this.y++; break; default: this.x++; } } Snake.prototype.drawTable1 = function() { var str = '', tr = []; for(var i = 0; i < this.t_size; i++){ var td = []; for(var j = 0; j < this.t_size; j++){ td.push('<td></td>'); } tr.push('<tr>' + td.join('') + '</tr>'); } str = '<table>' + tr.join('') + '</table>'; document.body.innerHTML = str; } window.Snake = Snake; })(window); window.onload = function() { new Snake(); } </script> </head> <body > </body> </html>
效果