用javascript编写的小游戏-打砖块

最新推荐文章于 2024-06-07 15:45:53 发布
最新推荐文章于 2024-06-07 15:45:53 发布
阅读量7.8k 收藏 93
点赞数 20
分类专栏： javascript 文章标签： javascript html js css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39417722/article/details/105704601
版权

用javascript编写的小游戏-打砖块

前言

这是我在CSDN发表的第一篇文章。是我在初学javascript后, 忽然来了兴致, 编写的一个小游戏.
在此感谢玲姐老师, 并怀念曾经还是学生的那一段时光.

启发

第一次学习setInterval() 这个方法, 觉得非常巧妙, 于是就有了接下来的故事.
一开始只是一个小方块在屏幕上不断的移动, 后来变成了两个方块碰撞,再后来增加了各种功能. 游戏用纯js代码编写, 均是最简单的js基础语法.

下载链接

纯js代码双击即可运行: 打砖块.html.

游戏功能说明

  1. 按钮皆可通过键盘按键来控制
  2. 上下左右键可控制挡板移动
  3. 加号减号可控制小球的移动速度
  4. 有B和S两种随机颜色的豆子, 吃到B小球会变大并变成相应颜色, 吃到S小球会变小并变成相应颜色, 撞击挡板后会将颜色传递给挡板的不同部位.
  5. 打掉砖块可增加分数, 小球撞击底部扣50分, 分数为负数游戏失败, 打掉全部砖块游戏获胜.

代码效果演示

游戏演示

代码

<!DOCTYPE html>
<html lang="en">
<head>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AlsdGo打砖块</title>
    <!-- 严禁转载 -->
    <style type="text/css">
        .outer {
            width: 600px;
            height: 600px;
            background-color: aquamarine;
            border: 1px dotted gray;
            position: absolute;
            margin-left: 600px;
            margin-top: 50px;
            font-size: 50px;
            text-align: center;
            color: red;
            line-height: 300px;
        }
        .in {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: black;
            position: absolute;
            top: 500px;
            left: 75px;
            border: 0px;
            margin: 0px;
            font-size: 20px;
            text-align: center;
            line-height: 50px;
            color: white;
            border: 0px solid black;
        }
        .btm {
            width: 200px;
            height: 50px;
            background-color: black;
            position: absolute;
            top: 550px;
            left: 0px;
            border: 0px;
            margin: 0px;
        }
        .btmspan1{
            width: 30px;
            height: 30px;
            background-color: aquamarine;
            position: absolute;
            top: 0px;
            left: 0px;
            border: 10px double darkblue;
            margin: 0px;
        }
        .button1 {
            width: 100px;
            height: 50px;
            margin-left: 600px;
            margin-top: 0px;

            font-size: 20px;
            text-align: center;
            color: black;
            line-height: 50px;
        }
        .button2 {
            width: 100px;
            height: 50px;
            margin-left: 0px;
            margin-top: 0px;
            font-size: 20px;
            text-align: center;
            color: black;
            line-height: 50px;
        }
        .test0 {
            width: 100px;
            height: 50px;
            margin-left: 1000px;
            margin-top: -50px;
            font-size: 15px;
            text-align: right;
            line-height: 60px;
        }
        .test1 {
            width: 100px;
            height: 50px;
            background-color: #d0d0d0;
            border: 1px solid black;
            margin-left: 1100px;
            margin-top: -50px;
            font-size: 30px;
            text-align: right;
            line-height: 75px;
        }
        .square {
            width: 98px;
            height: 48px;
            background-color: salmon;
            border: 1px solid black;
            margin: 0px;
            text-align: center;
            line-height: 48px;
            font-size: 30px;
        }
        .left {
            float: left;
        }
        .clear-left {
            clear: left;
        }
        .bigger {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: blue;
            position: absolute;
            top: 0px;
            left: 0px;
            font-size: 10px;
            text-align: center;
            line-height: 20px;
            color: yellow;
            display: none;
        }
        .smaller {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: red;
            position: absolute;
            top: 0px;
            left: 0px;
            font-size: 10px;
            text-align: center;
            line-height: 20px;
            color: yellow;
            display: none;
        }
    </style>
