编程语言
首页 > 编程语言> > 用javascript编写的小游戏-打砖块

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

作者:互联网

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

前言

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

启发

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

游戏功能说明

  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>

后记

由于是初学, 编写的代码比较简单, 可供初学者学习, 也可供相关教学人员参考, 给日常工作带来启发.欢迎一同学习交流.

标签:style,scoreA,javascript,aquamarine,小游戏,&&,砖块,var,left
来源: https://blog.csdn.net/weixin_39417722/article/details/105704601