Joshua_yi
Joshua_yi

贪吃蛇，HTML+CSS+JS实现


效果图:

贪吃蛇，HTML+CSS+JS实现_第1张图片

实现过程

  • 搭建基本HTML，CSS框架
  • JS实现核心游戏过程
    • canvas画布上绘制地图、小蛇、食物
    • 食物随机生成，不能生成在小蛇身上
    • 键盘控制小蛇移动
    • 小蛇成长
    • 小蛇撞墙
  • setInterval添加计时器
  • 添加button事件

[注]：WSAD分别控制上下左右

源代码


index.html


<html>
<head>
<title>贪吃蛇title>
<style type='text/css'>
    *{margin:0;}
	.map{margin:20px auto;
		height:600px;
		width:900px;
		background:gray;
		border:10px solid #AFAEB2;
		border-radius:8px;
	}
    #timeBox{
        background-color: indigo;
        height: 45px;
        width: 500px;
        border:10px solid #AFAEB2;
        border-radius:8px;
        margin:20px auto;
        padding-top: 4px;
        font-size: 45px;
        color:white;
    }
    .btn{
         margin-left: 500px;
    }
style>
<script src="./index.js">script>
head>
<body>
    <p>
        

            <span id="id_H">00span>:
            <span id="id_M">00span>:
            <span id="id_S">00span>
            div>
        <div class="btn">
            
            
            
            
            
            
        div>
    p>

    <p>
        <div class="map">
            <canvas id="canvas" height="600" width="900">canvas>
        div>
    p>
   
body>
html>

index.js

window.onload = function(){
    // 简化操作
    function $(id){
        return document.getElementById(id);
    }
	var c=$("canvas");
    var ctx=c.getContext("2d");
    //定义一条蛇
    var snake =[];
    //初始化蛇的长度
    var snakeCount = 6;
    //food 
	var foodx =0;
	var foody =0;
    //snack move speed
    var moveSpeed = 150;  
    // direction
    var togo =0;

    // draw map
    function drawtable()
    {
        // draw Vertical line
        for(var i=0;i<60;i++)//画竖线
        {
        ctx.strokeStyle="black";
        ctx.beginPath();
        ctx.moveTo(15*i,0);
        ctx.lineTo(15*i,600);
        ctx.closePath();
        ctx.stroke();
        }
        // draw Horizontal line
        for(var j=0;j<40;j++)
        {
        ctx.strokeStyle="black";
        ctx.beginPath();
        ctx.moveTo(0,15*j);
        ctx.lineTo(900,15*j);
        ctx.closePath();
        ctx.stroke();
        }
        drawSnackAndFood();
        
    }
    
    function drawSnackAndFood(){
        for(var k=0;k<snakeCount;k++)//画蛇的身体
		{
			ctx.fillStyle="#000";
			if (k==snakeCount-1)
			{
				ctx.fillStyle="blue";//蛇头的颜色与身体区分开
			}
			ctx.fillRect(snake[k].x,snake[k].y,15,15);//前两个数是矩形的起始坐标，后两个数是矩形的长宽。
		}
		// draw food
        ctx.fillStyle ="black";
        ctx.fillRect(foodx,foody,15,15);
        ctx.fill();
    }
   
    function start()
    {
		for(var k=0;k<snakeCount;k++)
    		{
    			snake[k]={x:k*15,y:0};	
            }
        addfood();
        drawtable();
          //在start中调用添加食物函数
    }
    function addfood()
	{
	    foodx = Math.floor(Math.random()*60)*15; //随机产生一个0-1之间的数
	    foody = Math.floor(Math.random()*40)*15;
		for (var k=0;k<snake;k++)
		{
            //防止产生的随机食物落在蛇身上
			if (foodx==snake[k].x&&foody==sanke[k].y)
			addfood();
		}
	}	
   function move()
   {
    document.onkeydown=function(ev){
                    switch(ev.keyCode)
                    {
                    case 65: togo = 1; break;
                    case 87: togo = 2; break;
                    case 68: togo = 3; break;
                    case 83: togo = 4; break;
                    default: togo = 0;
                    }
        　　}
        switch (togo)
	    {
	    case 1: snake.push({x:snake[snakeCount-1].x-15,y:snake[snakeCount-1].y}); break;//left
	    case 2: snake.push({x:snake[snakeCount-1].x,y:snake[snakeCount-1].y-15}); break;//down
	    case 3: snake.push({x:snake[snakeCount-1].x+15,y:snake[snakeCount-1].y}); break;//right
	    case 4: snake.push({x:snake[snakeCount-1].x,y:snake[snakeCount-1].y+15}); break;//up
	    default: snake.push({x:snake[snakeCount-1].x+15,y:snake[snakeCount-1].y});
        }
        snake.shift();//删除数组第一个元素
   	    ctx.clearRect(0,0,900,600);//清除画布重新绘制
    	isEat();
	    isDead();
	    drawtable();
   } 			
  
   function isEat()//吃到食物后长度加1
   {
    if(snake[snakeCount-1].x==foodx&&snake[snakeCount-1].y==foody)
    {
		addfood();
		snakeCount++;
		snake.unshift({x:-15,y:-15});
    }
   }
   
   function isDead()
   {
    if (snake[snakeCount-1].x>885||snake[snakeCount-1].y>585||snake[snakeCount-1].x<0||snake[snakeCount-1].y<0)
		{
		alert("You are dead,GAME OVER!!!");
		window.location.reload();
		}
   }
   
   function time(){
       var count=0;//开始计时后的总秒数

       var timer = null;
       var timer2 = null;

       $("btnStart").onclick=function(){
        timer=setInterval(function(){
            count++;
            //改变显示的时分秒
            $("id_S").innerHTML=showNumber(count%60);
            $("id_M").innerHTML=showNumber(parseInt(count/60)%60);
            $("id_H").innerHTML=showNumber(parseInt(count/3600));
                },1000)
            timer2= setInterval(move,moveSpeed);
            drawtable();
       }

       $("btnPause").onclick=function(){
           clearInterval(timer);
           clearInterval(timer2);
       }

       $("btnStartANewGanme").onclick=function(){
        clearInterval(timer);
        clearInterval(timer2);
        count=0;
        $("id_S").innerHTML="00";
        $("id_M").innerHTML="00";
        $("id_H").innerHTML="00";
        start();
       }

       $("btnSimple").onclick=function(){
           moveSpeed =300;
       }

       $("btnNomal").onclick=function(){
        moveSpeed =150;
       }

       $("btnHard").onclick=function(){
        moveSpeed =65;
        }
   // 处理单个数字
   function showNumber(num){
       if(num<10)
        return "0"+num;
        else
        return num;
   }
}
//    准备开始
   start();
//    等待点击按钮
   time();
}

