见缝插针（js基础）

最新推荐文章于 2019-08-08 11:00:13 发布
最新推荐文章于 2019-08-08 11:00:13 发布
阅读量167 收藏
点赞数
文章标签： php python javascript ViewUI
原文链接：https://my.oschina.net/u/3709170/blog/1552672
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

 

 

 <!DOCTYPE html>

<html>

 

<head>

    <meta charset="utf-8">

    <title></title>

    <style media="screen">

        body {

            margin: 0px;

            padding: 0px;

        }

 

        .wrap {

            width: 400px;

            height: 400px;

            /*border: 1px solid black;*/

            position: relative;

        }

 

        .center {

            width: 50px;

            height: 50px;

            position: absolute;

            top: 175px;

            left: 175px;

            background: black;

            /*border: 25px solid black;*/

            border-radius: 50%;

        }

 

        .ball {

            width: 26px;

            height: 26px;

            background: black;

            border-radius: 50%;

            position: absolute;

            top: -26px;

            left: -12px;

        }

 

        .newball {

            width: 26px;

            height: 26px;

            background: black;

            border-radius: 50%;

            position: absolute;

            top: -26px;

            left: -12px;

        }

 

        .line {

            width: 2px;

            height: 124px;

            background: black;

            position: absolute;

            top: 76px;

            left: 199px;

            transform-origin: 50% 100%;

        }

 

        .box {

            width: 400px;

            height: 600px;

            border: 1px solid black;

            background: rgb(224, 224, 224);

            overflow: hidden;

            /*text-align: center;*/

            /*line-height: 40px;*/

            /*font-size: 40px;*/

        }

 

        .start {

            width: 400px;

            height: 600px;

            background: rgba(0, 0, 0, 0.7);

            position: absolute;

            top: 1px;

            left: 1px;

            text-align: center;

            line-height: 600px;

            font-size: 40px;

            color: rgb(214, 206, 206);

        }

 

        .startBtn {

            width: 150px;

            height: 60px;

            border: 2px solid gray;

            position: absolute;

            top: 350px;

            left: 125px;

            background: rgba(188, 188, 188, 0.8);

            border-radius: 20px;

            text-align: center;

            line-height: 60px;

            font-size: 25px;

            color: rgb(88, 100, 100);

            cursor: pointer;

        }

 

        .num {

            width: 26px;

            height: 26px;

            background: black;

            color: white;

            border-radius: 50%;

            margin-left: 187px;

            margin-top: 5px;

            text-align: center;

            line-height: 26px;

            font-size: 15px;

        }

        .over{

          width: 400px;

          height: 600px;

          background: rgba(0, 0, 0, 0.7);

          position: absolute;

          top: 1px;

          left: 1px;

          text-align: center;

          line-height: 600px;

          font-size: 40px;

          color: rgb(214, 206, 206);

          display: none;

        }

        .again{

          width: 150px;

          height: 60px;

          border: 2px solid gray;

          position: absolute;

          top: 350px;

          left: 125px;

          background: rgba(188, 188, 188, 0.8);

          border-radius: 20px;

          text-align: center;

          line-height: 60px;

          font-size: 25px;

          color: rgb(88, 100, 100);

          cursor: pointer;

        }

        .niu{

          width: 400px;

          height: 600px;

          background: rgba(0, 0, 0, 0.7);

          position: absolute;

          top: 1px;

          left: 1px;

          text-align: center;

          line-height: 600px;

          font-size: 200px;

          color: rgb(214, 206, 206);

          display: none;

        }

    </style>

</head>

 

<body>

    <div class="box"></div>

    <div class="start">

        见缝插针<br>

        <div class="startBtn">START</div>

    </div>

    <div class="over">

      游戏结束

      <!-- <div class="again">AGAIN</div> -->

    </div>

    <div class="niu">

      牛逼

    </div>

</body>

<script type="text/javascript">

    var start = document.querySelector('.start');

    var startBtn = document.querySelector('.startBtn');

    startBtn.onclick = function() {

        start.style.display = 'none';

    }

    var body_ = document.querySelector('.box');

    var wrap = document.createElement('div');

    wrap.className = 'wrap';

    body_.appendChild(wrap);

    var center = document.createElement('div');

    center.className = 'center';

    body_.appendChild(center);

    var index = 1;

    var x = 5;

    var arr = [];

    function made(){

    for (var i = 0; i < x; i++) {

        var line = document.createElement('div');

        line.className = 'line';

        line.setAttribute('id', 'init-line' + (i + 1) + '');

        line.style.transform = 'rotate(' + i * (360 / x) + 'deg)';

        arr.push(i * 360 / x);

        console.log(arr);

        var ball = document.createElement('div');

        ball.className = 'ball';

        line.appendChild(ball);

        wrap.appendChild(line);

    }

}

    var timer = null;

    var z = 0;

    timer = setInterval(function() {

        z++;

        wrap.style.transform = 'rotate(' + z + 'deg)';

        wrap.style.transformOrigin = '50% 50%';

        if (z >= 360) {

            z = 0;

        } else {

            z++;

        }

    }, 20)

 

    body_.onclick = function() {

        var newline = document.createElement('div');

        newline.className = 'newline';

        newline.style.width = '2px';

        newline.style.height = '124px';

        newline.style.background = 'black';

        newline.style.position = 'absolute';

        newline.style.left = '199px';

        newline.style.top = '76px';

        newline.style.transformOrigin = '50% 100%';

        var newZ = 180 - z;

        if (newZ <= 0) {

            arr.push(newZ + 360)

        } else {

            arr.push(newZ);

        }

        // console.log(arr);

        newline.style.transform = 'rotate(' + newZ + 'deg)';

        var newball = document.createElement('div');

        newball.className = 'newball';

        newline.appendChild(newball);

        wrap.appendChild(newline);

        for (var i = 0; i < arr.length - 1; i++) {

            if (Math.abs(arr[i] - arr[arr.length - 1]) <= 10) {

                clearInterval(timer);

                gameover();

            }

        }

        var mm=0;

        var nums=document.querySelectorAll('.num');

        body_.removeChild(nums[mm]);

        console.log(nums.length);

        if (nums.length==1) {

          next();

        }

    }

    var c = 10;

    for (var i = 0; i < c; i++) {

        var num = document.createElement('div');

        num.className = 'num';

        num.innerHTML =c-i;

        body_.appendChild(num);

    }

    var niu=document.querySelector('.niu');

    function next(){

      clearInterval(timer);

      niu.style.display='block';

    }

      made();

    var over=document.querySelector('.over');

    function gameover(){

        over.style.display='block';

    }

</script>

 

</html>
大量学习资源，请注册官网，点击链接，QQ登录即可http://www.kgc.cn/index.php?tuin=7124 

转载于:https://my.oschina.net/u/3709170/blog/1552672