</head>
<body>
<div class="outer">
    <div class="square left"></div>
    <div class="square left"></div>
    <div class="square left"></div>
    <div class="square left"></div>
    <div class="square left"></div>
    <div class="square left"></div>
    <div class="square clear-left left"></div>
    <div class="square left"></div>
    <div class="square left"></div>
    <div class="square left"></div>
    <div class="square left"></div>
    <div class="square left"></div>
    <div class="in">50</div>
    <div class="btm">
        <span class="btmspan1" style="left: 40px;width: 110px;height: 44px;border: 3px dotted darkblue; background-color: aquamarine"></span>
        <span class="btmspan1" style="left: 150px; background-color: aquamarine"></span>
        <span class="btmspan1" style="left: 0px; background-color: aquamarine"></span>
    </div>
    <div class="bigger">B</div>
    <div class="smaller">S</div>
</div>
<div>
    <button class="button1">开始</button>
    <button class="button2">停止</button>
    <button class="button2">减速</button>速度:
    <button class="button2">0</button>
    <button class="button2" style="display: none">左移</button>
    <button class="button2" style="display: none">右移</button>
    <div class="test0">分数:</div>
    <div class="test1">100</div>
</div>
<script type="text/javascript">
    var outer = document.getElementsByClassName("outer")[0];
    var start = document.getElementsByTagName("button")[0];
    var stop = document.getElementsByTagName("button")[1];
    var slow = document.getElementsByTagName("button")[2];
    var vvvv = document.getElementsByTagName("button")[3];
    var vvvv88 = 0;
    var leftmove = document.getElementsByTagName("button")[4];
    var rightmove = document.getElementsByTagName("button")[5];
    var indiv = document.getElementsByClassName("in")[0];
    var inwidth = 50;
    var inheight = 50;
    var ininnerhtml = 50;
    var btmdiv = document.getElementsByClassName("btm")[0];
    var btmspan1div = document.getElementsByClassName("btmspan1")[0];
    var btmspan1div1 = document.getElementsByClassName("btmspan1")[1];
    var btmspan1div2 = document.getElementsByClassName("btmspan1")[2];
    var test1div = document.getElementsByClassName("test1")[0];
    var squares = document.getElementsByClassName("square");
    var bigger = document.getElementsByClassName("bigger")[0];
    var btop = 0;
    var bleft = 0;
    var smaller = document.getElementsByClassName("smaller")[0];
    var stop1 = 0;
    var sleft = 0;
    var step = 1;
    var timeId1;
    var step2 = 1;
    var timeId2;
    var btmstep = 0;
    var btmstep2 = 550;
    var left = 75;
    var direction = 0;
    var top2 = 500;
    var direction2 = 0;
    function showbigger() {
        bleft = Math.random() * 580;
        btop = Math.random() * 300 + 100;
        bigger.style.top = btop + "px";
        bigger.style.left = bleft + "px";
        bigger.style.display = "block";
    }
    function showsmaller() {
        sleft = Math.random() * 580;
        stop1 = Math.random() * 300 + 100;
        smaller.style.top = stop1 + "px";
        smaller.style.left = sleft + "px";
        smaller.style.display = "block";
    }
    function changecolor() {
        if(btmspan1div.style.backgroundColor == indiv.style.backgroundColor){
            btmspan1div.style.backgroundColor = "aquamarine";
            btmspan1div.style.borderColor = "darkblue";
        }else {
            btmspan1div.style.backgroundColor = indiv.style.backgroundColor;
            btmspan1div.style.borderColor = indiv.style.borderColor;
        }
    }
    function changecolor2() {
        btmspan1div1.style.backgroundColor = btmspan1div.style.backgroundColor;
        btmspan1div2.style.backgroundColor = btmspan1div.style.backgroundColor;
        btmspan1div1.style.borderColor = btmspan1div.style.borderColor;
        btmspan1div2.style.borderColor = btmspan1div.style.borderColor;
    }
    showbigger();
    showsmaller();
    start.onclick = function () {
        timeId1 = setInterval(updateLeft, 1);
        timeId2 = setInterval(updateTop, 1);
        start.innerHTML = "加速";
        vvvv88++;
        vvvv.innerHTML = vvvv88;
    }
    stop.onclick = function () {
        for (var i = 2; i <= timeId1; i++) {
            clearInterval(i);
        }
        for (var i = 2; i <= timeId2; i++) {
            clearInterval(i);
        }
        start.innerHTML = "开始";
    }
    slow.onclick = function () {
        if (timeId1 > 2) {
            clearInterval(timeId1);
        }
        if (timeId2 > 2) {
            clearInterval(timeId2);
        }
        if (vvvv88 > 0) {
            vvvv88--;
        }
        vvvv.innerHTML = vvvv88;
    }
    leftmove.onclick = function () {
        if (btmstep >= 50) {
            btmstep = btmstep - 50;
        }
        btmdiv.style.left = btmstep + "px";
    }
    rightmove.onclick = function () {
        if (btmstep <= 350) {
            btmstep = btmstep + 50;
        }
        btmdiv.style.left = btmstep + "px";
    }
    function updateLeft() {
        if (left <= 600 - inwidth && direction == 0) {
            left += step;
        }
        else if (left <= 0 && direction == 1) {
            direction = 0;
            left += step;
        }
        else {
            direction = 1;
            left -= step;
        }
        indiv.style.left = left + "px";
    }
    var kk;
    var qq;
    var bottomlocation;
    var toplocation;
    var num1 = 0;
    var num2 = 0;
    var num3 = 0;
    var num4 = 0;
    var num5 = 0;
    var num6 = 0;
    var scoreA = 99;
    function updateTop() {
        if (num1 == 1 && num2 == 1 && num3 == 1 && num4 == 1 && num5 == 1 && num6 == 1) {
            for (var i = 2; i <= timeId1; i++) {
                clearInterval(i);
            }
            for (var i = 2; i <= timeId2; i++) {
                clearInterval(i);
            }
            outer.innerHTML = "GOOD GAME";
            alert("再来一次");
            location.reload();
        }
        if (bleft - left >= -20 && bleft - left <= inwidth && btop - top2 >= -20 && btop - top2 <= inwidth) {
            bigger.style.display = "none";
            showbigger();
            if (inwidth < 100) {
                inwidth = inwidth + 10;
                inheight = inheight + 10;
                ininnerhtml = ininnerhtml + 10;
                indiv.style.width = inwidth + "px";
                indiv.style.height = inheight + "px";
                indiv.innerHTML = ininnerhtml;
                indiv.style.lineHeight = ininnerhtml + "px";
                var colors = getTwoColor();
                indiv.style.backgroundColor = colors[0];
                indiv.style.borderColor = colors[1];
            } else {
                indiv.innerHTML = "Max";
                var colors = getTwoColor();
                indiv.style.backgroundColor = colors[0];
                indiv.style.borderColor = colors[1];
            }
        }
        if (sleft - left >= -20 && sleft - left <= inwidth && stop1 - top2 >= -20 && stop1 - top2 <= inwidth) {
            smaller.style.display = "none";
            showsmaller();
            if (inwidth > 20) {
                inwidth = inwidth - 10;
                inheight = inheight - 10;
                ininnerhtml = ininnerhtml - 10;
                indiv.style.width = inwidth + "px";
                indiv.style.height = inheight + "px";
                indiv.innerHTML = ininnerhtml;
                indiv.style.lineHeight = ininnerhtml + "px";
                var colors = getTwoColor();
                indiv.style.backgroundColor = colors[0];
                indiv.style.borderColor = colors[1];
            } else {
                indiv.innerHTML = "";
                var colors = getTwoColor();
                indiv.style.backgroundColor = colors[0];
                indiv.style.borderColor = colors[1];
            }
        }
        kk = left - btmstep + inwidth/2;
        qq = btmstep2 - top2 - (inheight-1);
        bottomlocation = 600 - inheight;
        if (kk >= 0 && kk <= 200 && qq >= 0) {
            bottomlocation = btmstep2 - inheight;
            if(qq==0){
                step = Math.abs(kk-100)/100+1;
                changecolor2();
                changecolor();
            }
        }
        if (top2 == 601-inheight) {
            scoreA = scoreA - 50;
        } else if (top2 == 551-inheight && kk >= 0 && kk <= 200) {
            scoreA++;
        }
        test1div.innerHTML = scoreA;
        if (scoreA < 0) {
            for (var i = 2; i <= timeId1; i++) {
                clearInterval(i);
            }
            for (var i = 2; i <= timeId2; i++) {
                clearInterval(i);
            }
            outer.innerHTML = "GAME OVER";
            alert("再来一次");
            location.reload();
        }
        toplocation = 100;
        switch (true) {//0-550
            case left >= 0 && left < 75 && num1 == 1:
                toplocation = 0;
                break;
            case left >= 75 && left < 175 && num2 == 1:
                toplocation = 0;
                break;
            case left >= 175 && left < 275 && num3 == 1:
                toplocation = 0;
                break;
            case left >= 275 && left < 375 && num4 == 1:
                toplocation = 0;
                break;
            case left >= 375 && left < 475 && num5 == 1:
                toplocation = 0;
                break;
            case left >= 475 && left <= 550 && num6 == 1:
                toplocation = 0;
                break;
            case left >= 0 && left < 75 && num1 == 2:
                toplocation = 50;
                break;
            case left >= 75 && left < 175 && num2 == 2:
                toplocation = 50;
                break;
            case left >= 175 && left < 275 && num3 == 2:
                toplocation = 50;
                break;
            case left >= 275 && left < 375 && num4 == 2:
                toplocation = 50;
                break;
            case left >= 375 && left < 475 && num5 == 2:
                toplocation = 50;
                break;
            case left >= 475 && left <= 550 && num6 == 2:
                toplocation = 50;
                break;
        }
        if (top2 <= bottomlocation && direction2 == 0) {// 正常往下走
            top2 += step2;
        } else if (top2 <= toplocation && direction2 == 1) {// 到顶部换方向 第一层方块
            if (top2 == 100) {
                switch (true) {//0-550
                    case left >= 0 && left < 75:
                        squares[6].style.backgroundColor = "aquamarine";
                        squares[6].style.border = "1px solid aquamarine";
                        scoreA = scoreA + 10;
                        test1div.innerHTML = scoreA;
                        num1 = 2;
                        break;
                    case left >= 75 && left < 175:
                        squares[7].style.backgroundColor = "aquamarine";
                        squares[7].style.border = "1px solid aquamarine";
                        scoreA = scoreA + 10;
                        test1div.innerHTML = scoreA;
                        num2 = 2;
                        break;
                    case left >= 175 && left < 275:
                        squares[8].style.backgroundColor = "aquamarine";
                        squares[8].style.border = "1px solid aquamarine";
                        scoreA = scoreA + 10;
                        test1div.innerHTML = scoreA;
                        num3 = 2;
                        break;
                    case left >= 275 && left < 375:
                        squares[9].style.backgroundColor = "aquamarine";
                        squares[9].style.border = "1px solid aquamarine";
                        scoreA = scoreA + 10;
                        test1div.innerHTML = scoreA;
                        num4 = 2;
                        break;
                    case left >= 375 && left < 475:
                        squares[10].style.backgroundColor = "aquamarine";
                        squares[10].style.border = "1px solid aquamarine";
                        scoreA = scoreA + 10;
                        test1div.innerHTML = scoreA;
                        num5 = 2;
                        break;
                    case left >= 475 && left <= 550:
                        squares[11].style.backgroundColor = "aquamarine";
                        squares[11].style.border = "1px solid aquamarine";
                        scoreA = scoreA + 10;
                        test1div.innerHTML = scoreA;
                        num6 = 2;
                        break;
                }
            }
            if (top2 == 50) {
                switch (true) {
                    case left >= 0 && left < 75:
                        squares[0].style.backgroundColor = "aquamarine";
                        squares[0].style.border = "1px solid aquamarine";
                        squares[6].style.backgroundColor = "aquamarine";
                        squares[6].style.border = "1px solid aquamarine";
                        scoreA = scoreA + 10;
                        test1div.innerHTML = scoreA;
                        num1 = 1;
                        break;
                    case left >= 75 && left < 175:
                        squares[1].style.backgroundColor = "aquamarine";
                        squares[1].style.border = "1px solid aquamarine";
                        squares[7].style.backgroundColor = "aquamarine";
                        squares[7].style.border = "1px solid aquamarine";
                        scoreA = scoreA + 10;
                        test1div.innerHTML = scoreA;
                        num2 = 1;
                        break;
                    case left >= 175 && left < 275:
                        squares[2].style.backgroundColor = "aquamarine";
                        squares[2].style.border = "1px solid aquamarine";
                        squares[8].style.backgroundColor = "aquamarine";
                        squares[8].style.border = "1px solid aquamarine";
                        scoreA = scoreA + 10;
                        test1div.innerHTML = scoreA;
                        num3 = 1;
                        break;
                    case left >= 275 && left < 375:
                        squares[3].style.backgroundColor = "aquamarine";
                        squares[3].style.border = "1px solid aquamarine";
                        squares[9].style.backgroundColor = "aquamarine";
                        squares[9].style.border = "1px solid aquamarine";
                        scoreA = scoreA + 10;
                        test1div.innerHTML = scoreA;
                        num4 = 1;
                        break;
                    case left >= 375 && left < 475:
                        squares[4].style.backgroundColor = "aquamarine";
                        squares[4].style.border = "1px solid aquamarine";
                        squares[10].style.backgroundColor = "aquamarine";
                        squares[10].style.border = "1px solid aquamarine";
                        scoreA = scoreA + 10;
                        test1div.innerHTML = scoreA;
                        num5 = 1;
                        break;
                    case left >= 475 && left <= 550:
                        squares[5].style.backgroundColor = "aquamarine";
                        squares[5].style.border = "1px solid aquamarine";
                        squares[11].style.backgroundColor = "aquamarine";
                        squares[11].style.border = "1px solid aquamarine";
                        scoreA = scoreA + 10;
                        test1div.innerHTML = scoreA;
                        num6 = 1;
                        break;
                }
            }
            direction2 = 0;
            top2 += step2;
        } else {
            direction2 = 1;
            top2 -= step2;
        }
        indiv.style.top = top2 + "px";
    }
    document.onkeydown = function (event) {
        var e = event || window.event || arguments.callee.caller.arguments[0];
        switch (true) {
            case e.keyCode == 13:
                timeId1 = setInterval(updateLeft, 1);
                timeId2 = setInterval(updateTop, 1);
                start.innerHTML = "加速";
                vvvv88++;
                vvvv.innerHTML = vvvv88;
                break;
            case e.keyCode == 37:
                if (btmstep >= 50) {
                    btmstep = btmstep - 50;
                }
                btmdiv.style.left = btmstep + "px";
                break;
            case e.keyCode == 39:
                if (btmstep <= 350) {
                    btmstep = btmstep + 50;
                }
                btmdiv.style.left = btmstep + "px";
                break;
            case e.keyCode == 38:
                qq = btmstep2 - top2 - (inheight-1);
                if (btmstep2 >= 200&&qq>inheight) {
                    btmstep2 = btmstep2 - 50;
                }
                btmdiv.style.top = btmstep2 + "px";
                break;
            case e.keyCode == 40:
                if (btmstep2 <= 500) {
                    btmstep2 = btmstep2 + 50;
                }
                btmdiv.style.top = btmstep2 + "px";
                break;
        }
    }
    function getTwoColor() {
        var rr = Math.random()*(255+1);
        var gg = Math.random()*(255+1);
        var bb = Math.random()*(255+1);
        var color1 = colorRGB2Hex(rr+","+gg+","+bb);
        var color2 = colorRGB2Hex((255-rr)+","+(255-gg)+","+(255-bb));
        var colors = [color1,color2];
        return colors;
    }
    function colorRGB2Hex(color) {
        var rgb = color.split(',');
        var r = parseInt(rgb[0].split('(')[1]);
        var g = parseInt(rgb[1]);
        var b = parseInt(rgb[2].split(')')[0]);
        var hex = "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
        return hex;
    }
