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

前言
启发
- 下载链接
游戏功能说明
代码效果演示
代码
后记

前言

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

启发

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

下载链接

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

游戏功能说明

按钮皆可通过键盘按键来控制
上下左右键可控制挡板移动
加号减号可控制小球的移动速度
有B和S两种随机颜色的豆子, 吃到B小球会变大并变成相应颜色, 吃到S小球会变小并变成相应颜色, 撞击挡板后会将颜色传递给挡板的不同部位.
打掉砖块可增加分数, 小球撞击底部扣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-550case 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-550case 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, 愿与君共勉!

用javascript编写的小游戏-打砖块相关推荐

html连连看小游戏论文,JavaScript编写连连看小游戏
天天看到别人玩连连看, 表示没有认真玩过, 不就把两个一样的图片连接在一起么, 我自己写一个都可以呢. 使用Javascript写了一个, 托管到github, 在线DEMO地址查看:打开最终的效果 ...
php 连连看游戏开发,JavaScript编写连连看小游戏_javascript技巧
天天看到别人玩连连看, 表示没有认真玩过, 不就把两个一样的图片连接在一起么, 我自己写一个都可以呢. 使用Javascript写了一个, 托管到github, 在线DEMO地址查看:打开最终的效果 ...
html游戏技术文档编写,HTML5编写的小游戏
HTML5编写的小游戏 HTML5 是什么东西?而 HTML5 的优势又在哪里?大家可以回顾之前一篇相关文章了解下 HTML5 知识:<深入分析:Flash VS HTML5到底谁统江山> ...
视频教程-JavaScript打飞机小游戏视频教程-JavaScript
JavaScript打飞机小游戏视频教程拥有6年web前端和后端开发经验,4年授课经验,还曾在百度专业培训过网络营销课程,曾就职于联想集团和当当网,不仅有丰富的项目实战经验还有营销经验,综合实力较强 ...
JavaScript实现2048小游戏，我终于赢了一把
JavaScript实现2048小游戏作者简介作者名: 简介:CSDN博客专家,从事软件开发多年,精通Java.JavaScript,博主也是从零开始一步步把学习成长.深知学习和积累的重要性,喜欢 ...
html5 小游戏编写,HTML5编写的小游戏
HTML5编写的小游戏 HTML5 是什么东西?而 HTML5 的优势又在哪里?大家可以回顾之前一篇相关文章了解下 HTML5 知识:<深入分析:Flash VS HTML5到底谁统江山> ...
JavaScript打飞机小游戏视频教程-张鹏-专题视频课程
JavaScript打飞机小游戏视频教程-904人已学习课程介绍本课程介绍了如何使用js来做一个打飞机小游戏,其中涉及到页面的排版以及检测碰撞和逻辑的算法问题和DOM的操作的相关介 ...
c语言经典游戏,C语言——经典小游戏——打砖块
该楼层疑似违规已被系统折叠隐藏此楼查看此楼 C语言--经典小游戏--打砖块玩法:按A与D控制球拍的移动,按S暂停游戏百度网盘下载:http://pan.baidu.com/s/1o64ECTc ...
使用 javaScript 编写倒计时小程序，到时提交表单
使用 javaScript 编写倒计时小程序,到时提交表单 <script type="text/javascript">var countdown = 10; // ...

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

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

前言

启发

下载链接

游戏功能说明

代码效果演示

代码

后记

用javascript编写的小游戏-打砖块相关推荐

最新文章

热门文章