分享一段小游戏源码，经典的打砖块。

游戏效果：

不支持的音频/视频格式请试试刷新重播播放00:00/00:00正在直播00:00进入全屏50点击按住可拖动视频

源码：

.container{

width: 500px;

height: 500px;

border:0px solid 000;

margin:auto;

position:relative;

border: 5px solid rgb(179, 178, 177);

}

.brickBox{

width: 500px;

height: 300px;

position:absolute;

left: 0;

top: 0;

}

.ball{

width: 15px;

height: 15px;

background-color:purple;

border-radius:50%;

position:absolute;

bottom:30px;

left:235px;

}

.slider{

width: 150px;

height: 30px;

background-color: 00f;

position:absolute;

left:175px;

bottom:0;

}

// 获取当前所有标签

var container = document.querySelector(.container)

var brickBox = container.querySelector(.brickBox)

var ball = container.querySelector(.ball)

var slider = container.querySelector(.slider)

// 动态创建砖块

// 定义砖块大小

var brickWidth = 50;

var brickHeight = 15;

// 计算砖块数量

var brickNum = brickBox.clientWidth * brickBox.clientHeight / (brickWidth * brickHeight)

// console.log(brickNum);

var brickColNum = brickBox.clientWidth / brickWidth

// 根据数量去创建

for(var i=0;i

var div = document.createElement(div)

setStyle(div,{

width:brickWidth + "px",

height:brickHeight + "px",

backgroundColor:getColor(true),

position:absolute,

top:parseInt(i/brickColNum)*brickHeight + px,

left:(i%brickColNum)*brickWidth + px

})

brickBox.appendChild(div)

}

// 点击滑块让小球开始运动

// 定义横向移动的值和纵向移动的值

var speedX = getRandom(1,8);

var speedY = getRandom(1,8);

var timer;

//点击移动

slider.onclick = move;

move();

//回车键开始弹

function move(){

var count=0;

clearInterval(timer)

timer = setInterval(function(){

// 开始移动

// 获取小球的left和top

var left = ball.offsetLeft;

var top = ball.offsetTop;

// 让left和top增加速度

// 小球和滑块相撞

if(boom(slider,ball)){

speedY = -speedY

}

// 小球和大盒子相撞

if(left<=0 || left>=container.clientWidth - ball.offsetWidth){

speedX = -speedX

}

if(top<=0){

speedY = -speedY

}

// 检测所有砖块和小球是否相撞

for(var i=0;i

if(boom(brickBox.children[i],ball)){

speedY = -speedY

brickBox.removeChild(brickBox.children[i]);

count++;

}

console.log(count)

// GAME OVER

if(top>=container.clientHeight-ball.offsetHeight){

clearInterval(timer)

location.reload();

}

left += speedX

top += speedY

// 设置给小球的left和top

ball.style.left = left + "px"

ball.style.top = top + "px"

},20)

}

// 让滑块跟着鼠标移动

document.onmousemove = function(e){

var e = e || window.event;

var x = e.pageX;

var l = x - container.offsetLeft - 1 - slider.offsetWidth/2

if(l<0){

l = 0

}

if(l > container.clientWidth - slider.offsetWidth){

l = container.clientWidth - slider.offsetWidth

}

slider.style.left = l + "px"

}

//让滑块跟着左右键盘移动

window.onload= function(){

document.onkeydown = function(){

var e = e || window.event;

var keycode = e.keyCode || e.which;

var keyword = String.fromCharCode(keycode).toLowerCase();

if(keycode==13){

move();

}

if(keyword==a){

console.log("1111")

slider.style.left= slider.offsetLeft-15+"px"

}else if(keyword==d){

console.log("222")

slider.style.left=slider.offsetLeft+15+"px"

}

console.log(slider.offsetLeft)

}

// 封装检测相撞的函数

function boom(node1,node2){

// 不撞在一起的只有4种可能

if(node1.offsetLeft+node1.offsetWidth

return false;

}else{

return true;

}

// 封装获取随机颜色的函数

function getColor(){

hex=true

if(hex){

var color =

for(var i=0;i<3;i++){

var rgb = getRandom(256).toString(16);

rgb = rgb.length===1?0+rgb:rgb;

color += rgb

}

return color;

}

return "rgb(${getRandom(256)},${getRandom(256)},${getRandom(256)})"

}

// 封装设置样式的函数

function setStyle(ele,styleObj){

for(var attr in styleObj){

ele.style[attr] = styleObj[attr]

}

// 封装获取随机数的函数

function getRandom(a,b=0){

var max = Math.max(a,b);

var min = Math.min(a,b)

return Math.floor(Math.random() * (max-min)) + min

}

如要保护游戏源码，比如防止别人分析、复制，或者在微信小游戏提交过审时未通过，可对上面内容中的JS代码进行加密。

在JShaman平台将上面的JS代码加密：

加密后的代码：

.container{

width: 500px;

height: 500px;

border:0px solid 000;

margin:auto;

position:relative;

border: 5px solid rgb(179, 178, 177);

}

.brickBox{

width: 500px;

height: 300px;

position:absolute;

left: 0;

top: 0;

}

.ball{

width: 15px;

height: 15px;

background-color:purple;

border-radius:50%;

position:absolute;

bottom:30px;

left:235px;

}

.slider{

width: 150px;

height: 30px;

background-color: 00f;

position:absolute;

left:175px;

bottom:0;

}

JS代码加密后，功能完全不受影响，与加密前一样使用。

特别声明：文章来源用户上传并发布，本站只提供信息存储服务，不拥有所有权，内容仅供参考。

打砖块小游戏(打砖块小游戏在线玩)

游戏效果：

源码：

推荐阅读