</script>
</body>
</html>

后记

由于是初学, 编写的代码比较简单, 可供初学者学习, 也可供相关教学人员参考, 给日常工作带来启发.欢迎一同学习交流, 所有提问均会定期回复, 或者添加我的微信并备注CSDN, 愿与君共勉!
在这里插入图片描述

孙哈航
关注
  • 20
    点赞
  • 踩
  • 93
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
javascript+css3开发打气球小游戏完整代码
11-28
效果知识点： css3画气球, 自定义属性运用，随机阵列, DOM元素操作，高级回调函数与参数复传，动态布局，鼠标事件，定时器运用，CSS3新增样式等。 css代码如下： <style> {margin:0;padding:0;} body{background:#434343;overflow:hidden} .balloon{ position:absolute; left:0; top:0; margin:auto; width:160px; height:160px; 圆角: 左上 右上 右下 左下 / css3旋转 顺时针旋转45度 / background:#faf9f9; x轴
利用js制作的简单网页小游戏
热门推荐
Ayingpan的博客
03-28 1万+
利用html和js制作的简单的网页小游戏 这个是我第一次利用js制作wang’y
推荐10个Three.js实现的开源小游戏
gaotlantis的博客
06-07 1253
一个手握乒乓球拍的模型和一个乒乓球，球拍像现实生活中一样进行颠球施力操作，乒乓球可以在球拍上弹起，乒乓球弹起的高度随着施加在球拍上的力的大小的变化而变化，球拍中央显示的是连续颠球次数，当乒乓球从球拍掉落时一局游戏结束，球拍上的数字归零。只需一个浏览器，就能驾车从森林、海滩，“无缝切换”到广袤的沙漠甚至平原，无论春夏秋冬还是白天黑夜，也无论你用的是电动汽车、自行车还是公共汽车，甚至不想开的时候，还可以开启自动驾驶模式，开启你的BGM，体验不一样的“速度与激情”。右上角的得分，将证明你的能力！
js 编写的简单游戏代码,js小游戏游戏代码大全
chatgpt002的博客
10-18 5950
像素鸟曾经是一个火爆一时的小游戏，我们尝试用JavaScript来实现像素鸟的核心功能。操作方式：鼠标点击胜利条件：无失败条件：小鸟碰到了屏幕上下的水管就算失败看似是小鸟在向前飞行，实际上是水管在向后移动，以减少内存的消耗。对于水管的显示，使用背景图片的background-size属性，设置100% 100% 即可让背景图片完全覆盖随机高度的div。对于水管的移动，使用css3的动画属性，这可以很方便的控制水管移动的距离、速度与方向。
javascript小游戏_JavaScript小游戏：成语消消乐附源码
weixin_39656435的博客
12-02 508
预览二 开发步骤基本面向过程的思想。没有面向对象的部分。准备好成语库。db.js选出每一关的成语。对成语进行乱序。初始化表格的同时，将单个字放到每个单元格的按钮上展示。对tbody进行点击事件的监听。事件函数中获取btn。用变量记录选中的文字。判断得分、判断下一关、判断游戏结束(成语库毕竟用数组来保存。成语数量有限。)三 代码只有两个文件：index.html和db.js1 index.html代...
html小游戏代码_厉害！84 行 JavaScript 代码实现塔式堆叠游戏
weixin_39628256的博客
11-22 247
作者 | 李雪敬出品 |程序人生(coder_life)塔式堆叠小游戏游戏玩法想必大家对这个小游戏都挺熟悉的。这个游戏的重点是把尽可能多的盒子叠在一起。当你点击屏幕时，位于上方正在移动的盒子会往下掉，如果想要上面移动的盒子正好落在下面盒子上，就需要在合适的时机点击屏幕。如果你没在两个盒子完美对齐的时候点击，盒子突出的部分就会被切割掉下来(“碎片”)，下一个盒子的落地空间就更小了，比前一...
使用 JavaScript 编写的打砖块游戏及其源代码.zip
最新发布
07-24
项目：使用 JavaScript 编写的打砖块游戏（附源代码） Arkanoid 游戏是一个使用 JavaScript、CSS 和 Html 开发的简单项目。这款游戏非常有趣，令人上瘾。玩家必须用移动的小球摧毁砖块层。小球从屏幕顶部和两侧弹起...
jQuery网页版打砖块游戏代码
07-24
《jQuery网页版打砖块游戏实现详解》 在网页游戏中，jQuery打砖块游戏是一种深受开发者和玩家喜爱的简单但有趣的编程实践项目。利用jQuery这一强大的JavaScript库，开发者可以轻松地构建出一款互动性强、用户体验...
javascript制作打砖块游戏
07-05
在本项目中，我们主要探讨的是如何使用JavaScript语言制作一个打砖块（Breakout）游戏。打砖块游戏是一款经典的街机游戏，玩家通过控制一个移动的平台来反弹一个小球，目的是击碎屏幕上排列的砖块。在这个JavaScript...
javascript HTML5 canvas实现打砖块游戏
12-29
本文实例编写的一个小游戏，基于HTML5中的canvas。游戏主要是小球反弹击打小方块。在代码中主要实现了小方块的生成，键盘键事件的监听，小球的移动和碰壁之后的反弹以及怎样消除小方块等方法。代码使用到了一个js...
H5 canvas实现打砖块小游戏
05-07
在本文中，我们将深入探讨如何使用HTML5的Canvas API实现一个基本的打砖块小游戏。Canvas是HTML5中一个强大的绘图元素，它允许开发者在网页上进行动态图形编程，从而实现各种各样的互动效果和游戏。 首先，我们来看...
javascript实现的猜数小游戏完整实例代码
10-22
主要介绍了javascript实现的猜数小游戏,游戏中用户共有10次猜测机会,并且每次都有不同的提示信息,该游戏涉及javascript流程控制与数值运算的相关技巧,需要的朋友可以参考下
教你前端如何用js写一个跑酷小游戏
qq_28252421的博客
06-01 6141
奔跑、跳跃、下滑、碰撞检测……教你用前端的语言写一个跑酷的小游戏，快来愉快的奔跑吧
js游戏集合
weixin_30852573的博客
09-06 5995
今天给大家分享一些js写的小游戏，因为游戏比较多，因此小编在这里只给大家部分游戏运行截图。下面我们来看看具体有哪些游戏。下一篇文字小编将和大家一起来玩玩红白机上的游戏，比如魂斗罗，赤色要塞，绿色兵团啥的。获取js游戏密码步骤：关注公众号"简易编程网"，回复pass，就可以获取到密码了。是男人就下一百层变态版。
JS实现迷宫小游戏(完整代码)
m0_45293861的博客
03-04 2129
<!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"> <head> <title>JS打造的走迷宫游戏</title> </head&gt...
网页赛车小游戏（纯JavaScript编写）
aguang5241的博客
10-26 2603
赛车（改良版） 更多原生js小项目，参见本人GitHub—Aguang5241 利用js实现以下功能： 在四个赛道随记生成路人小车，其运动速度随用户生存的时间增加而增加 用户可以通过方向键或者A、D键控制用户小车左右移动，躲避路人小车 当路人小车与用户小车碰撞，游戏结束 效果展示 源代码 html <!DOCTYPE html> <html lang="en"&gt...
JavaScript | 益智类数字棋牌小游戏，无游戏框架，浏览器直接运行JavaScript（js）小游戏【源码+解析】
神奇代码在哪里
08-11 6784
一款纯HTML+CSS+Javascript开发的益智类的数字棋牌游戏，无游戏框架，浏览器直接运行。曾几何时想有一款自己编写的游戏，通过不断学习，终于掌握了一点JavaScript基础，捣鼓了一个益智类的数字棋牌游戏，没有使用任何游戏框架，就简单使用HTML做布局，CSS做动画，JavaScript做事件响应，有兴趣的童鞋可以拿去玩一下。...............
js 编写的简单游戏代码,javascript小游戏开发
神经网络爱好者
11-06 1484
戳这里拿原码👉github创建一个4 x 4的面板（HTML5表实现），总共16个格子。其中一个格子是空的，其他格子从1到15随机编号Deepl降重。可通过单击格子将当前空格子旁边的任何图块移入当前空格子。将格子按顺序逐行排列即为胜利✌️。当用户点击了与空格子不相邻的格子时，用户会收到提醒。这里就直接附上html的码，因为很短，就没什么好说的。
用JavaScript来编写一个小游戏
03-28
抱歉，作为AI语言模型，我不能在这个平台上编写JavaScript小游戏。但是，我可以提供一个简单的游戏示例，供您参考。 示例：猜数字游戏 这个游戏让玩家猜一个1-100之间的随机数。玩家可以进行多次猜测，直到猜中为止。每次猜测后，游戏会提示玩家猜测的数字是太大了还是太小了。 HTML代码： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>猜数字游戏</title> </head> <body> <h1>猜数字游戏</h1> <p>猜一个1-100之间的随机数。</p> <input type="text" id="guessInput"> <button onclick="checkGuess()">猜！</button> <p id="result"></p> </body> </html> ``` JavaScript代码： ```javascript var target = Math.floor(Math.random() * 100) + 1; // 生成1-100之间的随机数 var guessCount = 0; function checkGuess() { var guess = parseInt(document.getElementById("guessInput").value); if (isNaN(guess) || guess < 1 || guess > 100) { document.getElementById("result").innerHTML = "请输入一个1-100之间的数字。"; return; } guessCount++; if (guess == target) { document.getElementById("result").innerHTML = "恭喜你，猜对了！你猜了" + guessCount + "次。"; } else if (guess < target) { document.getElementById("result").innerHTML = "太小了！"; } else { document.getElementById("result").innerHTML = "太大了！"; } } ``` 这个游戏的实现非常简单，只需要生成一个随机数、获取玩家的输入、比较大小并给出提示即可。当然，您可以根据自己的需要对游戏进行扩展和改进。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值