分享个用原生js写的贪吃蛇,最近在学java,按照当年写的 js的思路,转换成java,换汤不换药

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Language" content="en" />
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf8" />
  6. <title>title</title>
  7. <style type="text/css">
  8. table{
  9.     border: 1px solid gray;
  10.     border-collapse:collapse;
  11. }
  12. td{
  13.     width:2px;
  14.     height:2px;
  15. }
  16. .red{
  17.     background-color:black;
  18. }
  19. .black{
  20.     background-color: red;
  21. }
  22. </style>
  23.  
  24. <script type="text/javascript" >
  25. (function(window){
  26.  
  27.     function bind( fn, context ) {
  28.         if ( typeof context === "string" ) {
  29.             var tmp = fn[ context ];
  30.             context = fn;
  31.             fn = tmp;
  32.         }
  33.  
  34.         var slice = Array.prototype.slice;
  35.  
  36.         // Simulated bind
  37.         var args = slice.call( arguments, 2 ),
  38.             proxy = function() {
  39.                 return fn.apply( context, args.concat( slice.call( arguments ) ) );
  40.             };
  41.  
  42.         return proxy;
  43.     }
  44.  
  45.     function extend(o1, o2) {
  46.         for (var i in o2) o1[i] = o2[i];
  47.         return o1;
  48.     }
  49.  
  50.     function clog(d){
  51.         try{
  52.             console.log(d);
  53.         }catch(e){};
  54.     }
  55.  
  56.     function each(obj, callback, args) {
  57.         var name,i = 0,
  58.             len = obj.length,
  59.             isObj = len == undefined;
  60.         if(args){
  61.             if(isObj){
  62.                 for(name in obj){
  63.                     if(callback.apply(obj[name], args) === false ) break;
  64.                 }
  65.             }else{
  66.                 for(;i < len;){
  67.                     if(callback.apply(obj[i++], args) === false ) break;
  68.                 }
  69.             }
  70.         }else{
  71.             if(isObj){
  72.                 for(name in obj){
  73.                     if(callback.call(obj[name], name, obj[name]) === false ) break;
  74.                 }
  75.             }else{
  76.                 for(;i < len;){
  77.                     if(callback.call(obj[i], i, obj[i++]) === false ) break;
  78.                 }
  79.             }
  80.         }
  81.     }
  82.     function range(m, n) {
  83.         var arr = [];
  84.         for(;m <= n; m++){
  85.             arr[m] = m;
  86.         }
  87.         return arr;
  88.     }
  89.     var css = {
  90.         hasClass: function(a, b) {
  91.             return RegExp("\\b" + b + "\\b").test(a.className)
  92.         },
  93.         addClass: function(a, b) {
  94.             if (!this.hasClass(a, b)) a.className = a.className + " " + b
  95.         },
  96.         removeClass: function(a, b) {
  97.             a.className = a.className.replace(RegExp("\\b" + b + "\\b"), "")
  98.         }
  99.     };
  100.     function Snake(conf) {
  101.         var conf = extend({
  102.             x: 0,
  103.             y: 4,
  104.             keycode: 39,
  105.             move_arr: [[0,0,0],[0,1,1],[0,2,2],[0,3,3]],
  106.             food_arr: [],
  107.             step: 0,
  108.             t_size: 40,
  109.             speed: 100
  110.         }, conf);
  111.         extend(this, conf);
  112.         this.init();
  113.     };
  114.     Snake.prototype.init = function() {
  115.         var self = this, timer,
  116.             auto = function() {
  117.                 if(self.x >= 0 && self.x < self.t_size && self.y >= 0 && self.y < self.t_size && self.is_moved()){
  118.                     self.direct_opt();
  119.                     timer = setTimeout(auto, self.speed);
  120.                 }
  121.             };
  122.         this.last_keycode = this.keycode;
  123.         this.allow_arr = range(0, this.t_size * this.t_size - 1);
  124.         this.drawTable();
  125.         //按下按键
  126.         document.onkeydown = function (e){
  127.             var _code  = (window.event||e).keyCode;
  128.             if(self.last_keycode != _code && Math.abs(_code-self.last_keycode) != 2){
  129.                 self.last_keycode = self.keycode = _code;
  130.             }
  131.             clearTimeout(timer);
  132.             auto();
  133.         }
  134.  
  135.         var func = bind(this.random_food, this);
  136.         each(range(0,8), func);
  137.         this.random_food();
  138.         auto();
  139.     }
  140.     Snake.prototype.two2one = function(num, scale) {
  141.         scale = scale || this.t_size;
  142.         if(typeof num == 'number'){
  143.             return [Math.floor(num/scale), num%scale];
  144.         }else{
  145.             return num[0] * scale + num[1];
  146.         }
  147.     }
  148.     Snake.prototype.is_moved = function() {
  149.         var td = this.table.rows[this.x].cells[this.y]
  150.         return !css.hasClass(td, 'red');
  151.     }
  152.     Snake.prototype.random_food = function() {
  153.         var self = this,
  154.             rand = function(m, n) {
  155.                 return Math.floor(Math.random() * ( n - m + 1) + m);
  156.             },
  157.             in_array = function(val, arr) {
  158.                 var flag = false;
  159.                 for(var i = 0; i < arr.length; i++){
  160.                     if(arr[i] == val){
  161.                         flag = true;
  162.                     }
  163.                 }
  164.                 return flag;
  165.             },
  166.             get_no_moved_arr = function() {
  167.                 var tmp_arr = [],moved_arr = self.move_arr,
  168.                     arr = [], f_arr, move_num, moved_str;
  169.                 if(self.food_arr.length > 0) {
  170.                     moved_arr = moved_arr.concat(self.food_arr);
  171.                 }
  172.                 for(var i = 0; i < self.move_arr.length; i++) {
  173.                     tmp_arr.push(self.move_arr[i][2]);
  174.                 }
  175.                 moved_str = ',' + tmp_arr.join(',') + ',';
  176.                 for(var i = 0; i < self.allow_arr.length; i++) {
  177.                     if(moved_str.indexOf(',' + self.allow_arr[i] + ',') === -1) {
  178.                         arr.push(self.allow_arr[i]);
  179.                     }
  180.                 }
  181.                 move_num = arr[rand(0, arr.length - 1)];
  182.                 f_arr  = self.two2one(move_num)
  183.                 self.food_arr.push(f_arr.concat(move_num));
  184.                 return f_arr;
  185.             },
  186.             no_moded_arr = get_no_moved_arr();
  187.         var rand_handler = this.table.rows[no_moded_arr[0]].cells[no_moded_arr[1]];
  188.         css.addClass(rand_handler, 'black');
  189.     }
  190.     Snake.prototype.drowSnake = function() {
  191.          for(var i = 0; i < this.move_arr.length; i++){
  192.             var cur = this.move_arr[i],
  193.                 cur_handler = this.table.rows[cur[0]].cells[cur[1]];
  194.             if(!css.hasClass(cur_handler, 'red')){
  195.                 css.addClass(cur_handler, 'red');
  196.             }
  197.         }
  198.     }
  199.     Snake.prototype.drawTable = function() {
  200.         document.body.innerHTML = 'total score: <span id="score">0</span>';
  201.         var table = document.createElement('table');
  202.         this.table = table;
  203.         for(var i = 0; i < this.t_size; i++){
  204.             var row = table.insertRow(0);
  205.             for(var j = 0; j < this.t_size; j++){
  206.                 row.insertCell(0);
  207.             }
  208.         }
  209.         this.score = document.getElementById('score');
  210.         document.body.appendChild(table);
  211.  
  212.         this.drowSnake();
  213.     }
  214.     Snake.prototype.direct_opt = function() {
  215.         this.move_arr.push([this.x, this.y, this.two2one([this.x, this.y], this.t_size - 1)]);
  216.         this.drowSnake();
  217.         var next_pos = this.table.rows[this.x].cells[this.y];
  218.         if(this.step++ && !css.hasClass(next_pos, 'black')){
  219.             var last_pos = this.move_arr.shift();
  220.             css.removeClass(this.table.rows[last_pos[0]].cells[last_pos[1]], 'red');
  221.         }
  222.         if(css.hasClass(next_pos, 'black')){
  223.             css.removeClass(next_pos, 'black');
  224.             this.score.innerHTML = parseInt(this.score.innerHTML) + 10;
  225.             this.food_arr.shift();
  226.             this.random_food();
  227.  
  228.             if(this.speed >80 && (this.move_arr.length - 4) % 10 == 0) {
  229.                  this.speed *= 0.9;
  230.             }
  231.         }
  232.         switch(+this.keycode){
  233.             case 37:
  234.                 this.y--;
  235.                 break;
  236.             case 38:
  237.                 this.x--;
  238.                 break;
  239.             case 39:
  240.                 this.y++;
  241.                 break;
  242.             default:
  243.                 this.x++;
  244.         }
  245.     }
  246.     Snake.prototype.drawTable1 = function() {
  247.         var str = '',
  248.             tr = [];
  249.         for(var i = 0; i < this.t_size; i++){
  250.             var td = [];
  251.             for(var j = 0; j < this.t_size; j++){
  252.                 td.push('<td></td>');
  253.             }
  254.             tr.push('<tr>' + td.join('') + '</tr>');
  255.         }
  256.         str = '<table>' + tr.join('') + '</table>';
  257.         document.body.innerHTML = str;
  258.     }
  259.     window.Snake = Snake;
  260. })(window);
  261.     window.onload = function() {
  262.         new Snake();
  263.     }
  264. </script>
  265. </head>
  266. <body >
  267. </body>
  268. </html>
  269.

