精华内容
下载资源
问答
  • javascript小游戏

    2014-02-07 16:11:36
    javascript写的小游戏,大家可以参考参考,适合初学者学习的javascript小游戏
  • Javascript小游戏

    2013-07-29 09:52:50
    Javascript小游戏,弹球小游戏,bug已经过调试,完全可以玩。
  • javaScript小游戏

    2016-12-07 14:21:56
    非常好的JS小游戏,简单易懂
  • JavaScript小游戏

    2019-09-16 01:07:16
    //调用 开始游戏 函数 }; })(i); oUl.appendChild(oLi); }; oBox.appendChild(oH); oBox.appendChild(oUl); };  //开始游戏 function gameStart(index , e) { //index 游戏level var start = oBox....

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <meta name="Author" content="Fly">
        <style type='text/css'>
            *{ margin:0; padding:0; font-family:Microsoft yahei,serif;}
            body{
                background: #000;
            }
            #box{
                width: 300px;
                height: 500px;
                border: 10px solid #fff;
                margin: 50px auto;
                position: relative;
            }
            #box h1{
                color: #ffffff;
                text-align: center;
                font-size: 26px;
                padding-top: 20px;
            }
            #box .diff li{
                width: 150px;
                height: 30px;
                background: #ffffff;
                color: #000000;
                line-height: 30px;
                text-align: center;
                font-size: 14px;
                margin: 65px auto;
                list-style: none;
                cursor: pointer;
            }
            #box .diff li.last{
                color: #f00;
                background: #ddaeff;
                font-weight: bold;
            }
            #box .diff li:hover{
                background: pink;
                color: #ffffff;
            }
            #plane,#box .biu{
                position: absolute;
            }
            #box .enemy{
                position:absolute;    
                }
            #box .boom1,#box .boom2{
                position:absolute;    
                }
            #box .score{
                width:30px;
                color:white;
                font-size:24px;
                line-height: 24px;
                text-align: center;
                font-size: 14px;
                margin: 20px;
                }    
            #box .gameover{
                width: 200px;
                height: 400px;
                margin:50px auto;
                background: #ffffff;
                color: #000000;
            }
            #box .gameover h2{
                text-align: center;
                padding: 20px 0;
            }
            #box .gameover p{
                text-align: center;
            }
            #box .gameover .restart{
                width: 100px;
                height: 30px;
                background: #000;
                color: #ffffff;
                margin: 10px auto;
                font-size: 12px;
                text-align: center;
                line-height: 30px;
                cursor: pointer;
            }        
        </style>
    </head>
    <body>
        <div id="box"></div>
        <script>
            var oBox = document.getElementById('box');

            init();

            //生成初始界面
            function init() {
                oBox.innerHTML = '';
                var oH = document.createElement('h1');
                    oH.innerHTML = '打飞机v1.0';
                var oUl = document.createElement('ul');
                oUl.className = 'diff';
                var arr = ['简单难度' , '中等难度' , '困难难度' , '那你很棒棒哦'];
                for (var i=0;i<4;i++){
                    var oLi = document.createElement('li');
                        oLi.innerHTML = arr[i];
                    if (i===3)oLi.className = 'last';
                    (function (i) {
                        oLi.onclick = function (e) {
                            e = e||window.event;
                            gameStart(i , e);//调用 开始游戏 函数
                        };
                    })(i);
                    oUl.appendChild(oLi);
                };
                oBox.appendChild(oH);
                oBox.appendChild(oUl);
            };

            //开始游戏
            function gameStart(index , e) {
                //index 游戏level
                var start = oBox.innerHTML;
                var score = document.createElement('p');
                oBox.innerHTML = ''; //清空oBox
                score.innerHTML = 0;
                score.className = 'score';
                oBox.appendChild(score);
                enemy(index ); //调用 生成敌军函数
                plane(index , e ); //调用 生成战机函数
                
                oBox.gameTime = setInterval(function(){
                  Boom(e, score, oBox.gameTime);
                },10);//调用爆炸函数
            };

            //生成战机
            function plane(index , offset ) {
                var oPlane = new Image();//document.createElement('img');
                oPlane.src = 'img/plane.png';
                oPlane.width = 60;
                oPlane.height = 36;
                oPlane.id = 'plane';
                var x_ = oBox.offsetLeft + 10 + oPlane.width/2;
                var y_ = oBox.offsetTop + 10 + oPlane.height/2;
                oPlane.style.left = offset.x - x_ + 'px';
                oPlane.style.top = offset.y - y_ + 'px';
                oBox.appendChild(oPlane);

                //鼠标跟随
                var topMin = 0,
                    topMax = oBox.clientHeight - oPlane.height,
                    leftMin = -oPlane.width/2,
                    leftMax = oBox.clientWidth - oPlane.width/2;
                document.onmousemove = function (e) {
                    e = e||window.event;
                    var left = e.clientX - x_;
                    var top = e.clientY - y_;
                    var aEnemy = oBox.querySelectorAll('#box .enemy');
                    left = Math.min(leftMax , left);
                    left = Math.max(leftMin , left);
                    top = Math.min(topMax , top);
                    top = Math.max(topMin , top);
                    oPlane.style.left = left + 'px';
                    oPlane.style.top = top + 'px';
                };

                //发射子弹
                var speed = 300;
                switch (index){
                    case 0:
                        speed = 100;
                        break;
                    case 1:
                        speed = 120;
                        break;
                    case 2:
                        speed = 150;
                        break;
                    case 3:
                        speed = 50;
                };
                oBox.timer = setInterval(function () {
                    var oBiu = new Image();
                    oBiu.src = 'img/bullet.png';
                    oBiu.width = 6;
                    oBiu.height = 22;
                    oBiu.className = 'biu';
                    oBiu.style.left = oPlane.offsetLeft + oPlane.width/2 - oBiu.width/2 + 'px';
                    oBiu.style.top = oPlane.offsetTop - oBiu.height + 'px';
                    oBox.appendChild(oBiu);
                },speed);

                //子弹上移
                oBox.BiuTimer = setInterval(function () {
                    var aBiu = oBox.querySelectorAll('#box .biu');
                    for (var i=aBiu.length-1;i>=0;i--){
                        aBiu[i].style.top = aBiu[i].offsetTop - 4 + 'px';
                        if (aBiu[i].offsetTop <= -22){
                            oBox.removeChild(aBiu[i]);
                        };
                    };

                },10);
            };

            //敌军函数
            function enemy(index ) {    
                    var sped = 300;
                    switch (index){
                        case 0:
                            sped = 300;
                            break;
                        case 1:
                            sped = 200;
                            break;
                        case 2:
                            sped = 150;
                            break;
                        case 3:
                            sped = 100;
                    };
                    
                        //生成敌军
                           oBox.enemyTimer = setInterval(function () {
                            var oEnemy = new Image();//document.createElement('img');
                            var rad =  Math.ceil(Math.random()*278);    
                            oEnemy.src = 'img/enemy.png';
                            oEnemy.width = 22;
                            oEnemy.height = 30;
                            oEnemy.className = 'enemy';
                            oEnemy.style.top = -oEnemy.height + 'px';
                            oEnemy.style.left = rad + 'px';
                            oEnemy.speed = Math.ceil(Math.random()*3+3);
                            oBox.appendChild(oEnemy);
                    },sped);
                        
                        //敌军下移
                        oBox.enemyDownTimer2 = setInterval(function () {
                            var aEnemy = oBox.querySelectorAll('#box .enemy');
                            for (var i=aEnemy.length-1;i>=0;i--){
                                aEnemy[i].style.top = aEnemy[i].offsetTop + aEnemy[i].speed + 'px';
                                if (aEnemy[i].offsetTop >= 470){
                                    oBox.removeChild(aEnemy[i]);
                                };
                            };
                    },20);

            };
            
            //发生爆炸
            function Boom(e, score, time){
                var aEnemy = oBox.querySelectorAll('#box .enemy');
                var aBiu = oBox.querySelectorAll('#box .biu');
                
                //子弹与敌军
                for (var i=aEnemy.length-1;i>=0;i--){
                    var a = aEnemy[i].offsetLeft;
                    var b = aEnemy[i].offsetTop;
                    for (var j=aBiu.length-1;j>=0;j--){
                        var c = aBiu[j].offsetLeft;
                        var d = aBiu[j].offsetTop;
                        if((b-d>-22)&&(-6<c-a&&c-a<22)){
                            aEnemy[i].parentNode?oBox.removeChild(aEnemy[i]):'';
                            aBiu[j].parentNode?oBox.removeChild(aBiu[j]):'';
                            var oBoom = new Image();
                            oBoom.src = 'img/boom.png';
                            oBoom.width = 22;
                            oBoom.height = 30;
                            oBoom.className = 'boom1';
                            oBoom.style.top = b + 'px';
                            oBoom.style.left = a + 'px';
                            oBox.appendChild(oBoom);
                            score.innerHTML = parseInt(score.innerHTML) + 100;
                            
                            //这里用到闭包,因为短时间爆炸太多会存不下,系统会自动清除,导致找不到oBoom
                            ~function(obj){
                                setTimeout(function(){
                                    oBoom.parentNode?oBox.removeChild(obj):'';
                                },100)
                                }(oBoom);        
                        }
                    }
                }
                
                //战机与敌军
                var oPlane = document.getElementById('plane');
                var left = oPlane.offsetLeft;
                var top = oPlane.offsetTop;
                for (var i=aEnemy.length-1;i>=0;i--){
                        var a = aEnemy[i].offsetLeft;
                        var b = aEnemy[i].offsetTop;    
                        if((a-left>-22&&a-left<60)&&(-36<b-top&&b-top<22)){
                            var fScore = oBox.querySelector('.score').innerHTML;
                            var oBoom2 = new Image();
                            oBoom2.src = 'img/boom2.png';
                            oBoom2.width = 60;
                            oBoom2.height = 36;
                            oBoom2.className = 'boom2';
                            oBoom2.style.top = top + 'px';
                            oBoom2.style.left = left + 'px';
                            oBox.appendChild(oBoom2);
                            oBox.removeChild(aEnemy[i]);
                            oBox.removeChild(oPlane);
                            clearInterval(oBox.timer);
                            clearInterval(oBox.BiuTimer);
                            clearInterval(oBox.enemyTimer);
                            setTimeout(function(){
                                gameOver();
                                },200)
                            }
                    }
            };
                
             function gameOver() {
                var fScore = oBox.querySelector('.score').innerHTML;
                clearInterval(oBox.BiuTimer);
                clearInterval(oBox.enemyDownTimer2);
                oBox.innerHTML = '';
                var oDiv =document.createElement('div');
                var oH2 = document.createElement('h2');
                var oP =document.createElement('p');
                var oBtn = document.createElement('div');
                oDiv.className = 'gameover';
                oH2.innerHTML = 'GAME OVER';
                oP.innerHTML = '您的得分为:' + fScore;
                oBtn.innerHTML = '重新开始';
                oBtn.className = 'restart';
                oDiv.appendChild(oH2);
                oDiv.appendChild(oP);
                oDiv.appendChild(oBtn);
                oBox.appendChild(oDiv);
                oBtn.onclick = init;
            };   
        </script>
    </body>
    </html>

    转载于:https://my.oschina.net/u/3376614/blog/864109

    展开全文
  • javascript小游戏实现代码,喜欢用javascript实现游戏效果代码的朋友可以参考下。
  • JavaScript小游戏 跳一跳,原生JavaScript实现跳一跳小游戏,里面包含项目源码.
  • Javascript小游戏2048

    2015-12-14 22:01:34
    JavaScript小游戏,网页版2048,支持键盘事件和鼠标事件。
  • JavaScript小游戏 类似围棋游戏 JavaScript小游戏 类似围棋游戏
  • 今天,本文与大家分享25个好玩的 JavaScript 小游戏,感受一下 JavaScript 的魅力。Bunny Hunt Travians Ajax Chinese Chess Digg Attack Invaders From Mars Solitaire Card Games Jetris – JavaScript Tetris ...
  • javascript小游戏综合

    2011-01-09 10:47:49
    游戏登陆模块的实现 javascript小游戏综合 娱乐游戏 猜拳游戏 俄罗斯方块 连连看游戏 弹球球游戏 智力游戏 爱情测试 拼盘游戏 推箱子游戏 弹球球游戏 测试游戏 比眼力 比动作 贪吃蛇游戏 比灵敏 其他...
  • 这里是12个非常有创意的JavaScript小游戏,希望在给我们带来趣味的同时也能更进一步地了解更深层次的JavaScript语言,原来它可以这样的。 Browser Pong Twitch Browser Ball Crystal Galazy Video & Picture Puzzle...
  • JavaScript小游戏,王思聪打飞机,通过鼠标点击事件来操作,有分值记录,最高分,重开,暂停等功能,鼠标点中飞机才可刷新生成新飞机,热狗是炮弹并带有运动轨迹,自适应布局实现适应三端,适合web课设或者拿来练手...
  • javascript小游戏1.简介 我们将在本文中比较Java语言和JavaScript语言。 JavaScript由Netscape开发。 它最初是用于客户端的脚本语言,后来又用作客户端和服务器脚本的语言。 Java由James Gosling由Sun Microsystems...
    javascript小游戏

    javascript小游戏

    1.简介

    我们将在本文中比较Java语言和JavaScript语言。 JavaScript由Netscape开发。 它最初是用于客户端的脚本语言,后来又用作客户端和服务器脚本的语言。 Java由James Gosling由Sun Microsystems开发。 这些天来,JavaScript在服务器中以node.js的形式使用。 Java和JavaScript之间在程序编码,编译和运行方式方面存在许多差异。

    JavaScript首先被称为Mocha,然后被称为LiveScript。 现在将其称为当前名称。 Java被称为Oak,然后称为Green。

    2. Java和JavaScript之间的区别

    2.1先决条件

    在Linux,Windows或Mac操作系统上需要Java 8 Eclipse Oxygen可以用于此示例。 Node.js与Eclipse安装捆绑在一起。

    2.2下载

    您可以从Oracle网站下载Java 8网站 可以从Eclipse网站上下载Eclipse Oxygen。 可以从此站点下载Node.js。

    2.3设置

    2.3.1 Java设置

    以下是Java环境所需的设置命令。

    设定

    JAVA_HOME="/desktop/jdk1.8.0_73"
    export JAVA_HOME
    PATH=$JAVA_HOME/bin:$PATH
    export PATH

    2.4 IDE

    2.4.1 Eclipse氧气设置

    可以从eclipse网站上下载“ eclipse-java-oxygen-2-macosx-cocoa-x86_64.tar”。 双击打开tar文件。 使用存档实用程序将tar文件解压缩。 解压缩后,您会在文件夹中找到eclipse图标。 您可以通过拖动图标将Eclipse图标从文件夹移动到应用程序。

    2.5启动IDE

    2.5.1 Eclipse Java

    Eclipse具有与语言支持,定制和扩展有关的功能。 您可以单击Eclipse图标以启动Eclipse。 蚀屏幕弹出,如下图所示:

    Java和JavaScript之间的区别-欢迎屏幕
    Eclipse欢迎屏幕

    您可以从弹出的屏幕中选择工作区。 所附图像显示了如何选择它。

    Java和JavaScript之间的区别-Eclipse Workspace
    Eclipse工作区

    您可以在屏幕上看到Eclipse工作台。 所附的屏幕快照显示了Eclipse项目屏幕。

    Java和JavaScript之间的区别-Eclipse Workbench
    Eclipse工作台

    Java Hello World类打印问候语。 添加了以下屏幕截图,以显示eclipse上的类和执行。

    Java和JavaScript之间的区别-Java Hello
    Java Hello

    您可以从菜单创建一个JavaScript项目,并命名该项目,如以下屏幕快照所示:

    Java和JavaScript之间的区别-Javascript项目
    JavaScript专案

    JavaScript(Node.js)hello程序在IDE中执行。 输出“问候”显示在下面的屏幕截图中。

    Java和JavaScript之间的区别-Hello JS
    你好js

    2.6内存管理

    Java语言具有与内存管理相关的功能,并且是一种内存安全的语言。 垃圾收集是一项有助于收集免费和已释放资源的功能。 Java开发人员不能超出分配的内存。 在Java中,当内存消耗超出分配范围时,它将引发错误。 与Java相比,JavaScript需要更少的内存。 它广泛用于网页中的客户端脚本编写。

    2.7异常处理

    在Java中,可以通过使用try,catch和finally块来进行异常处理。

    Java异常处理

    public class ExceptionExample{  
      public static void main(String args[]) throws Exception{  
      try{  
       int result=36/0;  
       System.out.println(" the result is "+result);  
      }  
      catch(ArithmeticException exception)
      {
        System.out.println(exception);
          
        throw new Exception("division by zero");  
      }  
      finally
      {
        System.out.println("finally block is executed at the end");}  
        System.out.println("code below is used for next steps");  
      }  
    }

    JavaScript具有try,catch,throw和finally块来处理异常处理。

    Javascript异常处理

    console.log("entering try-catch statement");
    
    try {
      console.log("entering try block");
      throw "thrown message";
      console.log("this message is never seen");
    }
    catch (e) {
      console.log("entering catch block");
      console.log(e);
      console.log("leaving catch block");
    }
    finally {
      console.log("entering and leaving the finally block");
    }
    
    console.log("leaving try-catch statement");

    2.8多重继承

    让我们举一个例子,看看如何用Java和JavaScript处理它。 卡车是车辆和机器。

    Java和JavaScript之间的区别-多重继承
    多重继承

    Java不支持多重继承。 每个类只能在一个类上扩展,但可以实现多个接口。 下面的示例代码显示了Truck类的实现接口Machine and Vehicle Interfaces

    多重继承的例子

    interface Machine
    {
        
        int distanceTravelled=100;
        public int getDistance();
    }
    interface Vehicle
    {
        int  velocity=50;
        public int getVelocity();
    }
    public class Truck implements Machine, Vehicle
    {
        int time;
        int velocity;
        int distanceTravelled;
        
        
        public Truck(int velocity, int time)
        {
            this.velocity = velocity;
            this.time = time;
        }
        
        public int getDistance()
        {
            distanceTravelled= velocity*time; 
            System.out.println("Total Distance  is : "+distanceTravelled);
            return distanceTravelled;
        }
        public int getVelocity()
        {
            int velocity=distanceTravelled/time;
            System.out.println("Velocity  is : "+ velocity);
            return velocity;
        }
        public static void main(String args[])
        {
            Truck truck = new Truck(50,2);
            truck.getDistance();
            truck.getVelocity();
        }
    }

    JavaScript使用inheritsMultipleObjects函数支持多重继承。 以下示例显示了Truck如何分别从Vehicle和Machine继承函数getDistance和getVelocity。

    多重继承-Javascript

    function inheritsMultipleObjects(baseObject, superObjects) {
      return new Proxy(
        baseObject,
        {
          get(target, key, rec) {
            if (Reflect.ownKeys(target).includes(key)) {
              return Reflect.get(target, key);
            }
            const parent = superObjects.find(
              _parent => Reflect.has(_parent, key)
            );
            if (parent !== undefined) {
              return Reflect.get(parent, key);
            }
            return undefined;
          },
          has(target, key) {
            if (Reflect.ownKeys(target).includes(key)) {
              return true;
            }
            const parentHasKey = superObjects.some(
              _parent => Reflect.has(_parent, key)
            );
            if (parentHasKey) {
              return true;
            }
            return false;
          }
        }
      );
    }
    
    class Vehicle {
      getDistance() {
        return 100;
      }
    }
    class Machine {
      getVelocity() {
        return 50;
      }
    }
    class Truck {}
    const _truck = new Truck();
    const truck = inheritsMultipleObjects(
      _truck,
      [Truck.prototype,Vehicle.prototype, Machine.prototype]
    );
    console.log(truck.getDistance()); 
    console.log(truck.getVelocity()); 
    console.log(truck.constructor);

    2.9线程

    Java具有内置的类来创建线程。 要创建一个新线程,一个类必须扩展一个Thread类,并且必须重写run方法。

    线程示例

    public class NewThread extends Thread
    {  
      public void run()
      {  
        System.out.println("Thread running now");  
      }
      
      public static void main(String args[])
      {  
        NewThread newThread =new NewThread();  
        newThread.start();  
      }  
    }

    Java提供了另一种创建线程的方法。 可以实例化实现Runnable的类,并将其作为参数传递给Thread类。 下面提供了示例代码:

    线程对象–可运行

    public class ThreadObject implements Runnable
    {  
      public void run()
      {  
        System.out.println("ThreadObject running");  
      }  
      
    public static void main(String args[])
    {  
      ThreadObject threadObject =new ThreadObject();  
      Thread thread =new Thread(threadObject);  
      thread.start();  
     }  
    }

    JavaScript具有基于事件的机制来处理并发。 Node.js是一种单线程语言。 它使用多个线程在后台异步执行代码。 让我们看一下下面代码中的派生线程示例:

    分叉线程

    const { fork } = require('child_process');
    var express = require('express');
    var app = express();
    app.get('/endpoint', (request, response) => {
      
       const process = fork('./mail.js');
       const mail_messages = request.body.emails;
    
       process.send({ mail_messages });
       process.on('sendmail', (message) => {
         log.info(` mail count  ${message.counter}`);
       });
       return response.json({ status: true, sent: true });
    });

    下面的代码显示sendMultiplemails如何异步执行。

    发送邮件

    async function sendMultipleMails(mails) {
       let sendMails = 0;
       // code for sending multiple mails
       return sendMails;
    }
    
    process.on('sendmail', async (message) => {
      const countOfMailsSent = await sendMultipleMails(message.mails); 
      
      process.send({ counter: countOfMailsSent });
    });

    2.10便携性

    Java语言由计算机上的Java解释器解释,与操作系统无关。 Java程序在Java虚拟机上作为字节代码执行。 Java代码位于扩展名为.java的程序中。

    Java和JavaScript之间的差异-Java可移植性
    Java可移植性

    HTML页面中将JavaScript用于客户端脚本,该脚本在浏览器上执行。 基于Node.js的服务器端脚本由特定操作系统上的版本8(ECMAScript)JavaScript引擎执行。 该代码写在扩展名为.js的文件中。

    Java和JavaScript之间的差异-节点运行时
    节点运行时

    2.11类型

    Java是一种静态类型的语言。 Java语言具有原始类型和对象类型。 Java具有与自动装箱相关的功能,该功能可自动转换类型。 java.lang.Object类是所有类的基类,而Java遵循命令的单个根链。

    Java和JavaScript之间的区别-Java类型
    Java类型

    JavaScript是一种动态类型的语言。 在编译期间,使用var关键字声明变量。 检查相等性或任何其他运算符时,将动态处理这些类型。

    Java和JavaScript之间的区别-Javascript类型
    JavaScript类型

    2.12库

    Java包有助于打包类。 包范围是Java语言的另一个功能。 Java归档文件有助于对类包进行分组,以用于执行和安装。

    Java和JavaScript之间的区别-Java存档
    Java档案

    JavaScript模块和软件包由node.js和客户端Web归档文件中JavaScript文件组成。

    Java和JavaScript之间的区别-Javascript模块
    JavaScript模块

    2.13运行时错误

    在Java中,运行时错误由编译器和解释器提供。

    Java和JavaScript之间的差异-Java运行时错误
    Java运行时错误

    JavaScript是一种动态类型化的语言,因此可以处理任何类型的数据。 空指针异常不会在JavaScript中发生。 使用运行时(node.js)或在浏览器中运行代码时,会发生运行时错误。

    Java和JavaScript之间的差异-Javascript运行时错误
    JavaScript运行时错误

    2.14文档

    Java具有支持注释的功能,该注释可用于文档生成器。 JavaScript还支持可用于文档生成的注释。

    2.15移动与网络与桌面

    Java语言可用于移动,Web和桌面应用程序开发。 Android支持Java。 JavaScript用于在Android,IOS和其他移动操作系统中构建HTML5(网络)和混合移动应用程序。

    2.16编程范例

    Java是一种面向对象的类和并发编程语言。 Java当前支持版本8中的功能编程功能。JavaScript是一种多范例语言,支持面向对象,过程和功能范例。

    3.结论

    总体而言,Java比JavaScript具有很多优势。 下面的比较表捕获了Java和JavaScript之间的差异。

    比较表

    特征 Java JavaScript
    内存管理 垃圾回收是Java中的一项功能。 Java中没有指针。 Java程序消耗更多内存 JavaScript需要更少的内存。 它在网页中广泛使用
    遗产 接口可用于多重继承。 Java支持单继承。 JavaScript使用InheritsMultipleObjects函数支持多重继承
    线程数 Java具有Thread类和Runnable接口以使用线程。 JavaScript(Node.js)是一种单线程语言,可派生一个线程以异步运行多个线程。
    可移植性 Java字节码取决于平台。 JavaScript是与平台无关的。 运行时(节点运行时)取决于平台。
    访问控制 封装有助于对Java中的类变量和属性进行访问控制。 JavaScript具有对象属性以提供对变量的访问控制。
    种类 Java中使用单个命令模式根链。 JavaScript是一种弱类型语言。
    图书馆 Java归档文件用于构建Java库。 JavaScript(Node.js)具有模块和包。
    运行时错误 在Java的编译和执行阶段检测到运行时错误 在执行阶段会检测到JavaScript运行时错误。
    性能 与JavaScript相比,Java性能要慢一些。 与Java相比,JavaScript性能更快,因为解释器自己运行JavaScript代码。

    4.下载源代码

    下载您可以在此处下载此示例的完整源代码: Java和JavaScript之间的区别

    翻译自: https://www.javacodegeeks.com/difference-between-java-and-javascript.html

    javascript小游戏

    展开全文
  • 一 项目简介主要知识点:JavaScript、HTML、CSS这是一个主要用JS实现的网页版小游戏,游戏规则很简单,通过点击不断下落的黑块来消灭它并获取分数,如果不幸黑块掉落下来或点到了白色区域那么游戏就会终止。...

    一 项目简介

    主要知识点:JavaScript、HTML、CSS
    这是一个主要用JS实现的网页版小游戏,游戏规则很简单,通过点击不断下落的黑块来消灭它并获取分数,如果不幸黑块掉落下来或点到了白色区域那么游戏就会终止。
    游戏截图如下:

    1dbcb0bc524e09976486186f46778bd0.png

    二 游戏框架

    整个游戏可分为以下几个步骤实现:
    1. HTML和CSS画出静态的游戏框架;
    2. DOM结构说明:
    游戏元素使用嵌套的div元素来实现,是一个4*4的方格地图:最外层容器main(一个) > 次外层容器container(一个) > 行容器row(四行) > 方块cell(每行4块)
    3. JS逻辑:
    1)图形的绘制:用js来动态创建div元素,并逐级添加到上层节点当中;
    2)实现下落:通过动态增加包裹所有方块的container容器的top的值来实现下落效果;
    3)持续下落:动态在最上层创建一行方块,同时删除最下层一行方块;隔一段时间调用一次;
    4)用户交互:用户通过点击事件,绑定到整个动画中,通过改变属性名来使黑块转变为白块,实现视觉上的“消灭黑块”;
    5)加分规则:用户成功点击黑块,则调用一次加分函数,并将分数实时写入页面中;
    6)犯规处理:A. 通过判断方块元素属性名来判断用户是否点击白块从而终止游戏;B. 通过判断最后下落的一行是否含有黑块从而判断是否应该终止游戏;
    7)游戏加成:当分数达到某个阶段可通过增加下落的像素值的大小来加快下落速度从而增加游戏难度,增加趣味性;
    8)结束游戏:犯规后,清除调用函数,来终止游戏运行。

    三 完整代码

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>别踩白块</title>
    <style>
    #main{ /*游戏背景板的样式*/
    width:400px;
    height:400px;
    background:white;
    border:1px solid green;
    margin:0 auto;
    position:relative; /*position 属性规定元素的定位类型。relative:生成相对定位的元素,相对于其正常位置进行定位。*/
    overflow:hidden;
    } /*overflow属性规定当内容溢出元素框时发生的事情。hidden::内容会被修剪,并且其余内容是不可见的。*/
    #container{ /*下落方块所在的容器样式*/
    width:100%;
    height:400px;
    position:relative;
    top:-100px; /*黑块最开始不能出现在最下面,否则游戏直接结束,因此容器整体上移100px*/
    }
    .row{ /*一行容器的样式*/
    height:100px;
    width:100%;
    }
    .cell{ /*单个方块的样式*/
    height:100px;
    width:100px;
    float:left; /*float 属性定义元素在哪个方向浮动*/
    }
    .black{ /*黑块的样式*/
    background:black;
    }
    h1{
    text-align:center;
    }
    p{
    display:inline-block; /*display 属性规定元素应该生成的框的类型,inline-block为行内块元素。*/
    }
    </style>
    </head>
    <body>
    <h1>Score: <p id="score">0</p></h1>
    <div id="main">
    <div id="container"></div>
    </div>
    <script>
    var clock=null; //定时器操作句柄
    var state=0; //定义游戏当前状态:0初始化,1进行中,2暂停,3失败
    var speed=2; //方块下落的速度,初始值为2像素

    //初始化
    function init(){
    for(var i=0; i<4; i++){ //创建4行row
    crow();
    }
    $('main').οnclick=function(ev){ //向main添加点击事件
    judge(ev); //调用判断函数来判断用户的点击行为是否合规,参数为事件对象
    }
    }

    //start()启动
    function start(){
    clock=window.setInterval('move()',30); //每30毫秒调用一次移动函数

    //下落动画
    function move(){
    var con=$('container'); //通过自定义函数$()找到container
    var top=parseInt(window.getComputedStyle(con,null)['top']); //window.getComputedStyle(element, [pseudoElt]);方法给出应用活动样式表后的元素的所有CSS属性的值,并解析这些值可能包含的任何基本计算。element用于获取计算样式的Element,pseudoElt(可选)指定一个要匹配的伪元素的字符串。必须对普通元素省略(或null)。返回的样式是一个实时的 CSSStyleDeclaration 对象,当元素的样式更改时,它会自动更新本身。CSSStyleDeclaration 表示一个CSS属性键值对的集合。此处初始值为-100
    if(speed + top >0){ //当最上面一行row走过头了,无法与main上边缘重合时
    top=0; //直接将row的坐标置为0
    }else{
    top += speed;//调节每次下降的像素,必须是100的约数,这样才能移动若干次后刚好为100px,因为一个方块为100px*100px,刚好能够与main上下两边重合
    }
    con.style.top=top + 'px';
    if(top==0){ //当最上面一行row刚好落进main内
    crow(); //调用函数在最上方插入一行row
    con.style.top='-100px'; //并使其位于main上面隐藏的部分
    drow(); //当上下中间共有6行row时调用函数,删除最下面一行row,避免游戏过程中堆积太多元素,给浏览器增加负担
    }else if(top==(-100+speed)){ //一轮刚好进行第一次下落,此时最下面一行row刚好准备和main的下边缘触碰
    var rows=con.children; //ParentNode.children 是一个只读属性,返回 一个Node的子elements ,是一个动态更新的 HTMLCollection
    if((rows.length==5) && (rows[rows.length-1].pass !==1)){ //如果此时有5行row,并且最后一行未成功点击黑块
    fail(); //游戏失败
    }
    }
    }

    //加速
    function speedup(){
    speed +=2;
    if(speed==20){
    alert('Excellent!');
    }
    }

    //游戏失败
    function fail(){
    clearInterval(clock); //clearInterval() 方法可取消由 setInterval() 函数设定的定时执行操作。
    state=3; //另游戏状态等于3,最开始定义的3为失败
    alert('Game Over!');
    }

    //计分
    function score(){
    var newscore=parseInt($('score').innerHTML)+1; //获取score的innerHTML值并转化为整数,再加一分
    $('score').innerHTML=newscore; //增加后的分数写入score
    if(newscore % 10 == 0){ //分数每增加10分
    speedup(); //游戏加速
    }
    }

    //判断玩家点击事件是否需合规
    function judge(ev){
    if(state==3){ //上文设定游戏失败时state为3,此处判断游戏是否已经结束
    return;
    }
    if(ev.target.className.indexOf('black')==-1){ //如果点击的元素的属性名不含black,也就是点中了白块
    fail();
    }else{
    ev.target.className='cell'; //否则点中了黑块,重写属性名,将其改为白块
    ev.target.parentNode.pass=1;//用js获取DOM节点对象后,可以增加一个自定义属性,这里的pass是自定义的,也就是说:当点中黑块的时候,黑块所在的row的pass属性值是1
    score(); //加分
    }
    }

    //创建行row
    function crow(){
    var con=$('container');
    var row=cdiv('row'); //创建属性名为row的div
    var classes=createSn(); //一个row下面的属性的数组
    for(var i=0; i<4; i++){
    row.appendChild(cdiv(classes[i])); //创建4个div添加给row,4个div的属性名中随机产生一个cell black,得到一个含有随机位置黑块的row
    }
    if(con.firstChild==null){ //如果con没有子元素
    con.appendChild(row); //那就添加row
    }else{
    con.insertBefore(row,con.firstChild); //否则将这个row插入到子元素前面
    }
    }

    //删除最后一行
    function drow(){
    var con=$('container');
    if(con.childNodes.length==6){
    con.removeChild(con.lastChild); //当有6行row时删除最后一行
    }
    }
    //创建一个div,className是其类名
    function cdiv(className){
    var div=document.createElement('div');
    div.className=className;
    return div;
    }

    //返回一个数组,随机其中一个单元,值为'cell black',其余皆为'cell'
    function createSn(){
    var arr=['cell','cell','cell','cell'];
    var i=Math.floor(Math.random()*4); //Math.random()随机产生范围为[0,1)之间的小数,Math.floor()向下取整,此处为0,1,2,3,
    arr[i]='cell black';
    return arr;
    }

    //按照id获取对象,取代反复用到的document.getElementById()

    function $(id){
    return document.getElementById(id);
    }

    init();
    start();

    </script>
    </body>
    </html>

    四 知识点整理

    1. CSS:

    -position:relative:position 属性规定元素的定位类型。relative:生成相对定位的元素,相对于其正常位置进行定位。
    -overflow:hidden:overflow属性规定当内容溢出元素框时发生的事情。hidden::内容会被修剪,并且其余内容是不可见的。

    -float:left:float属性定义元素在哪个方向浮动。
    -display:inline-block:display属性规定元素应该生成的框的类型,inline-block为行内块元素。

    2. JS:

    -window.setInterval('move()',30);setInterval()方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。
    -parseInt(window.getComputedStyle(con,null)['top']):window.getComputedStyle(element, [pseudoElt])方法给出应用活动样式表后的元素的所有CSS属性的值,并解析这些值可能包含的任何基本计算。element用于获取计算样式的Element,pseudoElt(可选)指定一个要匹配的伪元素的字符串。必须对普通元素省略(或null)。返回的样式是一个实时的 CSSStyleDeclaration对象,当元素的样式更改时,它会自动更新本身。CSSStyleDeclaration表示一个CSS属性键值对的集合。
    -con.children:ParentNode.children 是一个只读属性,返回 一个Node的子elements,是一个动态更新的 HTMLCollection。
    -ev.target.parentNode.pass=1:用js获取DOM节点对象后,可以增加一个自定义属性,这里的pass是自定义的,也就是说:当点中黑块的时候,黑块所在的row的pass属性值是1。
    -Math.random():随机产生范围为[0,1)之间的小数。
    -Math.floor():向下取整。

    五 相关资源

    刚开始是在实验楼找的项目,看完之后有的地方不是很明白,百度的时候发现网易云课堂刚好有现成的课,就跟着老师看完敲了一边,收获还是蛮大的,毕竟之前学习方式基本是“光看不练”,这算是第一个完整敲完整理完的项目。

    其实这个游戏还有很大的优化空间,比如实验楼提出的那几个问题都挺有价值的,之后如果有空了会尝试一下吧:)

    1. 给这个游戏增加开始/暂停按钮;
    2. 用JQuery重写一遍;
    3. 最佳分数记录(可能需要用到H5新增的web存储)

    最后贴一下链接:
    实验楼:https://www.shiyanlou.com/courses/306
    网易云课堂:http://study.163.com/course/courseMain.htm?courseId=652005

    展开全文
  • 制作一个 JavaScript 小游戏

    千次阅读 2019-05-30 11:06:31
    简评: 作者学习了编程两个月,边学边做了一个 JavaScript 小游戏,在文中总结了自己在这个过程中的一些体会,希望能给其他初学者一些帮助。 对于很多想学编程但一直没下定决心的同学来说,最大的问题可能就是没有...

    简评: 作者学习了编程两个月,边学边做了一个 JavaScript 小游戏,在文中总结了自己在这个过程中的一些体会,希望能给其他初学者一些帮助。

    对于很多想学编程但一直没下定决心的同学来说,最大的问题可能就是没有一个切实可行的计划。这里作者将自己要完成游戏的这件事划分成了很多小任务,比如:

    • 先构思要做一个怎样的游戏,解谜?角色扮演?考虑不同类型游戏需要有什么样的要素。

    • 写下所有需要编程完成的事,对于作者的这个游戏来说就是:

      • 界面
      • 一个技能系统
      • 一个事件系统
      • 角色状态系统
      • 保存功能
    • 寻找好的游戏美术资源:

    • 开始编程完成游戏。

    • 解决发现的 bug。

    当然实际做起来要复杂得多,作者在文中也谈到了自己的遇到的问题和解决办法,并开源了自己的代码,感兴趣的可以去原文详细看看。: )

    项目地址:Loot RPG v1.05**


    原文链接: I built a role playing game in JavaScript. You can, too. Here’s how.
    推荐阅读:Android 开发工具推荐

    展开全文
  • JavaScript小游戏,根据上面的字的颜色从下面选择正确的字,选择正确自动开始
  • 预览二 开发步骤基本面向过程的思想。没有面向对象的部分。...判断得分、判断下一关、判断游戏结束(成语库毕竟用数组来保存。成语数量有限。)三 代码只有两个文件:index.html和db.js1 index.html代...
  • javascript小游戏源代码个人整理,大部分是基于 jquery的。 扫雷,俄罗斯方块,贪吃蛇,数独,老虎机,吉他英雄
  • 利用JavaScript面向对象思想来实现一个小游戏
  • 一款可以选择游戏难度的翻牌配对js小游戏代码。游戏规则:翻开两个格子进行配对,全部格子都配对完成,就过关了,主要考验记忆力。
  • 我的游戏

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,877
精华内容 1,150
关键字:

javascript小游戏

java 订阅