《JS——小游戏》

于 2023-11-26 17:37:18 发布
阅读量226 收藏
点赞数
文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2303_78171667/article/details/134630383
版权

1、赛马游戏

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <style>

            table{

                width: 1200px;

                height: 400px;

            }

            

            img{

                width: 100px;

            }

            

            .begin{

                width: 100px;

            }

        </style>

    </head>

    <body>

        <div align="center">

            <h3>游戏规则：2分一次。赢了+5分。 中途主持人会随机暂停。选手可以换马。如果换马额外支付1分。</h3>

            

            <table style="border: 1px solid black;" cellpadding="0" cellspacing="0" border="1px">

                <tr>

                    <td class="begin"><img src="img/1.gif" /> </td>

                    <td>赛道~</td>

                </tr>

                <tr>

                    <td class="begin"><img src="img/1.gif" /> </td>

                    <td>赛道~</td>

                </tr>

                <tr>

                    <td class="begin"><img src="img/1.gif" /> </td>

                    <td>赛道~</td>

                </tr>

                <tr>

                    <td class="begin"><img src="img/1.gif" /> </td>

                    <td>赛道~</td>

                </tr>

            </table>

            

            <button id="btn">开始比赛</button>

            

        </div>

        

        <script>

            var dsq ;

            //让图片由左边往右 开始运动

            var img0 = document.getElementsByTagName("img")[0];

            var img1 = document.getElementsByTagName("img")[1];

            var img2 = document.getElementsByTagName("img")[2];

            var img3 = document.getElementsByTagName("img")[3];

            

            var left_index0 = 0;

            var left_index1 = 0;

            var left_index2 = 0;

            var left_index3 = 0;

            

            

            

            document.getElementById("btn").onclick = function(){

                if(document.getElementById("btn").innerText =="开始比赛"){

                    document.getElementById("btn").innerText ="暂停比赛";

                    dsq = setInterval(saima,10);

                }else{

                    document.getElementById("btn").innerText ="开始比赛";

                    clearInterval(dsq);

                }

            }

            

            

            function saima(){

                let sjs0 = Math.floor(Math.random()*10);

                let sjs1 = Math.floor(Math.random()*10);

                let sjs2 = Math.floor(Math.random()*10);

                let sjs3 = Math.floor(Math.random()*10);

                left_index0 = left_index0 + sjs0;

                left_index1 = left_index1 + sjs1;

                left_index2 = left_index2 + sjs2;

                left_index3 = left_index3 + sjs3;

                

                img0.style.marginLeft = left_index0 + "px";

                img1.style.marginLeft = left_index1 + "px";

                img2.style.marginLeft = left_index2 + "px";

                img3.style.marginLeft = left_index3 + "px";

                

                if (left_index0>=1000) {

                    alert("第1匹马赢了");

                    clearInterval(dsq);

                    location.reload();

                }

                if (left_index1>=1000) {

                    alert("第2匹马赢了");

                    clearInterval(dsq);

                    location.reload();

                }

                if (left_index2>=1000) {

                    alert("第3匹马赢了");

                    clearInterval(dsq);

                    location.reload();

                }

                if (left_index3>=1000) {

                    alert("第4匹马赢了");

                    clearInterval(dsq);

                    location.reload();

                }

            }

        </script>

    </body>

</html>

2、广告牌的运动

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <style>

            /* 去除浏览器自带的边距 ，否则影响广告牌移动的距离的误差 */

            *{

                margin: 0;

            }

            

            img{

                border: 1px solid red;

                margin-top: 200px;

                height: 100px;

            }

            

        </style>

        

        

    </head>

    <body>

        <a href="https://baidu.com/"><img src="img/广告.jpg"/></a>

        

        

        

        <script>

            /*

                课后作业：

                1.实现广告牌在浏览器的最左侧 进行上下的循环移动。

                什么是广告牌？本质超链接 外观是图片 课后作业+2分

                

                元素的移动 依赖定时器的 模拟速度

                

            */

        

        

        

        

        

         var img = document.getElementsByTagName("img")[0];

        

         var zb = 0 ; //表示当前图片的纵向坐标 最上面是0 最下面是？？

        

         var maxHight = window.innerHeight - 100;//获取浏览器的宽度高度 还要减去图片自身的高度

        

         var fx = 1;//1表示向下 0 表示向上

        

         setInterval(function(){

            

             maxHight = window.innerHeight - 100;

             console.log(maxHight);

             if(fx == 1){

                 zb++; 

             }else{

                 zb--;

             }

            

             img.style.marginTop = zb + "px";

            

             if(zb>=maxHight){

                 fx = 0;

             }

             if(zb<=0){

                 fx = 1;

             }

            

            

         },1);

        

        

        

        

        </script>

        

        

        

    </body>

