原生js结合html5制作小飞龙的简易跳球

演示地址:http://runjs.cn/detail/yjpvqhal

html代码

<html>
  <head>
    <meta charset="utf-8"/>
    <title>小飞龙的跳球</title>
  </head>
  <body onload="init()">
    <canvas id="game" width="400" height="400" style="border:1px solid #c3c3c3">
      你的游览器不支持html5的画布元素，请升级到IE9+或使用firefox、chrome这类高级的智能游览器！
    </canvas>
    <script>
      var canvas = document.getElementById('game');
      var ctx = canvas.getContext('2d');
      var grad;
      //盒子的起始位置和大小以及球的半径
      var box = {x:20,y:20,w:350,h:350,r:20};
      //球的中心位置和偏移位置
      var inbox = {//box内的限制范围
          bx:(box.w+box.x-box.r),
          by:(box.h+box.y-box.r),
          ix:box.x+(box.r*2),
          iy:box.y+(box.r*2)
        };
      //球的初始位置和变化位置
      var ball = {x:50,y:50,vx:4,vy:8};
      var img = new Image();
      img.src = 'images/qiuqiu.png';
      var hue = [[255,0,0],[255,255,0],[0,255,0],[0,255,255],[0,0,255],[255,0,0]];
      function init(){
        grad = ctx.createLinearGradient(box.x,box.y,box.w,box.h);
        for(var i=0;i<hue.length;i++){
          var color = 'rgb('+hue[i][0]+','+hue[i][1]+','+hue[i][2]+')';
          grad.addColorStop(i/hue.length,color);
        }
        ctx.lineWidth = box.r;
        ctx.fillStyle = 'rgb(200,0,50)';
        ctx.fillStyle = grad;
        moveBall();
        setInterval(moveBall,50);
      }
      //碰撞检测并重新确定球的位置
      function moveBallEndCheck(){
        var nx = ball.x + ball.vx;
        var ny = ball.y + ball.vy;
        if(nx > inbox.bx){//当前x大于上边框边界
          ball.vx = -ball.vx;//球的变化x坐标当前当前变化x坐标的负数
          nx = inbox.bx;//当前位置为上边框的位置
        }
        if(nx < inbox.ix){//当前位置小于下边框
          nx = inbox.ix;//当前位置为下边框的x
          ball.vx = -ball.vx;//球的变化x坐标翻转取负
        }
        if(ny > inbox.by){
          ny = inbox.by;
          ball.vy = -ball.vy;
        }
        if(ny < inbox.iy){
          ny = inbox.iy;
          ball.vy = -ball.vy;
        }
        ball.x = nx;
        ball.y = ny;
      }
      function moveBall(){
        ctx.clearRect(box.x,box.y,box.w,box.h);
        moveBallEndCheck();
        ctx.beginPath();
        //console.log(ball.x+"\t"+ball.y+"\t"+ball.vx+"\t"+ball.vy+"\t"+(ball.x-box.r)+"\t"+(ball.y-box.r));
        ctx.drawImage(img,(ball.x-box.r),(ball.y-box.r));
        ctx.fillRect(box.x,box.y,box.r,box.h);
        ctx.fillRect((box.x+box.w-box.r),box.y,box.r,box.h);
        ctx.fillRect(box.x,box.y,box.w,box.r);
        ctx.fillRect(box.x,(box.y+box.h-box.r),box.w,box.r);
        ctx.closePath();
        ctx.fill();
      }
    </script>
  </body>
</html>

演示图片

以上所述就是本文的全部代码，希望大家能够喜欢。

赞 (0)