效果

js贪吃蛇-简单版的更多相关文章

  1. 原生js写的贪吃蛇网页版游戏特效

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <bo ...

  2. 原生Js贪吃蛇游戏实战开发笔记

    前言 本课程是通过JavaScript结合WebAPI DOM实现的一版网页游戏---贪吃蛇的开发全过程,采用面向以象的思想设计开发.通过这个小游戏的开发, 不仅可以掌握JS的语法的应用,还可以学会D ...

  3. JS贪吃蛇游戏

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  4. c/c++ 贪吃蛇控制台版

    贪吃蛇控制台版(操作系统win7 64位:编译环境gcc, vs2017通过,其它环境未测试 不保证一定通过) 运行效果: #include <iomanip> #include < ...

  5. JS贪吃蛇小游戏

    效果图展示: 具体实现代码如下: (1)html部分 !DOCTYPE html> <html> <head> <meta charset="utf-8& ...

  6. js贪吃蛇（构造函数）

    给大家分享一下这几天我研究的一个贪吃蛇,挺简单的,但是实现起来其实有点绕的,我给大家附上完整代码,一起分析学习一下,主要用的是构造函数. 思想: .设计蛇:属性有宽.高.方向.状态(有多少节),方法: ...

  7. HTML5+CSS+JS 贪吃蛇demo

    我写博客的主要目的就是温习所学的知识,自己以前写的游戏当然不能放过! 这款网页版贪吃蛇是大一下册学习网页前端时老师教我们写的,由于那个时候初学网页前端,所以这款游戏是纯原生Java Script写的, ...

  8. Java经典小游戏——贪吃蛇简单实现（附源码）

    一.使用知识 Jframe GUI 双向链表 线程 二.使用工具 IntelliJ IDEA jdk 1.8 三.开发过程 3.1素材准备 首先在开发之前应该准备一些素材,已备用,我主要找了一个图片以 ...

  9. js贪吃蛇源码

    1.注意,自己引入jquery,这个demo基于jquery的,我的jquery是写的本地的 2.没有写注释,看不懂的再问我吧, <!DOCTYPE html><html> & ...