</html>

3、顺时针移动的广告牌

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <style>

            /* 去除浏览器自带的边距 ，否则影响广告牌移动的距离的误差 */

            *{

                margin: 0;

            }

            

            img{

                border: 1px solid red;

                margin-top: 0px;

                height: 100px;

                width: 100px;

            }

            

        </style>

        

    </head>

    <body>

        <a href="https://baidu.com/"><img id="a" src="img/广告.jpg"/></a>

        

        <script>

            /*

                课后作业：

                2.实现广告牌在浏览器的顺时针移动。      课后作业+2分

            */

        

         var maxHight = window.innerHeight - 100;//获取浏览器的宽度高度 还要减去图片自身的高度

         var maxWidth = window.innerWidth - 100; //获取浏览器的宽度高度 还要减去图片自身的高度

        

         var img = document.getElementById("a");

         var zzb = 0;//纵坐标

         var hzb = 0;//横坐标

        

         var fx = 1;//1表示向下 2表示向右 3表示向上 4表示向左

        

         setInterval(function(){

                

                switch(fx){

                    case 1:

                        zzb++;

                        break;

                        

                    case 2:

                        hzb++;

                        break;

                        

                    case 3:

                        zzb--;

                        break;

                        

                    case 4:

                        hzb--;

                        break;

                    

                }

                

                if(zzb==maxHight && hzb==0){

                    fx = 2;

                }

                

                if(hzb==maxWidth && zzb==maxHight ){

                    fx = 3;

                }

                

                if(hzb==maxWidth && zzb == 0){

                    fx = 4;

                }

                

                if(hzb==0 && zzb == 0){

                    fx = 1;

                }

                

                 img.style.marginTop = zzb + "px";

                 img.style.marginLeft = hzb + "px";

            

         },1)

        

        

        

        </script>

    </body>

</html>

4、翻牌游戏

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <style>

            img{

                width: 100px;

                height: 100px;

            }

            td{

                border: 1px solid red;

            }

            

        </style>

    </head>

    <body>

        <div align="center">

        

            <table>

                <tr>

                    <td><img src="img/0.png" /> </td>

                    <td><img src="img/0.png" /> </td>

                    <td><img src="img/0.png" /> </td>

                    <td><img src="img/0.png" /> </td>

                </tr>

                <tr>

                    <td><img src="img/0.png" /> </td>

                    <td><img src="img/0.png" /> </td>

                    <td><img src="img/0.png" /> </td>

                    <td><img src="img/0.png" /> </td>

                </tr>

                <tr>

                    <td><img src="img/0.png" /> </td>

                    <td><img src="img/0.png" /> </td>

                    <td><img src="img/0.png" /> </td>

                    <td><img src="img/0.png" /> </td>

                </tr>

                <tr>

                    <td><img src="img/0.png" /> </td>

                    <td><img src="img/0.png" /> </td>

                    <td><img src="img/0.png" /> </td>

                    <td><img src="img/0.png" /> </td>

                </tr>

            </table>

            <button id="btn">开始游戏</button>

            

        </div>

        <script>

            /*

                3.翻纸牌游戏  素材准备好。不准备 就不教了。 准备8张不同的卡通图片 和 一张卡的背面

                课后作业+10分

            */

        

         var img = document.getElementsByTagName("img");

        

         var firstImg ; //表示第一次翻开的的图片路径

         var secondImg ; //表示第二次翻开的的图片路径

         var img1 ;

         var img2 ;

         var index = 0 ;//表示当前是第几次点击

        

        

         var isA = false;//是否快速点击

        

         //一定要 将自己的思路 清晰地描述 出来.

         //将前台页面绘制出来. 4行4列的表格

        

         //利用数组将16张图片的路径 进行保存

         var imgs = ["1.jpg","1.jpg","2.jpg","2.jpg","3.jpg","3.jpg","4.jpg","4.jpg","5.jpg","5.jpg","6.jpg","6.jpg","7.jpg","7.jpg","8.jpg","8.jpg"];

        

        

         //将原来的数组进行随机的打乱

         imgs.sort(function(){

             return Math.random() - 0.5;

         })

        

        

        

        

        

         for(let i = 0 ; i<img.length ;i++){

                

                img[i].onclick = function(){

                    

                    

                    index ++;

                    

                    img[i].setAttribute("src" , "img/" + imgs[i] );

                    

                    if(index==1){

                        firstImg = img[i].getAttribute("src");

                        img1 = i;

                    }else if(index==2){

                        secondImg = img[i].getAttribute("src");

                        img2 = i;

                    }

                    

                    

                    

                    

                    if(firstImg != secondImg && index==2 ){

                        index = 0;

                        //延迟1秒再翻回去

                        setTimeout(function(){

                            img[img1].setAttribute("src" , "img/0.png" );

                            img[img2].setAttribute("src" , "img/0.png" );

                            

                            

                        },1000)

                    }

                    

                    

                    

                }

                

         }

        

        

        

        

        

        

        

        </script>

    </body>