你可能感兴趣的:(web开发,javascript,css,html5)

  • springboot一课一得 POlse springboot
    SpringBoot学习之路：从基础到进阶SpringBoot是基于Spring框架的一个开源项目，它通过简化配置、自动化功能以及集成多种开箱即用的技术，使开发者能够更快地开发、测试和部署Java应用程序。它不仅减少了开发者的配置工作量，还为开发者提供了很多与生产环境相关的功能，使得SpringBoot成为现代Web开发、微服务架构和企业级应用开发的首选框架。本文将基于“SpringBoot一课一
  • html怎么获取父页面的元素的值,使用JavaScript与jQuery怎么在子窗口中获取父窗口的元素值... weixin_39907658
    使用JavaScript与jQuery怎么在子窗口中获取父窗口的元素值发布时间：2021-02-1815:42:20来源：亿速云阅读：115作者：Leah使用JavaScript与jQuery怎么在子窗口中获取父窗口的元素值？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。js:父窗口：子窗口：curproject=window.op
  • jquery查找父窗体id_jquery 获取父窗口的元素、父窗口、子窗口 weixin_39781550 jquery查找父窗体id
    一、获取父窗口元素：$("#父窗口元素ID",window.parent.document)；对应javascript版本为window.parent.document.getElementById("父窗口元素ID")；取父窗口的元素方法：$(selector,window.parent.document);那么你取父窗口的父窗口的元素就可以用：$(selector,window.parent.
  • jquery查找父窗体id_JS与jQuery实现子窗口获取父窗口元素值的方法 北木南烟 jquery查找父窗体id
    这篇文章主要介绍了JS与jQuery实现子窗口获取父窗口元素值的方法,涉及javascript与jQuery操作窗口元素的相关技巧,需要的朋友可以参考下本文实例讲述了JS与jQuery实现子窗口获取父窗口元素值的方法。分享给大家供大家参考，具体如下：功能描述：父窗口有一个input，和一个button，点击button打开子窗口，在子窗口中获取父窗口中input的值，并显示。js:父窗口：子窗口：
  • 前端怎么处理请求失败会弹出一个 toast,如何保证批量请求失败，只弹出一个 大莲芒 前端
    在前端处理批量请求时，确保只弹出一个toast通知，可以通过以下步骤实现：使用状态管理首先，您可以使用状态管理工具（例如React的useState或Redux）来跟踪请求的状态。创建一个Toast组件如果还没有创建toast组件，可以简单实现一个。以下是一个基本的Reacttoast组件示例importReactfrom'react';import'./Toast.css';//添加样式cons
  • 探索 Rust 高效 Web 开发：Hyperlane 框架深度解析 LTPP 开发语言rust后端面试算法
    探索Rust高效Web开发：Hyperlane框架深度解析在当今的Web开发领域，追求高性能、轻量级的框架一直是开发者们的不懈追求。对于Rust语言开发者而言，Hyperlane框架正以其独特的魅力崭露头角，为构建现代Web服务提供了一种卓越的解决方案。今天，让我们一同深入探索这个令人瞩目的框架。轻量与高效的完美融合Hyperlane是一款轻量级且高性能的RustHTTP服务器库，它的诞生旨在极大
  • 【ES6新特性】声明变量关键字：var、let、const详解 小钟H呀 ES6新特性学习手册es6javascript开发语言
    前言在ES6（ECMAScript2015）之前，JavaScript中只有var关键字用于变量声明。ES6新增了let和const，它们解决了var的一些设计缺陷，使得变量声明更安全、更符合编程直觉。核心特性对比1.作用域（Scope）var：函数作用域（在函数内部声明的变量，只能在函数内部访问）let/const：块级作用域（在{}代码块中声明的变量，只能在块内访问）//var示例functi
  • 神器 Turbo Console Log：让 `console.log` 操作一键搞定！ Judy1623 VSCode插件vscode插件
    在前端开发的日常里，尤其是使用VSCode调试JavaScript代码时，console.log堪称我们的“调试好帮手”。但每次都手动输入console.log语句，着实麻烦又浪费时间。今天就给大家安利一款超实用的VSCode插件——TurboConsoleLog，用了它，你会感叹为什么没有早点发现！安装和卸载步骤就不多说了，相信大家都轻车熟路。咱们直接进入重点——这款插件的快捷键使用方法。使用注
  • CSS 溢出问题及解决方案：实用案例与技巧 Judy1623 css前端
    在网页开发中，CSS的布局和样式起着至关重要的作用，但经常会遇到一个棘手的问题——溢出问题。溢出是指元素内的内容超出了其设定的容器大小，这不仅会影响页面的美观，还可能干扰用户体验。本文将详细探讨CSS溢出问题的案例，并提供常见的解决方法，同时给出相应的代码示例以供验证。visible：默认值，内容不会被剪裁，也不会显示滚动条。hidden：内容会被剪裁，并且不会显示滚动条。scroll：内容会被剪
  • 基于.NET MVC实现H5页面调用手机摄像头扫描二维码完整方案 Bart_Lu .netmvc
    一、前言在移动端Web开发中，二维码扫描功能已成为常见需求。本文将介绍如何在ASP.NETMVC框架下，通过HTML5技术调用手机摄像头实现二维码扫描功能，并提供完整的代码实现方案。二、技术选型前端库：使用ZXing-js（支持浏览器二维码解析）后端框架：ASP.NETMVC5浏览器API：MediaDevicesAPI三、实现步骤1.准备工作在MVC项目中引入所需库：html运行HTML2.创建
  • 前端框架革命：React与Vue对比与解析 WHCIS Web开发技术前端框架react.jsvue.js
    一、框架设计哲学的本质差异1.1React：以JavaScript为核心的函数式哲学React的核心思想可以概括为**“UI即函数”**，其设计遵循以下原则：React核心声明式编程组件即函数单向数据流JSX描述UI函数组件+Hook状态提升模式声明式编程：开发者只需描述界面应该呈现的最终状态，无需关心具体DOM操作细节不可变数据流：通过setState触发组件树更新，保持数据流向的可预测性虚拟D
  • Java Web开发核心内容全解析（上） 风铃儿~ javaservletmybatis
    一、JavaWeb概述JavaWeb是指使用Java技术来解决相关web互联网领域的技术总和。在当今数字化时代，JavaWeb在构建企业级应用、电子商务平台、社交网络等方面发挥着至关重要的作用。（一）JavaWeb的体系结构JavaWeb应用的体系结构主要分为客户端层、表示层、业务逻辑层和数据访问层。1.客户端层-这是用户与Web应用交互的最前端。主要包括用户浏览器，它可以接收并显示从服务器端发送
  • 前端面试：ajax 和 xhr 是什么关系？ returnShitBoy 前端面试ajax
    在前端开发中，AJAX（AsynchronousJavaScriptandXML）和XHR（XMLHttpRequest）是两个密切相关但有些不同的概念。以下是对这两者的详细解释及其关系：1.AJAX定义：AJAX是一个用于创建异步web应用程序的技术。它允许网页在不完全重新加载整页的情况下，与服务器交换数据并更新部分网页内容。主要特征：异步操作：AJAX使得页面可以在后台与服务器进行数据交换，用
  • 构建AngularJS动态Web应用的示例教程 你这人真狗
    本文还有配套的精品资源，点击获取简介：AngularJS是一个由Google支持的前端JavaScript框架，用于创建动态Web应用程序。本文将通过一个名为“angular-sample-app”的示例应用程序，详细介绍AngularJS的核心特性，包括双向数据绑定、控制器、指令系统、服务与依赖注入、表单处理、路由与导航、模板和局部存储以及其他高级特性。通过这个示例应用的深入剖析，开发者可以学习
  • 【css酷炫效果】纯CSS实现3D翻转卡片动画 冰夏之夜影 web前端css前端
    【css酷炫效果】纯CSS实现3D翻转卡片动画缘创作背景html结构css样式完整代码效果图想直接拿走的老板，链接放在这里：https://download.csdn.net/download/u011561335/90490472缘创作随缘，不定时更新。创作背景刚看到csdn出活动了，赶时间，直接上代码。html结构正面内容背面内容...css样式/*容器设置透视*/.card-containe
  • CSS语言的数论算法 宇瞳月 包罗万象golang开发语言后端
    CSS语言的数论算法引言数论作为数学的一个重要分支，主要研究整数及其性质。数论的基本问题包括素数的性质、最大公约数、最小公倍数、同余等，同时数论在密码学、计算机科学等领域具有广泛的应用。而CSS（层叠样式表）本身是一种样式表语言，用于控制HTML文档的样式和布局，虽然CSS本身并不能直接进行复杂的数论运算，但它可以和JavaScript等编程语言结合使用，实现数论算法的可视化与交互。本文将探讨数论
  • 【开原宝藏】30天学会CSS - DAY1 第一课 hikktn 开源宝藏css前端
    下面提供一个由浅入深、按步骤拆解的示例教程，让你能从零开始，逐步理解并实现带有旋转及悬停动画的社交图标效果。为了更简单明了，以下示例仅创建四个图标（Facebook、Twitter、Google+、LinkedIn），并在每一步都附带代码展示和讲解。第0步：项目结构说明先准备两个文件：index.htmlHTML的主体结构style.css样式代码，控制图标外观与动画目录结构如下：project/
  • 轻量级模块化前端框架：快速构建强大的Web界面 小杰~ 前端框架前端
    轻量级模块化前端框架：快速构建强大的Web界面在当今快节奏的Web开发环境中，选择一个高效且灵活的前端框架至关重要。UIkit是一个轻量级的模块化前端框架，旨在帮助开发者快速构建功能强大且响应迅速的Web界面。UIkit提供了丰富的组件和工具，使开发者能够轻松实现现代化的设计效果。无论是构建复杂的用户界面还是简单的网页布局，UIkit都能提供出色的支持。其模块化设计使得开发者可以根据项目需求灵活选
  • GTP生成UI代码 酒江 ui人工智能深度学习
    使用GPT生成UI代码，通常是指利用GPT模型生成前端界面的代码，例如HTML、CSS、JavaScript等。GPT可以帮助开发人员快速创建界面元素的代码，减少手动编写的工作量。下面是一些关键步骤，详细说明如何用GPT生成UI代码：1.明确UI需求和设计界面元素：首先明确需要哪些UI元素。例如：按钮、输入框、表单、表格等。布局：确定页面的布局结构，例如：一栏布局、两栏布局、响应式设计等。交互功能
  • let const var 底层区域别，es6还有AO 对象和GO对象吗 新茶十九 #学习javascriptes6前端ecmascript
    在JavaScript中，var、let、const的底层行为差异与作用域规则和变量存储机制密切相关。ES6引入了块级作用域和词法环境（LexicalEnvironment），改变了原有的AO和GO的实现方式，但核心逻辑仍然保留。以下是详细解释：一、var、let、const`的底层区别特性varletconst作用域函数作用域或全局作用域块级作用域块级作用域变量提升提升并初始化为undefine
  • ES6-01-01day CodeDoge javascript开发语言ecmascript
    ECMAScript和javascript的关系是，前者是后者的规格，后者是前者的一种实现。ES6新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。不存在变量提升var命令会发生“变量提升”现象，即变量可以在声明之前使用，值为undefined。这种现象多多少少是有些奇怪的，按照一般的逻辑，变量应该在声明语句之后才可以使用。为了纠正这种现象，
  • Tomcat 新手入门指南：从零开始掌握安装与配置 超级小狗 tomcatjava
    Tomcat新手入门指南：从零开始掌握安装与配置一、Tomcat是什么？ApacheTomcat是一个开源的轻量级Web应用服务器，专为运行JavaServlet和JSP设计。它是初学JavaWeb开发的必备工具，也是企业级应用的常见选择。核心功能：处理HTTP请求、管理Servlet生命周期、支持动态网页渲染。适用场景：开发测试环境、中小型Web应用部署、微服务架构中的容器化组件。二、快速安装T
  • 下载 CSS 文件阻塞，会阻塞构建 DOM 树吗？会阻塞页面的显示吗？ liangshanbo1215 前端性能css前端
    下载CSS文件会对页面的渲染过程产生影响，具体是否阻塞DOM树的构建和页面的显示，取决于浏览器的渲染机制。1.CSS文件下载是否会阻塞DOM树的构建？一般情况下，CSS文件下载不会阻塞DOM树的构建：DOM树的构建是由HTML解析器完成的，解析器会逐行解析HTML并构建DOM树。即使CSS文件正在下载，HTML解析器仍然会继续工作，构建DOM树。但如果JavaScript访问了样式，CSS文件下载
  • 《突破性能瓶颈，用 Rust + WASM 实现浏览器端FFT加速300%实战》 煜bart 人工智能机器人
    引言：当JavaScript遇上硬核计算**“为什么我的音频分析页面卡到崩溃？”这是前端工程师在实现实时频谱可视化时最常见的噩梦。传统JavaScript的FFT计算在万级数据点时就会引发严重卡顿，但今天我们将用**Rust+WebAssembly**的组合拳，在浏览器中实现**零依赖、300%加速的傅里叶变换**。无需WebGL黑魔法，直接上硬核代码！---###**一、血腥现场：JS的Type
  • 鸿蒙（HarmonyOS）性能优化—Web开发常见问题 码牛程序猿 HarmonyOS鸿蒙工程师鸿蒙harmonyos华为HarmonyOS鸿蒙应用开发鸿蒙系统鸿蒙鸿蒙开发
    H5页面如何与ArkTS交互(API10)问题现象目前javaScriptProxy仅支持同步调用，异步调用无法获取执行结果。解决措施对javaScriptProxy和runJavaScript封装，实现JSBridge通信方案。适用于H5调用原生侧函数。使用Web组件javaScriptProxy将原生侧接口注入到H5的window对象上，通过runJavaScript接口执行JS脚本到H5中，
  • Flexbox 布局详细笔记 .毅晨. html5cssvue.jshtmles6npm笔记
    Flexbox布局详细笔记Flexbox（弹性盒子布局）是CSS3中用于实现高效、灵活的页面布局的模块，特别适合处理一维布局（行或列）。以下是核心知识点和常见用法：一、Flexbox基础概念容器（FlexContainer）通过display:flex;或display:inline-flex;将一个元素定义为Flex容器。其直接子元素自动成为Flex项目（FlexItems）。主轴（MainAx
  • 【JSON-RPC】 python+JSON-RPC示例与入门 魔都吴所谓 jsonrpcpython
    JSON-RPC是一种无状态的、轻量级的远程过程调用（RPC）协议。它定义了几种数据结构及其处理规则。它使用JSON（JavaScriptObjectNotation）作为数据格式，允许实现相同功能的程序以松散耦合的方式跨网络通信。以下是一个简单的JSON-RPC使用Python的示例。我们将使用jsonrpclib这个库来创建一个JSON-RPC服务端和一个客户端。首先，你需要安装jsonrpc
  • 芯片制造、汽车制造行业网站，如何用插件增强富文本编辑器的WORD粘贴功能？ 全武凌(荆门泽优) 金融编辑器wordumeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片
    要求：开源，免费，技术支持编辑器：百度ueditor前端：vue2,vue3,vue-cli,react,html5用户体验：Ctrl+V快捷键操作功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,CentOS,Ubuntu,中标麒麟,银河麒麟,统信UOS,
  • 金融行业网页编辑器对WORD图文混排有哪些特殊需求？ 全武凌(荆门泽优) 金融编辑器wordumeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片
    要求：开源，免费，技术支持编辑器：百度ueditor前端：vue2,vue3,vue-cli,react,html5用户体验：Ctrl+V快捷键操作功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,CentOS,Ubuntu,中标麒麟,银河麒麟,统信UOS,
  • 金融行业Vue应用如何利用wangEditor实现WORD文档高效上传？ 2501_90699640 金融vue.jswordumeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片
    要求：开源，免费，技术支持编辑器：百度ueditor前端：vue2,vue3,vue-cli,react,html5用户体验：Ctrl+V快捷键操作功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,CentOS,Ubuntu,中标麒麟,银河麒麟,统信UOS,
  • windows下源码安装golang 616050468 golang安装golang环境windows
             系统： 64位win7， 开发环境：sublime text 2，  go版本： 1.4.1    1.  安装前准备(gcc, gdb, git)        golang在64位系
  • redis批量删除带空格的key bylijinnan redis
    redis批量删除的通常做法： redis-cli keys "blacklist*" | xargs redis-cli del 上面的命令在key的前后没有空格时是可以的，但有空格就不行了： $redis-cli keys "blacklist*" 1) "blacklist:12: [email protected]
  • oracle正则表达式的用法 0624chenhong oracle正则表达式
      方括号表达示 方括号表达式 描述 [[:alnum:]] 字母和数字混合的字符 [[:alpha:]] 字母字符 [[:cntrl:]] 控制字符 [[:digit:]] 数字字符 [[:graph:]] 图像字符 [[:lower:]] 小写字母字符 [[:print:]] 打印字符 [[:punct：]] 标点符号字符 [[:space:]]
  • 2048源码(核心算法有，缺少几个anctionbar，以后补上) 不懂事的小屁孩 2048
    2048游戏基本上有四部分组成， 1：主activity，包含游戏块的16个方格，上面统计分数的模块 2：底下的gridview，监听上下左右的滑动，进行事件处理， 3：每一个卡片，里面的内容很简单，只有一个text，记录显示的数字 4：Actionbar，是游戏用重新开始，设置等功能(这个在底下可以下载的代码里面还没有实现) 写代码的流程 1：设计游戏的布局，基本是两块，上面是分
  • jquery内部链式调用机理 换个号韩国红果果 JavaScriptjquery
    只需要在调用该对象合适(比如下列的setStyles)的方法后让该方法返回该对象（通过this  因为一旦一个函数称为一个对象方法的话那么在这个方法内部this（结合下面的setStyles）指向这个对象） function create(type){ var element=document.createElement(type); //this=element;
  • 你订酒店时的每一次点击 背后都是NoSQL和云计算 蓝儿唯美 NoSQL
    全球最大的在线旅游公司Expedia旗下的酒店预订公司，它运营着89个网站，跨越68个国家，三年前开始实验公有云，以求让客户在预订网站上查询假期酒店时得到更快的信息获取体验。 云端本身是用于驱动网站的部分小功能的，如搜索框的自动推荐功能，还能保证处理Hotels.com服务的季节性需求高峰整体储能。 Hotels.com的首席技术官Thierry Bedos上个月在伦敦参加“2015 Clou
  • java笔记1 a-john java
    1，面向对象程序设计（Object-oriented Propramming，OOP）：java就是一种面向对象程序设计。 2，对象：我们将问题空间中的元素及其在解空间中的表示称为“对象”。简单来说，对象是某个类型的实例。比如狗是一个类型，哈士奇可以是狗的一个实例，也就是对象。 3，面向对象程序设计方式的特性：     3.1 万物皆为对象。    
  • C语言 sizeof和strlen之间的那些事 C/C++软件开发求职面试题 必备考点（一） aijuans C/C++求职面试必备考点
            找工作在即，以后决定每天至少写一个知识点，主要是记录，逼迫自己动手、总结加深印象。当然如果能有一言半语让他人收益，后学幸运之至也。如有错误，还希望大家帮忙指出来。感激不尽。        后学保证每个写出来的结果都是自己在电脑上亲自跑过的，咱人笨，以前学的也半吊子。很多时候只能靠运行出来的结果再反过来
  • 程序员写代码时就不要管需求了吗？ asia007 程序员不能一味跟需求走
          编程也有2年了，刚开始不懂的什么都跟需求走，需求是怎样就用代码实现就行，也不管这个需求是否合理，是否为较好的用户体验。当然刚开始编程都会这样，但是如果有了2年以上的工作经验的程序员只知道一味写代码，而不在写的过程中思考一下这个需求是否合理，那么，我想这个程序员就只能一辈写敲敲代码了。       我的技术不是很好，但是就不代
  • Activity的四种启动模式 百合不是茶 android栈模式启动Activity的标准模式启动栈顶模式启动单例模式启动
    android界面的操作就是很多个activity之间的切换,启动模式决定启动的activity的生命周期 ;   启动模式xml中配置     <activity android:name=".MainActivity" android:launchMode="standard&quo
  • Spring中@Autowired标签与@Resource标签的区别 bijian1013 javaspring@Resource@Autowired@Qualifier
    Spring不但支持自己定义的@Autowired注解，还支持由JSR-250规范定义的几个注解，如：@Resource、 @PostConstruct及@PreDestroy。   1. @Autowired    @Autowired是Spring 提供的，需导入    Package:org.springframewo
  • Changes Between SOAP 1.1 and SOAP 1.2 sunjing ChangesEnableSOAP 1.1SOAP 1.2
    JAX-WS SOAP Version 1.2 Part 0: Primer (Second Edition) SOAP Version 1.2 Part 1: Messaging Framework (Second Edition) SOAP Version 1.2 Part 2: Adjuncts (Second Edition)   Which style of WSDL
  • 【Hadoop二】Hadoop常用命令 bit1129 hadoop
    以Hadoop运行Hadoop自带的wordcount为例，   hadoop脚本位于/home/hadoop/hadoop-2.5.2/bin/hadoop，需要说明的是，这些命令的使用必须在Hadoop已经运行的情况下才能执行   Hadoop HDFS相关命令  hadoop fs -ls  列出HDFS文件系统的第一级文件和第一级
  • java异常处理（初级） 白糖_ javaDAOspring虚拟机Ajax
    从学习到现在从事java开发一年多了，个人觉得对java只了解皮毛，很多东西都是用到再去慢慢学习，编程真的是一项艺术，要完成一段好的代码，需要懂得很多。 最近项目经理让我负责一个组件开发，框架都由自己搭建，最让我头疼的是异常处理，我看了一些网上的源码，发现他们对异常的处理不是很重视，研究了很久都没有找到很好的解决方案。后来有幸看到一个200W美元的项目部分源码，通过他们对异常处理的解决方案，我终
  • 记录整理-工作问题 braveCS 工作
    1）那位同学还是CSV文件默认Excel打开看不到全部结果。以为是没写进去。同学甲说文件应该不分大小。后来log一下原来是有写进去。只是Excel有行数限制。那位同学进步好快啊。 2）今天同学说写文件的时候提示jvm的内存溢出。我马上反应说那就改一下jvm的内存大小。同学说改用分批处理了。果然想问题还是有局限性。改jvm内存大小只能暂时地解决问题，以后要是写更大的文件还是得改内存。想问题要长远啊
  • org.apache.tools.zip实现文件的压缩和解压，支持中文 bylijinnan apache
    刚开始用java.util.Zip，发现不支持中文（网上有修改的方法，但比较麻烦） 后改用org.apache.tools.zip org.apache.tools.zip的使用网上有更简单的例子 下面的程序根据实际需求，实现了压缩指定目录下指定文件的方法 import java.io.BufferedReader; import java.io.BufferedWrit
  • 读书笔记-4 chengxuyuancsdn 读书笔记
    1、JSTL 核心标签库标签 2、避免SQL注入 3、字符串逆转方法 4、字符串比较compareTo 5、字符串替换replace 6、分拆字符串 1、JSTL 核心标签库标签共有13个， 学习资料：http://www.cnblogs.com/lihuiyy/archive/2012/02/24/2366806.html 功能上分为4类： (1)表达式控制标签：out
  • [物理与电子]半导体教材的一个小问题 comsci 问题
          各种模拟电子和数字电子教材中都有这个词汇-空穴       书中对这个词汇的解释是; 当电子脱离共价键的束缚成为自由电子之后,共价键中就留下一个空位,这个空位叫做空穴       我现在回过头翻大学时候的教材,觉得这个
  • Flashback Database --闪回数据库 daizj oracle闪回数据库
    Flashback 技术是以Undo segment中的内容为基础的， 因此受限于UNDO_RETENTON参数。要使用flashback 的特性，必须启用自动撤销管理表空间。 在Oracle 10g中， Flash back家族分为以下成员： Flashback Database， Flashback Drop，Flashback Query(分Flashback Query,Flashbac
  • 简单排序:插入排序 dieslrae 插入排序
    public void insertSort(int[] array){ int temp; for(int i=1;i<array.length;i++){ temp = array[i]; for(int k=i-1;k>=0;k--)
  • C语言学习六指针小示例、一维数组名含义，定义一个函数输出数组的内容 dcj3sjt126com c
    # include <stdio.h> int main(void) { int * p; //等价于 int *p 也等价于 int* p; int i = 5; char ch = 'A'; //p = 5; //error //p = &ch; //error //p = ch; //error p = &i; //
  • centos下php redis扩展的安装配置3种方法 dcj3sjt126com redis
    方法一 1.下载php redis扩展包  代码如下 复制代码 #wget http://redis.googlecode.com/files/redis-2.4.4.tar.gz 2 tar -zxvf 解压压缩包，cd /扩展包 （进入扩展包然后 运行phpize 一下是我环境中phpize的目录，/usr/local/php/bin/phpize (一定要
  • 线程池(Executors) shuizhaosi888 线程池
    在java类库中，任务执行的主要抽象不是Thread，而是Executor，将任务的提交过程和执行过程解耦 public interface Executor { void execute(Runnable command); }   public class RunMain implements Executor{ @Override pub
  • openstack 快速安装笔记 haoningabc openstack
    前提是要配置好yum源 版本icehouse，操作系统redhat6.5 最简化安装，不要cinder和swift 三个节点 172 control节点keystone glance horizon 173 compute节点nova 173 network节点neutron control /etc/sysctl.conf net.ipv4.ip_forward =
  • 从c面向对象的实现理解c++的对象（二） jimmee C++面向对象虚函数
    1. 类就可以看作一个struct，类的方法，可以理解为通过函数指针的方式实现的，类对象分配内存时，只分配成员变量的，函数指针并不需要分配额外的内存保存地址。 2. c++中类的构造函数，就是进行内存分配(malloc)，调用构造函数 3. c++中类的析构函数，就时回收内存(free) 4. c++是基于栈和全局数据分配内存的，如果是一个方法内创建的对象，就直接在栈上分配内存了。 专门在
  • 如何让那个一个div可以拖动 lingfeng520240 html
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml
  • 第10章 高级事件（中） onestopweb 事件
    index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/
  • 计算两个经纬度之间的距离 roadrunners 计算纬度LBS经度距离
    要解决这个问题的时候，到网上查了很多方案，最后计算出来的都与百度计算出来的有出入。下面这个公式计算出来的距离和百度计算出来的距离是一致的。 /** * * @param longitudeA * 经度A点 * @param latitudeA * 纬度A点 * @param longitudeB *
  • 最具争议的10个Java话题 tomcat_oracle java
    1、Java8已经到来。什么！？ Java8 支持lambda。哇哦，RIP Scala！ 　　随着Java8 的发布，出现很多关于新发布的Java8是否有潜力干掉Scala的争论，最终的结论是远远没有那么简单。Java8可能已经在Scala的lambda的包围中突围，但Java并非是函数式编程王位的真正觊觎者。 　 　2、Java 9 即将到来 　　 Oracle早在8月份就发布
  • zoj 3826 Hierarchical Notation(模拟) 阿尔萨斯 rar
    题目链接：zoj 3826 Hierarchical Notation 题目大意：给定一些结构体，结构体有value值和key值，Q次询问，输出每个key值对应的value值。 解题思路：思路很简单，写个类词法的递归函数，每次将key值映射成一个hash值，用map映射每个key的value起始终止位置，预处理完了查询就很简单了。 这题是最后10分钟出的，因为没有考虑value为{}的情
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他