随机推荐

  1. 21.Linux-写USB键盘驱动(详解)

    本节目的: 根据上节写的USB鼠标驱动,来依葫芦画瓢写出键盘驱动 1.首先我们通过上节的代码中修改,来打印下键盘驱动的数据到底是怎样的 先来回忆下,我们之前写的鼠标驱动的id_table是这样: 所以 ...

  2. cors解决ajax请求跨域问题

    Access-Control-Allow-Origin: * 适用tomcat部署的项目 在web.xml里添加以下内容 <filter> <filter-name>CorsF ...

  3. Python tkinter调整元件在窗口中的位置与几何布局管理

    Tkinter中的GUI总是有一个root窗口,不管你是主动或者别动获得.主窗口就是你的程序开始运行的时候创建的,在主窗口中你通常是放置了你主要的部件.另外,Tkinter脚本可以依据需要创建很多独立 ...

  4. 有人提了一个问题：一定要RESTful吗？

    写在前面的话 这个问题看起来就显得有些萌,或者说类似的问题都有些不靠谱,世上哪有那么多一定的事情,做开发都不一定做多久呢,所以说如果你有这个疑问的话是真真有点儿不着调,不过可能也就是随口一问吧,没有深 ...

  5. vs2012中使用localdb实例还原一个sql server 2008r2版本的数据库

    use localdb sometime is easy than sql server ,and always use visual studio make you stupid. vs2012中还 ...

  6. YYHS-NOIP模拟赛-gcd

    题解 这道题题解里说用莫比乌斯反演做(我这个蒟蒻怎么会做呢) 但是不会,所以我们另想方法,这里我们用容斥来做 我们先把500000以内的所有质数筛出来 每次读入编号的时候,先把编号对应的这个数分解质因 ...

  7. CMake必知必会

    CMake 文档 https://cmake.org/cmake/help/v3.7/index.html 需要阅读的文档 item note link cmake-buildsystem(7) cm ...

  8. mysql5.7在windows不能启动的方法及查看数据库大小命令

    1.将mysql目录下的my-default.ini改为my.ini 2.cmd进入mysql的bin目录下 3.执行mysqld --initialize进行初始化(如果mysql目录下已经存在da ...

  9. MySQL锁类型以及子查询锁表问题、解锁

    MySQL中select * for update锁表的范围 MySQL中select * for update锁表的问题 由于InnoDB预设是Row-Level Lock,所以只有「明确」的指定主 ...

  10. java的windows自动化-自动运行java程序

    那么在一些工具齐全并且已经有了一定的写好的java程序的情况下(环境变量和软件见上一章http://www.cnblogs.com/xuezhezlr/p/7718273.html),如何自动化运行j ...