使用html+css+js实现弹球游戏
使用html+css+js实现弹球游戏
效果图：
代码如下，复制即可使用：
<!doctype html>
<head>
<style type="text/css">
.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;
}
</style>
</head>
<body>
<div id="panel" class="panel">
<div class="console">
<div id="start" class="start">开始</div>
<div id="score" class="score">0</div>
<div id="pause" class="pause">暂停</div>
</div>
<div id="message" class="message"></div>
<div id="ball" class="ball"></div>
<div id="plate" class="plate"></div>
</div>
<div class="promte">提示：键盘左右箭头控制滑板</div>
<script type="text/javascript">
(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];
}
</script>
</body>
</html>
如果您有更好的方法或更多的功能，可以和我们大家一起分享哦，如有错误，欢迎联系我改正，非常感谢！！！
使用html+css+js实现弹球游戏的更多相关文章
- html+css+js实现网页拼图游戏
代码地址如下:http://www.demodashi.com/demo/14449.html 项目描述 使用 html+js+css 实现一个网页拼图游戏,可支持简单,中等,困难三种难度. 演示效果 ...
- html+css+js实现狼吃羊小游戏
html+css+js实现狼吃羊小游戏 一.总结 一句话总结:给动的元素下标记,这里表现为将要活动的标签动态增加class,这是一种很好的思想. 1.如何实现棋子走动的时候简单精确定位? 用重构坐标系 ...
- JS写小游戏（一）：游戏框架
前言 前一阵发现一个不错的网站,都是一些用html5+css+js写的小游戏,于是打算学习一番,写下这个系列博客主要是为了加深理解,当然也有一些个人感悟,如果英文好可以直接Click Here. 概述 ...
- JS开发HTML5游戏《神奇的六边形》（一）
近期出现一款魔性的消除类HTML5游戏<神奇的六边形>,今天我们一起来看看如何通过开源免费的青瓷引擎(www.zuoyouxi.com)来实现这款游戏. (点击图片可进入游戏体验) 因内容 ...
- JS开发HTML5游戏《神奇的六边形》（二）
近期出现一款魔性的消除类HTML5游戏<神奇的六边形>,今天我们一起来看看如何通过开源免费的青瓷引擎(www.zuoyouxi.com)来实现这款游戏. (点击图片可进入游戏体验) 因内容 ...
- JS开发HTML5游戏《神奇的六边形》（四）
近期出现一款魔性的消除类HTML5游戏<神奇的六边形>,今天我们一起来看看如何通过开源免费的青瓷引擎(www.zuoyouxi.com)来实现这款游戏. (点击图片可进入游戏体验) 因内容 ...
- Vue.js实现拼图游戏
Vue.js实现拼图游戏 之前写过一篇<基于Vue.js的表格分页组件>的文章,主要介绍了Vue组件的编写方法,有兴趣的可以访问这里进行阅读:http://www.cnblogs.com/ ...
- 使用JS实现俄罗斯方块游戏
简单的JS俄罗斯方块游戏源码 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html> <head> <meta charset=&q ...
- 一款基础模型的JS打飞机游戏特效代码
<!DOCTYPE html> <html lang="en"> <head> <title>一款基础模型的JS打飞机游戏特效代码& ...
随机推荐
- OneZero第二次站立会议（2016.3.22）
会议时间:2016年3月22日 9:33~9:57 会议成员:冉华,张敏,王巍,夏一鸣. 会议目的:汇报前一天工作,全体成员评论并修改. 会议内容:以下为会议插图 1.界面原型方面,小组成员对夏所画的 ...
- Struts2 分割字符串标签s:generator
有些时候会从后台返回一个字符串,可以通过Strut2的标签s:generator进行分割. generator标签,该标签可以将指定字符串按指定分隔符分割成多个字串.生成的多个字串可以用iterato ...
- Could not load file or assembly 'Microsoft.ReportViewer.WebForms, Version=11.0.0.0, Culture=neutral, PublicKeyToken=89845dcd8080cc91' or one of its dependencies
my shurufa huai diao le 1\ first you need install " SQLSysClrTypes_x86.msi " 2\ ...
- Goodbye My Old Days
几天前的CTT的胸牌上印着熟悉的初中学校的名字,回想起自己早已废弃的博客,不禁感慨万分.如你所见,一位名叫supy的菜鸡OIer曾经小心翼翼地写下一篇篇文章来装点这个地方,时间是初二的ZJOID1直到 ...
- 【uoj5】 NOI2014—动物园
http://uoj.ac/problem/5 (题目链接) 题意 求字符串各个前缀的前缀与后缀相同但不重叠的子串的个数+1之积 Solution KMP.第一遍求next和符合条件的可以重叠的子串. ...
- 网络传输---HttpURLConnection
HttpURLConnection是java做网络传输的一种,一般用于做数据的传输如xml数据传输 1.创建及配置: 1.1创建一个url对象,并指定url的地址 URL url = new URL( ...
- 前端学习 -- Css -- 文档流
文档流 文档流处在网页的最底层,它表示的是一个页面中的位置, 我们所创建的元素默认都处在文档流中 元素在文档流中的特点 块元素 块元素在文档流中会独占一行,块元素会自上向下排列. 块元素在文档流中默认 ...
- 【UVA1401】Remember the Word Trie+dp
题目大意:给定一个字符串和一个字符串集合,问从集合中选出若干个串组成给定母串的不同方案数. 题解:有些类似于背包问题.状态很好表示,为:\(dp[i]\) 表示母串前 i 个字符的不同方案数,因此,有 ...
- apigateway-kong(三)Proxy规则
本篇详细记录了Kong的代理功能及其路由功能和内部工作. Kong公开了几个可以通过两个配置属性进行调整的接口:proxy_listen,默认8000,它定义Kong将接受来自客户端的公共流量并将其代 ...
- 假装会python--爬取贴吧正文
贴吧的老历史想存下来,强行python爬取一波 队友太强,躺好别动,偶尔做点副业 假装会python 基本流程: 1.爬取页面,获取页面的html源码 2.分析源码 通过正则表达式 匹配到想要的内容 ...