实例介绍
【实例简介】
运用JS基本动画实现打砖块游戏
游戏说明：
鼠标拖动最底部的砖块 接住小球，让小球回弹 以击中上面的砖块
【实例截图】
【核心代码】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box {
width: 500px; height: 350px; border: 1px solid black;
margin: 100px auto;
position: relative;
}
#ball {
width: 20px; height: 20px; border-radius: 50%;
position: absolute;
background-color: red;
}
#rec {
width: 100px; height: 20px; background-color: teal;
position: absolute;
/* top: 480px; */
bottom: 0;
left: 200px;
}
.brick {
width: 98px; height: 20px;
border: 1px solid black;
float: left;
}
</style>
<script>
window.onload = function() {
var box = document.getElementById("box");
var ball = document.getElementById("ball");
var rec = document.getElementById("rec");
for(var i = 0; i < 30; i ) {
var div = document.createElement("div");
div.className = "brick";
box.appendChild(div);
}
var bricks = document.getElementsByClassName("brick");
for(var i = 0; i < bricks.length; i ) {
bricks[i].style.backgroundColor = randomColor();
}
for(var i = 0; i < bricks.length; i ) {
bricks[i].style.left = bricks[i].offsetLeft "px";
bricks[i].style.top = bricks[i].offsetTop "px";
}
for(var i = 0; i < bricks.length; i ) {
bricks[i].style.position = "absolute";
}
var timer = null;
var leftSpeed = parseInt(Math.random() * 4) 5;
var topSpeed = parseInt(Math.random() * 3) 3;
var isYes = true;
ball.style.top = bricks[bricks.length - 1].offsetTop parseInt(getStyle(bricks[bricks.length - 1], "height")) 1 "px";
clearInterval(timer);
timer = setInterval(function() {
if(ball.offsetLeft < 0) {
leftSpeed = Math.abs(leftSpeed);
}
if(ball.offsetTop < 0) {
topSpeed = Math.abs(topSpeed);
}
if(ball.offsetLeft >= parseInt(getStyle(box, "width")) - parseInt(getStyle(ball, "width"))) {
leftSpeed = -Math.abs(leftSpeed);
}
if(ball.offsetTop >= parseInt(getStyle(box, "height")) - parseInt(getStyle(ball, "height"))) {
topSpeed = -Math.abs(topSpeed);
alert("GAME OVER");
clearInterval(timer);
// ball.style.top = bricks[bricks.length - 1].offsetTop parseInt(getStyle(bricks[bricks.length - 1], "height")) 1 "px";
window.location.reload();
}
if((rec.offsetLeft - ball.offsetLeft <= 10 && rec.offsetLeft - ball.offsetLeft >= -90) && (ball.offsetTop >= parseInt(getStyle(box,"height")) - 40)){
topSpeed = -Math.abs(topSpeed);
}
for(let i = 0; i < bricks.length; i ) {
if((bricks[i].offsetLeft - ball.offsetLeft <= 10 && bricks[i].offsetLeft - ball.offsetLeft >= -90) && (ball.offsetTop <= bricks[i].offsetTop parseInt(getStyle(bricks[i], "height")))){
topSpeed = Math.abs(topSpeed);
// bricks[i].style.display = "none";
bricks[i].parentNode.removeChild(bricks[i]);
// alert(i);
// bricks[i].style.backgroundColor = "black";
break;
// if(!isNone(bricks[i])) {
// isYes = false;
// break;
// }
}
}
if(bricks.length == 0) {
alert("恭喜你赢了！");
clearInterval(timer);
window.location.reload();
}
/* for(let i = 0; i < bricks.length; i ) {
if(!isNone(bricks[i])) {
isYes = false;
break;
}
} */
// if(isYes == true) {
// alert("恭喜过关！");
// ball.style.top = bricks[bricks.length - 1].offsetTop parseInt(getStyle(bricks[bricks.length - 1], "height")) 1 "px";
// window.location.reload();
// }
ball.style.left = ball.offsetLeft leftSpeed "px";
ball.style.top = ball.offsetTop topSpeed "px";
}, 30);
rec.onmousedown = function(ev) {
var e = ev || window.event;
var offsetX = e.clientX - rec.offsetLeft;
document.onmousemove = function(ev) {
var e = ev || window.event;
var l = e.clientX - offsetX;
if(l <= 0) {
l = 0;
}
if(l >= parseInt(getStyle(box, "width")) - parseInt(getStyle(rec, "width"))) {
l = parseInt(getStyle(box, "width")) - parseInt(getStyle(rec, "width"));
}
rec.style.left = l "px";
}
document.onmouseup = function() {
document.onmousemove = null;
}
}
}
function getStyle(node, cssStyle){
if(node.currentStyle){
return node.currentStyle[cssStyle];
}else{
return getComputedStyle(node)[cssStyle];
}
}
function randomColor(){
var str = "rgba(" parseInt(Math.random() * 256) "," parseInt(Math.random() * 256) "," parseInt(Math.random() * 256) ",1)";
return str;
}
function isNone(node) {
if(node.style.display == "none") {
return true;
}else {
return false;
}
}
</script>
</head>
<body>
<div id="box">
<div id="ball"></div>
<div id="rec"></div>
</div>
</body>
</html>
标签： Javascript 游戏 运动
好例子网口号：伸出你的我的手 — 分享！
小贴士
感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论