</html>

5、演示下载功能

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <link href="css/bootstrap.css" rel="stylesheet" />

        

        <script src="js/bootstrap.js"></script>

    </head>

    <body>

        

        <div class="progress" role="progressbar" aria-label="Example with label" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">

         <div id="a" class="progress-bar" style="width: 0%">0%</div>

        </div>

                

                

                

        

        <script>

            

            

            

            

            var i = 0;

            

            var div = document.getElementById("a");

            

            var aaa = setInterval(function(){

                i++;

                div.style.width = i + "%";

                div.innerText = i +"%";

                

                if (i==100) {

                    clearInterval(aaa);

                }

            },10000);

            

        </script>       

                

    </body>

</html>

6、数组的排序算法

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

    </head>

    <body>

        

        

        <script>

            

            var a = [1,432,6,234,65,76,876,987];

            

            a.sort(function(a,b){

                return b-a; //倒序

            })

            console.log(a);

            

            

            a.sort(function(a,b){

                return a-b; //正序

            })

            console.log(a);

            

            

            a.sort(function(){

                return Math.random() - 0.5; //随机排列

            })

            

            console.log(a);

            

            

        </script>

        

        

    </body>

</html>

7、如何去除的事件

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

    </head>

    <body>

        <button>按钮</button>

        <button>取消按钮</button>

        <script>

            document.getElementsByTagName("button")[0].onclick = function(){

                alert(123);

            }

            

            document.getElementsByTagName("button")[1].onclick = function(){

                

                document.getElementsByTagName("button")[0].onclick = null;

                

            }

            

        </script>

    </body>

</html>

游如鑫
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS 实战 贪吃蛇游戏
2301_80441013的博客
05-23 485
想要开始和暂停两个按钮居中，可以将盒子设置为弹性盒也可以使用其他方法【代码】
JavaScript简单小游戏
07-13
使用JavaScript简单做Html小游戏
js 编写的简单游戏代码,js小游戏游戏代码大全
chatgpt002的博客
10-18 5457
像素鸟曾经是一个火爆一时的小游戏，我们尝试用JavaScript来实现像素鸟的核心功能。操作方式：鼠标点击胜利条件：无失败条件：小鸟碰到了屏幕上下的水管就算失败看似是小鸟在向前飞行，实际上是水管在向后移动，以减少内存的消耗。对于水管的显示，使用背景图片的background-size属性，设置100% 100% 即可让背景图片完全覆盖随机高度的div。对于水管的移动，使用css3的动画属性，这可以很方便的控制水管移动的距离、速度与方向。
原生JS 实现小游戏 贪吃蛇
m0_64191440的博客
08-16 3101
JS 超详细 贪吃蛇 案例 速速围观
js游戏集合
weixin_30852573的博客
09-06 5504
今天给大家分享一些js写的小游戏，因为游戏比较多，因此小编在这里只给大家部分游戏运行截图。下面我们来看看具体有哪些游戏。下一篇文字小编将和大家一起来玩玩红白机上的游戏，比如魂斗罗，赤色要塞，绿色兵团啥的。获取js游戏密码步骤：关注公众号"简易编程网"，回复pass，就可以获取到密码了。是男人就下一百层变态版。
通过原生 JS 写一个象棋小游戏，感受无穷乐趣
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
03-02 1847
前言最近没什么需求，借着上班摸鱼的时间，写点代码玩玩。过年的时候总是和爷爷下象棋，这次用原生JS写了一个象棋小游戏，但是技术有限，只能自己一个人左右手互博来下棋。象棋规则基本上都实现了，下面就来给大家分享一下。我正在参与码上掘金编程挑战赛，请为我点赞吧！一、绘制棋盘和棋子游戏的元素是棋盘和棋子，图片都是在网上搜，然后用截图工具截下来，就可以直接使用了。棋子通过遍历数组来渲染，因为棋子的种类很多，所...
微信小程序——猜数字游戏
04-21
在这个“微信小程序——猜数字游戏”项目中，我们将会探讨微信小程序开发的一些核心技术和实现策略。 首先，我们要了解小程序的基本结构。微信小程序由多个页面构成，每个页面包括wxml（结构层）和wxss（样式层）...
小程序精选源码——小游戏类.rar
06-10
【小程序精选源码——小游戏类.rar】这个压缩包文件包含了多个关于小程序开发的小游戏源代码，是学习和研究小程序开发的宝贵资源。源码通常包括了开发者编写的完整代码、资源配置以及必要的说明文档，这对于理解小...
JS实现推箱子小游戏——源码
07-10
JS实现推箱子小游戏——源码 第一步布局 1.设置盒子元素 <!-- 功能键 --> 自动行走"> 上一步"> 下一关"> 上一关"> <!-- 游戏区域 --> <div id="warp"></div> 2.给盒子设置相关的样式 * { margin: ...
2048小游戏——网页版
03-07
这是一个用js写的网页版2048游戏，实现2048游戏的基本功能。 比如：绘制网格、随机生成数字、动画移动数字、累计分数、重置游戏等。 我再代码中进行了非常详细的注释，相信有一点点基础的开发人员都能迅速看懂，快...
H5小游戏源码 疯狂挠一挠——艾玛，手指痒死了.zip
10-14
中，只有一个文件名：H5小游戏源码 疯狂挠一挠——艾玛，手指痒死了，这通常意味着压缩包内包含的是整个游戏项目的源代码文件，可能包括HTML文件（用于结构）、CSS文件（用于样式）和JavaScript文件（用于逻辑和交互...
前端小游戏（强烈推荐）
老陈的博客
11-01 2533
你是否学习走神分心，学不进去，却人间清醒知道不学不行，潜意识知道时间紧迫，放松了再没有毅力再学下去了，感觉特别痛苦，又不得不面对。今天良心推荐一下，一下两个小游戏，既能放松又能兼顾学习，在玩游戏中学习，岂不美哉！哈哈，被广告洗脑了；非本能的写出的词，望见谅。
前端实现俄罗斯方块游戏（内含源码）
weixin_74268571的博客
07-02 2010
游戏开始时，会出现一个空的游戏区域，以及一个正在下落的方块（俄罗斯方块）。使用方向键控制方块的移动和旋转，目标是将方块填满游戏区域的水平行，使其消除。消除水平行的方式是将一整行填满方块，当一行被填满时，该行将被清除并获得得分。游戏结束条件是当方块堆叠到游戏区域的顶部时无法继续移动。（为大家尝试了一波，嗯。。。请不要嘲笑我😝，哈哈大家可以尝试下，我在这方面实在是。。。。游戏区域是一个矩形，由一系列格子组成。初始状态下，游戏区域是空的。
js实现简单打地鼠小游戏
m0_55603459的博客
12-11 8546
小地鼠随机出现在固定大区域，以每次固定时间间隔、不同的个数出现。玩家点中地鼠会记录砸中地鼠的次数，同时地鼠的状态会发生变化，游戏设置倒计时，倒计时结束游戏结束，弹出玩家砸中次数。
分享 10 个基于 Three.js 实现的小游戏
前端达人
07-29 5467
今天给大家分享10个基于Three.js 实现的小游戏。只需一个浏览器，就可以「打开下方链接,部分支持移动端」在线玩耍，简直不要泰裤辣！该学的学、想玩的玩，今天星期五，祝大家周末愉快。《Slow Roads》3D赛车游戏01Slow Roads是一款程序生成的休闲驾驶游戏，可让您暂时脱离生活，无休止地奔向遥远的地平线。设置适合您心情的风景，播放一些音乐，然后开车就行了。只需一个浏览器，就能驾车从森...
2048 js canvas实现2048小游戏及思路
最新发布
NEWonclick的博客
11-14 899
canvas动画原理假设一个元素x轴为0，运动到x = 100这样直接绘制是没有动画的x值递增，x值改变时清除画布再次绘制，x=100时运动结束这就是动画原理。
【js小游戏&案例】纯前端实现算法迷宫、飞机大战、贪吃蛇小游戏，附带源码
weixin_52479803的博客
07-25 1010
【js小游戏&案例】纯前端实现算法迷宫、飞机大战、贪吃蛇小游戏，附带源码
JavaScript实现2048小游戏，我终于赢了一把
热门推荐
编程界明世隐的博客
09-15 1万+
作者简介 作者名：编程界明世隐 简介：CSDN博客专家，从事软件开发多年，精通Java、JavaScript，博主也是从零开始一步步把学习成长、深知学习和积累的重要性，喜欢跟广大ADC一起打野升级，欢迎您关注，期待与您一起学习、成长、起飞！ 系列目录 1. JavaScript 贪吃蛇游戏 2. JavaScript 俄罗斯方块 3. JavaScript 扫雷小游戏 4. JavaScript 网红太空人表盘 效果图 实现思路 编写页面和画布代码。 绘制背景。 绘制好全部卡片。 随机生成一个卡片（
javascript 动画小游戏
08-13
JavaScript动画小游戏是一种使用JavaScript编程语言开发的小型游戏。这种游戏通常具有简单的规则和操作，但是通过使用JavaScript的动画功能，可以给玩家带来更加丰富和有趣的游戏体验。 在这种类型的游戏中，开发者...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值