js初级小游戏

最新推荐文章于 2024-08-17 23:10:04 发布

飞飞非高跳

最新推荐文章于 2024-08-17 23:10:04 发布

阅读量1k

点赞数 4

本文链接：https://blog.csdn.net/qq_25810751/article/details/82217117

版权

刚刚学完js初级，写了一个简单的小游戏，记录一下自己的成长。

小球吃到礼物会变色。

一下是源码：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style>
#A{
   width: 1200px;
   height: 600px;
   margin-top: 30px;
overflow: hidden;
}
#a{
   width: 30px;
   height: 30px;
   border-radius: 50%;
}
.an{
   display: inline-block;
   margin-top:10px;
   margin-left: 10px;
   width: 100px;
}
#an1{
   margin-top:10px;
   width: 100px;
   margin-left: 125px;
}
.speed{
   width: 100px;
   height: 20px;
   margin-top: 10px;
   margin-left: 10px;
}
   </style>
</head>
<body>

<div id="aaaa">
<button id="an1" οnclick="top2()">上</button><br>
<button class="an" οnclick="left2()">左</button>
<button class="an" οnclick="bottom2()">下</button>
<button class="an" οnclick="right2()">右</button>
<button οnclick="zt()">暂停</button>
<button οnclick="color()">如果看不见球了点击这里</button>
<button οnclick="speed2()" class="speed">速度+</button>
<button οnclick="speed1()" class="speed">速度-</button>

</div>
   <div id="A">
<div id="a">
</div>
   </div>

</body>
<script>
// 球的背景
var x = document.getElementById("a");
x.style.backgroundColor="#f40";
//球的速度
var speed = 25;
function speed1(){
   speed += 5;
}
function speed2(){
   speed -= 2;
   if(speed <= 0){
       speed = 1;
   }

}
//球移动运算
var a1 = 0,a2 = 0,a3 = 0,a4 = 0;
var b1 = 0,b2 = 0,b3 = 0,b4 = 0;
var i1,i2,i3,i4;
var a5;
function top1(){
a1 = a1 - 1;
if(a1 >= 0){
x.style.marginTop = a1 + "px";
}
b1 = 1;
box1();
}

function left1(){
a2 = a2 - 1;
if(a2 >= 0){
    x.style.marginLeft = a2 + "px";
}
b2 = 1;
box1();
}

function bottom1(){
   if(a1 < 0){
       a1 = 0;
   }
   if(a1 >= 0){
       a3 = a1;
   }
a3 += 1;
if(a3 >= 600 - 30){
   clearInterval(i3);
}
if(a3 <= 600 - 30){
   x.style.marginTop = a3 + "px";
}
b3 = 1;
box1();
return a1 = a3;

}

function right1(){
if(a2 < 0){
   a2 = 0;
}
if(a2 >= 0){
   a4 = a2;
}
a4+=1;
if(a4 >= 1200 - 30){
   clearInterval(i4);
}
if(a4 <= 1200 - 30){
   x.style.marginLeft = a4 + "px";
}
b4 = 1;
box1();
return a2 = a4;

}
//球移动绑定按钮
function top2(){
   if(b1 == 1){
clearInterval(i1);
   }
   if(b2 == 1){
clearInterval(i2);
   }
   if(b3 == 1){
clearInterval(i3);
   }
   if(b4 == 1){
clearInterval(i4);
   }
   i1 = setInterval("top1()",speed);
}

function left2(){
    if(b1 == 1){
clearInterval(i1);
   }
   if(b2 == 1){
clearInterval(i2);
   }
   if(b3 == 1){
clearInterval(i3);
   }
   if(b4 == 1){
clearInterval(i4);
   }
   i2 = setInterval("left1()",speed);
}

function bottom2(){
   if(b1 == 1){
clearInterval(i1);
   }
   if(b2 == 1){
clearInterval(i2);
   }
   if(b3 == 1){
clearInterval(i3);
   }
   if(b4 == 1){
clearInterval(i4);
   }
   i3 = setInterval("bottom1()",speed);
}

function right2(){
   if(b1 == 1){
clearInterval(i1);
   }
   if(b2 == 1){
clearInterval(i2);
   }
   if(b3 == 1){
clearInterval(i3);
   }
   if(b4 == 1){
clearInterval(i4);
   }
   i4 = setInterval("right1()",speed);
}
//暂停按钮
function zt(){
   clearInterval(i1);
   clearInterval(i2);
   clearInterval(i3);
   clearInterval(i4);
}

//判断球吃到礼盒
var y = document.getElementById("A");
var n = Math.floor(Math.random() * 1150);
var m = Math.floor(Math.random() * 550);

y = A.style.background =("#ddd url(hy-box.jpg) no-repeat" + " " + n + "px" + " " + m + "px");

function box(){
   n = Math.floor(Math.random() * 1150);
m = Math.floor(Math.random() * 550);
   y = A.style.background =("#ddd url(hy-box.jpg) no-repeat" + " " + n + "px" + " " + m + "px");
}
function box1(){
if(a2 >= n - 15 && a2 <= n + 8 && a1 >= m - 15 && a1 <= m + 8){
   box();
   color();
}else if(a1 >= n && a1 + 30 <= n && a2 + 30 >= m && a2 <= m){
   box();
   color();
}
}
//给小球变色
var arr = [0,1,2,3,4,5,6,7,8,9,"a","b","c","d","e","f"];
var color1;
function color(){
   color1="#";
   for (var j = 0; j < 6; j++) {
var random = Math.floor(Math.random() * 17);
color1 += arr[random];
   }
   x.style.backgroundColor = color1;
}

</script>
</html>