一、小游戏要求
制作一个桌面小游戏。
要求如下：
1、在浏览器窗口创建一块大小合适的区域，上面显示一个图形，例如一个红色正方形：
•2、在画布上增加按钮，控制当用户按下相应按钮时，驱动该方块在区域内移动。
•3、设置当用户按下上、下、左、右光标键时，该方块也按照指定方向移动。
•4. 在操作移动时，为小方块增加条状障碍物。障碍物不断从右边以一定速率向左移动，高度不等。如果小方块撞击到障碍物，则游戏停止。
•5、以维持的时间长短，为用户每次的游戏计分。游戏中可增加音效。
二、部分设计思路
1. 小方块的移动——按钮控制：
每次按下特定方向的按钮时，小方块向此方向移动一定距离。
以向左为例，给left按钮添加一个click的事件，按下之后，将小方块的right减去20px。注意，移动时需要判断小方块此时会不会越出框外。
left.addEventListener('click', function () {
if (box.offsetLeft >= 20)//如果当前在框内，就向右移动20px
box.style.left = box.offsetLeft - 20 + 'px';
});
up.addEventListener('click', function () {
if (box.offsetTop >= 20)//如果当前在框内，就向上移动20px
box.style.top = box.offsetTop - 20 + 'px';
})
right.addEventListener('click', function () {
if (box.offsetLeft < 760)
box.style.left = box.offsetLeft + 20 + 'px';
})
down.addEventListener('click', function () {
if (box.offsetTop < 300)
box.style.top = box.offsetTop + 20 + 'px';
})2. 障碍物的设计
设计上下高度不等的长方形障碍物6对。设定上下为一对。
对于每一对障碍物，循环让它们向左移动。下面代码的基础上，再加上定时循环函数setInterval（），就可以实现障碍物一直循环移动。
for (var i = 0; i < blockitem2.length; i++) {
if (blockitem2[i].offsetLeft > 12) {
$(blockitem2[i]).animate({ left: '-=20px' });//jquery库的动画效果,向左移动20px
}
else {
blockitem2[i].style.left = 780 + 'px';//到达最左边界就回到最右的边界
}
}3.碰到障碍物，游戏结束
当障碍物的left减去小方块的left小于小方块的宽度，且大于负的障碍物的宽度时（画一下图就能理解了）：
与上方的障碍物比较：小方块的top小于障碍物的高度时，说明小方块与障碍物相撞了。
与下方的障碍物比较：障碍物的top减去小方块的top小于小方块的高度时，说明小方块与障碍物相撞了。
ps: 但是这种方式去判断是否相撞的精确度不够，如果用户在与障碍物即将相撞时迅速移动小方块躲避，虽然看起来没有碰到，但是系统仍会判为碰到了。我也暂时没想出有更好的方法替代。
if (blockitem2[i].offsetLeft - box.offsetLeft < 55 && blockitem2[i].offsetLeft - box.offsetLeft > -20)
{
if (i < 6) {
if (box.offsetTop < blockitem2[i].offsetHeight) {
clearInterval(loop);
}
}
else if (i > 5) {
if (box.offsetTop + 35 > blockitem2[i].offsetTop) {
clearInterval(loop);
}
}
}三、整体流程
按下界面中间“开始游戏”的按钮，按钮隐藏起来，障碍物开始循环移动，并且开始播放音效。
左上角积分随着时间而增加，障碍物每全部移动一次，积分+2。
若玩家碰到了障碍物，此时就有弹窗提示“游戏结束”。
游戏结束后玩家可选择再来一次游戏，此时积分清零。
四、具体代码实现
css,js部分均在html中，需要引入jquery库。
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小游戏</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.container {
position: relative;
left: 20%;
top: 20px;
height: 350px;
width: 800px;
border: 0.8px solid rgb(199, 197, 197);
background-color: rgb(247, 242, 242);
border-radius: 3px;
}
#box {
position: absolute;
height: 35px;
width: 35px;
border-radius: 3px;
background-color: red;
z-index: 100;
left: 0;
top: 143px;
}
.control {
margin-left: 500px;
margin-top: 60px;
}
.btn {
width: 80px;
height: 30px;
color: #6b6666;
position: relative;
}
#left {
top: 45px;
left: 35px;
}
#right {
top: 45px;
right: 35px;
}
#down {
top: 90px;
right: 170px;
}
#block-up>li {
position: absolute;
width: 20px;
background-color: green;
}
#block-down>li {
position: absolute;
width: 20px;
background-color: green;
bottom: 0;
}
#block-up>li:nth-child(1) {
height: 80px;
left: 130px;
}
#block-up>li:nth-child(2) {
height: 170px;
left: 260px;
}
#block-up>li:nth-child(3) {
height: 140px;
left: 390px;
}
#block-up>li:nth-child(4) {
height: 220px;
left: 520px;
}
#block-up>li:nth-child(5) {
height: 120px;
left: 650px;
}
#block-up>li:nth-child(6) {
height: 180px;
left: 780px;
}
#block-down>li:nth-child(1) {
height: 150px;
left: 130px;
}
#block-down>li:nth-child(2) {
height: 80px;
left: 260px;
}
#block-down>li:nth-child(3) {
height: 100px;
left: 390px;
}
#block-down>li:nth-child(4) {
height: 20px;
left: 520px;
}
#block-down>li:nth-child(5) {
height: 80px;
left: 650px;
}
#block-down>li:nth-child(6) {
height: 60px;
left: 780px;
}
#score {
position: absolute;
top: 20px;
left: 80px;
width: 160px;
height: 50px;
border: solid #6b6666;
border-radius: 5px;
color: #6b6666;
font-size: 25px;
line-height: 50px;
}
#score>p:nth-child(1) {
position: absolute;
left: 10px;
float: left;
}
#score>p:nth-child(2) {
position: absolute;
float: right;
right: 10px;
}
#start {
position: absolute;
display: block;
z-index: 999;
top: 280px;
left: 545px;
width: 160px;
height: 50px;
transition: all 0.5s;
font: bold;
border: solid #6b6666;
border-radius: 5px;
color: #6b6666;
font-size: 25px;
line-height: 50px;
}
#video1 {
display: none;
}
</style>
<script src="./jquery.js"></script>
</head>
<body>
<div id="score">
<p>Score:</p>
<p id="scorenum">0</p>
</div>
<button id="start">开始游戏</button>
<video src="./C7359E51EA8E.mp3" id="video1"></video>
<div class="container">
<div id="box"></div>
<div class="block">
<ul id="block-up">
<li id="item" class="item"></li>
<li id="item" class="item"></li>
<li id="item" class="item"></li>
<li id="item" class="item"></li>
<li id="item" class="item"></li>
<li id="item" class="item"></li>
</ul>
<ul id="block-down">
<li id="item" class="item"></li>
<li id="item" class="item"></li>
<li id="item" class="item"></li>
<li id="item" class="item"></li>
<li id="item" class="item"></li>
<li id="item" class="item"></li>
</ul>
</div>
</div>
<div class="control">
<button class="btn" id="left">LEFT</button>
<button class="btn" id="up">UP</button>
<button class="btn" id="right">RIGHT</button>
<button class="btn" id="down">DOWN</button>
</div>
<script>
var box = document.getElementById('box');
var left = document.getElementById('left');
var up = document.getElementById('up');
var right = document.getElementById('right');
var down = document.getElementById('down');
var blockitem2 = document.getElementsByClassName('item');
var start = document.getElementById('start');
//通过键盘和鼠标移动方块
document.addEventListener('keydown', function (e) {
if (e.keyCode === 37)//左
{
if (box.offsetLeft >= 13)
box.style.left = box.offsetLeft - 17 + 'px';
}
if (e.keyCode === 38)//上
{
if (box.offsetTop > 0)
box.style.top = box.offsetTop - 17 + 'px';
}
if (e.keyCode === 39)//right
{
if (box.offsetLeft < 760)
box.style.left = box.offsetLeft + 17 + 'px';
}
if (e.keyCode === 40)//bottom
{
if (box.offsetTop < 312)
box.style.top = box.offsetTop + 17 + 'px';
}
});
left.addEventListener('click', function () {
if (box.offsetLeft >= 20)//如果当前在框内，就向右移动20px
box.style.left = box.offsetLeft - 20 + 'px';
});
up.addEventListener('click', function () {
if (box.offsetTop >= 20)//如果当前在框内，就向上移动20px
box.style.top = box.offsetTop - 20 + 'px';
})
right.addEventListener('click', function () {
if (box.offsetLeft < 760)
box.style.left = box.offsetLeft + 20 + 'px';
})
down.addEventListener('click', function () {
if (box.offsetTop < 300)
box.style.top = box.offsetTop + 20 + 'px';
})
//障碍物循环移动
//开始游戏
var score = document.getElementById('scorenum');
var num = 0;
var video = document.getElementById('video1');
start.addEventListener('click', function () {
start.style.display = 'none';
video.play();
var loop = setInterval(function () {
//var i = 6;
for (var i = 0; i < blockitem2.length; i++) {
if (blockitem2[i].offsetLeft > 12) {
$(blockitem2[i]).animate({ left: '-=20px' });
}
else {
blockitem2[i].style.left = 780 + 'px';
}
console.log('offsetLeft:', blockitem2[i].offsetLeft, box.offsetLeft);
console.log('offsetLeft:', blockitem2[i].offsetLeft - box.offsetLeft);
if (blockitem2[i].offsetLeft - box.offsetLeft < 55 && blockitem2[i].offsetLeft - box.offsetLeft > -20) {
if (i < 6) {
console.log('上面top:', i, box.offsetTop, blockitem2[i].offsetHeight);
if (box.offsetTop < blockitem2[i].offsetHeight) {
clearInterval(loop);
video.pause();
setTimeout(function () {
alert('游戏结束！');
num = 0;
start.style.display = 'block';
start.innerHTML = '再来一次!';
box.style.left = 0 + 'px';
box.style.top = 143 + 'px';
}, 1000);
}
}
else if (i > 5) {
console.log('下面:', i, box.offsetTop, blockitem2[i].offsetTop);
if (box.offsetTop + 35 > blockitem2[i].offsetTop) {
clearInterval(loop);
video.pause();
setTimeout(function () {
alert('游戏结束！');
num = 0;
start.style.display = 'block';
start.innerHTML = '再来一次!';
box.style.left = 0 + 'px';
box.style.top = 143 + 'px';
}, 1000);
}
}
}
}
num += 2;
score.innerHTML = num;
}, 500)
})
</script>
</body>
</html>
扫一扫
146
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