weixin_34378767
关注
类似见缝插针游戏的HTML5实现
04-01
写的比较一般~~凑活着看吧 主要是旋转，可以在这上面修改一下
见缝插针
逍遥的博客
08-02 1038
HTML &lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt;     &lt;meta charset="UTF-8"&gt;     &lt;title&gt;见缝插针&lt;/title&gt;     &lt;style&gt;         .container{          
利用js写的见缝插针小游戏
weixin_45457509的博客
08-08 773
利用js写的见缝插针小游戏 今天给大家带来的就是一款叫做《见缝插针》的游戏。有空你就往里插，直到你无处可插！看你能过多少关！ 游戏截图 失败时 代码如下 js代码 index.js 测试游戏源码的js文件 gameurl = ' '; imgUrl = " "; openid = ''; var reg = new RegExp("[?&]" + 'openid' + "=([^?...
canvas和js写的"见缝插针"
刘开建的博客
09-03 2233
canvas的小游戏"见缝插针", 自己平常练练手,所以代码写的比较随意,不喜勿喷哦! 有兴趣的朋友可以复制到电脑上跑跑,如果有bug麻烦通知一下 html和css代码: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;见缝插针&lt;
canvas+js绘制见缝插针
kaituozhewangluo的博客
11-15 548
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;utf-8&quot;&amp;gt; &amp;lt;title&amp;gt;见缝插针&amp;lt;/title&amp;gt; &amp;lt;meta name=&am
前端 JavaScript 小游戏 见缝插针
最新发布
05-29
1. **JavaScript基础**： - **变量与数据类型**：在"见缝插针"游戏中，JavaScript可能用到了变量来存储分数、时间等信息，数据类型可能包括数字、字符串和布尔值。 - **控制结构**：游戏逻辑可能涉及if...else语句...
基于JavaScript简易版见缝插针
12-29
JavaScript简易版见缝插针游戏是一种常见的编程练习，它基于HTML5 Canvas技术和JavaScript实现。这个游戏的目的是让玩家操控一个虚拟的针，在旋转的圆盘上找到合适的角度和时机，尽可能地插入缝隙中，以获得更高的...
见缝插针.zip
07-23
【标签】"jQuery"指出了这款游戏的前端技术基础，jQuery是一个广泛使用的JavaScript库，简化了DOM操作、事件处理、动画和Ajax交互。它使得开发者能更高效地编写代码，提高了网页应用的性能。"游戏"标签表明这是个...
精品源码 / 休闲游戏 / 见缝插针
01-11
【见缝插针游戏开发详解】 见缝插针是一款广受欢迎的休闲益智游戏，它以其独特的玩法和挑战性吸引了众多...通过分析和学习这些文件，开发者可以深入理解见缝插针游戏的实现原理，并以此为基础创作更多有趣的休闲游戏。
H5见缝插针
07-05
在“H5见缝插针”游戏中，HTML5的主要贡献在于Canvas元素，它是游戏画面的基础。Canvas是一个二维绘图上下文，允许开发者通过JavaScript进行动态图形绘制，包括游戏中的圆形盘面、针的移动轨迹以及得分显示等。 ...
HTML5见缝插针.zip
07-11
HTML5见缝插针
jQuery插件游戏可手机触屏切西瓜+见缝插针源码
09-03
使用jQuery编写游戏切西瓜+见缝插针等源码，简单抒写，亲测可直接运行
见缝插针HTML5游戏源码
06-19
见缝插针HTML5游戏源码，运行需要服务器环境，已经反复测试，放心使用。
见缝插针H5源码
05-04
见缝插针 H5源码
canvas游戏-见缝插针
12-28
一个专门为圣诞节打造的小游戏，见缝插针，整个画面由canvas绘制而成，用的原生js
利用js写的见缝插针小游戏（推荐给新手)
热门推荐
arbitatry的专栏
08-17 1万+
标题之所以写推荐给新手，是因为我也是个刚学js一周的新人，想练练手，于是就花了一下午写了这个游戏，所以我写的可能更适合新手，大神勿喷。    这个游戏是利用原生的js以及html5的canvas技术做的一个小游戏，游戏规则跟手机上的见缝插针一样的，这是我的游戏界面： 这个是无限插针的，就是针有无限多，直到你失败了或是点击reset按钮停止. 以下把我的源码贴出来供大家参考： js代
HTML5-见缝插针(Canvas)
jicemoon的博客
03-18 3050
HTML5游戏 - 见缝插针标签（空格分隔）： WEB HTML5 见缝插针相信大家都玩过这个游戏, 这是我为了练习所学的Canvas而写的一个小游戏
HTML5见缝插针小游戏
bright_mmmmmmmmmmmm的专栏
06-03 1671
用H5与cocos-js结合编写的小游戏，见缝插针。 游戏截图 ​点击鼠标发射针，插在中间的球体当中进行旋转。 onTouchBegan:function(touch, event){         var target =event.getCurrentTarget();         if(target.playerBall.lenght  
见缝插针 一个canvas小游戏
Web_ZhangJian的博客
12-01 2119
一个canvas小游戏 https://github.com/Web-ZhangJian/jianfengchazhen JavaScript代码： var canvas=document.querySelector("#canvas"); var ctx=canvas.getContext("2d"); var centerX = 400;//大圆X轴坐标 var centerY
Python写见缝插针
05-23
"见缝插针"是一种编程技巧，指的是在代码中找到合适的位置来插入一些额外的功能或处理。在Python中，这种技巧可以通过函数装饰器来实现。函数装饰器是一个特殊的函数，可以接受一个函数作为参数，并返回一个新的函数...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值