js小游戏极简版

　　(1) 基础布局

<div class = "box"> <p></p> <div></div> </div>

　    　(2)简单的基础样式

* { margin: 0; padding: 0; } div.box { width: 1000px; height: 700px; border: 1px solid #008B8B; box-sizing: border-box; } p { border-radius: 50%; height: 20px; width: 20px; background-color: darkkhaki; position: absolute; top: 660px; left: 490px; z-index: 2; } span { position: absolute; width: 100px; height: 20px; background-color: sandybrown; box-sizing: border-box; border: 1px solid bisque; }
　　　　　　　　　　　　　　//js添加的小方块样式 .div { width: 100px; height: 20px; background-color: #ccc; position: absolute; top: 680px; left: 450px; }

　　　　(3)js部分

　　　　     一, 添加五排(没排十个小方块)

for (var j = 0; j < 5; j++) { for (var i = 0; i < (1000 / 100); i++) { var span = document.createElement("span") span.style.left = a + "px"; a += 100; span.style.top = b + "px"; document.body.appendChild(span) } b += 20; a = 0; }

　　　　(4)获取选择器

var aspan = document.querySelectorAll("span") var odiv = document.querySelector(".div"); var op = document.querySelector("p");

　　　　(5)小游戏中方向键的绑定效果

document.onkeydown = function(eve) { var e = eve || window.event; var code = e.keyCode || e.which; var taeget = e.target || e.srcElement; //上下左右控制移动,并设置移动的div的边界; onoff++;//开关 fn(onoff);//下面会用
　　　　　　　　　　　　　　//上下左右的绑定,即边界限定(不允许超过边界) switch (code) { case 37: if (odiv.offsetLeft - 20 <= 0) { odiv.style.left = "0px"; } else { odiv.style.left = odiv.offsetLeft - 20 + "px"; } break; case 38: if (odiv.offsetTop <= 400) { odiv.style.top = "400px"; } else { odiv.style.top = odiv.offsetTop - 20 + "px"; } break; case 39: if (odiv.offsetLeft + 100 >= 1000) { //100是方块的width, odiv.style.left = 1000 - 100 + "px"; } else { odiv.style.left = odiv.offsetLeft + 20 + "px"; //20是元素的高度 } break; case 40: if (odiv.offsetTop + 20 >= 700) { odiv.style.top = 700 - 20 + "px"; } else { odiv.style.top = odiv.offsetTop + 20 + "px"; } break; }

　　　　　(6)

function fn(n) { if (n == 1) {　　　　　　//操作5的按键事件触发 , 但是按键事件只能触发一次,所以需要借助开关计时,onoff == 1 时才可以用 var t; var lSpeed = random(4, 5)*Math.pow(-1,random(1, 2));//设置个水平方向的速度(正负表示向左向右) 随机数 封装在最后 var tSpeed = -random(4, 5); //设置个数值方向的速度(初始速度向上,所以开始时为负值) clearInterval(t); t = setInterval(function() { // 设置小球的边界 // if(op.offsetLeft + lSpeed>=980){ if (op.offsetLeft+lSpeed >= 980) { // op.style.left = 980 + "px"; lSpeed = lSpeed * (-1); //设置小球的速度方向 触碰到边界就反向 } else if (op.offsetLeft+lSpeed <= 0) { lSpeed = lSpeed * (-1); } else { op.style.left = op.offsetLeft + lSpeed + "px"; } if (op.offsetTop+tSpeed <= 0) { tSpeed =tSpeed*(-1); } else { op.style.top = op.offsetTop + tSpeed + "px"; } if((op.offsetTop>=odiv.offsetTop-20)&&(op.offsetTop<=odiv.offsetTop)&& (op.offsetLeft>=odiv.offsetLeft-10)&&(op.offsetLeft<=odiv.offsetLeft+90) //未做精简的部分,比较乱 头脑清晰者课观之,思路奇葩不予讲解 ){ // console.log(1) //bug 开始按上键; tSpeed =tSpeed*(-1); } if(op.offsetTop>=690){ // 判断小球出局,游戏结束,所有数据重置 alert("结束"); clearInterval(t); op.style.left = "490px"; op.style.top = "660px"; odiv.style.top = "680px"; odiv.style.left = "450px"; for(var i=0;i<aspan.length;i++){ //小方块的样式重新显示出来 aspan[i].style.display = "block"; } onoff = 0; // 开关也重开; } var l = aspan.length; for(var i=0;i<aspan.length;i++){ if((op.offsetTop <= aspan[i].offsetTop+20)&&(op.offsetTop >= aspan[i].offsetTop)
　　　　　　　　　　　　　　　　　　　　　　　　　　　　&&(op.offsetLeft-10 >= aspan[i].offsetLeft)&&(op.offsetLeft+10 <= aspan[i].offsetLeft+100) )//未做精简的部分,比较乱 头脑清晰者课观之,思路奇葩不予讲解 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　{ aspan[i].style.display = "none"; //小球和方块相接触 小方块的display:none; l--; console.log(l)　　　　　　　　　　　　　　//测试专用 if(l == 0){ alert("游戏结束")　　　　　　　　　//方块全部消失时,弹出游戏结束; } } } }, 30)
　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　}

　　　　　　　最后差点忘记

function random(m, n) { return Math.round(Math.random() * (m - n) + n) }

　　完整效果图如下:

:

　　　　(7)测试: