“打砖块”H5游戏源码

JShaman 07-16 216

前言：

如今大家对“html小游戏源码”大体比较讲究，姐妹们都想要了解一些“html小游戏源码”的相关文章。那么小编也在网络上搜集了一些对于“html小游戏源码””的相关文章，希望兄弟们能喜欢，同学们快快来了解一下吧！

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

游戏效果：

视频加载中...

源码：

<html>

<head>

<style>

.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;

}

</style>

</head>

<body>

</div>

</body>

// 获取当前所有标签

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<brickNum;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<brickBox.children.length;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<node2.offsetLeft || node1.offsetTop+node1.offsetHeight<node2.offsetTop || node2.offsetLeft+node2.offsetWidth<node1.offsetLeft || node2.offsetTop+node2.offsetHeight<node1.offsetTop){

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

}

</script>

</html>

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

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

加密后的代码：

<html>

<head>

<style>

.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;

}

</style>

</head>

<body>

</div>

</body>

</script>

</html>

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

本文地址：http://www.longkongtuishu.com/ca106AmsCBlUHDV0.html

标签： #html小游戏源码

“打砖块”H5游戏源码

“打砖块”H5游戏源码

手把手教你实现一个高性能的抽抽乐H5小游戏(含源码)