相关推荐

  • js+html5获取用户地理位置信息并在Google地图上显示的方法

    本文实例讲述了js+html5获取用户地理位置信息并在Google地图上显示的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <body> <p id="demo">Click the button to get your position:</p> <button onclick="getLocation()">Try It</button&

  • js模仿html5 placeholder适应于不支持的浏览器

    html5原生支持placeholder,对于不支持的浏览器(ie),可用js模拟实现. js代码 复制代码 代码如下: (function(){ //判断是否支持placeholder function isPlaceholer(){ var input = document.createElement('input'); return "placeholder" in input; } //不支持的代码 if(!isPlaceholer()){ //创建一个类 function P

  • JS HTML5 音乐天气播放器(Ajax获取天气信息)

    JS HTML5 音乐天气播放器(Ajax获取天气信息)

    晚上要考软件工程,实在不想复习.写个播放器吧,这个只是个用来学习的小Demo,众多不完善之处,下面贴出源代码,如果要转载,请加上版权声明 PS:因为Ajax涉及到跨域获取天气信息,有两个版本,一个是直接跨域,IE10支持,其他的浏览器要改配置.另一个是服务器端的weather.php,获取天气信息返回json. weather.php就不写了,里面的对应路径存放对应的文件 演示地址: http://569375.ichengyun.net/fm/ 实现功能:音乐播放,进度调节(滑动模块),音量条

  • 原生js结合html5制作简易的双色子游戏

    原生js结合html5制作简易的双色子游戏

    想转html5游戏开,这是学习练手的东西,最开始是用面向过程的方式实现,后面用面向对象的方式实现(被坑了)-- 演示地址:http://runjs.cn/detail/ss8pkzrc html代码 <html> <head> <meta charset="utf-8"/> <title>掷色子的游戏</title> </head> <body> <table> <tr> <

  • js+html5绘制图片到canvas的方法

    本文实例讲述了js+html5绘制图片到canvas的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not suppor

  • 使用非html5实现js板连连看游戏示例代码

    向大家分享一款如何实现js版连连看游戏,如下图所示: 首先看一下html的布局方式在index.html文件中: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http

  • js判断浏览器是否支持html5

    现在HTML5似乎慢慢流行起来了,有些前端高手为了兼容考虑,会在网页中添加对客户端浏览器判断的代码,知道用户浏览器是否支持HTML5,下面分享想我自己使用的2种方法 方法一, <script> function checkhHtml5() { if (typeof(Worker) !== "undefined") { alert("支持HTML5"); } else { alert("不支持HTML5"); } } </scri

  • 原生js结合html5制作小飞龙的简易跳球

    原生js结合html5制作小飞龙的简易跳球

    演示地址:http://runjs.cn/detail/yjpvqhal html代码 <html> <head> <meta charset="utf-8"/> <title>小飞龙的跳球</title> </head> <body onload="init()"> <canvas id="game" width="400" heigh

  • 原生js配合cookie制作保存路径的拖拽

    主要是运用了原生js封装了一个cookie,然后使用了三个事件做拖拽,分别是onmousedown,onmousemove,onmouseup,这三个事件其中两个需要添加事件对象,也就是event,事件对象是一个不兼容的东西,所以需要处理兼容性的问题,也就是oEvent = ev || event; 通过事件对象,获取鼠标点击屏幕时的那个点,然后减去被拖拽物体距离左边的一个距离,最终就可以获取到当前点击位置距离物体的距离. 最后在onmouseup的时候做了一个return false,主要是为

  • 原生JS实现的简单小钟表功能示例

    原生JS实现的简单小钟表功能示例

    本文实例讲述了原生JS实现的简单小钟表功能.分享给大家供大家参考,具体如下: 先来看看运行效果: 完整代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>www.jb51.net 钟表</title> <style type="text/css"> body { background-color:#00A2D

  • 原生js实现贪食蛇小游戏的思路详解

    原生js实现贪食蛇小游戏的思路详解

    先不多说先上图 下面是代码部分(这里你可以根据需要改变蛇头和身体还有食物的图片,然后默认的样式是使用纯颜色的如果没有更改我的背景图片的话------改这些图开始是想搞笑一下朋友哈哈哈,请不要在意哈),还有操作键是使用 ↑ ↓ ← → ) <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>贪食蛇</title>

  • 原生JS实现点击数字小游戏

    原生JS实现点击数字小游戏

    原生JS实现点击数字小游戏,供大家参考,具体内容如下 最近公司在季度测试中出了一道很有趣的测试题,要求使用我们自己的黑科技–IVX来实现,感兴趣的朋友可以去了解哦,是真的黑科技,在这里我还是用原生JS来实现吧,题目是这样的: 实现一个点击数字的小游戏:依次点击容器中随机生成的数字元素,生成的数字元素会在5S后消失,你将凭借记忆点击按照数字升序依次点击生成的数字方可通过该关卡游戏. 话不多说直接看运行效果图: 上代码: <!DOCTYPE html> <html lang="en

  • 原生js实现Flappy Bird小游戏

    原生js实现Flappy Bird小游戏

    这是一个特别简单的用原生js实现的一个小鸟游戏,比较简单,适合新手练习. html结构 <div id="game"> <div id="bird"></div> </div> css样式 #game { width: 800px; height: 600px; border: 1px solid #000; background: url(images/sky.png); overflow: hidden; posi

  • 原生js编写贪吃蛇小游戏

    本文实例为大家分享了js编写贪吃蛇小游戏的具体代码,供大家参考,具体内容如下 刚学完js模仿着教程,把自己写的js原生小程序. HTML部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&g

  • 原生JS面向对象实现打字小游戏

    原生JS面向对象实现打字小游戏

    本文实例为大家分享了JS面向对象实现打字小游戏的具体代码,供大家参考,具体内容如下 Demo介绍 通过键盘点击下落小球所显示的数字,小球刷新再任意位置重新掉落.并且,每五个球后掉落速度加快 小球刷新位置 大小,颜色随机.用面向对象class方法实现 该demo源码可直接使用.赋值到html文件 然后打开就可以使用,可用作学校课设使用 源码 <!DOCTYPE html> <html lang="en"> <head> <meta charset

  • 原生JS实现贪吃蛇小游戏

    本文实例为大家分享了JS实现贪吃蛇小游戏的具体代码,供大家参考,具体内容如下 思路:在页面上添加一个地图,以提供边界,在地图中随机出现食物,给蛇身设置一个初始长度,用键盘方向键控制蛇的走向,当蛇触碰到食物时(既坐标重复时),增加蛇身长度,碰到墙壁或自身时,程序停止,游戏结束. HTML结构: <body> <div id="map"></div> </body> CSS样式: <style> #map{ width: 600p

随机推荐