html+css+js实现弹球游戏

使用html+css+js实现弹球游戏

 代码如下,复制即可使用:

.panel{

position: relative;

z-index: 0;

top:0px;

left: 400px;

width: 300px;

height: 500px;

}

.console{

position: absolute;

z-index: 1;

top:0;

left:0;

width:100%;

height: 40px;

background-color: #bbb;

}

.message{

position: absolute;

z-index: 1;

top:40px;

left:0;

width:100%;

height: 460px;

color: white;

font-size: 50px;

text-align: center;

line-height: 460px;

background-color: #999;

}

.start,.score,.pause{

position: absolute;

z-index: 2;

top: 0;

width: 100px;

height: 100%;

font-size: large;

color: white;

text-align: center;

line-height: 40px;

background: -webkit-linear-gradient(top,#4ca8ff,yellow);

}

.start{

left: 0px;

}

.score{

left:100px;

background-color: red;

}

.pause{

left:200px;

}

.start:after,.pause:before{

content: "";

position: absolute;

z-index: 2;

top: 0;

width: 3px;

height: 100%;

background: -webkit-linear-gradient(top,#666,#999);

}

.start:after{

left: 97px;

}

.pause:before{

left: 0px;

}

.start:hover,.pause:hover{

cursor: pointer;

background: -webkit-linear-gradient(top,#4ca8ff,red);

}

.panel span{

position: absolute;

z-index: 0;

top:50%;

left: 50%;

font-size: 50px;

color: blue;

}

.ball,.secondBall{

position:absolute;

z-index: 2;

border-radius:50%;

width: 20px;

height: 20px;

}

.ball{

top: 460px;

left:140px;

background-color: red;

}

.secondBall{

top: 40px;

left:140px;

background-color: red;

}

.plate{

position: absolute;

top:480px;

left: 100px;

z-index: 2;

width: 100px;

height: 20px;

background-color: #e5e5e5;

}

.promte{

margin-top: 20px;

text-align: center;

}

开始

0

暂停

提示:键盘左右箭头控制滑板

(function(){

document.onkeydown = function(e){

var e = e || window.event;

if(e.keyCode == 37){

//键盘向左键

plateMove("left");

}else if(e.keyCode == 39){

//键盘向右键

plateMove("right");

}

}

})();

var panel = document.getElementById("panel"),

message = document.getElementById("message"),

plate = document.getElementById("plate"),

ball = document.getElementById("ball"),

start = document.getElementById("start"),

score = document.getElementById("score"),

pause = document.getElementById("pause"),

secondBall;

var startGame, x = x2 = -1, y = y2 = -1, speed = 1, positionArr = [], pauseActive = false,

//一个标志:表示难度是否还能增加

flag = true,

//球的起始位置

ballX, ballY, secondBallX, secondBallY,

//边界

minX = 0,

maxX = panel.offsetWidth - ball.offsetWidth,

minY = 40;

maxY = panel.offsetHeight - ball.offsetHeight - plate.offsetHeight;

window.onload = function(){

if(window.addEventListener){

start.addEventListener("click",startClick,false);

pause.addEventListener("click",pauseClick,false);

}else if(window.attachEvent){

start.attachEvent("onclik",startClick);

pause.attachEvent("onclik",pauseClick);

}else{

start.onclik = startClick;

pause.onclik = pauseClick;

}

}

function plateMove(direction){

if(direction == "left"){

if(plate.offsetLeft > 0){

plate.style.left = (plate.offsetLeft-30 < 0? 0 : plate.offsetLeft-30)+"px";

}

}

if(direction == "right"){

if(plate.offsetLeft < 200){

plate.style.left = (plate.offsetLeft+30 > 200? 200 : plate.offsetLeft+30)+"px";

}

}

}

function startClick(){

if(!pauseActive){

resetGame();

}else{

pauseActive = !pauseActive;

}

startGame = setInterval(function(){

//console.log(ballX+"======"+ballY);

positionArr = setPosition(ballX,ballY,true);

if(positionArr == "GAMEOVER"){

return;

}

ballX = positionArr[0];

ballY = positionArr[1];

//设置球的位置

ball.style.left = ballX+"px";

ball.style.top = ballY+"px";

if(!flag){

positionArr = setPosition(secondBallX,secondBallY,false);

secondBallX = positionArr[0];

secondBallY = positionArr[1];

secondBall.style.left = secondBallX+"px";

secondBall.style.top = secondBallY+"px";

}else{

addDifficulty();

}

},30);

}

function pauseClick(){

pauseActive = true;

clearInterval(startGame);

}

function resetGame(){

clearInterval(startGame);

message.innerHTML="";

score.innerHTML="0";

ball.style.left = "140px";

ball.style.top = "460px";

plate.style.left = "100px";

plate.style.top = "480px";

ballX = ball.offsetLeft;

ballY = ball.offsetTop;

speed = 1;

flag = true;

//第二个球设置隐藏

if(secondBall){

secondBall.style.display="none";

secondBall.style.left = "140px";

secondBall.style.top = "40px";

}

}

function addDifficulty(){

if(parseInt(score.innerHTML) > 500 && parseInt(score.innerHTML) < 2000){

speed = 1.2;

}else if(parseInt(score.innerHTML) > 2000 && parseInt(score.innerHTML) < 5000){

speed = 1.5;

}else if(parseInt(score.innerHTML) > 5000){

if(typeof secondBall != "undefined"){

secondBall.style.display="";

}else{

secondBall = document.createElement('div');

}

secondBall.className = 'secondBall';

panel.appendChild(secondBall);

secondBallX = secondBall.offsetLeft;

secondBallY = secondBall.offsetTop;

flag = false;

}

}

function setPosition(_x,_y,firstball){

if(_x == minX || _x == maxX){

//x*=-1;

firstball? x*=-1 : x2*=-1;

}

if(_y == minY || _y == maxY){

//y*=-1;

firstball? y*=-1 : y2*=-1;

}

if(_y == maxY){

//判断挡板的位置是不是在球的范围内

if(plate.offsetLeft > _x || (plate.offsetLeft + plate.offsetWidth) < _x){

clearInterval(startGame);

message.innerHTML="GAMEOVER";

return "GAMEOVER";

}

}

if(firstball){

_x+=4*x*speed;

_y+=5*y*speed;

}else{

_x+=4*x2*speed;

_y+=5*y2*speed;

}

//边界处理

_x = _x < minX? minX : _x;

_x = _x > maxX? maxX : _x;

_y = _y < minY? minY : _y;

_y = _y > maxY? maxY : _y;

//设置分数

score.innerHTML=parseInt(score.innerHTML)+10*speed;

return [_x,_y];

}

如果您有更好的方法或更多的功能,可以和我们大家一起分享哦,如有错误,欢迎联系我改正,非常感谢!!!

本文来自PHP中文网,原文地址:https://www.php.cn/div-tutorial-443290.html 推荐视频教程:《js基础教程

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,271评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,275评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,151评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,550评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,553评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,559评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,924评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,580评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,826评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,363评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,940评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2 342

推荐阅读更多精彩内容