Html：简单实现弹砖块小游戏

用html与js实现简单的弹砖块小游戏(初级)

用键盘的左右键控制一个板块让小球反弹，小球反弹到上面，与其相碰的砖块会消失，小球落地会重新开始游戏。

弹砖块小游戏--初级

第一部分body：要注意格式，父级与子级，兄弟的关系。

<div class="container"><div id="zhuan"><!-- id砖只有管理权限，没有定位权限 --><!-- <div class="zhuan"></div> --></div><div class="ball"></div><div class="ban"></div></div>

第二部分样式：只写主要样式，宽高颜色等按自我需求书写，（想要源代码的私）。

   body {display: flex;justify-content: center;align-items: center;}.container {position: relative;}.container .zhuan {position: absolute;}.container .ball {border-radius: 50%;position: absolute;}.container .ban {bottom: 10px;position: absolute;}

第三部分script：

获取元素：

    var dContainer = document.querySelector(".container");var dBall = document.querySelector(".ball");var dBan = document.querySelector(".ban");var dZhuan = document.getElementById("zhuan");var timer = null;//计时开始

《1：上方砖块的建立，横纵即双循环，添加元素div。

   function setZhuan() {for (var i = 0; i < 6; i++) {for (var j = 0; j < 10; j++) {var d = document.createElement("div");d.className = "zhuan";d.style.left = 25 + j * 56 + 'px';  //每一个砖块的横坐标d.style.top = 30 + i * 15 + 'px';  //每一个砖块的纵坐标dZhuan.appendChild(d);}}}

《2：设置小球，小球的定位得动态，还得注意方向，以及速度的随机性(随机涵数)。

  // 设置小球function setBall() {//初始位置dBall.style.left = dBan.offsetLeft + (dBan.offsetWidth - dBall.offsetWidth) / 2 + 'px';dBall.style.top = dBan.offsetTop - dBall.offsetHeight + 'px';//定义其速度，随机 // 横向dBall.sx = Math.random() > 0.5 ? rand(3, 8) : -1 * rand(3, 8);// 纵向dBall.sy = -1 * rand(3, 8);}

随机函数(重点):

 // 随机函数function rand(min, max) {return Math.round(Math.random() * (max - min) + min);}

《3：小球运动

function ballMove() {dBall.style.left = dBall.offsetLeft + dBall.sx + 'px';dBall.style.top = dBall.offsetTop + dBall.sy + 'px';if (dBall.offsetLeft <= 0 || dBall.offsetLeft >= 588) {dBall.sx *= -1;}if (dBall.offsetTop <= 0) {dBall.sy *= -1;}if (dBall.offsetTop >= 348) {// 停止游戏clearInterval(timer);// 去掉砖dZhuan.innerHTML = '';// 重新开始start();}}

《4：板块状态

    var isLeft = false;var isRight = false;window.onkeydown = function (e) {if (e.keyCode === 37) {isLeft = true;}if (e.keyCode === 39) {isRight = true;}}window.onkeyup = function (e) {if (e.keyCode === 37) {isLeft = false;}if (e.keyCode === 39) {isRight = false;}}

《5：板块移动

 function banMove() {var left = dBan.offsetLeft;if (isLeft) { left -= 12; }if (isRight) { left += 12; }left = left < 0 ? 0 : left;left = left > 540 ? 540 : left;dBan.style.left = left + 'px';}

《6：碰撞检测

function check() {// 1.ban与ballif (isCrash(dBall, dBan)) {dBall.style.top = dBan.offsetTop - dBall.offsetHeight + 'px';dBall.sy *= -1;}// 2.ball与砖var zs = dZhuan.children;for (var i = 0; i < zs.length; i++) {if (isCrash(zs[i], dBall)) {// 小球继续运动dBall.sy *= -1;// 删除砖dZhuan.removeChild(zs[i]);i--;}}}

  function isCrash(a, b) {var l1 = a.offsetLeft;var t1 = a.offsetTop;var r1 = l1 + a.offsetWidth;var b1 = t1 + a.offsetHeight;var l2 = b.offsetLeft;var t2 = b.offsetTop;var r2 = l2 + b.offsetWidth;var b2 = t2 + b.offsetHeight;if (r2 < l1 || r1 < l2 || b2 < t1 || b1 < t2) {return false;} else {return true;}}

《7：计时开始

function start() {setZhuan();setBall();//  开启计时器timer = setInterval(function () {// 1.挡板运动banMove();// 2.小球运动ballMove();// 3.碰撞检测check();}, 30)}start();

Html：简单实现弹砖块小游戏相关推荐

基于Java简单的弹珠小游戏
package GameItem;import javax.swing.Timer; import java.awt.*; import java.awt.event.*;public class P ...
C语言弹小球小游戏（控制台）
C语言实现弹小球游戏编译环境:vs2019 需求: 小球在控制台界面内不停移动,碰到边界则改变方向,控制棍子接住小球,得分加一,小球没有被接住则游戏结束. 思路: _getch()函数接收a.d两个 ...
Python游戏开发，pygame模块，Python实现打砖块小游戏
前言: 本期我们将利用python制作一个打砖块小游戏,废话不多说,让我们愉快地开始吧~ 效果展示 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RdjcY4gn-16 ...
Unity3D基础34.1：打砖块小游戏优化
前文:https://blog.csdn.net/Jaihk662/article/details/86768910(打砖块小游戏设计) 前面实现了一个非常的简单打砖块小游戏,但可以发现里面有许多不合 ...
Arduino中编写打砖块小游戏（完整代码）
标题 Arduino中编写打砖块小游戏(完整代码) 程序中有大量的注释,希望真的能帮助到你! (一)环境硬件:OLED 屏幕(128*64).摇杆模块(程序中使用的是摇杆模块的模拟量,如果你身边没有 ...
打砖块小游戏php程序,javascript实现打砖块小游戏（附完整源码）
小时候玩一天的打砖块小游戏,附完整源码在?给个赞? 实现如图需求分析 1.小球在触碰到大盒子上.左.右边框,以及滑块后沿另一方向反弹,在碰到底边框后游戏结束: 2.小球在触碰到方块之后,方块消失: ...
用JAVA实现一个简易的打砖块小游戏
概述利用java实现打砖块小游戏,游戏界面包括以下元素顶部的各色砖块底部的挡板小球游戏信息展示面板玩法包括使用鼠标或者键盘移动挡板打掉砖块,得分每一局有3次机会,挡板没有接到小球,机 ...
VUE+Canvas 实现桌面弹球消砖块小游戏
大家都玩过弹球消砖块游戏,左右键控制最底端的一个小木板平移,接住掉落的小球,将球弹起后消除画面上方的一堆砖块. 那么用VUE+Canvas如何来实现呢?实现思路很简单,首先来拆分一下要画在画布上的内容 ...
python小游戏代码大全-Python实现打砖块小游戏代码实例
这次用Python实现的是一个接球打砖块的小游戏,需要导入pygame模块,有以下两条经验总结: 1.多父类的继承2.碰撞检测的数学模型知识点稍后再说,我们先看看游戏的效果和实现: 一.游戏效果二 ...

Html：简单实现弹砖块小游戏

Html：简单实现弹砖块小游戏相关推荐

最新文章

热门文章